refactor: centralize navigation config and add sitemap metadata support

Author: eric15342335

src/app/sitemap.ts

@@ -1,20 +1,16 @@
 import { MetadataRoute } from "next";
-
-export const staticRoutes = [
-  "",
-  "/about-us",
-  "/upcoming-event",
-  "/blog",
-  "/our-work",
-  "/resources",
-  "/join-us",
-];
+import { siteConfig } from "@/lib/config";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const siteUrl = process.env.SITE_URL;
+  const allNavs = [...siteConfig.mainNav, ...siteConfig.utilityNav];
 
-  return staticRoutes.map((route) => ({
-    url: `${siteUrl}${route}`,
-    lastModified: new Date(),
-  }));
+  return allNavs.map((route) => {
+    return {
+      url: `${siteUrl}${route.href}`,
+      lastModified: new Date(),
+      ...(route.changeFrequency && { changeFrequency: route.changeFrequency }),
+      ...(route.priority && { priority: route.priority }),
+    };
+  });
 }

src/components/layout/footer.tsx

@@ -3,15 +3,9 @@ import { Mail } from "lucide-react";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
 import { FaLinkedin } from "react-icons/fa";
 import Link from "next/link";
-import { staticRoutes } from "@/app/sitemap";
 
-const sitemapLinks = staticRoutes.map((route) => {
-  if (route === "") {
-    return { href: "/", label: "Home" };
-  }
-  const label = route.replace("/", "").replace("-", " ");
-  return { href: route, label: label.charAt(0).toUpperCase() + label.slice(1) };
-});
+const sitemapLinks = [...siteConfig.mainNav, ...siteConfig.utilityNav];
+
 
 export function Footer() {
   return (

src/components/layout/header.tsx

@@ -18,14 +18,7 @@ import { Button } from "@/components/ui/button";
 import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 
-const navLinks = [
-  { href: "/", label: "Home" },
-  { href: "/about-us", label: "About Us" },
-  { href: "/upcoming-event", label: "Upcoming Event" },
-  { href: "/blog", label: "Blog" },
-  { href: "/our-work", label: "Our Work" },
-  { href: "/resources", label: "Resources" },
-];
+
 
 export function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -55,7 +48,7 @@ export function Header() {
               <nav className="hidden lg:flex items-center gap-6 text-sm">
                 <NavigationMenu>
                   <NavigationMenuList>
-                    {navLinks.map((link) => (
+                    {siteConfig.mainNav.map((link) => (
                       <NavigationMenuItem key={link.href}>
                         <NavigationMenuLink asChild>
                           <Link href={link.href}>{link.label}</Link>
@@ -74,12 +67,15 @@ export function Header() {
               >
                 Donation
               </a>
-              <a
-                href="/join-us"
-                className="hidden sm:block"
-              >
-                Join Us
-              </a>
+              {siteConfig.utilityNav.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="hidden sm:block"
+                >
+                  {link.label}
+                </a>
+              ))}
               <div className="hidden lg:flex items-center gap-4">
                 <a
                   href={siteConfig.github}
@@ -142,7 +138,7 @@ export function Header() {
                 <div className="border-b border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
                   <div className="container px-4 lg:px-6 py-4">
                     <nav className="grid gap-4 text-sm">
-                      {navLinks.map((link) => (
+                      {siteConfig.mainNav.map((link) => (
                         <Link
                           key={link.href}
                           href={link.href}
@@ -157,12 +153,15 @@ export function Header() {
                       >
                         Donation
                       </Link>
-                      <Link
-                        href="/join-us"
-                        className="hover:text-foreground/80"
-                      >
-                        Join Us
-                      </Link>
+                      {siteConfig.utilityNav.map((link) => (
+                        <Link
+                          key={link.href}
+                          href={link.href}
+                          className="hover:text-foreground/80"
+                        >
+                          {link.label}
+                        </Link>
+                      ))}
                     </nav>
                   </div>
                 </div>

src/lib/config.ts

@@ -1,3 +1,23 @@
+import { MetadataRoute } from "next";
+
+type NavItem = {
+  href: string;
+  label: string;
+  priority?: MetadataRoute.Sitemap[0]["priority"];
+  changeFrequency?: MetadataRoute.Sitemap[0]["changeFrequency"];
+};
+
+const mainNav: NavItem[] = [
+  { href: "/", label: "Home" },
+  { href: "/about-us", label: "About Us" },
+  { href: "/upcoming-event", label: "Upcoming Event" },
+  { href: "/blog", label: "Blog" },
+  { href: "/our-work", label: "Our Work" },
+  { href: "/resources", label: "Resources" },
+];
+
+const utilityNav: NavItem[] = [{ href: "/join-us", label: "Join Us" }];
+
 export const siteConfig = {
   email: "alphahku1213@gmail.com",
   instagram: "https://www.instagram.com/alpha.hku",
@@ -6,4 +26,10 @@ export const siteConfig = {
   donate: "mailto:alphahku1213@gmail.com?subject=Donation Inquiry",
   parentOrg: "https://alphaeducation.org",
   seoImage: "/ALPHA-HKU.png",
+  mainNav,
+  utilityNav,
+  staticRoutes: [
+    ...mainNav.map((item) => (item.href === "/" ? "" : item.href)),
+    ...utilityNav.map((item) => item.href),
+  ],
 };