♻️ refactor: split macros.html in different files

Clearer macros format.
main
welpo 2 years ago
parent 3d7a662ac8
commit 3aa22cb3ad
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6

@ -2,7 +2,7 @@
{% block main_content %} {% block main_content %}
<main class="centered-header"> <main class="centered-header">
{{ post_macros::page_header(title="403")}} {{ macros_page_header::page_header(title="403")}}
<span>forbidden</span> <span>forbidden</span>
</main> </main>
{% endblock main_content %} {% endblock main_content %}

@ -2,7 +2,7 @@
{% block main_content %} {% block main_content %}
<main class="centered-header"> <main class="centered-header">
{{ post_macros::page_header(title="404")}} {{ macros_page_header::page_header(title="404")}}
<span>not found</span> <span>not found</span>
</main> </main>
{% endblock main_content %} {% endblock main_content %}

@ -1,6 +1,6 @@
{% extends "base.html" %} {% block main_content %} {% extends "base.html" %} {% block main_content %}
{{ post_macros::page_header(title=section.title) }} {{ macros_page_header::page_header(title=section.title) }}
<div class="archive"> <div class="archive">
<ul class="list-with-title"> <ul class="list-with-title">

@ -1,4 +1,11 @@
{% import "macros/macros.html" as post_macros %} {% import "macros/list_posts.html" as macros_list_posts %}
{% import "macros/format_date.html" as macros_format_date %}
{% import "macros/page_header.html" as macros_page_header %}
{% import "macros/page_desc.html" as macros_page_desc %}
{% import "macros/content.html" as macros_content %}
{% import "macros/cards_posts.html" as macros_cards_posts %}
{% import "macros/list_title.html" as macros_list_title %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang = "en"> <html lang = "en">

@ -5,7 +5,7 @@
{% set section = get_section(path=section.extra.section_path) %} {% set section = get_section(path=section.extra.section_path) %}
{% endif -%} {% endif -%}
{{ post_macros::page_header(title=section.title) }} {{ macros_page_header::page_header(title=section.title) }}
<main> <main>
{%- if paginator %} {%- if paginator %}
@ -14,7 +14,7 @@
{%- set show_pages = section.pages -%} {%- set show_pages = section.pages -%}
{% endif -%} {% endif -%}
{{ post_macros::cards_posts(pages=show_pages) }} {{ macros_cards_posts::cards_posts(pages=show_pages) }}
</main> </main>
{% if paginator %} {% if paginator %}

@ -0,0 +1,41 @@
{% macro cards_posts(pages) %}
<div class="cards">
{%- for page in pages %}
<div class="card">
{% if page.extra.local_image %}
<img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}">
{% elif page.extra.remote_image %}
<img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}">
{% else %}
<div class="card-image-placeholder"></div>
{% endif %}
<div class="card-info">
<h1 class="card-title">
{% if page.extra.link_to %}
<a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>{{page.title}}</a>
{% else %}
<a href={{ page.permalink }}>{{page.title}}</a>
{% endif %}
</h1>
<div class="meta">
{%- if page.date %}
{{ macros_format_date::format_date(date=page.date) }}
{% endif -%}
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
</div>
<div class="card-description">
{% if page.description %}
{{ page.description }}
{% endif %}
</div>
</div>
</div>
{% endfor -%}
</div>
{% endmacro cards_posts %}

