Navbar and theming improvements (#10)

* Improves navigation by allowing selection of a specific blog category

* Improves theming across navbar, especially for links

* Fixes /public/ link in docker volume for nginx

* Implements custom page titles and descriptions based on route data

* Minor additional theming and UI improvements

Author: andrew-s28

docker-compose.yml

@@ -27,7 +27,7 @@ services:
       - ./certbot/www/:/var/www/certbot/:ro
       - ./certbot/conf/:/etc/nginx/ssl/:ro
       - ./frontend/static:/usr/src/app/static
-      - ./frontend/public:/usr/src/app/public
+      - ./public:/usr/src/app/public
     ports:
       - 80:80
       - 443:443

frontend/package-lock.json

@@ -15,6 +15,7 @@
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.2.0",

frontend/package.json

@@ -11,7 +11,7 @@ export default function DarkModeSwitch() {
         setTheme(theme === "dark" ? "light" : "dark");
       }}
       aria-label="Light/Dark Mode Toggle"
-      className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
+      className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 dark:hover:bg-night-sky-700 hover:bg-night-sky-300"
     >
       <div className="flex items-center justify-center relative m-auto">
         <Sun className="absolute size-[2rem] p-0 m-0 rotate-0 scale-100 transition-all duration-500 dark:-rotate-90 dark:scale-0" />

frontend/src/components/DarkModeSwitch.tsx

@@ -1,8 +1,8 @@
 import DarkModeSwitch from "./DarkModeSwitch";
 import GitHub from "./ui/GitHubMark";
 import { Link, useLocation } from "@tanstack/react-router";
-import { Popover } from "radix-ui";
-import { MenuIcon, HomeIcon } from "lucide-react";
+import { Accordion, Popover } from "radix-ui";
+import { ChevronDown, MenuIcon } from "lucide-react";
 import { Route as ProjectsRoute } from "~/routes/projects.index";
 import { Route as BlogRoute } from "~/routes/blog.index";
 import { Route as AboutRoute } from "~/routes/about";
