Merge branch 'main' into storybook

iva2k · Jul 29, 2024 · 066ad9a · 066ad9a
2 parents dfc3263 + 3a02044
commit 066ad9a
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 9 deletions.
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -6,9 +6,10 @@
 2. Auth?
 3. Backend Server (non-SvelteKit)?
 4. Push Notifications?
-5. Explore turborepo <https://www.npmjs.com/package/turbo>
-6. Explore Histoire <https://histoire.dev/guide/svelte3/getting-started.html> instead of Storybook
-7. SVG icons, see src/lib/components/image/\* and <https://www.npmjs.com/package/@poppanator/sveltekit-svg>, <https://joshuatz.com/posts/2021/using-svg-files-in-svelte/>
+5. Explore turborepo <https://www.npmjs.com/package/turbo> and `concurrently` for faster builds
+6. Github actions for CI/CD
+7. Explore Histoire <https://histoire.dev/guide/svelte3/getting-started.html> instead of Storybook
+8. SVG icons, see src/lib/components/image/\* and <https://www.npmjs.com/package/@poppanator/sveltekit-svg>, <https://joshuatz.com/posts/2021/using-svg-files-in-svelte/>
 
 ## Package Updates
 

diff --git a/src/lib/components/header/PureHeader.svelte b/src/lib/components/header/PureHeader.svelte
@@ -9,12 +9,24 @@
   export let pathname = '/';
   $: path1st = '/' + (pathname ?? '').split('/')[1];
 
+  let brandLink: SiteLink;
   let headerLinks: SiteLink[] = [];
   onMount(async () => {
     /* DISABLED (see root +layout.svelte)
     await loadIonicPWAElements(window);
     */
     const mypath = import.meta.url;
+    brandLink = (
+      await prepSiteLinks(
+        siteLinks,
+        mypath,
+        'brand',
+        1,
+        /* nodeFilter */ true,
+        /* flatten */ true,
+        /* prune */ false // Allow brand without a link
+      )
+    )?.[0];
     headerLinks = await prepSiteLinks(
       siteLinks,
       mypath,
@@ -30,9 +42,28 @@
 
 <header>
   <div class="corner corner-left">
-    <a href={websiteUrlBase}>
-      <img src={logo} alt="Total App" />
-    </a>
+    {#if brandLink}
+      <!-- {brandLink.prefix ?? ''} -->
+      <a href={brandLink.href} target={brandLink.target ?? '_self'}>
+        {#if brandLink.img_component}
+          <svelte:component this={brandLink.img_component} />
+        {:else if brandLink.img_html}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html brandLink.img_html}
+        {:else if brandLink.img_src}
+          <img
+            src={brandLink.img_src}
+            alt={brandLink.img_alt ?? ''}
+            aria-hidden="true"
+            role="presentation"
+          />
+        {/if}
+        <!-- {#if brandLink.title}
+          <span>{brandLink.title}</span>
+        {/if} -->
+      </a>
+      <!-- {brandLink.suffix ?? ''} -->
+    {/if}
   </div>
 
   <nav>
@@ -42,7 +73,7 @@
     <ul>
       {#each headerLinks.filter((l) => l?.href) as link}
         <li aria-current={path1st === link.href ? 'page' : undefined}>
-          <a href={link.href}>{link.title}</a>
+          <a href={link.href} target={brandLink.target ?? '_self'}>{link.title}</a>
         </li>
       {/each}
     </ul>

diff --git a/src/lib/config/configUtils.ts b/src/lib/config/configUtils.ts
@@ -244,6 +244,7 @@ export function getSiteLinksFiltered(
   flatten: boolean = false
 ): SiteLinkAny[] {
   const filterField = {
+    brand: 'displayInBrand',
     header: 'displayInHeader',
     footer: 'displayInFooter',
     actions: 'displayInActions',

diff --git a/src/lib/config/websiteFnc.js b/src/lib/config/websiteFnc.js
@@ -48,6 +48,13 @@ const websiteFnc = (
   /** @typedef {import('../types').SiteLinkFlatGroup} SiteLinkFlatGroup */ // Use for 1-level-nested hierarchical
   /** @type SiteLinkFlatGroup[] */
   const siteLinks = [
+    {
+      // Brand / Site icon and URL
+      href: '/home',
+      title: siteShortTitle,
+      img_import: '../images/logo.svg',
+      displayInBrand: true
+    },
     {
       // href: '/',
       // prefix: 'visit',
@@ -58,6 +65,7 @@ const websiteFnc = (
       // prettier-ignore
       items: [
         // { href: '/', title: 'Home' }, // '/' redirects to '/home'
+        // See "Brand" item above for another `/home` route:
         { href: '/home'          , title: 'Home'            , displayInHeader: true, displayInSidebar: true },
         { href: '/about'         , title: 'About'           , displayInHeader: true, displayInSidebar: true },
         { href: '/sverdle'       , title: 'Sverdle'         , displayInHeader: true, displayInSidebar: true },
@@ -68,6 +76,7 @@ const websiteFnc = (
     },
     {
       href: discord,
+      target: '_blank',
       prefix: 'visit',
       title: 'Discord',
       suffix: 'for support',
@@ -80,6 +89,7 @@ const websiteFnc = (
     },
     {
       href: githubRepo,
+      target: '_blank',
       prefix: 'visit',
       title: 'App GitHub Repo',
       suffix: 'for details',
@@ -92,6 +102,7 @@ const websiteFnc = (
     },
     {
       href: 'https://kit.svelte.dev',
+      target: '_blank',
       prefix: 'visit',
       title: 'kit.svelte.dev',
       suffix: 'to learn SvelteKit',

diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
@@ -24,23 +24,27 @@ export interface _SiteLinkBase {
   img_component?: Component;
   img_html?: string;
 
+  displayInBrand?: boolean;
   displayInHeader?: boolean;
   displayInFooter?: boolean;
   displayInActions?: boolean;
   displayInSidebar?: boolean;
 }
 
-export type SiteLinkFilter = 'header' | 'footer' | 'actions' | 'sidebar';
+export type SiteLinkFilter = 'brand' | 'header' | 'footer' | 'actions' | 'sidebar';
 
 export interface _SiteLink extends _SiteLinkBase {
   href: string;
+  target?: '_blank' | '_parent' | '_self' | '_top';
 }
 export interface _SiteLinkFlatGroup extends _SiteLinkBase {
   href?: string;
+  target?: '_blank' | '_parent' | '_self' | '_top';
   items?: SiteLink[];
 }
 export interface _SiteLinkGroup extends _SiteLinkBase {
   href?: string;
+  target?: '_blank' | '_parent' | '_self' | '_top';
   items?: (SiteLink | SiteLinkGroup)[];
 }
 

diff --git a/src/routes/(demo)/+layout.svelte b/src/routes/(demo)/+layout.svelte
@@ -112,7 +112,7 @@
         {/if}
         <span>
           {link?.prefix ?? ''}
-          <a href={link.href}>
+          <a href={link.href} target={link.target ?? '_self'}>
             {#if link?.img_component}
               <svelte:component this={link?.img_component} />
             {:else if link?.img_html}