feat: add breadcrumbs

Author: rosvik

src/routes/+layout.server.ts

@@ -6,6 +6,7 @@ export const csr = false;
 
 export const load = ({ request }) => {
   let hash;
+  let url = new URL(request.url);
   try {
     hash = process.env.COMMIT_HASH || process.env.CF_PAGES_COMMIT_SHA || undefined;
   } catch (e) {
@@ -16,6 +17,23 @@ export const load = ({ request }) => {
     date: new Date().toUTCString(),
     year: new Date().getFullYear(),
     ip: getIP(request),
-    host: request.headers.get('host')
+    host: request.headers.get('host'),
+    breadcrumbs: getBreadcrumbs(url)
   };
 };
+
+const getBreadcrumbs = (url: URL): { name: string; url: string }[] => {
+  return url.pathname
+    .split('/')
+    .slice(1)
+    .filter((fragment) => fragment !== '')
+    .map((fragment, index) => {
+      return {
+        name: fragment,
+        url: url.pathname
+          .split('/')
+          .slice(0, index + 2)
+          .join('/')
+      };
+    });
+};

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
   export let host = data.host;
   export let ip = data.ip;
   export let year = data.year;
+  export let breadcrumbs = data.breadcrumbs;
 </script>
 
 <svelte:head>
@@ -17,7 +18,9 @@
 {date}
 {#if host && ip}Serving {host} to {ip}{/if}
 {#if hash}On commit <a href={`https://github.com/rosvik/248.no/commit/${hash}`}>{hash}</a>{/if}
-
+{#if breadcrumbs.length > 0}
+<a href="/">248.no</a> {#each breadcrumbs as b}> <a href={b.url}>{b.name}</a> {/each}
+{/if}
 
 </pre>
 <slot />