forked from tfcoop/www_duniayetu
modify products
This commit is contained in:
samaradel
parent
4ba4200919
commit
cc85cf38e5
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
110
static/js/custom.js
Normal file
110
static/js/custom.js
Normal file
@ -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);
|
||||
};
|
||||
@ -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>
|
||||
4
templates/items/list.html
Normal file
4
templates/items/list.html
Normal file
@ -0,0 +1,4 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
14
templates/items/single.html
Normal file
14
templates/items/single.html
Normal file
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
36
templates/partials/featuredProduct.html
Normal file
36
templates/partials/featuredProduct.html
Normal file
@ -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>
|
||||
@ -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") %}
|
||||
|
||||
@ -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>") %}
|
||||
|
||||
|
||||
75
templates/partials/productCard.html
Normal file
75
templates/partials/productCard.html
Normal file
@ -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 %}
|
||||
70
templates/partials/productPosts.html
Normal file
70
templates/partials/productPosts.html
Normal file
@ -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
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<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" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
38
templates/partials/productSidebar.html
Normal file
38
templates/partials/productSidebar.html
Normal file
@ -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>
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user