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

@@ -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>
   );

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

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) => {

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.

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