vielle.dev / site-archive
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Change nav Header to not be a sidebar.

TODO:
- make sub entries popouts
- apply redesign

afterlifepro ef392933 6f6052ab

+3 -70
-18
src/assets/hamburger.svg
··· 1 - <svg 2 - xmlns="http://www.w3.org/2000/svg" 3 - width="24" 4 - height="24" 5 - viewBox="0 0 24 24" 6 - fill="none" 7 - stroke="currentColor" 8 - stroke-width="2" 9 - stroke-linecap="round" 10 - stroke-linejoin="round" 11 - class="lucide lucide-menu-icon lucide-menu" 12 - title="" 13 - > 14 - <desc><!-- no alt text as used for buttons --></desc> 15 - <path d="M4 12h16" /> 16 - <path d="M4 18h16" /> 17 - <path d="M4 6h16" /> 18 - </svg>
-17
src/assets/x.svg
··· 1 - <svg 2 - xmlns="http://www.w3.org/2000/svg" 3 - width="24" 4 - height="24" 5 - viewBox="0 0 24 24" 6 - fill="none" 7 - stroke="currentColor" 8 - stroke-width="2" 9 - stroke-linecap="round" 10 - stroke-linejoin="round" 11 - class="lucide lucide-x-icon lucide-x" 12 - title="" 13 - > 14 - <desc><!-- no alt text as descriptive --></desc> 15 - <path d="M18 6 6 18" /> 16 - <path d="m6 6 12 12" /> 17 - </svg>
+2 -27
src/components/generic/Nav.astro
··· 1 1 --- 2 2 import NavEntry from "./NavEntry.astro"; 3 - import Hamburger from "@/assets/hamburger.svg"; 4 - import X from "@/assets/x.svg"; 5 3 import { getEntry } from "astro:content"; 6 - 7 - interface Props { 8 - current: string; 9 - } 10 - 11 - const { current } = Astro.props; 12 4 13 5 const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? []; 14 6 --- 15 7 16 - <button 17 - popovertarget="nav" 18 - popovertargetaction="show" 19 - aria-label="Nav Menu" 20 - id="nav-menu" 21 - > 22 - <Hamburger /> 23 - </button> 24 - <dialog closedby="any" id="nav" popover> 25 - <button 26 - popovertarget="nav" 27 - popovertargetaction="hide" 28 - aria-label="close" 29 - id="nav-menu-close" 30 - > 31 - <X width={32} height={32} /> 32 - </button> 33 - <h1>{current}</h1> 8 + <header> 34 9 <NavEntry {data} /> 35 - </dialog> 10 + </header> 36 11 37 12 <style> 38 13 button {
+1 -8
src/pages/blog/index.astro
··· 58 58 </style> 59 59 60 60 <Base title="Blog"> 61 + <Nav /> 61 62 <Background /> 62 63 <main> 63 - <heading style={`--y-gap: ${blog.post.yGap}px`}> 64 - <Nav current="Blog" /> 65 - 66 - <a href="/rss.xml" aria-label="Rss Feed"> 67 - <Rss width="1.6em" height="1.6em" /> 68 - </a> 69 - </heading> 70 - 71 64 <div class="top-offset" style={`--top-gap: ${blog.post.topYGap}px;`}></div> 72 65 73 66 {