From 91f8c1834a8609b2d57c4afc94fc93ec38d8f8ca Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Fri, 29 Dec 2023 22:57:30 +0100
Subject: [PATCH] Migrating to iconoir imports

---
 src/components/navbar.astro      | 27 +++++++++++++++------------
 src/components/navbarEntry.astro | 25 ++++++++++++++++++++++---
 src/layouts/Layout.astro         | 28 +++++++++++++++++++++++++---
 static/data/_navdata.json        | 10 +++++-----
 4 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index d4a6971..7c9213f 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -1,6 +1,8 @@
 ---
 import { Image } from 'astro:assets';
 import logo from '../assets/logo.svg'
+import hamburger from 'iconoir/icons/menu.svg'
+const hamburger_src_url = `url("${hamburger.src}")`;
 ---
 
 <header>
@@ -15,11 +17,11 @@ import logo from '../assets/logo.svg'
       <slot />
     </ul>
     <div class="placeholder"></div>
-    <i class="iconoir-menu"></i>
+    <div class="icon"></div>
   </button>
 </header>
 
-<style>
+<style define:vars={{ hamburger_src_url }}>
   header {
     z-index: 1000;
     position: sticky;
@@ -81,16 +83,6 @@ import logo from '../assets/logo.svg'
     height: 64px;
   }
 
-  .mobile > i {
-    position: static;
-    color: white;
-    font-weight: bold;
-    font-size: 2em;
-    align-self: flex-start;
-    padding-right: 1em;
-    padding-top: 1.15rem;
-  }
-
   .mobile > ul {
     display: none;
     padding: 0px;
@@ -113,6 +105,17 @@ import logo from '../assets/logo.svg'
     justify-self: top;
   }
 
+  .icon {
+    mask: var(--hamburger_src_url) no-repeat center;
+    background-color: white;
+    width: 2em;
+    height: 2em;
+    position: static;
+    align-self: flex-start;
+    padding-right: 1em;
+    padding-top: 2.5em;
+  }
+
   @media (min-width: 1140px) {
     .mobile {
       display: none;
diff --git a/src/components/navbarEntry.astro b/src/components/navbarEntry.astro
index 71c8165..c452c47 100644
--- a/src/components/navbarEntry.astro
+++ b/src/components/navbarEntry.astro
@@ -3,7 +3,7 @@ export interface Props {
   currentPage?: string
   link: string
   text: string
-  icon: string
+  icon: ImageMetadata
 }
 
 const { icon, text, link, currentPage } = Astro.props
@@ -17,6 +17,7 @@ if (currentPage === slug) {
   currPage = 'current'
 }
 
+const icon_src_url = `url("${icon.src}")`;
 const fulllink = `/${slug}`
 ---
 
@@ -28,12 +29,12 @@ const fulllink = `/${slug}`
     class={currPage}
     tabindex="0"
   >
-    <i class={icon}></i>
+    <div class="icon"></div>
     {text}
   </a>
 </li>
 
-<style>
+<style define:vars={{ icon_src_url }}>
   li {
     align-items: center;
     justify-content: center;
@@ -41,6 +42,7 @@ const fulllink = `/${slug}`
     display: flex;
     width: 200px;
   }
+
   li > a {
     display: inline-flex;
     color: white;
@@ -52,10 +54,27 @@ const fulllink = `/${slug}`
     font-weight: bold;
     gap: 0.2em;
   }
+
   li > a:hover {
     color: var(--c-purplepink);
   }
+
+  li > a:hover > .icon {
+    background-color: var(--c-purplepink);
+  }
+
   .current {
     color: var(--c-darkpurple) !important;
   }
+
+  .current > .icon {
+    background-color: var(--c-darkpurple) !important;
+  }
+
+  .icon {
+    mask: var(--icon_src_url) no-repeat center;
+    background-color: white;
+    width: 1.4em;
+    height: 1.4em;
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 75ab12e..ec27520 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,7 +3,12 @@ import Navbar from '../components/navbar.astro'
 import NavbarEntry from '../components/navbarEntry.astro'
 import navdata from '../../static/data/_navdata.json'
 import embed from '../assets/embed.png'
-import "iconoir/css/iconoir.css"
+
+import home from 'iconoir/icons/home.svg'
+import servants from 'iconoir/icons/task-list.svg'
+import ta_collection from 'iconoir/icons/database.svg'
+import blog from 'iconoir/icons/bookmark-book.svg'
+import about from 'iconoir/icons/mail.svg'
 
 export interface Props {
   title: string
@@ -11,6 +16,18 @@ export interface Props {
   descriptionOverride?: string
 }
 
+interface IconsLookup {
+  [key: string]: ImageMetadata
+}
+
+const icons: IconsLookup = {
+  home: home,
+  servants: servants,
+  ta_collection: ta_collection,
+  blog: blog,
+  about: about,
+}
+
 const { descriptionOverride, currentpage, title } = Astro.props
 let description
 
@@ -24,9 +41,14 @@ let currPage = 'https://firq.dev/'
 if (currentpage !== 'home') {
   currPage += currentpage
 }
+
+const mapped_navdata = navdata.map((item) => ({
+  ...item,
+  ...{ icon: icons[item.icon] },
+}))
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>{title}</title>
@@ -54,7 +76,7 @@ if (currentpage !== 'home') {
   <body>
     <Navbar>
       {
-        navdata.map((item) => (
+        mapped_navdata.map((item) => (
           <NavbarEntry currentPage={currentpage} {...item} />
         ))
       }
diff --git a/static/data/_navdata.json b/static/data/_navdata.json
index bf03d7f..9397c84 100644
--- a/static/data/_navdata.json
+++ b/static/data/_navdata.json
@@ -2,26 +2,26 @@
 	{
         "link": "/",
         "text": "Home",
-        "icon": "iconoir-home"
+        "icon": "home"
 	},
     {
         "link": "/servants",
         "text": "Servants",
-        "icon": "iconoir-task-list"
+        "icon": "servants"
 	},
     {
         "link": "/ta-collection",
         "text": "TA Collection",
-        "icon": "iconoir-database"
+        "icon": "ta_collection"
 	},
     {
         "link": "/blog",
         "text": "Blog",
-        "icon": "iconoir-bookmark-book"
+        "icon": "blog"
 	},
     {
         "link": "/about",
         "text": "About",
-        "icon": "iconoir-mail"
+        "icon": "about"
 	}
 ]
\ No newline at end of file