fixed state persistence, simplified header
This commit is contained in:
parent
43ad92ac23
commit
e8f88106c4
|
@ -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
12
src/components/Footer.astro
Normal 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>
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue