From e6921844e4847426b2e058746f72a8996e7fc19b Mon Sep 17 00:00:00 2001
From: Ghislaine Guerin <me@ghislaineguerin.com>
Date: Wed, 14 Feb 2024 17:39:40 -0300
Subject: [PATCH] Update permalinks for blog pages

---
 _config.yml               |  1 +
 _includes/blog_card.html  |  2 +-
 _includes/navigation.html | 91 ++++++++++++++++++++++++++++-----------
 _includes/tag_cloud.html  |  2 +-
 _layouts/post.html        |  2 +-
 author_generator.py       |  1 +
 authors/brent_moran.md    |  1 +
 authors/kriti_godey.md    |  1 +
 authors/sean_colsen.md    |  1 +
 blog.md                   |  1 +
 tag/announcement.md       |  1 +
 tag/mathesar.md           |  1 +
 tag/release.md            |  1 +
 tag/test.md               |  1 +
 tag_generator.py          | 17 +++++---
 15 files changed, 92 insertions(+), 32 deletions(-)

diff --git a/_config.yml b/_config.yml
index e9e32108..e46c2f27 100644
--- a/_config.yml
+++ b/_config.yml
@@ -34,6 +34,7 @@ baseurl: ""
 url: "https://mathesar.org" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: mathesar_org
 github_username:  mathesar
+permalink: /blog/:categories/:year/:month/:day/:title:output_ext
 
 # Build settings
 theme: minima
diff --git a/_includes/blog_card.html b/_includes/blog_card.html
index 7ceaa2a6..87d26265 100644
--- a/_includes/blog_card.html
+++ b/_includes/blog_card.html
@@ -13,7 +13,7 @@
     </h2>
     <p class="text-gray-500 text-sm">
       Posted on {{ include.post.date | date_to_string }} by 
-      <a class="font-bold" href="/authors/{{ include.post.author }}">
+      <a class="font-bold" href="/blog/authors/{{ include.post.author }}">
       {{author.name }}
       </a>
     </p>
diff --git a/_includes/navigation.html b/_includes/navigation.html
index e035da86..4d5d694d 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -2,7 +2,11 @@
   <div class="max-w-screen-xl mx-auto space-y-4">
     <div class="flex items-center justify-between">
       <a href="{{ 'index.html' | relative_url }}">
-        <img class="w-40 lg:w-56" src="{{ '/assets/logo.svg' | relative_url }}" alt="Mathesar's Logo" />
+        <img
+          class="w-40 lg:w-56"
+          src="{{ '/assets/logo.svg' | relative_url }}"
+          alt="Mathesar's Logo"
+        />
       </a>
       <a
         href="https://github.com/centerofci/mathesar"
@@ -22,12 +26,14 @@
     </div>
     <div>
       <nav
-        class="items-center text-lg hidden lg:flex"
+        class="items-center text-lg hidden lg:flex navigation"
         role="navigation"
         aria-label="Main Navigation"
       >
         <div class="space-x-6 flex items-center">
-          <a class="navigation-item" href="{{ 'about.html' | relative_url }}">About Us</a>
+          <a class="navigation-item" href="{{ 'about.html' | relative_url }}"
+            >About Us</a
+          >
           <div class="dropdown relative navigation-item">
             <button
               class="flex items-center"
@@ -35,7 +41,11 @@
               aria-expanded="false"
               aria-label="How it works"
             >
-              How it Works <img src="{{ '/assets/dropdown-arrow.svg' | relative_url }}" alt="" />
+              How it Works
+              <img
+                src="{{ '/assets/dropdown-arrow.svg' | relative_url }}"
+                alt=""
+              />
             </button>
             <div
               class="hidden absolute bg-white border mt-1 p-2 rounded shadow-md z-10"
@@ -50,15 +60,16 @@
                 href="{{ 'non-technical-expert.html' | relative_url }}"
                 >Non-Technical Expert</a
               >
-              <a class="whitespace-nowrap hover:underline" href="{{ 'faq.html' | relative_url }}"
+              <a
+                class="whitespace-nowrap hover:underline"
+                href="{{ 'faq.html' | relative_url }}"
                 >FAQ</a
               >
             </div>
           </div>
           <a
             class="navigation-item"
-            href="{{ 'blog.html' | relative_url }}"
-            target="_blank"
+            href="{{ 'blog' | relative_url }}"
             aria-label="Blog"
           >
             <span>Blog</span>
@@ -86,7 +97,11 @@
               aria-expanded="false"
               aria-label="How it works"
             >
