modify products

config.toml

@@ -60,6 +60,12 @@ feed = true
 paginate_by = 2
 paginate_path = "blog-posts"
 
+[[taxonomies]]
+name = "items"
+feed = true
+paginate_by = 2
+paginate_path = "product-posts"
+
 [[taxonomies]]
 name = "roles"
 feed = true

content/products/realizing_the_promise/index.md

@@ -4,7 +4,7 @@ description: "Together with our global community, we're realizing the initial pr
 date: 2022-03-21T14:40:00-05:00
 template: blogPage.html
 taxonomies:
-  categories: ["product1"]
+  items: ["product1"]
 extra:
   subtitle: "Together with our global community, we're realizing the initial promise of an open-source, peer-to-peer Internet owned by the people."
   author: "Sacha Obeegadoo"

content/products/tech_as_a_tool_for_humanity/index.md

@@ -6,7 +6,7 @@ description: While technology has had an important role in the creation of today
 date: 2022-10-28
 taxonomies:
   tags: []
-  categories: [product4]
+  items: [product4]
 extra:
   author: victoria_obeegadoo
   imgPath: tech_as_a_tool_for_humanity.png

content/products/what_is_farming/index.md

@@ -6,7 +6,7 @@ description: A decentralized and energy-efficient way for people to expand a new
 date: 2022-03-01
 taxonomies:
     tags: []
-    categories: [product2]
+    items: [product2]
 extra:
     author: sacha_obeegadoo
     imgPath: what_is_farming.png

content/products/what_is_peer_to_peer/index.md

@@ -6,7 +6,7 @@ description: P2P systems are network, not linear or pyramidal hierarchies (tho
 date: 2020-12-15
 taxonomies:
     tags: []
-    categories: [product3]
+    items: [product3]
 extra:
     author: sacha_obeegadoo
     imgPath: peer_to_peer.png

static/js/custom.js

@@ -0,0 +1,110 @@
+var displayedMenu = "";
+var hamburgerShown = false;
+let width = screen.width;
+var isMobile = width < 1024;
+
+function toggleMenu(button) {
+  if (displayedMenu === button.id.split("-")[0]) {
+    button.className = button.className.replace(
+      " text-blue-500 bg-stone-200 sm:bg-transparent",
+      " text-gray-900"
+    );
+    hideMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
+      "rotate-0",
+      "-rotate-90"
+    );
+    displayedMenu = "";
+  } else {
+    showMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
+      "-rotate-90",
+      "rotate-0"
+    );
+    button.className = button.className.replace(
+      " text-gray-900",
+      " text-blue-500 bg-stone-200 sm:bg-transparent"
+    );
+    displayedMenu = button.id.split("-")[0];
+  }
+}
+
+function handleClick(button) {
+  if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
+    toggleHamburger();
+  }
+  if (button.id.indexOf("menu") !== -1) {
+    toggleMenu(button);
+  }
+}
+
+function toggleHamburger() {
+  if (hamburgerShown) {
+    hideHamburger();
+    hamburgerShown = false;
+  } else {
+    showHamburger();
+    hamburgerShown = true;
+  }
+}
+
+function showMenu(menuName) {
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuElement = document.getElementById(menuId);
+  menuElement.className = menuElement.className.replace(" hidden", "");
+  setTimeout(function () {
+    menuElement.className = menuElement.className.replace(
+      "duration-200 ease-in opacity-0 -translate-y-1",
+      "duration-150 ease-out opacity-1 -translate-y-0"
+    );
+  }, 10);
+}
+
+function hideMenu(menuName) {
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuElement = document.getElementById(menuId);
+  menuElement.className = menuElement.className.replace(
+    "duration-150 ease-out opacity-1 -translate-y-0",
+    "duration-200 ease-in opacity-0 -translate-y-1"
+  );
+  setTimeout(function () {
+    menuElement.className = menuElement.className + " hidden";
+  }, 300);
+}
+
+function showHamburger() {
+  document.getElementById("header-container").className = "overflow-hidden";
+  document.getElementById("hamburger").className =
+    "fixed mt-24 z-20 top-0 inset-x-0 transition transform origin-top-right";
+  document.getElementById("hamburger-btn").className =
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  document.getElementById("close-hamburger-btn").className =
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+}
+
+function hideHamburger() {
+  document.getElementById("header-container").className = "";
+  document.getElementById("hamburger").className =
+    "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
+  document.getElementById("hamburger-btn").className =
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  document.getElementById("close-hamburger-btn").className =
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  if (displayedMenu !== "") {
+    hideMenu(displayedMenu);
+  }
+}
+
+window.onload = function () {
+  let elements = document.getElementsByTagName("button");
+  let buttons = [...elements];
+  buttons.forEach((button) => {
+    button.addEventListener("click", function () {
+      handleClick(button);
+    });
+  });
+  document
+    .getElementById("mobile-learn-btn")
+    ?.addEventListener("click", toggleMenu);
+};

