docs: favicon + title

package.json

@@ -50,6 +50,7 @@
     "@testing-library/svelte": "^3.2.2",
     "@ubermanu/prettier-config": "^1.7.1",
     "autoprefixer": "^10.4.14",
+    "case": "^1.6.3",
     "highlight.js": "^11.8.0",
     "jest-mock": "^29.5.0",
     "jsdom": "^21.1.1",

src/routes/(docs)/+layout.server.ts

@@ -0,0 +1,24 @@
+import { base } from '$app/paths'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import type { LayoutServerLoad } from './$types.js'
+
+export const load: LayoutServerLoad = async () => {
+  const __dirname = path.dirname(import.meta.url.replace('file://', ''))
+
+  // Get the list of components in the component folder
+  const folders = await fs.readdir(path.join(__dirname, './component'))
+
+  const components = folders.map((folder) => {
+    return {
+      name: folder.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => {
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+      }),
+      url: `${base}/component/${folder}`,
+    }
+  })
+
+  return {
+    components,
+  }
+}

src/routes/+layout.server.ts

@@ -1,26 +1 @@
-import { base } from '$app/paths'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import type { LayoutServerLoad } from './$types.js'
-
-export const load: LayoutServerLoad = async () => {
-  const __dirname = path.dirname(import.meta.url.replace('file://', ''))
-
-  // Get the list of components in the component folder
-  const folders = await fs.readdir(path.join(__dirname, './(docs)/component'))
-
-  const components = folders.map((folder) => {
-    return {
-      name: folder.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => {
-        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
-      }),
-      url: `${base}/component/${folder}`,
-    }
-  })
-
-  return {
-    components,
-  }
-}
-
 export const prerender = true

src/routes/+layout.svelte

@@ -2,8 +2,21 @@
   import '../app.css'
   import '../highlight.less'
   import Header from './Header.svelte'
+  import { page } from '$app/stores'
+  import Case from 'case'
+
+  $: subtitle = $page.url.pathname.split('/').filter(Boolean).pop() || ''
+  $: subtitle = Case.title(subtitle)
 </script>
 
+<svelte:head>
+  {#if subtitle.length > 0}
+    <title>Louisette | {subtitle}</title>
+  {:else}
+    <title>Louisette</title>
+  {/if}
+</svelte:head>
+
 <main
   class="flex min-h-screen w-full flex-col bg-gray-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
 >

src/routes/Header.svelte

@@ -1,8 +1,9 @@
 <script>
   import { base } from '$app/paths'
-  import { Github } from 'lucide-svelte'
+  import { Github, Menu } from 'lucide-svelte'
   import DarkMode from './DarkMode.svelte'
   import logo from '$images/louisette.svg'
+  import { page } from '$app/stores'
 </script>
 
 <div class="container mx-auto flex max-w-6xl items-center gap-4 p-4 pb-0">
@@ -22,5 +23,10 @@
       <Github /> <span class="hidden md:inline">GitHub</span>
     </a>
     <DarkMode />
+    {#if $page.data.components}
+      <div class="cursor-pointer rounded p-2 md:hidden">
+        <Menu />
+      </div>
+    {/if}
   </div>
 </div>