+71

src/lib/breadcrumb.svelte

reviewed

··· 1 1 + <script> 2 2 + let { path } = $props(); 3 3 + 4 4 + let splitPath = $derived.by(() => { 5 5 + let fullPath = "home" + path; 6 6 + return fullPath.split("/").filter(Boolean); 7 7 + }); 8 8 + 9 9 + // Define which paths should be linked vs just displayed 10 10 + const nonLinkablePaths = ['post']; 11 11 + 12 12 + // Generate the href for each breadcrumb segment, returning null for non-linkable paths 13 13 + function getHref(segment, index) { 14 14 + // Home always links to root 15 15 + if (segment.toLowerCase() === 'home') { 16 16 + return '/'; 17 17 + } 18 18 + 19 19 + // Don't generate links for segments in nonLinkablePaths 20 20 + if (nonLinkablePaths.includes(segment.toLowerCase())) { 21 21 + return null; 22 22 + } 23 23 + 24 24 + // For blog section, link directly to /blog 25 25 + if (segment.toLowerCase() === 'blog') { 26 26 + return '/blog'; 27 27 + } 28 28 + 29 29 + // For other segments (like the actual post slug) 30 30 + return '/' + splitPath.slice(1, index + 1).join('/'); 31 31 + } 32 32 + </script> 33 33 + 34 34 + <div> 35 35 + {#each splitPath as segment, index} 36 36 + {#if index > 0} 37 37 + <span>/</span> 38 38 + {/if} 39 39 + {#if getHref(segment, index) !== null} 40 40 + <a href={getHref(segment, index)}>{segment}</a> 41 41 + {:else} 42 42 + <span class="non-link">{segment}</span> 43 43 + {/if} 44 44 + {/each} 45 45 + </div> 46 46 + 47 47 + <style> 48 48 + div { 49 49 + display: flex; 50 50 + gap: 0.5rem; 51 51 + align-items: center; 52 52 + } 53 53 + 54 54 + a { 55 55 + text-decoration: none; 56 56 + color: inherit; 57 57 + font-size: 1.2em; 58 58 + } 59 59 + 60 60 + span { 61 61 + font-size: 1.2em; 62 62 + } 63 63 + 64 64 + a:hover { 65 65 + text-decoration: underline; 66 66 + } 67 67 + 68 68 + .non-link { 69 69 + color: var(--color-fg-4); /* Optional: style non-linkable segments differently */ 70 70 + } 71 71 + </style>

+16 -11

src/routes/+layout.svelte

reviewed

··· 1 1 <script> 2 2 + import Breadcrumb from '../lib/breadcrumb.svelte'; 2 3 import '$lib/global.css'; 3 4 import { blur } from 'svelte/transition'; 4 5 ··· 15 16 <meta name="description" content="Mae Moon's personal website and blog"> 16 17 </svelte:head> 17 18 18 18 - {#key data.currentRoute} 19 19 - <div id="page"> 20 20 - <aside> 21 21 - <a href="/">home</a> 22 22 - <a href="/blog">blog</a> 23 23 - </aside> 24 24 - <main in:blur={{ duration: 200, delay: 200 }} out:blur={{ duration: 200 }}> 25 25 - {@render children?.()} 26 26 - </main> 27 27 - </div> 28 28 - {/key} 19 19 + <div id="page"> 20 20 + <aside> 21 21 + <a href="/" class:active={data.currentRoute == "/"}>home</a> 22 22 + <a href="/blog" class:active={data.currentRoute == "/blog"}>blog</a> 23 23 + </aside> 24 24 + {#key data.currentRoute} 25 25 + <main> 26 26 + {@render children?.()} 27 27 + </main> 28 28 + {/key} 29 29 + </div> 29 30 30 31 <style> 31 32 #page { ··· 43 44 main { 44 45 padding: 2em; 45 46 flex-basis: 50%; 47 47 + } 48 48 + 49 49 + .active::before { 50 50 + content: "* "; 46 51 } 47 52 </style>