Refactoring Suggestion

.prettierrc.mjs

@@ -1,11 +1,16 @@
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ["prettier-plugin-astro"],
+  singleQuote: true,
+  plugins: [
+    'prettier-plugin-astro',
+    'prettier-plugin-tailwindcss',
+    'prettier-plugin-astro-organize-imports',
+  ],
   overrides: [
     {
-      files: "*.astro",
+      files: '*.astro',
       options: {
-        parser: "astro",
+        parser: 'astro',
       },
     },
   ],

package.json

@@ -30,6 +30,7 @@
     "astro": "^4.16.10",
     "astro-icon": "^1.1.2",
     "astro-seo": "^0.8.4",
+    "class-variance-authority": "^0.7.0",
     "htmx.org": "^2.0.3",
     "markdown-it": "^14.0.0",
     "node-html-parser": "^6.1.13",
@@ -39,9 +40,11 @@
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.1",
-    "@iconify/tailwind": "^1.1.3",
     "@iconify-json/simple-icons": "^1.2.11",
+    "@iconify/tailwind": "^1.1.3",
     "prettier": "^3.3.3",
-    "prettier-plugin-astro": "^0.14.1"
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-astro-organize-imports": "^0.4.11",
+    "prettier-plugin-tailwindcss": "^0.6.8"
   }
 }

src/layouts/Footer.astro → src/components/Footer.astro

@@ -1,76 +1,78 @@
 ---
-import { Icon } from "astro-icon/components";
-import { Image } from "astro:assets";
-import { getEntry } from "astro:content";
-import flakeWhite from "../assets/image/flake-white.svg";
-import Container from "../components/layout/Container.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
-const footerMenu = await getEntry("menus", "footer");
+import { Icon } from 'astro-icon/components';
+import { getEntry } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
+const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
-  <div class="bg-nix-blue-darker text-white font-light clear-both">
+  <div class="clear-both bg-nix-blue-darker text-white">
     <Container>
-      <div class="flex flex-col sm:flex-row flex-wrap py-8 gap-y-8">
+      <div class="flex flex-col flex-wrap gap-y-8 py-14 sm:flex-row">
         {
           footerMenu.data.sections.map((menu) => (
             <div class="basis-1/2 lg:basis-1/4">
-              <h4 class="text-xl font-bold font-heading text-nix-blue mb-4">
+              <h4 class="mb-4 font-heading text-xl font-bold text-nix-blue">
                 {menu.name}
               </h4>
-              <ul class="space-y-2 font-extralight">
+              <ul class="space-y-2">
                 {menu.items.map((item) => (
                   <li>
-                    <a href={item.link}>{item.name}</a>
+                    <Link href={item.link}>{item.name}</Link>
                   </li>
                 ))}
               </ul>
             </div>
           ))
         }
       </div>
+
       <hr class="border-nix-blue-light" />
-      <div
-        class="flex flex-col lg:flex-row flex-wrap py-8 gap-8 lg:gap-0 font-extralight"
-      >
-        <div class="basis-1/2 flex flex-row flex flex-row gap-2">
+
+      <div class="flex flex-col flex-wrap gap-4 py-4 lg:flex-row lg:gap-0">
+        <div class="flex basis-1/2 flex-row gap-2">
           <InlineSVG
             src="/src/assets/image/flake-white.svg"
-            class="inline-block w-16 h-16"
+            class="inline-block h-14 w-14"
           />
           <div class="flex flex-col justify-center">
             <div>
-              Copyright © {new Date().getFullYear()} NixOS contributors
+              Copyright &copy; {new Date().getFullYear()} NixOS contributors
             </div>
-            <a
+            <Link
               href="https://github.com/NixOS/nixos-homepage/blob/master/LICENSES/CC-BY-SA-4.0.txt"
             >
               <abbr
                 title="Creative Commons Attribution Share Alike 4.0 International"
               >
                 CC-BY-SA-4.0
               </abbr>
-            </a>
+            </Link>
           </div>
         </div>
-        <hr class="lg:hidden border-nix-blue-light" />
+
+        <hr class="border-nix-blue-light lg:hidden" />
+
         <div
-          class="basis-1/2 flex flex-row justify-between lg:justify-end gap-4 font-extralight"
+          class="flex basis-1/2 flex-row justify-between gap-4 lg:justify-end"
         >
           <h4 class="my-auto">Connect with us:</h4>
