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
|
// 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
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 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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue