Update permalinks for blog pages

_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

_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>

_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,20 +26,26 @@
     </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"
               aria-haspopup="true"
               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");

_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>

_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>
 

author_generator.py

@@ -31,6 +31,7 @@
 layout: author
 author: {key}
 title: "Author: {authors[key]['name']}"
+permalink: /blog/authors/{key.replace(' ', '_')}/
 ---
 
 """

authors/brent_moran.md

@@ -2,5 +2,6 @@
 layout: author
 author: brent_moran
 title: "Author: Brent Moran"
+permalink: /blog/authors/brent_moran/
 ---
 

authors/kriti_godey.md

@@ -2,5 +2,6 @@
 layout: author
 author: kriti_godey
 title: "Author: Kriti Godey"
+permalink: /blog/authors/kriti_godey/
 ---
 

authors/sean_colsen.md

@@ -2,5 +2,6 @@
 layout: author
 author: sean_colsen
 title: "Author: Sean Colsen"
+permalink: /blog/authors/sean_colsen/
 ---
 

blog.md

@@ -2,6 +2,7 @@
 layout: blog
 title: Blog - Mathesar
 description: Mathesar blog posts
+permalink: /blog/
 ---
 
 {% capture header %}

tag/announcement.md

@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: announcement"
 tag: announcement
 robots: noindex
+permalink: /blog/tag/announcement/
 ---

tag/mathesar.md

@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: mathesar"
 tag: mathesar
 robots: noindex
+permalink: /blog/tag/mathesar/
 ---

tag/release.md

@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: release"
 tag: release
 robots: noindex
+permalink: /blog/tag/release/
 ---

tag/test.md

@@ -3,4 +3,5 @@ layout: tagpage
 title: "Tag: test"
 tag: test
 robots: noindex
+permalink: /blog/tag/test/
 ---

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__())
+    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))