-          <div class="my-auto flex flex-row gap-3">
+          <div class="my-auto flex flex-row gap-4">
             {
               footerMenu.data.social.map((item) => (
-                <a
+                <Link
                   href={item.link}
                   aria-label={`Connect with us on ${item.name}`}
                 >
                   <Icon
-                    alt={item.name}
-                    class="w-7 h-7"
+                    class="h-5 w-5"
                     name={`simple-icons:${item.name.toLowerCase()}`}
                   />
-                </a>
+                </Link>
               ))
             }
           </div>

src/components/Header.astro

@@ -0,0 +1,89 @@
+---
+import { Icon } from 'astro-icon/components';
+import { getEntry } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
+const headerMenu = await getEntry('menus', 'header');
+const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
+
+const navbarItemStyle = `text-center text-nix-blue-dark md:text-black md:hover:border-b-nix-blue-light border-b-4`;
+const navbarItemInactiveStyle = `border-b-nix-blue-extralight md:border-b-transparent bg-nix-blue-extralight md:bg-transparent`;
+const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-white md:text-black md:bg-transparent font-bold`;
+---
+
+<header role="banner" class="sticky top-0 z-50 bg-white text-black drop-shadow">
+  <Container class="flex flex-col justify-between md:flex-row md:items-center">
+    <div class="my-2 flex items-center justify-between gap-2 text-4xl">
+      <Link href="/" class="flex select-none items-center gap-2">
+        <InlineSVG
+          class="h-12 w-auto"
+          src="/src/assets/image/nixos-logo-notext.svg"
+          alt="Nixos Logo"
+        />
+        <InlineSVG
+          class="block h-12 w-auto md:hidden xl:block"
+          src="/src/assets/image/nixos-logo-text.svg"
+          alt="Nixos Logo Text"
+        />
+      </Link>
+
+      <button
+        aria-label="Main Navigation Toggle"
+        class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
+        id="navigation-toggle"
+      >
+        <span class="mb-1.5 block h-1 w-8 bg-white"></span>
+        <span class="mb-1.5 block h-1 w-8 bg-white"></span>
+        <span class="block h-1 w-8 bg-white"></span>
+      </button>
+    </div>
+
+    <nav
+      id="navbar-menu"
+      class="flex flex-col gap-0.5 pb-4 font-medium leading-none md:flex md:flex-row md:gap-5 md:pb-0"
+      role="menubar"
+      aria-label="Main Navigation"
+    >
+      {
+        headerMenu.data.items.map((item) => (
+          <Link
+            class:list={[
+              'pb-6 pt-7',
+              navbarItemStyle,
+              currentTopRoute === item.link
+                ? navbarItemActiveStyle
+                : navbarItemInactiveStyle,
+            ]}
+            href={item.link}
+          >
+            {item.name}
+          </Link>
+        ))
+      }
+      <Link
+        class={`pt-7 pb-6 md:pt-5 md:pb-3 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
+        href="https://search.nixos.org"
+        arial-label="Nixos package and options search"
+      >
+        <Icon class="hidden h-8 w-8 text-nix-blue md:block" name="mdi:search" />
+        <span class="inline-block md:hidden">Search</span>
+      </Link>
+    </nav>
+  </Container>
+</header>
+
+<script>
+  const navigationToggle = document.getElementById('navigation-toggle');
+  const navbarMenu = document.getElementById('navbar-menu');
+
+  function toggleMenu() {
+    navbarMenu.classList.toggle('hidden');
+    navbarMenu.classList.toggle('flex');
+  }
+  toggleMenu();
+
+  navigationToggle.addEventListener('click', () => toggleMenu());
+</script>

src/components/layout/CodeBlock.astro

@@ -1,19 +1,19 @@
 ---
 interface Props {
   lines: Array<{ shellPrompt: string; code: string }>;
-  type?: "code" | "storepath";
+  type?: 'code' | 'storepath';
 }
 
