134 lines
4.5 KiB
HTML
134 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
{% from "macros/tag-links.html" import tag_links with context %}
|
|
{% from "macros/narration-player.html" import narration_player with context %}
|
|
{% from "macros/social-sharing.html" import social_metadata, share_controls with context %}
|
|
{% block social_head %}
|
|
{% if this.parent._id == 'blog' %}{{ social_metadata(this, 'BlogPosting', 'article') }}{% else %}{{ social_metadata(this, 'Article', 'article') }}{% endif %}
|
|
{% endblock %}
|
|
{% block body %}
|
|
{% if this.parent._id == 'blog' %}
|
|
<article class="blog-post-layout shell">
|
|
<header class="blog-entry-header">
|
|
<p class="eyebrow">{{ this.kicker }}</p>
|
|
<h1>{{ this.title }}</h1>
|
|
<p class="dek">{{ this.summary }}</p>
|
|
</header>
|
|
|
|
<div class="post-meta">
|
|
<aside class="post-info" aria-label="Post information">
|
|
<p class="post-info-title">Post information</p>
|
|
<dl>
|
|
<div class="post-info-row">
|
|
<dt>Author</dt>
|
|
<dd>{{ this.author }}</dd>
|
|
</div>
|
|
<div class="post-info-row">
|
|
<dt>Published</dt>
|
|
<dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
|
|
</div>
|
|
<div class="post-info-row">
|
|
<dt>Tags</dt>
|
|
<dd class="post-tags">
|
|
{{ tag_links(this.tags) }}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</aside>
|
|
{{ share_controls(this, 'post') }}
|
|
{{ narration_player(this) }}
|
|
</div>
|
|
|
|
<div class="blog-entry-body prose">
|
|
{{ this.body }}
|
|
{% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
|
|
</div>
|
|
</article>
|
|
{% elif this.parent._id == 'articles' %}
|
|
{% set article_word_count = this.body|striptags|wordcount %}
|
|
{% set article_reading_minutes = (article_word_count + 199) // 200 %}
|
|
<article class="article-post-layout shell">
|
|
<header class="article-entry-header">
|
|
<p class="eyebrow">{{ this.kicker }}</p>
|
|
<h1>{{ this.title }}</h1>
|
|
<p class="dek">{{ this.summary }}</p>
|
|
</header>
|
|
|
|
<div class="post-meta">
|
|
<aside class="post-info article-info" aria-label="Article information">
|
|
<p class="post-info-title">Article information</p>
|
|
<dl>
|
|
{% if this.author %}
|
|
<div class="post-info-row">
|
|
<dt>Author</dt>
|
|
<dd>{{ this.author }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
<div class="post-info-row">
|
|
<dt>Published</dt>
|
|
<dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
|
|
</div>
|
|
{% if this.updated %}
|
|
<div class="post-info-row">
|
|
<dt>Updated</dt>
|
|
<dd><time datetime="{{ this.updated }}">{{ this.updated|dateformat('long') }}</time></dd>
|
|
</div>
|
|
{% endif %}
|
|
<div class="post-info-row">
|
|
<dt>Reading time</dt>
|
|
<dd>{{ article_reading_minutes }} min</dd>
|
|
</div>
|
|
{% if this.tags %}
|
|
<div class="post-info-row">
|
|
<dt>Topics</dt>
|
|
<dd class="post-tags">
|
|
{{ tag_links(this.tags) }}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if this.published_urls %}
|
|
<div class="post-info-row">
|
|
<dt>Published online</dt>
|
|
<dd>
|
|
<ul class="publication-links">
|
|
{% for published_url in this.published_urls %}
|
|
<li>
|
|
<a href="{{ published_url }}" title="{{ published_url }}" aria-label="Open published article at {{ published_url }}">
|
|
{% if published_url|length > 40 %}{{ published_url[:25] }}…{{ published_url[-14:] }}{% else %}{{ published_url }}{% endif %}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</aside>
|
|
{{ share_controls(this, 'article') }}
|
|
{{ narration_player(this) }}
|
|
</div>
|
|
|
|
<div class="article-entry-body prose">
|
|
{{ this.body }}
|
|
{% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
|
|
</div>
|
|
</article>
|
|
{% else %}
|
|
<article>
|
|
<header class="hero compact entry-hero">
|
|
<div class="shell narrow">
|
|
<p class="eyebrow">{{ this.kicker }} — {{ this.date|dateformat('YYYY.MM.dd') }}</p>
|
|
<h1>{{ this.title }}</h1>
|
|
<p class="dek">{{ this.summary }}</p>
|
|
</div>
|
|
</header>
|
|
<section class="content-section">
|
|
<div class="shell prose">
|
|
{{ this.body }}
|
|
{% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
|
|
{{ share_controls(this, 'page') }}
|
|
</div>
|
|
</section>
|
|
</article>
|
|
{% endif %}
|
|
{% endblock %}
|