blog post filtering made functional

content/blog/2018/10/post-1/index.md

@@ -4,6 +4,8 @@ description: "The UNIQUE description for Post 1." # Quotation marks allow colons
 date: 2018-10-17T14:40:00-05:00
 updated: 2019-04-11T20:33:00-05:00 # Comment-out this line with a # if content is unchanged
 draft: false # Make it "true" if you don't want Zola to "publish" yet
+taxonomies:
+  categories: ["Community"]
 extra:
   subtitle: "The UNIQUE Post 1 subtitle" # Quotation marks allow colons, semicolons, etc.
   author: "Your name goes here"

content/blog/2018/10/post-2/index.md

@@ -4,6 +4,8 @@ description: "The UNIQUE description for Post 2." # Quotation marks allow colons
 date: 2018-10-25T07:40:00-05:00
 updated: 2020-06-13T13:10:00-05:00
 draft: false # Make it "true" if you don't want Zola to "publish" yet
+taxonomies:
+  categories: ["Use Cases"]
 extra:
   subtitle: "The UNIQUE Post 2 subtitle" # Quotation marks allow colons, semicolons, etc.
   author: Your name goes here

content/blog/featured/_index.md

@@ -1,6 +1,6 @@
 +++
 title = "Bridges Connecting the ThreeFold Ecosystem to External Networks"
-description = "Since the launch of ThreeFold Grid 3.0, TFT is now available on three blockchains – Stellar, Binance Smart Chain and the Substrate-based ThreeFold Blockchain (aka TF Chain)."
+description = "Sinces the launch of ThreeFold Grid 3.0, TFT is now available on three blockchains – Stellar, Binance Smart Chain and the Substrate-based ThreeFold Blockchain (aka TF Chain)."
 date = 2018-10-17T19:40:00.000Z
 updated = 2019-04-12T01:33:00.000Z
 draft = false
@@ -9,7 +9,7 @@ draft = false
 categories=["Engineering"]
 
 [extra]
-subtitle = "The UNIQUE Post 1 subtitle"
+subtitle = "The UNIQUE Post 1 subtitles"
 author = "HANNAH CORDES"
 imgPath = "images/sphere-thing.png"
 date = 2018-10-17T19:40:00.000Z

templates/partials/blogPosts.html

@@ -1,13 +1,14 @@
-<script>
-  var category = window.location.pathname.split("/")[1];
-  console.log("logging", category);
-</script>
-
 <div class="font-sans text-center px-0 w-full md:w-2/3 lg:w-2/3 mx-auto">
   <h1
     class="tracking-tight pt-12 lg:pt-24 2xl:pt-32 text-5xl text-left text-5xl fw-500 leading-snug font-normal mb-10"
   >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
     The Latest from ThreeFold   
+    {% if taxonomy == "categories" %} - 
+            {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
   </h1>
   <div>
     <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">

templates/partials/blogSidebar.html

@@ -2,17 +2,17 @@
 <div clas="flex flex-col">
     <div class="lg:pt-24 flex flex-col mb-12 mr-24">
         <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4>
-        <a class="mb-3" href="">All</a>
+        <a class="mb-3" href="/blog">All</a>
-        <a class="mb-3" href="">Engineering</a>
+        <a class="mb-3" href="/categories/engineering">Engineering</a>
-        <a class="mb-3" href="">Community</a>
+        <a class="mb-3" href="/categories/community">Community</a>
-        <a class="mb-3" href="">Use Cases</a>
+        <a class="mb-3" href="/categories/use-cases">Use Cases</a>
     </div>
     
     <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-24">
         <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> POPULAR POSTS</h4>
         <a class="mb-3 text-blue-700" href="">NEAR Launches Nightshade Sharding, Paving the Way for Mass Adoption</a>
-        <a class="mb-3" href="">Engineering</a>
+        <a class="mb-3" href="/categories/engineering">Engineering</a>
-        <a class="mb-3" href="">Community</a>
+        <a class="mb-3" href="/categories/community">Community</a>
         <a class="mb-3" href="">Use Cases</a>
     </div>
 </div>

templates/partials/header.html

@@ -21,7 +21,7 @@
     }
 
     function hideMenu() {
-        document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1";
+        document.getElementById('learn').className = "hidden absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1";
     }
 
     window.onload = function(){
@@ -103,7 +103,7 @@
               To: "opacity-0 -translate-y-1"
               md:block or hidden
           -->
-          <div id="learn" class="opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
+          <div id="learn" class="hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
             <div class="bg-semi-white">
               <div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
                 <div href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
@@ -351,7 +351,7 @@
               From: "opacity-100 scale-100"
               To: "opacity-0 scale-95"
           -->
-          <div class="absolute z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
+          <div class="hidden absolute z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
             <div class="rounded-lg shadow-lg">
               <div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
                 <div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">