From 9ddd1459d39c8284f60dcbabf636ab178af3bad2 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Sun, 13 Aug 2023 18:05:58 -0700
Subject: [PATCH] chore: refactor nav

---
 src/_includes/icons/coffee.liquid      |  2 +-
 src/_includes/icons/rss.liquid         |  3 ---
 src/_includes/icons/search.liquid      |  3 ---
 src/_includes/icons/tags.liquid        |  3 ---
 src/_includes/icons/webrings.liquid    |  3 ---
 src/_includes/partials/footer.liquid   |  4 ++--
 src/_includes/partials/header.liquid   |  2 +-
 src/_includes/partials/nav.liquid      | 22 ----------------------
 src/_includes/partials/nav/link.liquid | 19 +++++++++++++++++++
 src/_includes/partials/nav/menu.liquid | 22 ++++++++++++++++++++++
 tailwind.css                           | 10 ++--------
 11 files changed, 47 insertions(+), 46 deletions(-)
 delete mode 100644 src/_includes/icons/rss.liquid
 delete mode 100644 src/_includes/icons/search.liquid
 delete mode 100644 src/_includes/icons/tags.liquid
 delete mode 100644 src/_includes/icons/webrings.liquid
 delete mode 100644 src/_includes/partials/nav.liquid
 create mode 100644 src/_includes/partials/nav/link.liquid
 create mode 100644 src/_includes/partials/nav/menu.liquid

diff --git a/src/_includes/icons/coffee.liquid b/src/_includes/icons/coffee.liquid
index 503b6177..56f4ac77 100644
--- a/src/_includes/icons/coffee.liquid
+++ b/src/_includes/icons/coffee.liquid
@@ -1,5 +1,5 @@
 <a
-  class="link--icon  icon--24"
+  class="link--icon icon--24"
   href="https://www.buymeacoffee.com/cory"
   rel="me"
   title="Buy Me a Coffee">
diff --git a/src/_includes/icons/rss.liquid b/src/_includes/icons/rss.liquid
deleted file mode 100644
index 330fc7ab..00000000
--- a/src/_includes/icons/rss.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="/feeds" title="RSS" class="link--icon icon--24{% if page.url == '/feeds/' %} active{% endif %}">
-  {% tablericon "rss" "RSS" %}
-</a>
\ No newline at end of file
diff --git a/src/_includes/icons/search.liquid b/src/_includes/icons/search.liquid
deleted file mode 100644
index 0b8f6040..00000000
--- a/src/_includes/icons/search.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="/search" title="Search posts" class="link--icon icon--24{% if page.url == '/search/' %} active{% endif %}">
-  {% tablericon "search" "Search posts" %}
-</a>
\ No newline at end of file
diff --git a/src/_includes/icons/tags.liquid b/src/_includes/icons/tags.liquid
deleted file mode 100644
index e6bcac54..00000000
--- a/src/_includes/icons/tags.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="/tags" title="Post tags" class="link--icon icon--24{% if page.url == '/tags/' %} active{% endif %}">
-  {% tablericon "tag" "Post tags" %}
-</a>
\ No newline at end of file
diff --git a/src/_includes/icons/webrings.liquid b/src/_includes/icons/webrings.liquid
deleted file mode 100644
index 9ba12be3..00000000
--- a/src/_includes/icons/webrings.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="/webrings" title="RSS" class="link--icon icon--24{% if page.url == '/webrings/' %} active{% endif %}">
-  {% tablericon "heart-handshake" "Webrings" %}
-</a>
\ No newline at end of file
diff --git a/src/_includes/partials/footer.liquid b/src/_includes/partials/footer.liquid
index a75c580c..a8531c89 100644
--- a/src/_includes/partials/footer.liquid
+++ b/src/_includes/partials/footer.liquid
@@ -11,7 +11,7 @@
     {% render "icons/coffee.liquid" %}
   </div>
   <div class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">
-    <a class="text-gray-700 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a> •
-    <a class="text-gray-700  dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
+    {% render "partials/nav/link.liquid", page: page, link: "Uses" %} •
+    {% render "partials/nav/link.liquid", page: page, link: "Referrals" %}
   </div>
 </footer>