@ -0,0 +1,79 @@
{% macro content(page, separator='•') %}
<main>
<article>
<div>
<div class="article-title">
{{ page.title }}
</div>
<div class="meta">
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
{% if page.date %}
{{ macros_format_date::format_date(date=page.date) }}
{{ separator }}
{% endif %}
<span title="{{ page.word_count }} words">{{ page.reading_time }} min read</span>
{% if page.taxonomies and page.taxonomies.tags %}
<nav class="nav tags">&nbsp;{{ separator }}&nbsp;Categories:
{% for tag in page.taxonomies.tags %}
<a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
{% endif %}
{% endfor %}
</nav>
{% endif %}
</div>
</div>
{% if page.extra.tldr %}
<div class="tldr">
<h3>TL;DR:</h3>
<p>{{ page.extra.tldr }}</p>
</div>
{% endif %}
{# Optional table of contents #}
{% if page.extra.toc | default(value=false) %}
{% if page.toc %}
<div class="toc-container">
<h3>Table of Contents</h3>
<ul>
{% for h1 in page.toc %}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
{% if h2.children %}
<ul>
{% for h3 in h2.children %}
<li>
<a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
<section class="body">
{{ page.content | safe }}
</section>
</article>
</main>
{% endmacro content %}

@ -0,0 +1,22 @@
{% macro format_date(date) %}
{% if config.extra.date_format %}
{{ date | date(format=config.extra.date_format) }}
{% else %}
{% set day = date | date(format='%-d') | int %}
{% if day in [11, 12, 13] %}
{% set suffix = "th" %}
{% else %}
{% set last_digit = day % 10 %}
{% if last_digit == 1 %}
{% set suffix = "st" %}
{% elif last_digit == 2 %}
{% set suffix = "nd" %}
{% elif last_digit == 3 %}
{% set suffix = "rd" %}
{% else %}
{% set suffix = "th" %}
{% endif %}
{% endif %}
{{ date | date(format="%-d") }}{{ suffix }} {{ date | date(format="%B %Y") }}
{% endif %}
{% endmacro %}

@ -0,0 +1,38 @@
{% macro list_posts(pages) %}
<div class="bloglist-container">
{% for page in pages %}
<section class="bloglist-table-row">
<div class="bloglist-title">
<a href="{{ page.permalink }}">{{ page.title }}</a>
</div>
<div class="card-meta">
{% if page.date %}
{{ macros_format_date::format_date(date=page.date) }}
{% endif %}
<br/>
<span>{{ page.reading_time }} min read</span>
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
</div>
<br/>
<div class="description">
{% if page.description %}
{{ page.description }}
{% elif page.summary %}
{{ page.summary | safe }}&hellip;
{% else %}
{% set hide_read_more = true %}
{% endif %}
</div>
{% if not hide_read_more %}
<a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
{% endif %}
</section>
{% endfor %}
</div>
{% endmacro %}

@ -0,0 +1,16 @@
{% macro list_title(pages, tag_name=false) %}
{% if tag_name %}
<h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
{% else %}
<h1 class="page-title">All articles</h1>
{% endif %}
<ul class="posts">
{% for page in pages %}
<li class="post">
<a href="{{ page.permalink }}">{{ page.title }}</a>
<span class="meta">{{ macros_format_date::format_date(date=page.date) }}</span>
</li>
{% endfor %}
</ul>
{% endmacro list_title %}

@ -1,242 +0,0 @@
{% macro format_date(date) %}
{% if config.extra.date_format %}
{{ date | date(format=config.extra.date_format) }}
{% else %}
{% set day = date | date(format='%-d') | int %}
{% set suffix = "" %}
{% if day in [11, 12, 13] %}
{% set suffix = "th" %}
{% else %}
{% set last_digit = day % 10 %}
{% if last_digit == 1 %}
{% set suffix = "st" %}
{% elif last_digit == 2 %}
{% set suffix = "nd" %}
{% elif last_digit == 3 %}
{% set suffix = "rd" %}
{% else %}
{% set suffix = "th" %}
{% endif %}
{% endif %}
{{ date | date(format="%-d") }}{{ suffix }} {{ date | date(format="%B %Y") }}
{% endif %}
{% endmacro %}
{% macro list_posts(pages) %}
<div class="bloglist-container">
{%- for page in pages %}
<section class="bloglist-table-row">
<div class="bloglist-title">
<a href={{ page.permalink }}>{{page.title}}</a>
</div>
<div class="card-meta">
{%- if page.date %}
{{ post_macros::format_date(date=page.date, format=config.extra.date_format) }}
{% endif -%}
<br />
<span>{{ page.reading_time }} minute read</span>
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
</div>
<br />
<div class="description">
{% if page.description %}
{{ page.description }}
{% elif page.summary %}
{{ page.summary | safe }}&hellip;
{% else %}
{% set hide_read_more = true %}
{% endif %}
</div>
{% if not hide_read_more %}
<a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
{% endif %}
</section>
{% endfor -%}
</div>
{% endmacro list_posts %}
{% macro tags(page, short=false) %}
{%- if page.taxonomies and page.taxonomies.tags %}
<span class="post-tags-inline">
{%- if short %}
::
{%- set sep = "," -%}
{% else %}
:: tags:&nbsp;
{%- set sep = "&nbsp;" -%}
{% endif -%}
{%- for tag in page.taxonomies.tags %}
<a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
{%- if not loop.last %}{{ sep | safe }}{% endif -%}
{% endfor -%}
</span>
{% endif -%}
{% endmacro tags %}
{% macro page_header(title) %}
<div class="title-container section-title">
{{ title }}
</div>
{% endmacro page_header %}
{% macro page_desc(desc, page) %}
<div id="banner-container-home">
<div id="home-banner-text">
<div class="home-banner-header">{{ desc.title }}</div>
<section id="banner-home-subtitle">
{{ page.content | safe }}
</section>
</div>
<div class="image-container-home">
<img alt="the owner" class="banner-home-img" src={{ desc.img | safe | replace(from="$BASE_URL", to=config.base_url) }} />
</div>
</div>
{% endmacro page_desc %}
{% macro content(page) %}
<main>
<article>
<div>
<div class="article-title">
{{ page.title }}
</div>
<div class="meta">
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
{% if page.date %}
{{ post_macros::format_date(date=page.date) }}
{% endif %}
<span title="{{ page.word_count }} words">{{ page.reading_time }} min read{% if page.taxonomies and page.taxonomies.tags %}&nbsp;&nbsp;{%endif %}</span>
{% if page.taxonomies and page.taxonomies.tags %}
<nav class="nav tags">Categories:
{% for tag in page.taxonomies.tags %}
<a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
{% endif %}
{% endfor %}
</nav>
{% endif %}
</div>
</div>
{% if page.extra.tldr %}
<div class="tldr">
<h3>TL;DR:</h3>
<p>{{ page.extra.tldr }}</p>
</div>
{% endif %}
{# Optional table of contents #}
{% if page.extra.toc | default(value=false) %}
{% if page.toc %}
<div class="toc-container">
<h3>Table of Contents</h3>
<ul>
{% for h1 in page.toc %}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
{% if h2.children %}
<ul>
{% for h3 in h2.children %}
<li>
<a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
<section class="body">
{{ page.content | safe }}
</section>
</article>
</main>
{% endmacro content %}
{% macro cards_posts(pages) %}
<div class="cards">
{%- for page in pages %}
<div class="card">
{% if page.extra.local_image %}
<img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}">
{% elif page.extra.remote_image %}
<img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}">
{% else %}
<div class="card-image-placeholder"></div>
{% endif %}
<div class="card-info">
<h1 class="card-title">
{% if page.extra.link_to %}
<a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>{{page.title}}</a>
{% else %}
<a href={{ page.permalink }}>{{page.title}}</a>
{% endif %}
</h1>
<div class="meta">
{%- if page.date %}
{{ post_macros::format_date(date=page.date) }}
{% endif -%}
{% if page.draft %}
<span class="draft-label">DRAFT</span>
{% endif %}
</div>
<div class="card-description">
{% if page.description %}
{{ page.description }}
{% endif %}
</div>
</div>
</div>
{% endfor -%}
</div>
{% endmacro cards_posts %}
{% macro list_title(pages, tag_name=false) %}
{% if tag_name %}
<h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
{% else %}
<h1 class="page-title">All articles</h1>
{% endif %}
<ul class="posts">
{% for page in pages %}
<li class="post">
<a href="{{ page.permalink }}">{{ page.title }}</a>
<span class="meta">{{ post_macros::format_date(date=page.date) }}</span>
</li>
{% endfor %}
</ul>
{% endmacro list_title %}