templates/_default/base.html

@@ -9,5 +9,6 @@
             {% block content %}{% endblock %}    
         </div>
         {% include "partials/footer.html" %}
+        <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
     </body>
 </html>

templates/items/list.html

@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}

templates/items/single.html

@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+

templates/layouts/products.html

@@ -11,7 +11,7 @@ and a side nav for category and featured post navigation
 <main>
 
     <!--sets global featured variable as the most recent post with the isFeatured tag-->
-    {%- set section = get_section(path="blog/_index.md") %}
+    {%- set section = get_section(path="products/_index.md") %}
     {% for page in section.pages %}
     {% if page.extra.isFeatured %}
         {%- set_global featured = page %}
@@ -19,11 +19,11 @@ and a side nav for category and featured post navigation
     {% endif %}
     {% endfor %}
     
-    {% include "partials/featuredBlog.html" %}
+    {% include "partials/featuredProduct.html" %}
 
     <div class="flex flex-col md:flex-row container mx-auto">
-        {% include "partials/blogPosts.html" %}
-        {% include "partials/blogSidebar.html" %}
+        {% include "partials/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
     </div>
  </main> 
  

templates/partials/featuredProduct.html

@@ -0,0 +1,36 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED PRODUCT</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>

templates/partials/header.html

@@ -3,87 +3,6 @@
   Read the documentation to get started: https://tailwindui.com/documentation
 --><!-- This example requires Tailwind CSS v1.4.0+ -->
 
-<script type="text/javascript">
-    
-    var displayedMenu = "";
-    var hamburgerShown = false;
-    let width = screen.width;
-    var isMobile = width < 1024;
-
-    function toggleMenu(button) {
-        if (displayedMenu === button.id.split("-")[0]) { 
-            button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
-            hideMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
-            displayedMenu = "";
-        }
-        else { 
-            showMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
-            button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
-            displayedMenu = button.id.split("-")[0]
-        }
-    }
-
-    function handleClick(button) {
-        if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
-        if (button.id.indexOf("menu") !== -1 ) { 
-            toggleMenu(button) 
-        }
-    }
-
-    function toggleHamburger() {
-        if (hamburgerShown) { 
-            hideHamburger();
-            hamburgerShown = false;
-        }
-        else { 
-            showHamburger();
-            hamburgerShown = true;
-        }
-    }
-
-    function showMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace(" hidden" , "");
-        setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
-    }
-
-    function hideMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
-        setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
-    }
-
-    function showHamburger() {
-        document.getElementById('header-container').className = "overflow-hidden";
-        document.getElementById('hamburger').className = "fixed mt-24 z-20 top-0 inset-x-0 transition transform origin-top-right";
-        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-    }
-
-    function hideHamburger() {
-        document.getElementById('header-container').className = "";
-        document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        if (displayedMenu !== "") { hideMenu(displayedMenu); }
-    }
-
-    window.onload = function(){
-        let elements = document.getElementsByTagName("button");
-        let buttons = [...elements]
-        buttons.forEach((button) => {
-            button.addEventListener( 'click', function() { handleClick(button) });
-        })
-        document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
-    }
-
-</script>
-
 
 <!-- set variables used for header template -->
 {% set section = get_section(path="_index.md") %}

