From e8f88106c4370d9644fc022fe286e27a8d7ffe85 Mon Sep 17 00:00:00 2001
From: Noah Swerhun <noah@noahsw.xyz>
Date: Tue, 2 Apr 2024 16:28:45 -0500
Subject: [PATCH] fixed state persistence, simplified header

---
 astro.config.mjs            |  8 ++++--
 src/components/Footer.astro | 12 +++++++++
 src/components/Nav.tsx      | 52 ++++++++++++++++++-------------------
 src/layouts/Layout.astro    | 12 ++++++---
 4 files changed, 53 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Footer.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index cdf7653..57defeb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,5 +5,9 @@ import solidJs from "@astrojs/solid-js";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), solidJs()]
-});
\ No newline at end of file
+  integrations: [tailwind(), solidJs()],
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: "viewport",
+  }
+});
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..aac6db6
--- /dev/null
+++ b/src/components/Footer.astro
@@ -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>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 32ef6cb..fc947f1 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -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>
   );
 };
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 824be11..eb5d58f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -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>