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

…Result
modernweb-dev · Aug 21, 2022 · d7e461c · d7e461c
1 parent a12adf2
commit d7e461c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 6 deletions.
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
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',