noah/jhunterdeloche.com
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fixed state persistence, simplified header

Browse source
This commit is contained in:
Noah Swerhun 2024-04-02 16:28:45 -05:00
parent 43ad92ac23
commit e8f88106c4
4 changed files with 53 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
astro.config.mjs
View file

@ -5,5 +5,9 @@ import solidJs from "@astrojs/solid-js";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind(), solidJs()] integrations: [tailwind(), solidJs()],
prefetch: {
prefetchAll: true,
defaultStrategy: "viewport",
}
}); });

12
src/components/Footer.astro Normal file
View file

@ -0,0 +1,12 @@
---
---
<div class="font-thin text-sm flex flex-col items-center my-10">
<div class="font-display">
Copyright (C) {new Date().getFullYear().toString()} James Hunter Deloche.
</div>
<!-- <a class="underline" href="https://git.noahsw.xyz/noah/jhunterdeloche.com" -->
<!-- >View the Source</a -->
<!-- > -->
</div>

52
src/components/Nav.tsx
View file

@ -16,34 +16,34 @@ const activeClasses = "font-bold !text-foreground";
const Nav = () => { const Nav = () => {
const [page, setPage] = createSignal<string>(""); const [currentPage, setCurrentPage] = createSignal<string>();
onMount(() => { onMount(() => {
if (page() != window.location.pathname) { setCurrentPage(window.location.pathname);
setPage(window.location.pathname); });
}
})
return ( return (
<div class="flex justify-around my-10"> <div class="my-10 w-fit mx-auto">
<div> <h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1>
<h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1> <nav class="pt-4 w-full flex flex-row justify-around">
<nav class="pt-4"> <For each={pages}>{
<div class="flex flex-row items-center justify-around mx-auto"> (page, _) =>
<For each={pages}>{ <a class={
(ppage, _) => (page.path == currentPage() || page.path + "/" == currentPage()) ?
<a class={ inactiveClasses + " " + activeClasses :
(ppage.path == page() || ppage.path + "/" == page()) ? inactiveClasses
inactiveClasses + " " + activeClasses : }
inactiveClasses href={page.path}
} onClick={() => {
href={ppage.path} console.log("link clicked; setting cur page to " + page.path);
onClick={() => setPage(ppage.path)} setCurrentPage(page.path);
> }}
{ppage.name} >
</a> {page.name}
}</For> </a>
</div> }</For>
</nav> </nav>
</div>
</div> </div>
); );
}; };

12
src/layouts/Layout.astro
View file

@ -1,5 +1,6 @@
--- ---
import Nav from "../components/Nav.tsx"; import Nav from "../components/Nav.tsx";
import Footer from "../components/Footer.astro";
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
interface Props { interface Props {
@ -18,7 +19,7 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.bunny.net" /> <link rel="preconnect" href="https://fonts.bunny.net" />
<link <link
href="https://fonts.bunny.net/css?family=kanit:300|old-standard-tt:700" href="https://fonts.bunny.net/css?family=kanit:200,300|old-standard-tt:400,700"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
@ -27,10 +28,15 @@ const { title } = Astro.props;
</head> </head>
<body class="font-body bg-background text-foreground"> <body class="font-body bg-background text-foreground">
<div class="w-11/12 md:w-2/3 mx-auto"> <div class="w-11/12 md:w-2/3 mx-auto">
<Nav client:load /> <header transition:persist>
<main transition:animate="slide"> <Nav client:load />
</header>
<main transition:animate="fade">
<slot /> <slot />
</main> </main>
<footer>
<Footer />
</footer>
</div> </div>
</body> </body>
</html> </html>