sashaastiadi/www_mycelium
1
0
Fork 1
forked from hero/www_hero_project
Code Pull Requests Activity

add blog

Browse Source
This commit is contained in:
sasha-astiadi
2024-08-19 01:29:54 +02:00
parent 4c0bd27a91
commit 92ebcbd49f
26 changed files with 608 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/partials/blogPosts.html
View File

@@ -1,25 +1,25 @@
{% block content %}
use{% 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"
<div class="text-center main-title px-0 lg:w-2/3 mx-8 pt-6 lg:mx-12">
<h2
class="tracking-tight text-left text-2xl lg:text-3xl fw-500 leading-snug font-semibold mb-10"
>
{% set path_array = current_path | split(pat="/") %}
{% set taxonomy = path_array[1] %}
{% set category = path_array[2] %}
The Latest from Ourworld Free Zone
TF9 Stories and Project Updates
{% if taxonomy == "categories" %} -
{{category | replace(from='-', to=' ' ) | title}}
{% endif %}
</h1>
</h2>
<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">
<div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
{%- for post in paginator.pages %}
{% if not post.extra.hidden %}
{% include "partials/postCard.html" %}
{%endif%} {%- endfor %}
</div>
<hr class="mt-6" />
<hr class="my-10" />
<p class="text-center text-sm mt-2 mb-16">
{% if paginator.previous %}
<a
@@ -67,4 +67,4 @@
</div>
</div>
{% endblock content %}
{% endblock content %}

14
templates/partials/blogSidebar.html
View File

@@ -1,25 +1,25 @@
<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 POSTS BY</h4>
<a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
<div class="mx-8 lg:mx-4 flex flex-col mt-2 pt-6 md:mt-8">
<div class="flex flex-col mb-12">
<h4 class="text-base not-italic font-medium leading-6 text- mb-4"> FILTER POSTS BY</h4>
<a id="all" class="mb-2 text-white font-normal" href="/blog">All</a>
{% set taxonomy = get_taxonomy(kind="categories") %}
{% set categories = taxonomy.items %}
{% for category in categories %}
{% set path = category.name | slugify %}
{% set fullpath = "/categories/" ~ path %}
<a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
<a id="{{path}}" class="mb-2 text-white font-normal" href={{fullpath}}> {{category.name}} </a>
{% endfor %}
</div>
{% set section = get_section(path="blog/_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>
<h4 class="text-base not-italic font-medium leading-6 text-white 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>
<a class="mb-3 text-gray-50" href={{page.permalink}}>{{ page.title }}</a>
{% endif %}
{% endfor %}

4
templates/partials/blogs.html
View File

@@ -1,5 +1,5 @@
<div class="pt-6">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="">
<div class="mx-auto max-w-7xl px-6 lg:px-8 py-10">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-base font-semibold leading-7 text-indigo-400 mb-4">BLOG</h2>
<h2 class="tracking-tight">What's New</h2>

39
templates/partials/featuredBlog.html
View File

@@ -8,29 +8,30 @@
{% endif %}
<body>
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-4 lg:mt-16 items-center container mx-auto pt-0 lg:pt-16">
<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 POST</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 ">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 relative mt-12 pt-6 lg:pt-16 px-6 lg:px-0 lg:mt-10 items-center py-10 container mx-auto flex flex-col-reverse lg:flex-row">
<!-- Image Section (Will be displayed first on small screens) -->
<div class="relative lg:mt-0 max-w-full order-1 lg:order-2">
<img class="relative mx-auto mt-10 lg:mt-16 rounded-lg max-h-64 py-0" src="{{featured.permalink}}{{featured.extra.imgPath}}" alt="" />
</div>
<!-- Text Content Section (Will be displayed first on larger screens) -->
<div class="relative w-full md:w-auto mx-3 lg:mx-12 order-2 lg:order-1">
<h3 class="text-base not-italic font-medium leading-6 text-indigo-400 mb-4">FEATURED POST</h3>
<a href="{{featured.permalink}}">
<h2 class="text-2xl main-title lg:text-3xl fw-500 leading-snug font-semibold">
{{ featured.title }}
</h2>
<p class="mt-4 text-base font-light text-gray-50 text-left">
{{ featured.description }}
</p>
</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 class="mt-2 mb-6 lg:mb-10 text-sm not-italic font-light leading-6 text-gray-200">
{{ 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="" />
<a href="#" class="rounded-md mt-6 lg:mt-12 bg-indigo-500 px-3.5 py-2.5 font-semibold text-white shadow-sm text-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Read More</a>
</div>
</div>
<hr class="mt-6">
</div>
</div>
</body>
<hr class="mt-6 container mx-auto">
<br>
<br>
</body>

15
templates/partials/header_custom.html
View File

@@ -7,7 +7,7 @@
{% set header_items = section.content | safe | split(pat="<li>") %}
<header id="header-container">
<div class="z-10 bg-gray-900 fixed w-screen">
<div class="z-10 bg-custom-dark-blue fixed w-screen">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
<div>
@@ -16,13 +16,13 @@
</a>
</div>
<div class="mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="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">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-50 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" type="button" class="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">
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-50 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -98,12 +98,12 @@
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-16 z-20 inset-x-0 transition transform origin-top-right lg:hidden">
<div id="hamburger" class="hidden fixed mt-16 z-20 top-16 right-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
<div class="shadow-xs h-screen bg-custom-dark-blue divide-y-2 divide-gray-500">
<div class="pb-6 px-6 lg:px-20 lg:space-y-6 pb-8 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12">
<nav class="flex flex-col justify-around pb-12 pt-16">
{% for header_item in header_items %}
{% if not loop.first %}
@@ -160,4 +160,5 @@
.bg-black {
color: #010a2d;
}
</style>

2
templates/partials/icons/svgNextPageIcon.html
View File

@@ -1 +1 @@
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(98,102,241);"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 436 B

After

Width:  |  Height:  |  Size: 437 B

2
templates/partials/icons/svgPrevPageIcon.html
View File

@@ -1 +1 @@
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(98,102,241);"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 434 B

108
templates/partials/postCard.html
View File

@@ -1,75 +1,57 @@
{% 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 %}
{% 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) %}
{% 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 flex-col rounded-lg shadow-lg overflow-hidden bg-white">
{% 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'}}" />
<img class="h-24 w-full object-cover" src="{{ img_url }}" alt="{{ post.title ~ ' Picture' }}" />
</div>
{%endif%}
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
{% endif %}
<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">
<div class="flex-1 p-6 flex flex-col">
<h3 class="text-base text-left font-medium text-gray-900 mb-2">
{{ post.title }}
</h3>
{% if post.description %}
<p class="text-sm text-left text-gray-500 mb-3">
{{ post.description }}
</p>
{% endif %}
<div class="article hidden">{{ post.content | safe }}</div>
{% endif %}
<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 class="article hidden">
{{ post.content | safe }}
</div>
<div class="mt-auto py-3">
<div class="flex items-center">
<div class="flex-shrink-0">
{% if author %}
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
<img alt="{{ author.title }}" src="{{ author_img }}" class="w-8 h-8 rounded-full border-2 border-white bg-gray-200" />
{% endif %}
</div>
<div class="ml-3 text-gray-700 text-xs flex flex-col">
{% if author %}
<p class="uppercase">{{ author.title }}</p>
{% endif %}
<p>
<time class="text-xs" datetime="{{ post.date }}">
{{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
</time>
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
.border-b {
border-bottom-width: 1px !important;
}
</style>
{% endif %}
{% endif %}