chore: improved reusability of layout (#212)

overlayeddev · Sep 13, 2024 · 0a5d8a7 · 0a5d8a7
1 parent c64d8a8
commit 0a5d8a7
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 29 deletions.
diff --git a/apps/web/src/components/navbar.astro b/apps/web/src/components/navbar.astro
@@ -2,6 +2,7 @@
 import { DISCORD_INVITE_LINK } from "../constants";
 import { GithubIcon, TwitterIcon, OverlayedIcon, DiscordIcon } from "./icons";
 import Link from "../components/link.astro";
+import { routes } from "../routes";
 ---
 
 <style>
@@ -139,11 +140,13 @@ import Link from "../components/link.astro";
   </div>
   <!--spacer -->
   <div class="hidden md:flex justify-center gap-4">
-    <Link to="/" title="Home">Home</Link>
-    <Link to="/about" title="About">About</Link>
-    <Link to="/canary" title="Canary">Canary</Link>
-    <Link to="/discord" title="Discord">Discord</Link>
-    <Link to="/blog" title="Blog">Blog</Link>
+    {
+      routes.map((route) => (
+        <Link to={route.path} title={route.title}>
+          {route.title}
+        </Link>
+      ))
+    }
   </div>
   <!--spacer small screen-->
   <div class="flex md:hidden"></div>

diff --git a/apps/web/src/layouts/Layout.astro b/apps/web/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import { SITE_TITLE, SITE_DESCRIPTION } from "../constants";
 import CommonHead from "../components/common-head.astro";
 import Navbar from "../components/navbar.astro";
+import Footer from "../components/footer.astro";
 import "../styles/prose.css";
 
 interface Props {
@@ -41,5 +42,6 @@ const { title, description, canonicalPath, ogImage } = Astro.props;
         scroll-behavior: smooth;
       }
     </style>
+    <Footer />
   </body>
 </html>
diff --git a/apps/web/src/pages/404.astro b/apps/web/src/pages/404.astro
@@ -1,5 +1,4 @@
 ---
-import Footer from "../components/footer.astro";
 import Layout from "../layouts/Layout.astro";
 import Link from "../components/link.astro";
 ---
@@ -19,7 +18,6 @@ import Link from "../components/link.astro";
       >
         Return
       </Link>
-      <Footer />
     </div>
   </main>
 </Layout>
diff --git a/apps/web/src/pages/[...slug].astro b/apps/web/src/pages/[...slug].astro
@@ -2,7 +2,6 @@
 import type { GetStaticPaths } from "astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
 
 export const getStaticPaths = (async () => {
   const legalFiles = await getCollection("legal");
@@ -31,5 +30,4 @@ const { Content } = await post.render();
   <main class="px-4 prose prose-invert mx-auto pt-28">
     <Content />
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/about.astro b/apps/web/src/pages/about.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
 
 interface Frontmatter {
   title: string;
@@ -18,5 +17,4 @@ const [about] = await Astro.glob<Frontmatter>("../content/about/index.mdx");
     <div class="pt-2 pb-20"></div>
     <about.Content />
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/blog.astro b/apps/web/src/pages/blog.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import blogOgImage from "../assets/blog/overlayed-blog.png";
 
@@ -61,6 +60,4 @@ blogPosts.sort(
       </ul>
     </section>
   </main>
-
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/blog/[...slug].astro b/apps/web/src/pages/blog/[...slug].astro
@@ -2,7 +2,6 @@
 import type { GetStaticPaths } from "astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
-import Footer from "../../components/footer.astro";
 
 export const getStaticPaths = (async () => {
   const blogPosts = await getCollection("blog");
@@ -56,5 +55,4 @@ const { Content } = await post.render();
       crossorigin="anonymous"
       async></script>
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/canary.astro b/apps/web/src/pages/canary.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
 
 import canaryOgImage from "../assets/blog/canary.png";
 import { Download } from "../components/react/download";
@@ -53,5 +52,4 @@ const [canary] = await Astro.glob("../content/canary/index.mdx");
       </div>
     </section>
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/discord-overlay-[slug].astro b/apps/web/src/pages/discord-overlay-[slug].astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 
 export async function getStaticPaths() {
@@ -27,6 +26,4 @@ const { Content } = await post.render();
   <main class="px-4 prose prose-invert mx-auto pt-28">
     <Content />
   </main>
-
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/discord.astro b/apps/web/src/pages/discord.astro
@@ -1,7 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
-
 import discordOgImage from "../assets/blog/discord.png";
 import { DISCORD_INVITE_LINK } from "../constants";
 ---
@@ -84,5 +82,4 @@ import { DISCORD_INVITE_LINK } from "../constants";
       </div>
     </section>
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro
@@ -2,7 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/card.astro";
 import Link from "../components/link.astro";
-import Footer from "../components/footer.astro";
 import Hero from "../components/hero.astro";
 import Contributors from "../components/contributors.astro";
 import { Download } from "../components/react/download";
@@ -100,7 +99,6 @@ import resources from "../img/resources.png";
         />
       </div>
       <Contributors />
-      <Footer />
     </div>
   </main>
 </Layout>
diff --git a/apps/web/src/pages/quakecon2024.astro b/apps/web/src/pages/quakecon2024.astro
@@ -1,7 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Footer from "../components/footer.astro";
-
 import quakeconOgImage from "../assets/blog/quakecon.png";
 import Link from "../components/link.astro";
 import Video from "../components/video.astro";
@@ -60,5 +58,4 @@ import Video from "../components/video.astro";
       </div>
     </section>
   </main>
-  <Footer />
 </Layout>
diff --git a/apps/web/src/routes.ts b/apps/web/src/routes.ts
@@ -0,0 +1,32 @@
+type Route<T> = Readonly<{
+  title: T;
+  path: T;
+}>;
+
+export const routes: ReadonlyArray<Route<string>> = [
+  {
+    title: "Home",
+    path: "/",
+  },
+  {
+    title: "About",
+    path: "/about",
+  },
+  // TODO: schedule for a later time
+  // {
+  //   title: "Download",
+  //   path: "/download",
+  // },
+  {
+    title: "Canary",
+    path: "/canary",
+  },
+  {
+    title: "Discord",
+    path: "/discord",
+  },
+  {
+    title: "Blog",
+    path: "/blog",
+  },
+];