-const { lines, type = "code" } = Astro.props;
+const { lines, type = 'code' } = Astro.props;
 ---
 
 <pre
   class:list={[
-    "border-1 bg-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto",
-    { "bg-[#3a3a3a] text-white": type === "code" },
+    'my-2 mb-4 overflow-x-auto rounded border bg-[#3a3a3a] px-4 py-4',
+    { 'bg-[#3a3a3a] text-white': type === 'code' },
     {
-      "font-mono font-[500] bg-nix-blue-extralight border-nix-blue-extralight text-black shadow-inner":
-        type === "storepath",
+      'border-nix-blue-extralight bg-nix-blue-extralight font-mono font-[500] text-black shadow-inner':
+        type === 'storepath',
     },
   ]}>
 {lines.map((line, idx, {length}) => {

src/components/layout/CodeInline.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<code class="text-nix-orange-dark bg-neutral-100 py-1 px-2 border-1 rounded-lg"
-  ><slot /></code
->
+<code class="bg-neutral-100 rounded-lg border px-2 py-1 text-nix-orange-dark">
+  <slot />
+</code>

src/components/layout/Divider.astro

@@ -1,35 +1,35 @@
 ---
-import InlineSVG from "../util/InlineSVG.astro";
+import InlineSVG from '@/components/util/InlineSVG.astro';
 
 interface Props {
-  style?: "slope" | "landing_search_bottom";
+  style?: 'slope' | 'landing_search_bottom';
   mirrorX?: boolean;
   mirrorY?: boolean;
 }
 
 const styleMap = {
-  slope: "/src/assets/image/divider/slope_down.svg",
-  landing_search_bottom: "/src/assets/image/divider/landing_search_bottom.svg",
+  slope: '/src/assets/image/divider/slope_down.svg',
+  landing_search_bottom: '/src/assets/image/divider/landing_search_bottom.svg',
 };
 
 const heightMap = {
-  slope: "h-16",
-  landing_search_bottom: "h-16 md:h-48",
+  slope: 'h-16',
+  landing_search_bottom: 'h-16 md:h-48',
 };
 
-const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props;
+const { style = 'slope', mirrorX = false, mirrorY = false } = Astro.props;
 ---
 
 <InlineSVG
   role="separator"
   src={styleMap[style]}
   class:list={[
-    "block left-0 right-0 h-16 w-full",
+    'left-0 right-0 block h-16 w-full',
     heightMap[style],
-    mirrorY ? "translate-y-[1px]" : "translate-y-[-1px]",
+    mirrorY ? 'translate-y-[1px]' : 'translate-y-[-1px]',
     {
-      "-scale-x-100": mirrorX,
-      "-scale-y-100": mirrorY,
+      '-scale-x-100': mirrorX,
+      '-scale-y-100': mirrorY,
     },
   ]}
   aria-hidden="true"

src/components/layout/PageHeader.astro

@@ -1,31 +1,32 @@
 ---
+import Container from '@/components/layout/Container.astro';
+import Link from '@/components/util/Link.astro';
+
 interface Props {
   text?: string;
   subtext?: string;
   parentPath?: string;
 }
 
-const { text = "", subtext, parentPath = undefined }: Props = Astro.props;
-
-import Container from "./Container.astro";
+const { text = '', subtext, parentPath = undefined }: Props = Astro.props;
 ---
 
 <div
-  class="inline-svg-header-nixdarkblue bg-bottom bg-no-repeat bg-cover py-24 hidden md:block"
+  class="hidden bg-cover bg-bottom bg-no-repeat py-24 inline-svg-header-nixdarkblue md:block"
 >
-  <Container class="text-white grid grid-cols-3">
-    <div class="flex flex-col gap-4 col-span-2">
+  <Container class="grid grid-cols-3 text-white">
+    <div class="col-span-2 flex flex-col gap-4">
       {
         parentPath && (
-          <a
+          <Link
             href={parentPath}
-            class="!text-white -mb-4 -mt-6 invisible md:visible"
+            class="invisible -mb-4 -mt-6 !text-white md:visible"
           >
-            <span class="text-nixblue">←</span> Back
-          </a>
+            <span>←</span> Back
+          </Link>
         )
       }
-      <h1 class="text-4xl font-bold font-heading text-left">
+      <h1 class="text-left font-heading text-4xl font-bold">
         {text}
       </h1>
       {subtext && <p class="text text-left">{subtext}</p>}
@@ -35,7 +36,7 @@ import Container from "./Container.astro";
 
 <div class="bg-nix-blue text-white md:hidden">
   <Container class="px-12 py-16">
-    <h1 class="text-3xl font-bold text-center">
+    <h1 class="text-center text-3xl font-bold">
       {text}
     </h1>
   </Container>

src/components/layout/SponsorLogo.astro

@@ -1,4 +1,7 @@
 ---
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
+
 const {
   class: extraClasses,
   href: externalLink,
@@ -7,10 +10,10 @@ const {
 } = Astro.props;
 ---
 
-<div
-  class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white p-4 rounded-lg ${extraClasses}`
+<Card
+  class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white ${extraClasses}`
 >
-  <a href={externalLink}>
+  <Link href={externalLink}>
     <img class="h-full w-full" src={imageSource} alt={altText} />
-  </a>
-</div>
+  </Link>
+</Card>