nasg/templates/Singular.j2.html
Peter Molnar c6755e6125 - no more microdata or RDFa in HTML: went full JSON-LD
- added og: and article: from open graph to meta
- jsonld as tmplvars for most elements
- removed unused commented code
- indention for inline CSS for readability
- merged reactions and comments into a single block
2019-02-07 19:27:15 +00:00

288 lines
11 KiB
HTML

{% extends "base.j2.html" %}
{% macro includefile(fname) %}
{% include fname %}
{% endmacro %}
{% block lang %} lang="{{ post.inLanguage }}" {% endblock %}
{% block title %}{{ post.headline }} - {{ site.name }}{% endblock %}
{% block meta %}
<meta name="author" content="{{ post.author.name }} ({{ post.author.email }})" />
<meta name="description" content="{{ post.description|striptags|e }}" />
<link rel="canonical" href="{{ post.url }}" />
<script type="application/ld+json">
{{ post|tojson(indent=4) }}
</script>
{% if post['@type'] == 'TechArticle' %}
<style media="all">
{{ includefile('prism.css')|indent(8) }}
</style>
{% endif %}
<meta property="og:title" content="{{ post.headline }}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ post.url }}" />
<meta property="og:description" content="{{ post.description|striptags|e }}" />
<meta property="article:published_time" content="{{ post.datePublished }}" />
<meta property="article:modified_time" content="{{ post.dateModified }}" />
<meta property="article:author" content="{{ post.author.name }} ({{ post.author.email}})" />
{% if post.image.url is defined %}
<meta property="og:image" content="{{ post.image.url }}" />
<meta property="og:image:type" content="{{ post.image.encodingFormat }}" />
<meta property="og:image:width" content="{{ post.image.width }}" />
<meta property="og:image:height" content="{{ post.image.height }}" />
{% else %}
<meta property="og:image" content="{{ post.image }}" />
{% endif %}
{% endblock %}
{% block prism %}
{% if post['@type'] == 'TechArticle' %}
<script>
{{ includefile('prism.js')|indent(8) }}
</script>
{% endif %}
{% endblock %}
{% block content %}
{% if post.event %}
{% set mftype = 'h-entry hentry h-event hevent' %}
{% else %}
{% set mftype = 'h-entry hentry' %}
{% endif %}
<main>
<article class="{{ mftype }}" lang="{{ post.inLanguage }}" id="article">
<header>
<h1 class="entry-title p-name">
{% if post.mentions %}
<span>
<svg width="16" height="16">
<use xlink:href="#icon-reply" />
</svg>
<a href="{{ post.url }}">
RE:
</a>
<a href="{{ post.mentions.url }}" class="u-in-reply-to">
{{ post.mentions.url }}
</a>
</span>
{% else %}
<a href="{{ post.url }}">
{{ post.headline }}
</a>
{% endif %}
</h1>
</header>
{% if post.review %}
<div class="h-review hreview">
<strong>Review summary of: <a href="{{ post.review.url }}" class="item fn p-name u-url p-item h-product">{{ post.review.name }}</a></strong>
<p>
By
<span class="p-author h-card vcard reviewer">
<a class="fn p-name url u-url u-uid" href="{{ post.author.url }}">
<span>{{ post.author.name }}</span>
</a></span> in <time class="dt-published dtreviewed" datetime="{{ post.datePublished }}">{{ post.copyrightYear }}</time>
</p>
<p>
<span class="rating">
<span class="value">{{ post.review.reviewRating.ratingValue }}</span>
out of
<span class="best">{{ post.review.reviewRating.bestRating }}</span>
</span>
</p>
<p class="p-summary summary">{{ post.review.text }}</p>
</div>
{% endif %}
{% if post.description|length %}
<div class="e-summary entry-summary">
{{ post.description }}
</div>
{% endif %}
<div class="e-content entry-content">
{{ post.text }}
</div>
<footer>
<dl>
{% if post.subjectOf %}
<dt>Trip details</dt>
<dd>
From
<time class="dt-start dtstart" datetime="{{ post.subjectOf.startDate }}">
{{ post.subjectOf.startDate }}
</time>
to
<time class="dt-end dtend" datetime="{{ post.subjectOf.endDate }}">
{{ post.subjectOf.endDate }}
</time>, in
<span class="p-location location">
{{ post.subjectOf.location.name }}
</span>
</dd>
{% endif %}
<dt>Author</dt>
<dd>
<span class="p-author h-card vcard">
<img class="photo avatar u-photo u-avatar"
src="{{ post.author.image }}"
alt="Photo of {{ post.author.name }}" />
<a class="fn p-name url u-url u-uid org" href="{{ post.author.url }}">
{{ post.author.name }}
</a>
<a class="u-email email" href="mailto:{{ post.author.email }}">
{{ post.author.email }}
</a>
</span>
</dd>
<dt>Published</dt>
<dd class="published updated">
<time class="dt-published dt-updated" datetime="{{ post.datePublished }}">{{ post.datePublished|printdate }}</time>
</dd>
<dt>License</dt>
<dd class="license">
{% if 'CC-BY-4.0' in post.license %}
<a rel="license" href="{{ post.license }}" class="u-license">
CC-BY-4.0
</a>
<ul>
<li>you can share it</li>
<li>you can republish it</li>
<li>you can modify it, but you need to indicate the modifications</li>
<li>you can use it for commercial purposes</li>
<li>you always need to make a link back here</li>
</ul>
{% elif 'CC-BY-NC-4.0' in post.license %}
<a rel="license" href="{{ post.license }}" class="u-license">
CC-BY-NC-4.0
</a>
<ul>
<li>you can share it</li>
<li>you can republish it</li>
<li>you can modify it, but you need to indicate the modifications</li>
<li>you can't use it for commercial purposes</li>
<li>you always need to make a link back here</li>
</ul>
For commercial use, please contact me.
{% elif 'CC-BY-NC-ND-4.0' in post.license %}
<a rel="license" href="{{ post.license }}" class="u-license">
CC-BY-NC-ND-4.0
</a>
<ul>
<li>you can share it</li>
<li>you can't modify it</li>
<li>you can't republish it</li>
<li>you can't use it for commercial purposes</li>
<li>you always need to make a link back here</li>
</ul>
For commercial use, please contact me.
{% endif %}
</dd>
<dt>Entry URL</dt>
<dd>
<a class="u-url u-uuid" href="{{ post.url }}">
{{ post.url }}
</a>
</dd>
{% if post.sameAs|length %}
<dt>Also on</dt>
<dd>
<ul>
{% for url in post.sameAs %}
<li>
<a class="u-syndication" href="{{ url }}">
{{ url }}
</a>
</li>
{% endfor %}
</ul>
</dd>
{% endif %}
</dl>
</footer>
{% if 'WebPage' != post['@type'] %}
<section class="syndication">
{% for action in post.potentialAction %}
{% if 'InteractAction' == action['@type'] %}
<a href="{{ action.url }}"></a>
{% endif %}
{% endfor %}
</section>
<section class="encourage">
<h2>Encourage creation!</h2>
<p>
If this entry helped you, or you simply liked it, leave a tip via <br />
{% set counters = {'donation': False} %}
{% for donate in post.potentialAction %}
{% if 'DonateAction' == donate['@type'] %}
{% if counters.donation %} or {% endif %}
<a href="{{ donate.url }}">
<svg width="16" height="16">
<use xlink:href="#icon-{{ donate.name }}"></use>
</svg> {{ donate.description }}</a>
{% if counters.update({'donation': True}) %} {% endif %}
{% endif %}
{% endfor %}
</p>
</section>
{% if post.comment|length %}
<section class="comments">
<h2><a id="comments"></a>Responses</h2>
<ol>
{% for comment in post.comment %}
<li class="h-entry p-comment">
<span class="reaction">
<a class="u-url" href="{{ comment.url }}">
{{ comment.disambiguatingDescription }}
</a>
</span>
from
<span class="p-author h-card">
{% if comment.author.url %}
<a class="url u-url" href="{{ comment.author.url }}">
<span class="p-name fn">
{{ comment.author.name }}
</span>
</a>
{% else %}
<span class="p-name fn">
{{ comment.author.name }}
</span>
{% endif %}
</span>
at
<time class="dt-published" datetime="{{ comment.datePublished }}">
{{ comment.datePublished|printdate }}
</time>
<br />
<span class="source">
<svg width="16" height="16">
<use xlink:href="#icon-link"></use>
</svg>
<a class="u-url" href="{{ comment.url }}">
{{ comment.url }}
</a>
</span>
</li>
{% endfor %}
</ol>
</section>
{% endif %}
{% endif %}
</article>
</main>
{% endblock %}