feat(launch): replace option logoSrc, logoAlt with logoSmall TemplateResult

daKmoR · daKmoR · commit d7e461ca31a6 · 2022-08-22T00:14:22.000+02:00
diff --git a/.changeset/silent-seals-begin.md b/.changeset/silent-seals-begin.md
@@ -0,0 +1,13 @@
+---
+'@rocket/launch': patch
+---
+
+Replace Layout Options `logoSrc` and `logoAlt` strings with a `logoSmall` TemplateResult
+
+```diff
+-  logoSrc: '/icon.svg',
+-  logoAlt: 'Rocket Logo',
++  logoSmall: html`
++    <img src="resolve:@rocket/launch/assets/rocket-logo-light.svg" alt="Rocket" width="250" height="67.87" />
++  `,
+```
diff --git a/packages/launch/assets/rocket-logo-light.svg b/packages/launch/assets/rocket-logo-light.svg
@@ -0,0 +1,12 @@
+<svg width="105" height="101" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m19.91 91.438 12.445-4.705-8.09-7.465-4.355 12.17Z" fill="#FCB736"/>
+  <path d="M53.778 41.196c-1.6-5.176 1.444-10.652 6.844-12.192 5.378-1.54 11.067 1.39 12.667 6.588a9.426 9.426 0 0 1 .277 4.512 9.595 9.595 0 0 1-1.86 4.151 10.076 10.076 0 0 1-3.6 2.902 10.485 10.485 0 0 1-4.573 1.033c-4.4 0-8.444-2.738-9.755-6.994ZM68.666 16.62c-9.066 2.952-19.088 8.085-27.022 16.042-6.4 6.416-11.311 12.47-15 17.71a28.068 28.068 0 0 0-3.889.32A23.592 23.592 0 0 0 18.6 51.72C9.533 54.928-.49 63.42.133 65.11c.6 1.69 6.467-1.433 11.467-1.818 2.91-.236 5.178.042 6.91.492-.577 1.154-1.066 2.138-1.421 2.93-.378.791-.645 1.369-.823 1.732l18.09 16.705c.733-.385 2.377-1.112 4.733-2.353.266.813.51 1.776.644 2.866.156 1.091.222 2.332.156 3.743-.2 4.813-3.2 10.588-1.423 11.101 1.778.514 10.178-9.475 13.134-18.33.91-2.695 1.133-5.433 1.066-7.786 5.29-3.785 11.356-8.726 17.756-15.164 7.933-7.957 12.844-17.796 15.533-26.65 2.356-7.765 2.978-14.738 2.4-19.037a22.605 22.605 0 0 0-2.155-.085c-4.511-.022-10.756.962-17.534 3.165Z" fill="url(#a)"/>
+  <path d="m12.4 89.535 15.911-6.545-9.777-9.026-6.134 15.57Z" fill="#D08A06"/>
+  <path d="m10.488 82.733 12.467-4.684-8.089-7.465-4.378 12.149ZM90.644 16.406c.044 2.823-.267 6.096-.912 9.54 7.712 10.544 10.889 24.083 7.578 37.623-5.778 23.591-29.178 38.756-53.622 35.612-.133.15-.267.278-.4.428 27.045 4.834 53.556-11.614 59.911-37.666 4.111-16.897-1.155-33.752-12.555-45.537ZM2.82 42.158C8.955 17.048 35.088 1.477 61.177 7.401c5 1.134 9.644 2.973 13.822 5.39 3.6-.791 7.067-1.262 10.067-1.347-5.822-4.492-12.756-7.828-20.511-9.582C36.665-4.47 8.733 12.172 2.177 39.014a47.973 47.973 0 0 0-.511 20.619c.111-.107.222-.193.333-.3-.8-5.56-.6-11.378.822-17.175Z" fill="#FCB736"/>
+  <defs>
+    <linearGradient id="a" x1="26.5" y1="57" x2="89" y2="13" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D21B1D"/>
+      <stop offset="1" stop-color="#C9181A"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/packages/launch/src/LayoutMain.js b/packages/launch/src/LayoutMain.js
@@ -45,8 +45,17 @@ export class LayoutMain extends Layout {
     headerDarkBackground: false,
     dsdPending: true,
     siteName: 'Rocket',
-    logoSrc: '/icon.svg',
-    logoAlt: 'Rocket Logo',
+    logoSmall: html`
+      <picture>
+        <!-- <source srcset="resolve:@rocket/launch/assets/rocket-logo-dark.svg" media="(prefers-color-scheme: dark)"> -->
+        <img
+          src="resolve:@rocket/launch/assets/rocket-logo-light.svg"
+          alt="Rocket Logo"
+          width="250"
+          height="67.87"
+        />
+      </picture>
+    `,
     gitSiteUrl: 'https://github.com/modernweb-dev/rocket',
     gitBranch: 'next',
     description: 'A static site generator for modern web development',
@@ -147,7 +156,7 @@ export class LayoutMain extends Layout {
 
       header__10: html`
         <a class="logo-link" href="/" slot="logo">
-          <img src="/icon.svg" alt="${this.options.logoAlt}" />
+          ${this.options.logoSmall}
           <span>${this.options.siteName}</span>
         </a>
       `,
@@ -171,7 +180,7 @@ export class LayoutMain extends Layout {
 
       drawer__10: html`
         <a class="logo-link" href="/">
-          <img src="${this.options.logoSrc}" alt="${this.options.logoAlt}" />
+          ${this.options.logoSmall}
           <span>${this.options.siteName}</span>
         </a>
       `,
diff --git a/packages/launch/types/layout.d.ts b/packages/launch/types/layout.d.ts
@@ -7,8 +7,7 @@ export interface LayoutSidebarOptions extends LayoutOptions {
   [key: TemplateValueKey<'drawer'>]: TemplateValue;
 
   siteName: string;
-  logoSrc: string;
-  logoAlt: string;
+  logoSmall: TemplateValue;
   gitSiteUrl: string;
   gitBranch: string;
   description: string;
diff --git a/site/src/layouts/layoutData.js b/site/src/layouts/layoutData.js
@@ -19,6 +19,17 @@ export const layoutData = {
   // head__42: html` <link rel="stylesheet" href="resolve:root/src/assets/styles.css" /> `,
   header__40: search,
   drawer__30: search,
+  logoSmall: html`
+    <picture>
+      <!-- <source srcset="resolve:#src/assets/rocket-logo-dark.svg" media="(prefers-color-scheme: dark)"> -->
+      <img
+        src="resolve:#src/assets/rocket-logo-light.svg"
+        alt="Rocket Logo"
+        width="250"
+        height="67.87"
+      />
+    </picture>
+  `,
   footerMenu: [
     {
       name: 'Discover',
