Merge branch 'main' into storybook

README.md

@@ -220,8 +220,8 @@ Note that there are 2 branches for Isolated component development - Histoire and
 | [ui-shoelace](../../tree/ui-shoelace)     | [Shoelace](https://shoelace.style/) | ⬤ | ⬤ | |
 | [ui-svelteui](../../tree/ui-svelteui)     | [SvelteUI](https://www.svelteui.org) | ⬤ | ⭘ | ⭘ [[svelteuidev#491]](https://github.com/svelteuidev/svelteui/issues/491) |
 | [ui-tailwindcss](../../tree/ui-tailwindcss) | [TailwindCSS](https://tailwindcss.com)  | ⬤ | ⬤ | May use components, e.g. [Flowbite](https://flowbite.com/docs/getting-started/introduction/) |
-| [ui-konsta](../../tree/ui-konsta)     | [Konsta](https://konstaui.com/svelte) | ⬤ | ⬤\|⭘ | (Requires TailwindCSS)<br>⬤ `pnpm build/dev` \| ⭘ `pnpm check` |
-| | [svelte-ux](https://svelte-ux.techniq.dev) | | ⬤ | (Requires TailwindCSS) |
+| [ui-konsta](../../tree/ui-konsta)         | [Konsta](https://konstaui.com/svelte) | ⬤ | ⬤\|⭘ | (Requires TailwindCSS)<br>⬤ `pnpm build/dev` \| ⭘ `pnpm check` |
+| [ui-svelteux](../../tree/ui-svelteux)     | [svelte-ux](https://svelte-ux.techniq.dev) | ⬤ | ⬤ | (Requires TailwindCSS) |
 | | [Skeleton](https://github.com/skeletonlabs/skeleton) | | ⬤ | (Requires TailwindCSS)<br>⬤ Note [[skeleton#2640]](https://github.com/skeletonlabs/skeleton/discussions/2640) |
 | | [Flowbite-Svelte](https://flowbite-svelte.com) |  | ⬤ | (Requires TailwindCSS) |
 |                                           | [Smelte](https://smeltejs.com/) |  | ⭘ | (Requires TailwindCSS) Material + TailwindCSS |

src/lib/components/header/PureHeader.svelte

@@ -6,7 +6,8 @@
   export let pathname = '/';
   $: path1st = '/' + (pathname ?? '').split('/')[1];
   const pages = [
-    { path: '/', title: 'Home' },
+    // { path: '/', title: 'Home' }, // '/' redirects to '/home'
+    { path: '/home', title: 'Home' },
     { path: '/about', title: 'About' },
     { path: '/sverdle', title: 'Sverdle' },
     { path: '/geolocation', title: 'Geolocation' },

src/routes/(demo)/+layout.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  // import { onMount, setContext, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
+
+  // import Favicon from '$lib/components/favicon/Favicon.svelte';
+  // import Offline from '$lib/components/offline/Offline.svelte';
+  import DarkMode from '$lib/components/darkmode/DarkMode.svelte';
+  import Header from '$lib/components/header/Header.svelte';
+  import './styles.css';
+  // import { loadIonicPWAElements } from '$lib/utils/ionicUtils.cjs';
+  import { BRIGHT_ENTITY, CRESCENT_MOON_ENTITY } from '$lib/constants/entities';
+
+  import website from '$lib/config/website';
+  const { githubRepo } = website;
+  import GithubLogo from '$lib/images/github.svelte';
+  import svelte_logo from '$lib/images/svelte-logo.svg';
+
+  // import type { LayoutData } from './$types';
+  // import type { LayoutContext } from '$lib/types';
+
+  // let { data, children } = $props<{ data: LayoutData; children: Snippet }>();
+  let { children } = $props<{ children: Snippet }>();
+
+  /* DISABLED (see root +layout.svelte)
+  onMount(async () => {
+    await loadIonicPWAElements(window);
+  });
+  */
+
+  /* DISABLED (see root +layout.svelte)
+  let ssrPathname = $state<string>(data?.ssrPathname ?? '');
+
+  // Use context to make ssrPathname available to child components
+  setContext<LayoutContext>('layout', {
+    get: () => {
+      console.log(`getContext(layout) ssrPathname=${ssrPathname}`);
+      return { ssrPathname };
+    }
+  });
+  */
+
+  /* DISABLED (see root +layout.svelte)
+  // Favicon params:
+  const pngFavicons = [
+    { sizes: '32x32', href: '/favicon-32x32.png', imgSize: 32 },
+    { sizes: '16x16', href: '/favicon-16x16.png', imgSize: 16 },
+    { sizes: '48x48', href: '/favicon-48x48.png', imgSize: 48 },
+    { sizes: '192x192', href: '/icon-192x192.png', imgSize: 192 } // For Android Devices
+  ];
+  const svgFavicon = undefined; // TODO: '/favicon.svg';
+  const icoFavicon = undefined; // TODO: '/favicon.ico';
+
+  const touchFavicons = [
+    { sizes: '167x167', href: '/apple-icon-167x167.png', imgSize: 167 }, // For iPad
+    { sizes: '180x180', href: '/apple-icon-180x180.png', imgSize: 180 } // For iPhone
+  ];
+  */
+</script>
+
+<div class="app">
+  <!-- DISABLED (see root +layout.svelte)
+  <Favicon {pngFavicons} {svgFavicon} {icoFavicon} {touchFavicons} />
+  -->
+
+  <Header --corner-right-width="8em">
+    {#snippet content()}
+      <DarkMode htmlDarkClass="dark">
+        {#snippet content(data)}
+          <label>
+            <input
+              id="cb1"
+              type="checkbox"
+              checked={data.isDarkMode}
+              onchange={(e) => {
+                data.onChange(e, !(data.isDarkMode ?? false));
+                return;
+              }}
+              aria-label="Dark mode {data.isDarkMode ? 'on' : 'off'}"
+            />
+            {data.isDarkMode ? CRESCENT_MOON_ENTITY : BRIGHT_ENTITY}
+          </label>
+        {/snippet}
+      </DarkMode>
+    {/snippet}
+  </Header>
+
+  <main>
+    {@render children()}
+  </main>
+
+  <!-- DISABLED (see root +layout.svelte)
+  <Offline />
+  -->
+
+  <footer>
+    <p>
+      visit
+      <a href={githubRepo}>
+        <GithubLogo />
+        <span>App GitHub Repo</span>
+      </a>
+      for details | visit
+      <a href="https://kit.svelte.dev">
+        <img src={svelte_logo} alt="SvelteKit" aria-hidden="true" role="presentation" />
+        <span>kit.svelte.dev</span>
+      </a>
+      to learn SvelteKit
+    </p>
+  </footer>
+</div>
+
+<style lang="scss">
+  .app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    width: 100%;
+    max-width: 64rem;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+  }
+
+  footer a {
+    display: inline-block; /* Place link and image inline */
+    text-decoration: none; /* Remove default underline for links */
+    font-weight: bold;
+  }
+  footer a span {
+    margin-top: 10px; /* Adjust the margin as needed */
+  }
+
+  footer a :global(img),
+  footer a :global(svg) {
+    vertical-align: middle; /* Aligns image vertically with the text */
+    width: 2em;
+    height: 3em;
+    --fill_color: var(--color-text);
+  }
+
+  @media (min-width: 480px) {
+    footer {
+      padding: 12px 0;
+    }
+  }
+</style>

src/routes/(demo)/styles.css

@@ -0,0 +1,127 @@
+@import '@fontsource/fira-mono';
+
+:root {
+  --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: 'Fira Mono', monospace;
+  --color-bg-0: #cad8e4; /* rgb(202, 216, 228); */
+  --color-bg-1: #cedce8; /* hsl(209, 36%, 86%); */
+  --color-bg-2: #edf0f8; /* hsl(224, 44%, 95%); */
+  --color-theme-1: #ff3e00;
+  --color-theme-2: #40b3ff;
+  --color-text: rgba(0, 0, 0, 0.7);
+  --column-width: 42rem;
+  --column-margin-top: 4rem;
+  font-family: var(--font-body);
+  color: var(--color-text);
+}
+
+:root[color-scheme='dark'] {
+  /* Dark Theme */
+  --color-bg-0: #15202b;
+  --color-bg-1: #192734;
+  --color-bg-2: #22303c;
+  --color-theme-1: #ff3e00;
+  --color-theme-2: #40b3ff;
+  --color-text: rgba(255, 255, 255, 0.7);
+  --color-text-2: #8899a6;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background-attachment: fixed;
+  background-color: var(--color-bg-1);
+  background-size: 100vw 100vh;
+  background-image: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(255, 255, 255, 0.75) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
+}
+
+:root[color-scheme='dark'] body {
+  background-image: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(0, 0, 0, 0.75) 0%,
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
+}
+
+h1,
+h2,
+p {
+  font-weight: 400;
+}
+
+p {
+  line-height: 1.5;
+}
+
+a {
+  color: var(--color-theme-1);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+h1 {
+  font-size: 2rem;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1rem;
+}
+
+pre {
+  font-size: 16px;
+  font-family: var(--font-mono);
+  background-color: rgba(255, 255, 255, 0.45);
+  border-radius: 3px;
+  box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+  padding: 0.5em;
+  overflow-x: auto;
+  color: var(--color-text);
+}
+
+.text-column {
+  display: flex;
+  max-width: 48rem;
+  flex: 0.6;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+input,
+button {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (min-width: 720px) {
+  h1 {
+    font-size: 2.4rem;
+  }
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}