From 19325bb610fadbc803a215f23390a4d5cec2297a Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Sun, 6 Aug 2023 10:43:35 -0400
Subject: [PATCH] Refactor navbar

- Added `alt` text to `<img/>` tags.
- No longer using a loop since there are not many entries. This also
  simplifies customizing each item.
---
 _components/navbar.tsx | 58 +++++++++++++++++++++++++++++++-----------
 about.md               |  1 -
 blog/index.tsx         |  1 -
 gpg-key.md             |  1 -
 resume.md              |  1 -
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/_components/navbar.tsx b/_components/navbar.tsx
index 9d8a5ae..de3d498 100644
--- a/_components/navbar.tsx
+++ b/_components/navbar.tsx
@@ -1,6 +1,4 @@
-export default function({ nav }) {
-  const defaultIcon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/question-mark.svg";
-
+export default function() {
   const iconStyle = {
     filter: "var(--filter-green)",
   };
@@ -9,25 +7,55 @@ export default function({ nav }) {
     <nav className="navbar">
       <ul className="navbar-list">
         <li className="navbar-list-item home">
-          <a href="/">
+          <a href="/" title="Home">
             <img
               src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/home.svg"
               className="icon"
               style={iconStyle}
+              alt="home"
+            />
+          </a>
+        </li>
+        <li className="navbar-list-item">
+          <a href="/about" title="About">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/world-www.svg"
+              className="icon"
+              style={iconStyle}
+              alt="about"
+            />
+          </a>
+        </li>
+        <li className="navbar-list-item">
+          <a href="/blog" title="Blog">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/news.svg"
+              className="icon"
+              style={iconStyle}
+              alt="blog"
+            />
+          </a>
+        </li>
+        <li className="navbar-list-item">
+          <a href="/gpg-key" title="GPG Key">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg"
+              className="icon"
+              style={iconStyle}
+              alt="gpg key"
+            />
+          </a>
+        </li>
+        <li className="navbar-list-item">
+          <a href="/resume" title="Resume">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg"
+              className="icon"
+              style={iconStyle}
+              alt="resume"
             />
           </a>
         </li>
-        {nav.menu().children.map(navItem => (
-          <li className="navbar-list-item">
-            <a href={`/${navItem.slug}`} title={navItem.data.title}>
-              <img
-                src={navItem.data.nav_icon || defaultIcon}
-                className="icon"
-                style={iconStyle}
-              />
-            </a>
-          </li>
-        ))}
       </ul>
     </nav>
   );
diff --git a/about.md b/about.md
index a4db918..92f1d21 100644
--- a/about.md
+++ b/about.md
@@ -1,7 +1,6 @@
 ---
 title: About
 description: About this website and credits where credit is due.
-nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/world-www.svg
 ---
 
 ## About this site
diff --git a/blog/index.tsx b/blog/index.tsx
index a1f4923..cabd504 100644
--- a/blog/index.tsx
+++ b/blog/index.tsx
@@ -1,6 +1,5 @@
 export const title = "Blog";
 export const description = "Hello, my friend. Stay a while and listen.";
-export const nav_icon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/news.svg";
 
 export default function({ nav }) {
   const sortPosts = (a,b) => {
diff --git a/gpg-key.md b/gpg-key.md
index d2ea1b0..b8c594c 100644
--- a/gpg-key.md
+++ b/gpg-key.md
@@ -1,7 +1,6 @@
 ---
 title: GPG Key
 description: Information about my public GPG key and how to obtain it.
-nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg
 ---
 
 > I do not use keyservers. This is the only place where I provide my public key. A key claiming to be mine somewhere else is definitely a fake.
diff --git a/resume.md b/resume.md
index 16785b7..66690ab 100644
--- a/resume.md
+++ b/resume.md
@@ -1,7 +1,6 @@
 ---
 title: Resume
 description: My experience, skills, education, etc.
-nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg
 ---
 
 ## Experience