@ -0,0 +1,13 @@
{% macro page_desc(desc, page) %}
<div id="banner-container-home">
<div id="home-banner-text">
<div class="home-banner-header">{{ desc.title }}</div>
<section id="banner-home-subtitle">
{{ page.content | safe }}
</section>
</div>
<div class="image-container-home">
<img alt="the owner" class="banner-home-img" src={{ desc.img | replace(from="$BASE_URL", to=config.base_url) | safe}} />
</div>
</div>
{% endmacro %}

@ -0,0 +1,5 @@
{% macro page_header(title) %}
<div class="title-container section-title">
{{ title }}
</div>
{% endmacro page_header %}

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main_content %} {% block main_content %}
{{ post_macros::content(page=page)}} {{ macros_content::content(page=page)}}
{% endblock main_content %} {% endblock main_content %}

@ -1,5 +1,3 @@
{% import "macros/macros.html" as post_macros %}
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

@ -6,12 +6,12 @@
{% endif -%} {% endif -%}
{%- if section.extra.desc %} {%- if section.extra.desc %}
{{ post_macros::page_desc(desc=section.extra.desc, page=section) }} {{ macros_page_desc::page_desc(desc=section.extra.desc, page=section) }}
{% endif -%} {% endif -%}
<main class="list"> <main class="list">
<div> <div>
{{ post_macros::page_header(title=section.title) }} {{ macros_page_header::page_header(title=section.title) }}
</div> </div>
{%- if paginator %} {%- if paginator %}
{%- set show_pages = paginator.pages -%} {%- set show_pages = paginator.pages -%}
@ -19,7 +19,7 @@
{%- set show_pages = section.pages -%} {%- set show_pages = section.pages -%}
{% endif -%} {% endif -%}
{{ post_macros::list_posts(pages=show_pages) }} {{ macros_list_posts::list_posts(pages=show_pages) }}
</main> </main>
{% if paginator %} {% if paginator %}

@ -2,7 +2,7 @@
{% block main_content %} {% block main_content %}
{{ post_macros::page_header(title="Tags")}} {{ macros_page_header::page_header(title="Tags")}}
<div class="tag-cloud"> <div class="tag-cloud">
<ul class="tags"> <ul class="tags">

@ -2,6 +2,6 @@
{% block main_content %} {% block main_content %}
{{ post_macros::list_title(pages=term.pages, tag_name=term.name) }} {{ macros_list_title::list_title(pages=term.pages, tag_name=term.name) }}
{% endblock main_content %} {% endblock main_content %}

Loading…
Cancel
Save