@@ -18,26 +18,151 @@ const navStyles = {
     font-bold
     text-lg
     h-[3rem]
-    rounded-full
+    rounded
     w-30
     min-w-30
     transition-all
-    dark:hover:bg-gray-600/20
-    hover:bg-gray-300/50
+    dark:hover:bg-night-sky-700
+    hover:bg-night-sky-300
     focus-visible:ring-blue-500
     outline-0
     focus-visible:ring-1
     flex
     items-center
     justify-center
   `,
-  active: "font-bold text-lg",
+  active: "font-bold text-lg bg-night-sky-200 dark:bg-night-sky-900",
   inactive: "font-normal text-lg",
   container: "w-full sticky top-0 bg-dawn-pink-100 dark:bg-night-sky-950 z-50",
   nav: "h-[4rem] p-0 items-center m-auto",
 };
 
-export default function Navbar() {
+function BlogLinkButton({ categories }: { categories?: string[] }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = useLocation().pathname;
+  const isActive = pathname.startsWith("/blog");
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  return categories && categories.length > 0 ? (
+    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Popover.Trigger className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
+        <div className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
+          <div
+            className={`${navStyles.button} ${isActive ? navStyles.active : navStyles.inactive}`}
+          >
+            Blog
+          </div>
+          <span className="sr-only">Toggle menu</span>
+        </div>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="w-64 bg-dawn-pink-100 dark:bg-night-sky-950 p-2 rounded-lg shadow-xl z-50 border-night-sky-950 dark:border-dawn-pink-100 border-2"
+          sideOffset={5}
+        >
+          <div className="flex items-center justify-center h-full cursor-pointer outline-0 focus-visible:ring-1 focus-visible:ring-blue-500">
+            <div className="flex flex-col space-y-1 w-full">
+              {categories.map((category) => (
+                <Link
+                  to={BlogRoute.to + `/${category.toLowerCase()}`}
+                  className="px-4 py-2 rounded-md text-center capitalize hover:bg-night-sky-300 dark:hover:bg-night-sky-700"
+                  activeProps={{ className: navStyles.active }}
+                  key={category}
+                  resetScroll
+                >
+                  {category}
+                </Link>
+              ))}
+              <Link
+                to={BlogRoute.to}
+                className="px-4 py-2 hover:bg-night-sky-300 dark:hover:bg-night-sky-700 rounded-md text-center"
+                activeOptions={{ exact: true }}
+                activeProps={{ className: navStyles.active }}
+                resetScroll
+              >
+                See All Posts
+              </Link>
+            </div>
+          </div>
+          <Popover.Arrow
+            height={10}
+            className="dark:fill-dawn-pink-100 fill-night-sky-950"
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  ) : (
+    <Link
+      to={BlogRoute.to}
+      className={navStyles.button}
+      resetScroll
+      aria-label="Blog link"
+      activeProps={{ className: navStyles.active }}
+      inactiveProps={{ className: navStyles.inactive }}
+    >
+      Blog
+    </Link>
+  );
+}
+
+function BlogLinkDropdown({ categories }: { categories?: string[] }) {
+  const pathname = useLocation().pathname;
+  const isActive = pathname.startsWith("/blog");
+
+  return (
+    <Accordion.Root type="single" collapsible>
+      <Accordion.Item value="blog" className="text-center">
+        <Accordion.Header>
+          <Accordion.Trigger
+            className={cn(
+              "w-full group",
+              "px-4 py-2 rounded-md  dark:hover:bg-night-sky-700 hover:bg-night-sky-300 relative",
+              isActive ? navStyles.active : navStyles.inactive
+            )}
+          >
+            Blog
+            <ChevronDown
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 group-data-[state=open]:rotate-180 transition duration-200"
+              size={24}
+              aria-hidden
+            />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content className="p-2 space-y-1">
+          <div className="w-full bg-night-sky-950 dark:bg-dawn-pink-100 h-[1px] mx-auto mb-2" />
+          {categories?.map((category) => (
+            <Link
+              key={category}
+              to={BlogRoute.to + `/${category.toLowerCase()}`}
+              className="block text-sm px-4 py-2 rounded-md text-center capitalize hover:bg-night-sky-300 dark:hover:bg-night-sky-700"
+              activeProps={{ className: navStyles.active }}
+              resetScroll
+            >
+              {category}
+            </Link>
+          ))}
+          <Link
+            to={BlogRoute.to}
+            className="block text-sm px-4 py-2 rounded-md text-center hover:bg-night-sky-300 dark:hover:bg-night-sky-700"
+            activeOptions={{ exact: true }}
+            activeProps={{ className: navStyles.active }}
+            resetScroll
+          >
+            See All Posts
+          </Link>
+          <div className="w-full bg-night-sky-950 dark:bg-dawn-pink-100 h-[1px] mx-auto mt-2" />
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+export default function Navbar(
+  { categories }: { categories?: string[] } = { categories: [] }
+) {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = useLocation().pathname;
 
@@ -55,14 +180,12 @@ export default function Navbar() {
       >
         <Link
           to="/"
-          activeProps={{ className: navStyles.active }}
           inactiveProps={{ className: navStyles.inactive }}
           activeOptions={{ exact: true }}
-          className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20 justify-self-start"
+          className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-night-sky-300 dark:hover:bg-night-sky-700 justify-self-start"
           resetScroll
           aria-label="Home page link"
         >
-          {/* <HomeIcon className="p-0" size={32} aria-label="Home icon" /> */}
           <img src="/static/logo.svg" alt="Logo" className="h-8 dark:hidden" />
           <img
             src="/static/logo-light.svg"
@@ -71,16 +194,8 @@ export default function Navbar() {
           />
           <span className="sr-only">Home</span>
         </Link>
-        <div className="align-middle grow-0 flex px-5 justify-self-stretch justify-center">
-          <Link
-            to={BlogRoute.to}
-            activeProps={{ className: navStyles.active }}
-            inactiveProps={{ className: navStyles.inactive }}
-            className={navStyles.button}
-            resetScroll
-          >
-            Blog
-          </Link>
+        <div className="align-middle grow-0 flex space-x-2 px-5 justify-self-stretch justify-center">
+          <BlogLinkButton categories={categories} />
           <Link
             to={ProjectsRoute.to}
             activeProps={{ className: navStyles.active }}
@@ -113,13 +228,22 @@ export default function Navbar() {
         <div className="flex items-center justify-between w-full px-2">
           <Link
             to="/"
-            activeProps={{ className: navStyles.active }}
             inactiveProps={{ className: navStyles.inactive }}
             activeOptions={{ exact: true }}
-            className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
+            className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500"
             resetScroll
           >
-            <HomeIcon className="p-0" size={32} />
+            <img
+              src="/static/logo.svg"
+              alt="Logo"
+              className="h-8 dark:hidden"
+            />
+            <img
+              src="/static/logo-light.svg"
+              alt="Logo"
+              className="h-8 hidden dark:inline"
+            />
+            <span className="sr-only">Home</span>
           </Link>
 
           <div className="align-middle justify-center grow-0 px-4">
@@ -136,34 +260,20 @@ export default function Navbar() {
                   sideOffset={5}
                 >
                   <div className="flex flex-col space-y-1">
-                    <Link
-                      to={BlogRoute.to}
-                      className="px-4 py-2 hover:bg-muted rounded-md text-center"
-                      activeProps={{
-                        className:
-                          "font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
-                      }}
-                      resetScroll
-                    >
-                      Blog
-                    </Link>
+                    <BlogLinkDropdown categories={categories} />
                     <Link
                       to={ProjectsRoute.to}
-                      className="px-4 py-2 hover:bg-muted rounded-md text-center"
-                      activeProps={{
-                        className:
-                          "font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
-                      }}
+                      className="px-4 py-2 dark:hover:bg-night-sky-700 hover:bg-night-sky-300 rounded-md text-center"
+                      activeProps={{ className: navStyles.active }}
                       resetScroll
                     >
                       Projects
                     </Link>
                     <Link
                       to={AboutRoute.to}
-                      className="px-4 py-2 hover:bg-muted rounded-md text-center"
+                      className="px-4 py-2 dark:hover:bg-night-sky-700 hover:bg-night-sky-300 dark:active:bg-night-sky-700 active:bg-night-sky-300 rounded-md text-center"
                       activeProps={{
-                        className:
-                          "font-bold bg-dawn-pink-300 dark:bg-night-sky-900",
+                        className: navStyles.active,
                       }}
                       resetScroll
                     >

frontend/src/components/Navbar.tsx

@@ -84,7 +84,7 @@ export function initialTheme() {
   // https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management/#scripts
   return {
     children: `
-    let prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (!("theme" in localStorage)) {
       localStorage.setItem("theme", prefersDark ? "dark" : "light");
     }

frontend/src/components/ThemeProvider.tsx

@@ -7,7 +7,7 @@ interface GitHubProps {
 export default function GitHub({ githubLink }: GitHubProps) {
   return (
     <Link
-      className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 hover:bg-gray-600/20"
+      className="flex cursor-pointer items-center justify-center px-1 py-0 m-0 size-[3rem] rounded-full bg-transparent shadow-none border-solid focus-visible:ring-1 focus-visible:ring-blue-500 dark:hover:bg-night-sky-700 hover:bg-night-sky-300"
       to={githubLink}
       aria-label="GitHub Link"
     >

frontend/src/components/ui/GitHubMark.tsx

@@ -18,8 +18,13 @@ import { seo } from "~/utils/seo";
 import { ThemeProvider, initialTheme } from "../components/ThemeProvider";
 import { MotionConfig } from "framer-motion";
 import Footer from "~/components/Footer";
+import { fetchMDX } from "~/utils/mdx-fetcher";
 
 export const Route = createRootRoute({
+  loader: async () => {
+    const categories = await fetchMDX({ data: { directory: "posts" } });
+    return { categories };
+  },
   head: () => ({
     meta: [
       {
@@ -31,7 +36,10 @@ export const Route = createRootRoute({
       },
       ...seo({
         title: "Andrew Scherer",
-        description: `Personal website and blog for physical oceanographer and software developer Andrew Scherer.`,
+        description:
+          "Personal website and blog for physical oceanographer and software developer Andrew Scherer. Find out about my professional history, publications, and interests in oceanography and software development.",
+        keywords:
+          "Andrew, Scherer, Andrew Scherer, Andrew Scherer website, Andrew Scherer blog, Andrew Scherer oceanography, Andrew Scherer software developer, oceanography, software development, personal website, blog, tech, technology, science, ocean science, physical oceanography, software engineering, programming, coding, web development",
       }),
     ],
     scripts: [initialTheme()],
@@ -111,6 +119,11 @@ function RootComponent() {
 
 function RootDocument({ children }: { children: ReactNode }) {
   const pathname = useLocation().pathname;
+  const categories = Route.useLoaderData()
+    .categories.frontmatters.map((fm) => fm.tags)
+    .flat()
+    .filter((value, index, self) => self.indexOf(value) === index);
+
   return (
     <StrictMode>
       <html suppressHydrationWarning lang="en" className="antialiased">
@@ -119,7 +132,7 @@ function RootDocument({ children }: { children: ReactNode }) {
         </head>
         <body suppressHydrationWarning>
           <ThemeProvider>
-            <Navbar />
+            <Navbar categories={categories} />
             <hr />
             <MotionConfig reducedMotion="user">{children}</MotionConfig>
             <TanStackRouterDevtools position="bottom-right" />

frontend/src/routes/__root.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, ParsedLocation } from "@tanstack/react-router";
 import { fetchMDXCode, fetchSingleMDXFrontMatter } from "~/utils/mdx-fetcher";
 import { MDXPost } from "~/components/page";
+import { seo } from "~/utils/seo";
 
 let prevLoc: ParsedLocation | null = null;
 
@@ -32,6 +33,17 @@ export const Route = createFileRoute("/about-site")({
       prevLoc = match.location;
     }
   },
+  head: () => ({
+    meta: [
+      ...seo({
+        title: "About Site - Andrew Scherer",
+        description:
+          "Learn more about this site, its history and future, and the technologies used to build it.",
+        keywords:
+          "Andrew Scherer, about site, personal website, blog, technology, software development, web development",
+      }),
+    ],
+  }),
 });
 
 function AboutComponent() {