diff options
| author | Dennis Fink | 2026-06-18 17:57:51 +0200 |
|---|---|---|
| committer | Dennis Fink | 2026-06-18 17:57:51 +0200 |
| commit | a4e35942fee745e64db5d0099ba2582e0fb4417e (patch) | |
| tree | f109c3e77805cdacd6f443c8a2d47514be5254a2 /templates/macros | |
| parent | e0904e48a5c1c5b327c29218fb39bf2fa05f1871 (diff) | |
| download | dennisfink.me-a4e35942fee745e64db5d0099ba2582e0fb4417e.tar.gz dennisfink.me-a4e35942fee745e64db5d0099ba2582e0fb4417e.zip | |
Build the first usable version of the blog
This adds the Lektor project structure, models, templates, styling,
feeds, categories, tags, archives, custom Markdown heading handling, and
the initial content needed to make the blog usable.
Diffstat (limited to 'templates/macros')
| -rw-r--r-- | templates/macros/blog.html | 100 | ||||
| -rw-r--r-- | templates/macros/pagination.html | 221 |
2 files changed, 321 insertions, 0 deletions
diff --git a/templates/macros/blog.html b/templates/macros/blog.html new file mode 100644 index 0000000..b4caafe --- /dev/null +++ b/templates/macros/blog.html @@ -0,0 +1,100 @@ +{% from "macros/pagination.html" import render_pagination %} + +{% macro render_toc(toc, maxdepth=2) %} + <nav aria-label="Table of contents"> + <p>Table of contents</p> + <ol> + {% for item in toc recursive %} + <li> + <a href="#{{ item.anchor }}">{{ item.title }}</a> + {% if item.children and loop.depth < maxdepth %} + <ol> + {{ loop(item.children) }} + </ol> + {% endif %} + </li> + {% endfor %} + </ol> + </nav> +{% endmacro %} + +{% macro render_blog_post(post, show_toc=True) %} + <article> + <header> + <div> + <h2> + <a href="{{ post|url }}">{{ post.title }}</a> + </h2> + <dl> + {% if post.publication_date %} + <div> + <dt>Posted:</dt> + <dd> + <a href="{{ ('/blog@index-pages/year/{}'.format(post.publication_date.year) ) | url }}"> + <time datetime="{{ post.publication_date | dateformat('yyyy-MM-dd') }}">{{ post.publication_date | dateformat("d MMMM yyyy") }}</time> + </a> + </dd> + </div> + {% else %} + <div class="missing-publication-date-warning" role="alert"> + <dt>⚠</dt> + <dd> + Missing publication date + </dd> + </div> + {% endif %} + {% if post.updated_date and post.publication_date and (post.updated_date > post.publication_date) %} + <div> + <dt>Last updated:</dt> + <dd> + <time datetime="{{ post.updated_date | dateformat('yyyy-MM-dd') }}">{{ post.updated_date | dateformat("d MMMM yyyy") }}</time> + </dd> + </div> + {% endif %} + {% if post.category %} + <div> + <dt>Category:</dt> + <dd> + {% set category = site.get('/categories/'+post.category) %} + <a href="{{ category|url }}">{{ category.name }}</a> + </dd> + </div> + {% endif %} + </dl> + </div> + {% if show_toc and post.render_toc %} + {% set toc = post.body.toc|default([]) %} + {{ render_toc(toc) }} + {% endif %} + </header> + {{ post.body }} + {% if post.tags %} + <footer> + <p>Tagged with</p> + <ul aria-label="Tags"> + {% for tag in post.tags %} + <li> + {% set tag_slug = tag|trim|lower|replace(" ", "-") %} + <a href="{{ ('/blog/tag/' ~ tag_slug ~ '/')|url }}" rel="tag">{{ tag }}</a> + {%- if not loop.last -%}, {%- else -%}.{%- endif -%} + </li> + {% endfor %} + </ul> + </footer> + {% endif %} + </article> +{% endmacro %} + +{% macro render_blog_index(pagination) %} + {% for post in pagination.items %} + {{ render_blog_post(post, False) }} + {% if not loop.last %} + <hr> + {% endif %} + {% endfor %} + {% if pagination.pages > 1 %} + <footer> + {{ render_pagination(pagination) }} + </footer> + {% endif %} +{% endmacro %} diff --git a/templates/macros/pagination.html b/templates/macros/pagination.html new file mode 100644 index 0000000..adb1b5c --- /dev/null +++ b/templates/macros/pagination.html @@ -0,0 +1,221 @@ +{% macro render_pagination(pagination, pagination_window=2) %} + {% set current = pagination.page %} + {% set total = pagination.pages %} + {% set window_start = [current - pagination_window, 1] | max %} + {% set window_end = [current + pagination_window, total] | min %} + <nav aria-label="Page navigation"> + <ol> + <li> + {% if pagination.has_prev %} + <a href="{{ pagination.prev | url }}" aria-label="Previous page">❮</a> + {% else %} + <span aria-disabled="true">❮</span> + {% endif %} + </li> + {% if window_start > 1 %} + <li> + <a href="{{ pagination.for_page(1) | url }}" aria-label="Page 1">1</a> + </li> + {% if window_start > 2 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + {% endif %} + {% for page_num in range(window_start, window_end + 1) %} + <li> + {% if page_num == current %} + <a href="{{ pagination.for_page(page_num) | url }}" aria-current="page">{{ page_num }}</a> + {% else %} + <a href="{{ pagination.for_page(page_num) | url }}" + aria-label="Page {{ page_num }}">{{ page_num }}</a> + {% endif %} + </li> + {% endfor %} + {% if window_end < total %} + {% if window_end < total - 1 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + <li> + <a href="{{ pagination.for_page(total) | url }}" + aria-label="Page {{ total }}">{{ total }}</a> + </li> + {% endif %} + <li> + {% if pagination.has_next %} + <a href="{{ pagination.next | url }}" aria-label="Next page">❯</a> + {% else %} + <span aria-disabled="true">❯</span> + {% endif %} + </li> + </ol> + </nav> +{% endmacro %} + +{% macro render_year_archive_navigation( + current_year_page, + archive_window=2 + ) %} + {% set current_year = current_year_page.year %} + {% set first_year_page = current_year_page.first_year_page %} + {% set last_year_page = current_year_page.last_year_page %} + {% set previous_year_page = current_year_page.previous_year_page %} + {% set next_year_page = current_year_page.next_year_page %} + {% set first_year = first_year_page.year %} + {% set last_year = last_year_page.year %} + {% set window_start = [current_year - archive_window, first_year] | max %} + {% set window_end = [current_year + archive_window, last_year] | min %} + <nav aria-label="Year archive navigation"> + <ol> + <li> + {% if previous_year_page %} + <a href="{{ previous_year_page | url }}" + rel="prev" + aria-label="Previous year: {{ previous_year_page.year }}">❮</a> + {% else %} + <span aria-disabled="true">❮</span> + {% endif %} + </li> + {% if window_start > first_year %} + <li> + <a href="{{ first_year_page | url }}" aria-label="Year {{ first_year }}">{{ first_year }}</a> + </li> + {% if window_start > first_year + 1 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + {% endif %} + {% for year in range(window_start, window_end + 1) %} + {% set year_page = site.get( + '/blog@index-pages/year/{:04d}'.format(year) + ) %} + {% if year_page %} + <li> + {% if year == current_year %} + <a href="{{ year_page | url }}" aria-current="page">{{ year }}</a> + {% else %} + <a href="{{ year_page | url }}" aria-label="Year {{ year }}">{{ year }}</a> + {% endif %} + </li> + {% endif %} + {% endfor %} + {% if window_end < last_year %} + {% if window_end < last_year - 1 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + <li> + <a href="{{ last_year_page | url }}" aria-label="Year {{ last_year }}">{{ last_year }}</a> + </li> + {% endif %} + <li> + {% if next_year_page %} + <a href="{{ next_year_page | url }}" + rel="next" + aria-label="Next year: {{ next_year_page.year }}">❯</a> + {% else %} + <span aria-disabled="true">❯</span> + {% endif %} + </li> + </ol> + </nav> +{% endmacro %} + +{% macro render_month_archive_navigation( + current_month_page, + archive_window=2 + ) %} + {% set year_pages = index_pages('year') | sort(attribute='year') %} + {% set ns = namespace( + month_pages=[], + current_position=none + ) %} + {% for year_page in year_pages %} + {% set ns.month_pages = ns.month_pages + (year_page.subindexes | sort(attribute='month')) %} + {% endfor %} + {% for month_page in ns.month_pages %} + {% if month_page.year == current_month_page.year + and month_page.month == current_month_page.month %} + {% set ns.current_position = loop.index0 %} + {% endif %} + {% endfor %} + {% set total = ns.month_pages | length %} + {% set current_position = ns.current_position %} + {% set window_start = [current_position - archive_window, 0] | max %} + {% set window_end = [current_position + archive_window, total - 1] | min %} + {% set first_month_page = ns.month_pages[0] %} + {% set last_month_page = ns.month_pages[total - 1] %} + {% set previous_month_page = none %} + {% set next_month_page = none %} + {% if current_position > 0 %} + {% set previous_month_page = ns.month_pages[current_position - 1] %} + {% endif %} + {% if current_position < total - 1 %} + {% set next_month_page = ns.month_pages[current_position + 1] %} + {% endif %} + <nav aria-label="Monthly archive navigation"> + <ol> + <li> + {% if previous_month_page %} + <a href="{{ previous_month_page | url }}" + rel="prev" + aria-label="Previous month: {{ previous_month_page.date | dateformat('yyyy-MM') }}">❮</a> + {% else %} + <span aria-disabled="true">❮</span> + {% endif %} + </li> + {% if window_start > 0 %} + <li> + <a href="{{ first_month_page | url }}" + aria-label="{{ first_month_page.date | dateformat('yyyy-MM') }}"> + {{ first_month_page.date | dateformat("MMMM y") }} + </a> + </li> + {% if window_start > 1 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + {% endif %} + {% for position in range(window_start, window_end + 1) %} + {% set month_page = ns.month_pages[position] %} + <li> + {% if position == current_position %} + <a href="{{ month_page | url }}" aria-current="page">{{ month_page.date | dateformat("MMMM y") }}</a> + {% else %} + <a href="{{ month_page | url }}" + aria-label="{{ month_page.date | dateformat('yyyy-MM') }}"> + {{ month_page.date | dateformat("MMMM y") }} + </a> + {% endif %} + </li> + {% endfor %} + {% if window_end < total - 1 %} + {% if window_end < total - 2 %} + <li> + <span aria-hidden="true">…</span> + </li> + {% endif %} + <li> + <a href="{{ last_month_page | url }}" + aria-label="{{ last_month_page.date | dateformat('yyyy-MM') }}"> + {{ last_month_page.date | dateformat("MMMM y") }} + </a> + </li> + {% endif %} + <li> + {% if next_month_page %} + <a href="{{ next_month_page | url }}" + rel="next" + aria-label="Next month: {{ next_month_page.date | dateformat('yyyy-MM') }}">❯</a> + {% else %} + <span aria-disabled="true">❯</span> + {% endif %} + </li> + </ol> + </nav> +{% endmacro %} |