diff --git a/src/_includes/partials/header.liquid b/src/_includes/partials/header.liquid
index d5a88d7a..1772edb5 100644
--- a/src/_includes/partials/header.liquid
+++ b/src/_includes/partials/header.liquid
@@ -2,5 +2,5 @@
   <h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0">
     <a class="text-gray-700 dark:text-gray-200" href="/">{{ site.title }}</a>
   </h1>
-  {% render "partials/nav.liquid", page: page %}
+  {% render "partials/nav/menu.liquid", page: page %}
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/nav.liquid b/src/_includes/partials/nav.liquid
deleted file mode 100644
index 00c55108..00000000
--- a/src/_includes/partials/nav.liquid
+++ /dev/null
@@ -1,22 +0,0 @@
-<nav>
-  <ul class="flex">
-    <li class="mr-6">
-      <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 !no-underline{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
-    </li>
-    <li class="mr-6">
-      <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 !no-underline{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
-    </li>
-    <li class="mr-6">
-      {% render "icons/tags.liquid", page: page %}
-    </li>
-    <li class="mr-6 client-side">
-      {% render "icons/search.liquid", page: page %}
-    </li>
-    <li class="mr-6">
-      {% render "icons/rss.liquid", page: page %}
-    </li>
-    <li>
-      {% render "icons/webrings.liquid", page: page %}
-    </li>
-  </ul>
-</nav>
\ No newline at end of file
diff --git a/src/_includes/partials/nav/link.liquid b/src/_includes/partials/nav/link.liquid
new file mode 100644
index 00000000..c7be742b
--- /dev/null
+++ b/src/_includes/partials/nav/link.liquid
@@ -0,0 +1,19 @@
+{%- capture pageUrl %}/{{ link | downcase }}/{% endcapture -%}
+{% if page.url != pageUrl %}
+  <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 !no-underline" href="/{{ link | downcase }}">
+    {% if icon %}
+      {% tablericon icon link %}
+    {% else %}
+      {{ link }}
+    {% endif %}
+  </a>
+{% endif %}
+{% if page.url == pageUrl %}
+  <span class="cursor-not-allowed active">
+    {% if icon %}
+      {% tablericon icon link %}
+    {% else %}
+      {{ link }}
+    {% endif %}
+  </span>
+{% endif %}
\ No newline at end of file
diff --git a/src/_includes/partials/nav/menu.liquid b/src/_includes/partials/nav/menu.liquid
new file mode 100644
index 00000000..9f9a8fef
--- /dev/null
+++ b/src/_includes/partials/nav/menu.liquid
@@ -0,0 +1,22 @@
+<nav>
+  <ul class="flex">
+    <li class="mr-6">
+      {% render "partials/nav/link.liquid", page: page, link: "Now" %}
+    </li>
+    <li class="mr-6">
+      {% render "partials/nav/link.liquid", page: page, link: "About" %}
+    </li>
+    <li class="mr-6">
+      {% render "partials/nav/link.liquid", page: page, link: "Tags", icon: "tag" %}
+    </li>
+    <li class="mr-6 client-side">
+      {% render "partials/nav/link.liquid", page: page, link: "Search", icon: "search" %}
+    </li>
+    <li class="mr-6">
+      {% render "partials/nav/link.liquid", page: page, link: "Feeds", icon: "rss" %}
+    </li>
+    <li>
+      {% render "partials/nav/link.liquid", page: page, link: "Webrings", icon: "heart-handshake" %}
+    </li>
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/tailwind.css b/tailwind.css
index 0d9963b2..02516002 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -18,13 +18,7 @@
 
 .active,
 .active svg {
-  color: theme(colors.purple.600) !important;
-}
-
-.active:hover,
-.active:active,
-.active:focus {
-  color: theme(colors.purple.500) !important;
+  color: theme(colors.pink.500) !important;
 }
 
 .header-anchor {
@@ -156,7 +150,7 @@ code[class*=language-], pre[class*=language-] {
 @media (prefers-color-scheme: dark) {
   .active,
   .active svg {
-    color: theme(colors.purple.400) !important;
+    color: theme(colors.pink.500) !important;
   }
 
   a,