-              Community <img src="{{ '/assets/dropdown-arrow.svg' | relative_url }}" alt="" />
+              Community
+              <img
+                src="{{ '/assets/dropdown-arrow.svg' | relative_url }}"
+                alt=""
+              />
             </button>
             <div
               class="hidden absolute bg-white border mt-1 p-2 rounded shadow-md z-50"
@@ -141,12 +156,18 @@
               </a>
             </div>
           </div>
-          <a class="navigation-item" href="{{ 'sponsor.html' | relative_url }}" aria-label="Sponsor">
+          <a
+            class="navigation-item"
+            href="{{ 'sponsor.html' | relative_url }}"
+            aria-label="Sponsor"
+          >
             <span>Sponsor</span>
           </a>
         </div>
         <div class="ml-auto">
-          <a class="navigation-item font-semibold" href="{{ 'free-install.html' | relative_url }}"
+          <a
+            class="navigation-item font-semibold"
+            href="{{ 'free-install.html' | relative_url }}"
             >Request Free Installation</a
           >
         </div>
@@ -155,13 +176,17 @@
       <div class="lg:hidden">
         <div class="dropdown relative navigation-item">
           <button class="flex items-center w-full">
-            Menu <img src="{{ '/assets/dropdown-arrow.svg' | relative_url }}" alt="" />
+            Menu
+            <img
+              src="{{ '/assets/dropdown-arrow.svg' | relative_url }}"
+              alt=""
+            />
           </button>
           <div
             class="hidden absolute grid bg-white border w-full mt-1 p-2 rounded shadow-md z-50"
           >
             <a
-              class="text-lg whitespace-nowrap hover:underline"
+              class="text-lg whitespace-nowrap hover:underline "
               href="{{ 'index.html' | relative_url }}"
               >Home</a
             >
@@ -188,7 +213,7 @@
             >
             <a
               class="text-lg whitespace-nowrap hover:underline"
-              href="{{ 'blog.html' | relative_url }}"
+              href="{{ 'blog' | relative_url }}"
               >Blog</a
             >
             <a
@@ -280,21 +305,39 @@
       }
     });
 
