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

8
astro.config.mjs
View file

@ -5,5 +5,9 @@ import solidJs from "@astrojs/solid-js";
// https://astro.build/config
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 [page, setPage] = createSignal<string>("");
const [currentPage, setCurrentPage] = createSignal<string>();
onMount(() => {
if (page() != window.location.pathname) {
setPage(window.location.pathname);
}
})
setCurrentPage(window.location.pathname);
});
return (
<div class="flex justify-around my-10">
<div>
<h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1>
<nav class="pt-4">
<div class="flex flex-row items-center justify-around mx-auto">
<For each={pages}>{
(ppage, _) =>
<a class={
(ppage.path == page() || ppage.path + "/" == page()) ?
inactiveClasses + " " + activeClasses :
inactiveClasses
}
href={ppage.path}
onClick={() => setPage(ppage.path)}
>
{ppage.name}
</a>
}</For>
</div>
</nav>
</div>
<div class="my-10 w-fit mx-auto">
<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">
<For each={pages}>{
(page, _) =>
<a class={
(page.path == currentPage() || page.path + "/" == currentPage()) ?
inactiveClasses + " " + activeClasses :
inactiveClasses
}
href={page.path}
onClick={() => {
console.log("link clicked; setting cur page to " + page.path);
setCurrentPage(page.path);
}}
>
{page.name}
</a>
}</For>
</nav>
</div>
);
};

12
src/layouts/Layout.astro
View file

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