SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ♿ add aria labels to post meta data

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-18 22:46:06 +02:00
parent 53f1a88fd6
commit 113d583524
2 changed files with 21 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/includes/postmeta.macro.njk
View file

@ -1,18 +1,20 @@
{% macro postmeta(params) %}
<ul class="flex flex-wrap items-center gap-4 *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600">
<li>
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ params.date | isoDate }}" title="{{ params.date | longDate }}">
{{ params.date | readableDate }}
</time>
</li>
<li>
{% lucide "user", {"size": "20"} %}
<a href="{{ params.author.href }}">{{ params.author.name }}</a>
</li>
<li>
{% lucide "glasses", {"size": "20"} %}
{{ params.content | readingtime }}
</li>
</ul>
<ul
class="flex flex-wrap items-center gap-4 text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
role="group"
aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
>
<li aria-label="Published on">
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ params.date | isoDate }}">{{ params.date | readableDate }}</time>
</li>
<li aria-label="Written by">
{% lucide "user", {"size": "20"} %}
<a href="{{ params.author.href }}">{{ params.author.name }}</a>
</li>
<li aria-label="Approximate reading time">
{% lucide "glasses", {"size": "20"} %}
{{ params.content | readingtime }}
</li>
</ul>
{% endmacro %}

6
src/layouts/blogpost.njk
View file

@ -4,11 +4,11 @@ layout: base.njk
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
<h1 class="text-4xl">{{ title }}</h1>
<aside class="not-prose space-y-4 text-base">
<div class="not-prose space-y-4 text-base">
{%- from 'postmeta.macro.njk' import postmeta %}
{{ postmeta({ date: page.date, author: author, content: content}) }}
{% if tags.length > 0 %}
<ul class="flex gap-1">
<ul class="flex gap-1" aria-label="Tagged in">
{% for tag in tags %}
<li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
{% lucide "tag", {"size": "20"} %}
@ -17,7 +17,7 @@ layout: base.njk
{%- endfor %}
</ul>
{% endif %}
</aside>
</div>
{% if image and image.src != '' %}
<img src="{{ image.src }}" alt="{{ image.alt }}">