-    var navigationItems = document.querySelectorAll(".navigation-item");
+    document.addEventListener("DOMContentLoaded", function () {
+      var navigationItems = document.querySelectorAll(".navigation a");
 
-    navigationItems.forEach(function (navigationItem) {
-      if (navigationItem.href == window.location.href) {
-        navigationItem.classList.add("font-bold");
-      }
-    });
+      navigationItems.forEach(function (navigationItem) {
+        var navHref = navigationItem.getAttribute("href") || "";
+        var locationPath = window.location.pathname;
 
-    var dropdownLinks = document.querySelectorAll(".dropdown a");
-    dropdownLinks.forEach(function (dropdownLink) {
-      if (dropdownLink.href == window.location.href) {
-        dropdownLink.classList.add("font-bold");
-      }
+        navHref = navHref.endsWith("/") ? navHref.slice(0, -1) : navHref;
+        locationPath = locationPath.endsWith("/")
+          ? locationPath.slice(0, -1)
+          : locationPath;
+
+        if (navHref === "." && locationPath === "") navHref = "/";
+
+        var isBlogPage =
+          locationPath.includes("/blog") && navHref.includes("blog");
+
+        if (navHref === locationPath || isBlogPage) {
+          navigationItem.classList.add("font-bold");
+          //look at the parent divs unitl we find the dropdown
+          var parent = navigationItem.parentElement;
+          while (parent) {
+            if (parent.classList.contains("dropdown")) {
+              parent.querySelector("button").classList.add("font-bold");
+              break;
+            }
+            parent = parent.parentElement;
+          }
+        }
+      });
     });
 
+
     function toggleDropdown() {
       var dropdownMenu = this.nextElementSibling;
       dropdownMenu.classList.toggle("hidden");
diff --git a/_includes/tag_cloud.html b/_includes/tag_cloud.html
index 0629f86d..8582c4cb 100644
--- a/_includes/tag_cloud.html
+++ b/_includes/tag_cloud.html
@@ -3,7 +3,7 @@
     <ul class="flex items-center flex-wrap gap-1">
       {% for tag in site.tags %}
         <li class="tag-item">
-          <a href="{{ '/tag/' | append: tag[0] | relative_url }}" class="bg-red-500 bg-opacity-80 text-white rounded px-1 cursor-pointer text-sm hover:bg-blue-600">
+          <a href="{{ '/blog/tag/' | append: tag[0] | relative_url }}" class="bg-red-500 bg-opacity-80 text-white rounded px-1 cursor-pointer text-sm hover:bg-blue-600">
             {{ tag[0] }}
           </a>
         </li>
diff --git a/_layouts/post.html b/_layouts/post.html
index 9912bdd5..269505cf 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -13,7 +13,7 @@
           <h1 class="text-5xl font-semibold">{{ page.title }}</h1>
           <p class="text-gray-600 text-sm">
             Posted on {{ page.date | date_to_string }} by 
-            <a class="font-bold" href="/authors/{{ page.author }}">{{ author.name }}</a>
+            <a class="font-bold" href="/blog/authors/{{ page.author }}">{{ author.name }}</a>
             
           </p>
 
diff --git a/author_generator.py b/author_generator.py
index 3f2407d5..4de50966 100644
--- a/author_generator.py
+++ b/author_generator.py
@@ -31,6 +31,7 @@
 layout: author
 author: {key}
 title: "Author: {authors[key]['name']}"
+permalink: /blog/authors/{key.replace(' ', '_')}/
 ---
 
 """
diff --git a/authors/brent_moran.md b/authors/brent_moran.md
index 7f028be9..cb81d749 100644
--- a/authors/brent_moran.md
+++ b/authors/brent_moran.md
@@ -2,5 +2,6 @@
 layout: author
 author: brent_moran
 title: "Author: Brent Moran"
+permalink: /blog/authors/brent_moran/
 ---
 
diff --git a/authors/kriti_godey.md b/authors/kriti_godey.md
index d202ef6f..3c5817a5 100644
--- a/authors/kriti_godey.md
+++ b/authors/kriti_godey.md
@@ -2,5 +2,6 @@
 layout: author
 author: kriti_godey
 title: "Author: Kriti Godey"
+permalink: /blog/authors/kriti_godey/
 ---
 
diff --git a/authors/sean_colsen.md b/authors/sean_colsen.md
index eed67df2..2600e07f 100644
--- a/authors/sean_colsen.md
+++ b/authors/sean_colsen.md
@@ -2,5 +2,6 @@
 layout: author
 author: sean_colsen
 title: "Author: Sean Colsen"
+permalink: /blog/authors/sean_colsen/
 ---
 
diff --git a/blog.md b/blog.md
index dfe1e56a..a580f092 100644
--- a/blog.md
+++ b/blog.md
@@ -2,6 +2,7 @@
 layout: blog
 title: Blog - Mathesar
 description: Mathesar blog posts
+permalink: /blog/
 ---
 
 {% capture header %}
diff --git a/tag/announcement.md b/tag/announcement.md
index 4b3d58f8..2934e800 100644
--- a/tag/announcement.md
+++ b/tag/announcement.md
@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: announcement"
 tag: announcement
 robots: noindex
+permalink: /blog/tag/announcement/
 ---
diff --git a/tag/mathesar.md b/tag/mathesar.md
index 5fb42e59..2d74fddb 100644
--- a/tag/mathesar.md
+++ b/tag/mathesar.md
@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: mathesar"
 tag: mathesar
 robots: noindex
+permalink: /blog/tag/mathesar/
 ---
diff --git a/tag/release.md b/tag/release.md
index daf46a06..be2c3ee8 100644
--- a/tag/release.md
+++ b/tag/release.md
@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: release"
 tag: release
 robots: noindex
+permalink: /blog/tag/release/
 ---
diff --git a/tag/test.md b/tag/test.md
index 56eb7a35..490477a7 100644
--- a/tag/test.md
+++ b/tag/test.md
@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: test"
 tag: test
 robots: noindex
+permalink: /blog/tag/test/
 ---
diff --git a/tag_generator.py b/tag_generator.py
index d561e3c2..644a73c2 100644
--- a/tag_generator.py
+++ b/tag_generator.py
@@ -55,8 +55,15 @@
 
 for tag in total_tags:
     tag_filename = tag_dir + tag.replace(' ', '_') + '.md'
-    f = open(tag_filename, 'a')
-    write_str = '---\nlayout: tagpage\ntitle: \"Tag: ' + tag + '\"\ntag: ' + tag + '\nrobots: noindex\n---\n'
-    f.write(write_str)
-    f.close()
-print("Tags generated, count", total_tags.__len__())
\ No newline at end of file
+    with open(tag_filename, 'w') as f:  # Changed to 'w' to overwrite existing or write new
+        write_str = '''---
+layout: tagpage
+title: "Tag: {tag}"
+tag: {tag}
+robots: noindex
+permalink: /blog/tag/{permalink}/
+---
+'''.format(tag=tag, permalink=tag.replace(' ', '_').lower())
+        f.write(write_str)
+
+print("Tags generated, count", len(total_tags))
\ No newline at end of file