From 3a45390d2a3c7e9cd32e5f4c43a3453f8eb9fa74 Mon Sep 17 00:00:00 2001
From: Hugo Trentesaux <hugo@trentesaux.fr>
Date: Tue, 18 Oct 2022 15:04:33 +0200
Subject: [PATCH] [theme] improve blog feed
---
sass/_duniter.sass | 3 ++-
sass/components/_newslink.sass | 30 ++++++++++++++---------
templates/article.html | 2 +-
templates/feed.html | 44 ++++++++++++++++++----------------
templates/macros.html | 44 +++++++++++++++++-----------------
templates/nav.html | 30 +++++++++++------------
6 files changed, 82 insertions(+), 71 deletions(-)
diff --git a/sass/_duniter.sass b/sass/_duniter.sass
index 4927d2c..145e430 100644
--- a/sass/_duniter.sass
+++ b/sass/_duniter.sass
@@ -135,9 +135,10 @@ input.search_input
width: 5em
.tags, .authors, .category
+ display: inline-block
margin-right: 7px
-.date
+.float-right
float: right
.tags .tag
diff --git a/sass/components/_newslink.sass b/sass/components/_newslink.sass
index 5637978..800491b 100644
--- a/sass/components/_newslink.sass
+++ b/sass/components/_newslink.sass
@@ -1,15 +1,23 @@
-.kkk-newslink
+// displays (thumbnail / taxonomies / preview) of blog articles
+.feed-block
+ border-left: solid 5px #e1eef7
padding: 1em
- div
- color: black
- img
+ color: black
+ .feed-img
+ // preview
max-width: 120px
margin-right: 20px
- h3
- display: inline-block
- margin-top: 0
- span.date
- float: right
+ .feed-tax
+ // taxonomies
+ .feed-preview
+ // preview
+ display: block
+ color: black
+ text-decoration: none
+ h3
+ margin-top: 0
+
-.kkk-newslink:hover
- background-color: #FAFAFA
+.feed-block:hover
+ border-left: solid 5px #5096C8
+ background-color: #FAFAFA
\ No newline at end of file
diff --git a/templates/article.html b/templates/article.html
index 800e9d8..49b5102 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -8,7 +8,7 @@
{% block content %}
<main class="page w3-container w3-content w3-padding-64">
{{ macros::taxonomies(taxonomies=page.taxonomies) }}
- <span class="date">{{ page.date }}</span>
+ <span class="date float-right">{{ page.date }}</span>
{% if page.extra.auto_toc %}{{ macros::toc(toc=page.toc, level=1, depth=page.extra.toc_depth | default(value=6)) }}{% endif %}
diff --git a/templates/feed.html b/templates/feed.html
index 940bc57..f115f3c 100644
--- a/templates/feed.html
+++ b/templates/feed.html
@@ -10,29 +10,33 @@
{{ section.content | safe }}
</div>
- {% if not section.extra.disable_listing %}
+ {%- if not section.extra.disable_listing %}
<hr>
{% for article in section.pages %}
- <a href="{{ article.permalink }}">
- <div class="w3-margin-mobile w3-row-padding kkk-newslink">
- {% if article.extra.thumbnail %}
- {% set thumbnail = article.extra.thumbnail %}
- <img class="w3-col s5 m2" src="
- {%- if thumbnail is matching("[.](jpg|png|jpeg)$") -%}
- {{ macros::resize_static(path=article.extra.thumbnail) }}
- {%- else -%}
- {{ article.extra.thumbnail }}
- {%- endif -%}
- "/>
- {% endif %}
- <div class="w3-mobile w3-rest">
- <h3>{{ article.title }}</h3> <span class="date">{{ article.date }}</span>
- {% if article.description %}<p>{{ article.description }}</p>{% endif %}
+ {% set url = article.permalink -%}
+ <div class="w3-margin-mobile w3-row-padding feed-block">
+ {%- if article.extra.thumbnail -%}
+ {%- set thumbnail = article.extra.thumbnail -%}
+ <img class="w3-col s5 m2 feed-img" src="
+ {%- if thumbnail is matching("[.](jpg|png|jpeg)$") -%}
+ {{ macros::resize_static(path=article.extra.thumbnail) }}
+ {%- else -%}
+ {{ article.extra.thumbnail }}
+ {%- endif -%}
+ "/>
+ {%- endif %}
+ <div class="w3-mobile w3-col s2 feed-tax">
+ {%- set tax = article.taxonomies %}
+ {% if tax.category %}{{ macros::category(category=tax.category )}}{% endif %}
+ {% if tax.authors %}{{ macros::authors(authors=tax.authors )}}{% endif %}
+ {% if tax.tags %}{{ macros::tags(tags=tax.tags )}}{% endif %}
+ <span class="date">{{ article.date }}</span>
</div>
- </div>
- </a>
- {% endfor %}
+ <a href="{{url}}" class="w3-mobile w3-rest feed-preview">
+ <h3>{{ article.title }}</h3>
+ {%- if article.description -%}<p>{{ article.description }}</p>{%- endif %}
+ </a>
+ </div>{% endfor %}
{% endif %}
-
</main>
{% endblock content %}
diff --git a/templates/macros.html b/templates/macros.html
index 569f8dd..cc88f2e 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -98,38 +98,38 @@
{# === tags === #}
-{% macro tags(tags) %}
+{%- macro tags(tags) -%}
<span class="tags">
- {% for tag in tags %}
- {%- set url = get_taxonomy_url(kind="tags", name=tag) %}
+ {%- for tag in tags -%}
+ {%- set url = get_taxonomy_url(kind="tags", name=tag) -%}
<a class="tag" href="{{url}}">{{ tag }}</a>
- {% endfor %}
+ {%- endfor -%}
</span>
-{%- endmacro %}
+{%- endmacro -%}
{# === author === #}
-{% macro authors(authors) %}
+{%- macro authors(authors) -%}
<span class="authors">
- {% for author in authors %}
- {%- set url = get_taxonomy_url(kind="authors", name=author) %}
- <a class="author" href="{{url}}"><i class="fa fa-user-circle-o"></i> {{ author }}</a>
- {% endfor %}
+ {%- for author in authors -%}
+ {%- set url = get_taxonomy_url(kind="authors", name=author) -%}
+ <a class="author" href="{{url}}"><i class="fa fa-user-circle-o"></i> {{ author }}</a>
+ {%- endfor -%}
</span>
-{%- endmacro %}
+{%- endmacro -%}
{# === category === #}
-{% macro category(category) %}
+{%- macro category(category) -%}
<span class="category">
- {% for cat in category %}
- {%- set url = get_taxonomy_url(kind="category", name=cat) %}
- <a class="cat" href="{{url}}"><i class="fa fa-bookmark"></i> {{ cat }}</a>
- {% endfor %}
+ {%- for cat in category -%}
+ {%- set url = get_taxonomy_url(kind="category", name=cat) -%}
+ <a class="cat" href="{{url}}"><i class="fa fa-bookmark"></i> {{ cat }}</a>
+ {%- endfor -%}
</span>
-{%- endmacro %}
+{%- endmacro -%}
{# === taxonomies === #}
-{% macro taxonomies(taxonomies) %}
-{% if taxonomies.tags %}{{ macros::tags(tags=taxonomies.tags )}}{% endif %}
-{% if taxonomies.authors %}{{ macros::authors(authors=taxonomies.authors )}}{% endif %}
-{% if taxonomies.category %}{{ macros::category(category=taxonomies.category )}}{% endif %}
-{%- endmacro %}
+{%- macro taxonomies(taxonomies) -%}
+{%- if taxonomies.category -%}{{ macros::category(category=taxonomies.category )}}{%- endif -%}
+{%- if taxonomies.authors -%}{{ macros::authors(authors=taxonomies.authors )}}{%- endif -%}
+{%- if taxonomies.tags -%}{{ macros::tags(tags=taxonomies.tags )}}{%- endif -%}
+{%- endmacro -%}
diff --git a/templates/nav.html b/templates/nav.html
index ef96d97..71ccd6c 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,16 +1,15 @@
<nav class="w3-bar w3-large">
<a href="/" class="w3-bar-item w3-button {% if current_path %}{% if current_path == "/" %}active{% endif %}{% endif %}"><img alt="" class="icon" src="/img/duniter-logo_alt.svg"/> Duniter</a>
- {% set index = get_section(path="_index.md") %}
- {% set contributeurs = get_section(path="contributeurs/_index.md") %}
+ {%- set index = get_section(path="_index.md") -%}
+ {%- set contributeurs = get_section(path="contributeurs/_index.md") -%}
- {% for p in index.pages | concat(with=contributeurs) %}
- {% if not p.extra.hide %}
+ {%- for p in index.pages | concat(with=contributeurs) %}
+ {%- if not p.extra.hide -%}
<a href="{{ p.permalink }}" class="w3-bar-item w3-button
- {% if current_path %}{% if current_path == p.path %}active{% endif %}{% endif %}">
- {{p.title}}
- </a>
- {% endif %}
+ {%- if current_path %}{% if current_path == p.path %}active{% endif %}{% endif -%}
+ ">{{p.title}}</a>
+ {%- endif -%}
{% endfor %}
<div class="w3-dropdown-hover w3-dropdown-click w3-right">
@@ -30,14 +29,13 @@
</div>
</div>
- {% for s in index.subsections | reverse %}
- {% set subsection = get_section(path=s) %}
- {% if not subsection.extra.hide and subsection.path != contributeurs.path %}
+ {%- for s in index.subsections | reverse -%}
+ {%- set subsection = get_section(path=s) -%}
+ {%- if not subsection.extra.hide and subsection.path != contributeurs.path -%}
<a href="{{ subsection.permalink }}" class="w3-bar-item w3-button w3-right
- {% if current_path %}{% if current_path is starting_with(subsection.path) %}active{% endif %}{% endif %}">
- {{subsection.title}}
- </a>
- {% endif %}
- {% endfor %}
+ {%- if current_path %}{% if current_path is starting_with(subsection.path) %}active{% endif %}{% endif -%}
+ ">{{subsection.title}}</a>
+ {%- endif -%}
+ {%- endfor -%}
</nav>
\ No newline at end of file
--
GitLab