templates/partials/header_custom.html

@@ -3,87 +3,6 @@
   Read the documentation to get started: https://tailwindui.com/documentation
 --><!-- This example requires Tailwind CSS v1.4.0+ -->
 
-<script type="text/javascript">
-    
-    var displayedMenu = "";
-    var hamburgerShown = false;
-    let width = screen.width;
-    var isMobile = width < 1024;
-
-    function toggleMenu(button) {
-        if (displayedMenu === button.id.split("-")[0]) { 
-            button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
-            hideMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
-            displayedMenu = "";
-        }
-        else { 
-            showMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
-            button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
-            displayedMenu = button.id.split("-")[0]
-        }
-    }
-
-    function handleClick(button) {
-        if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
-        if (button.id.indexOf("menu") !== -1 ) { 
-            toggleMenu(button) 
-        }
-    }
-
-    function toggleHamburger() {
-        if (hamburgerShown) { 
-            hideHamburger();
-            hamburgerShown = false;
-        }
-        else { 
-            showHamburger();
-            hamburgerShown = true;
-        }
-    }
-
-    function showMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace(" hidden" , "");
-        setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
-    }
-
-    function hideMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
-        setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
-    }
-
-    function showHamburger() {
-        document.getElementById('header-container').className = "overflow-hidden";
-        document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
-        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-    }
-
-    function hideHamburger() {
-        document.getElementById('header-container').className = "";
-        document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        if (displayedMenu !== "") { hideMenu(displayedMenu); }
-    }
-
-    window.onload = function(){
-        let elements = document.getElementsByTagName("button");
-        let buttons = [...elements]
-        buttons.forEach((button) => {
-            button.addEventListener( 'click', function() { handleClick(button) });
-        })
-        document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
-    }
-
-</script>
-
 {%- set section = get_section(path="header/_index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}
 

templates/partials/productCard.html

@@ -0,0 +1,75 @@
+{% if post.date %}
+{% if post.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1 border-b">
+    <a href="{{ post.permalink }}" class="block">
+        {% if post.extra.imgPath %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
+      <div class="flex-shrink-0">
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      {%endif%}
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-700 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-700 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
+          </div>
+        </div>
+    </a>
+  </div>
+
+</div>
+</div>
+
+<style>
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
+</style>
+{% endif %}

templates/partials/productPosts.html

@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set item = path_array[2] %}
+    The Latest from OurPhone   
+    {% if taxonomy == "items" %} - 
+        {{item | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+          {% if not post.extra.hidden %}
+            {% include "partials/productCard.html" %} 
+         {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/productSidebar.html

@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER PRODUCTS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/products">All</a>
+        {% set taxonomy = get_taxonomy(kind="items") %}
+        {% set items = taxonomy.items %}
+        {% for item in items %}
+            {% set path = item.name | slugify %}
+            {% set fullpath = "/items/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{item.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="products/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED POSTS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveProduct() {
+        let activeProduct = window.location.pathname.split("/")[2]    
+        if (typeof activeProduct === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeProduct)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveProduct()
+</script>

templates/productPage.html

@@ -12,12 +12,12 @@
 
 <!-- Default page template for blog posts and basic informative markdown files -->
 
-{% set split = page.content | split(pat="threefold.io") %}
+{% set split = page.content | split(pat="ourphone.tf") %}
 {% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
-  part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
-  link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
+  part is starting_with("/product") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
+  link=link | replace(from="/product/post" , to="/product" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
   rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
-  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
+  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "ourphone.tf" ~ part%} {% endif
   %} {% endfor %} {% endif %} <main>
 
   <div class="container mx-auto mt-20">