Small refactoring (#1596)

## Fix - file path for inlineSvg plugin. ## Add - Link component. ## Update - twitter to X icon and URL for footer; - moved header & footer to components folder (logically these are not layouts); - small styles improvements.
NixOS · Dec 1, 2024 · b7da0a6 · b7da0a6
1 parent 916f453
commit b7da0a6
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 101 deletions.
diff --git a/src/layouts/Footer.astro → src/components/Footer.astro b/src/layouts/Footer.astro → src/components/Footer.astro
@@ -1,15 +1,18 @@
 ---
 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 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="clear-both bg-nix-blue-darker font-light text-white">
     <Container>
-      <div class="flex flex-col flex-wrap gap-y-8 py-8 sm:flex-row">
+      <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">
@@ -19,56 +22,59 @@ const footerMenu = await getEntry('menus', 'footer');
               <ul class="space-y-2 font-extralight">
                 {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 flex-wrap gap-8 py-8 font-extralight lg:flex-row lg:gap-0"
+        class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
       >
-        <div class="flex basis-1/2 flex-row gap-2">
+        <div class="flex basis-1/2 gap-2">
           <InlineSVG
             src="/src/assets/image/flake-white.svg"
-            class="inline-block h-16 w-16"
+            class="inline-block h-14 w-14"
           />
           <div class="flex flex-col justify-center">
             <div>
               Copyright © {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="border-nix-blue-light lg:hidden" />
+
         <div
-          class="flex basis-1/2 flex-row justify-between gap-4 font-extralight lg:justify-end"
+          class="flex basis-1/2 justify-between gap-4 font-extralight 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 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="h-7 w-7"
+                    class="h-5 w-5"
                     name={`simple-icons:${item.name.toLowerCase()}`}
                   />
-                </a>
+                </Link>
               ))
             }
           </div>

diff --git a/src/layouts/Header.astro → src/components/Header.astro b/src/layouts/Header.astro → src/components/Header.astro
@@ -1,8 +1,11 @@
 ---
 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 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]}`;
@@ -14,27 +17,28 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
 <header
   role="banner"
-  class="bg-white font-extralight text-black drop-shadow-md"
+  class="sticky top-0 z-50 bg-white font-extralight text-black drop-shadow-md"
 >
   <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 font-normal md:justify-start"
     >
-      <a
+      <Link
         href="/"
         class="flex select-none items-center justify-between gap-2 md:justify-start"
       >
         <InlineSVG
-          class="h-16 w-auto"
+          class="h-12 w-auto"
           src="/src/assets/image/nixos-logo-notext.svg"
           alt="Nixos Logo"
         />
         <InlineSVG
-          class="block h-16 w-auto md:hidden xl:block"
+          class="block h-12 w-auto md:hidden xl:block"
           src="/src/assets/image/nixos-logo-text.svg"
           alt="Nixos Logo Text"
         />
-      </a>
+      </Link>
+
       <button
         aria-label="Main Navigation Toggle"
         class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
@@ -45,17 +49,18 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         <span class="block h-1 w-8 bg-white"></span>
       </button>
     </div>
+
     <nav
       aria-label="Main Navigation"
       role="menubar"
-      class="flex flex-col gap-0.5 pb-4 md:flex md:flex-row md:gap-5 md:pb-0"
+      class="flex flex-col gap-0.5 pb-4 leading-none md:flex md:flex-row md:gap-5 md:pb-0"
       id="navbar-menu"
     >
       {
         headerMenu.data.items.map((item) => (
-          <a
+          <Link
             class:list={[
-              'pb-6 pt-8',
+              'pb-6 pt-7',
               navbarItemStyle,
               currentTopRoute === item.link
                 ? navbarItemActiveStyle
@@ -64,28 +69,22 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
             href={item.link}
           >
             {item.name}
-          </a>
+          </Link>
         ))
       }
-      <a
-        target="_blank"
-        rel="noreferrer noopener"
-        class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
+      <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
-          alt="Search"
-          class="hidden h-8 w-8 text-nix-blue md:block"
-          name="mdi:search"
-        />
+        <Icon class="hidden h-8 w-8 text-nix-blue md:block" name="mdi:search" />
         <span class="inline-block md:hidden">Search</span>
-      </a>
+      </Link>
     </nav>
   </Container>
 </header>
 
-<script lang="ts">
+<script>
   const navigationToggle = document.getElementById('navigation-toggle');
   const navbarMenu = document.getElementById('navbar-menu');
 

diff --git a/src/components/util/Link.astro b/src/components/util/Link.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {}
+
+const { href, ...props } = Astro.props;
+
+let linkProps = { href, ...props };
+
+if (!!href && href.toString().startsWith('http')) {
+  linkProps = { ...linkProps, target: '_blank', rel: 'noopener noreferrer' };
+}
+---
+
+<a {...linkProps}>
+  <slot />
+</a>
diff --git a/src/content/menus/footer.yaml b/src/content/menus/footer.yaml
@@ -36,8 +36,8 @@ sections:
 social:
   - name: Mastodon
     link: https://chaos.social/@nixos_org
-  - name: Twitter
-    link: https://twitter.com/nixos_org
+  - name: X
+    link: https://x.com/nixos_org
   - name: Youtube
     link: https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw
   - name: GitHub

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,14 +1,14 @@
 ---
 import { SEO } from 'astro-seo';
+import { getImage } from 'astro:assets';
+import { getEntry } from 'astro:content';
 
-import Footer from './Footer.astro';
-import Header from './Header.astro';
+import Footer from '@/components/Footer.astro';
+import Header from '@/components/Header.astro';
 
-import { getImage } from 'astro:assets';
-import '../styles/base.css';
+import '@/styles/base.css';
 
-import { getEntry } from 'astro:content';
-import faviconSvgSrc from '../assets/image/flake-blue.svg';
+import faviconSvgSrc from '@/assets/image/flake-blue.svg';
 
 const {
   title = 'Nix &amp; NixOS | Declarative builds and deployments',
@@ -80,10 +80,13 @@ const headFeedLinks = blogMenu.data.map((e) => {
   </head>
   <body class="flex min-h-screen flex-col bg-white text-gray-950">
     <Header />
+
     <main class="flex-1">
       <slot />
     </main>
+
     <Footer />
+
     <script>
       import 'htmx.org';
 

diff --git a/src/layouts/MDXLayout.astro b/src/layouts/MDXLayout.astro
@@ -1,16 +1,16 @@
 ---
 import type { MarkdownLayoutProps } from 'astro';
 
-import Container from '../components/layout/Container.astro';
-import PageHeader from '../components/layout/PageHeader.astro';
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
 import Layout from './Layout.astro';
 
 type Props = MarkdownLayoutProps<{
   title: string;
   parentPath?: string;
 }>;
 
-const { frontmatter, url } = Astro.props;
+const { frontmatter } = Astro.props;
 ---
 
 <Layout title={frontmatter.title}>