96d0c238d6
While Pandoc was generating something sane, the output of CodeHilite puts silly amount of extra text and makes the HTML output completely unreadable. In the end, it still looks like prism.js is a nice and solid solution, even if it's JS. I'll explore other options, but so far, it's either back to Pandoc, or sticking with Prism.
434 lines
16 KiB
HTML
434 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html {% block lang %}lang="{{ post.lang }}"{% endblock %}>
|
|
<head>
|
|
<title>{% block title %}{{ post.title }} - {{ site.domain }}{% endblock %}</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
|
|
<link rel="icon" href="{{ site.url }}/favicon.ico" />
|
|
{% for key, value in meta.items() %}
|
|
<link rel="{{ key }}" href="{{ value }}" />
|
|
{% endfor %}
|
|
{% block meta %}{% endblock %}
|
|
<style media="all">
|
|
{% include 'style.css' %}
|
|
</style>
|
|
<style id="css_alt" media="none">
|
|
{% include 'style-alt.css' %}
|
|
</style>
|
|
<style media="print">
|
|
{% include 'style-print.css' %}
|
|
</style>
|
|
<script>
|
|
/* color scheme switcher */
|
|
var current = localStorage.getItem("stylesheet");
|
|
if (current) {
|
|
document.querySelector('#css_alt').setAttribute("media", current);
|
|
}
|
|
|
|
function toggleStylesheet(trigger){
|
|
var setto = 'all';
|
|
var e = document.querySelector('#css_alt');
|
|
if (e.getAttribute("media") == 'all') {
|
|
setto = 'none';
|
|
}
|
|
localStorage.setItem("stylesheet", setto);
|
|
e.setAttribute("media", setto);
|
|
}
|
|
</script>
|
|
{% if post.has_code %}
|
|
<style media="all">
|
|
{% include 'prism.css' %}
|
|
</style>
|
|
<script src="{{ site.url }}/prism.js"></script>
|
|
{% endif %}
|
|
</head>
|
|
<body>
|
|
|
|
{% macro activemenu(name) %}{% if (post is defined and post.category == name ) or ( category is defined and category.name == name ) %}active{% endif %}{% endmacro %}
|
|
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a title="home" href="/" class="{{ activemenu('') }}">
|
|
<svg class="icon" width="16" height="16"><use xlink:href="#icon-home" /></svg>
|
|
home
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a title="photos" href="/category/photo/" class="{{ activemenu('photo') }}">
|
|
<svg class="icon" width="18" height="16"><use xlink:href="#icon-photo" /></svg>
|
|
photos
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a title="journal" href="/category/journal/" class="{{ activemenu('journal') }}">
|
|
<svg class="icon" width="16" height="16"><use xlink:href="#icon-journal" /></svg>
|
|
journal
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a title="IT" href="/category/article/" class="{{ activemenu('article') }}">
|
|
<svg class="icon" width="16" height="16"><use xlink:href="#icon-article" /></svg>
|
|
IT
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a title="notes" href="/category/note/" class="{{ activemenu('note') }}">
|
|
<svg class="icon" width="16" height="16"><use xlink:href="#icon-note" /></svg>
|
|
notes
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<form role="search" method="get" action="/search.php">
|
|
<label for="s">Search</label>
|
|
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
|
|
<input type="submit" value="Go ➡" />
|
|
</form>
|
|
|
|
<p class="contrast">
|
|
<a title="toggle site colour scheme" href="#"
|
|
onclick="toggleStylesheet(this)">
|
|
<svg class="icon" width="16" height="16">
|
|
<use xlink:href="#icon-contrast" />
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
</header>
|
|
|
|
{% block content %}
|
|
<section>
|
|
<article class="h-entry hentry singular" lang="{{ post.lang }}">
|
|
<header>
|
|
<h1>
|
|
{% if post.is_reply %}
|
|
<span class="p-name">
|
|
<svg class="icon" width="16" height="16">
|
|
<use xlink:href="#icon-reply" />
|
|
</svg>
|
|
<a href="/{{ post.slug }}/" class="u-url">
|
|
RE:
|
|
</a>
|
|
<a href="{{ post.is_reply }}" class="u-in-reply-to">
|
|
{{ post.is_reply }}
|
|
</a>
|
|
</span>
|
|
{% else %}
|
|
<a href="/{{ post.slug }}/" title="{{ post.title }}">
|
|
<span class="entry-title p-name">{{ post.title }}</span>
|
|
</a>
|
|
{% endif %}
|
|
</h1>
|
|
</header>
|
|
|
|
{% if post.review %}
|
|
<div class="h-review hreview">
|
|
<h2>Review summary</h2>
|
|
<p>
|
|
<a href="{{ post.review.url }}" class="p-name url fn p-item h-product">
|
|
{{ post.review.title }}
|
|
</a>
|
|
</p>
|
|
<p>
|
|
<span class="rating">
|
|
<span class="value">{{ post.review.rating }}</span>
|
|
out of
|
|
<span class="best">5</span>
|
|
</span>
|
|
</p>
|
|
<p class="p-summary">{{ post.review.summary }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if post.summary %}
|
|
<div class="e-summary entry-summary">
|
|
{{ post.html_summary }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="e-content entry-content">
|
|
{{ post.html_content }}
|
|
</div>
|
|
|
|
<footer>
|
|
<dl>
|
|
|
|
<dt>Published</dt>
|
|
<dd class="published">
|
|
<time class="dt-published" datetime="{{ post.pubtime }}">{{ post.pubdate }}</time>
|
|
</dd>
|
|
|
|
<dt>Author</dt>
|
|
<dd>
|
|
<p class="p-author h-card vcard">
|
|
<img class="photo avatar u-photo u-avatar"
|
|
src="{{ author.avatar }}"
|
|
alt="Photo of {{ author.name }}" />
|
|
<a class="fn p-name url u-url u-uid" href="{{ author.url }}">
|
|
{{ author.name }}
|
|
</a>
|
|
<<a rel="me" class="u-email email" href="mailto:{{ author.email }}">
|
|
{{ author.email }}
|
|
</a>>
|
|
</p>
|
|
</dd>
|
|
|
|
<dt>Entry URL</dt>
|
|
<dd>
|
|
<a class="u-url u-uuid" rel="bookmark" href="{{ post.url }}">
|
|
{{ post.url }}
|
|
</a>
|
|
</dd>
|
|
|
|
<dt>License</dt>
|
|
<dd class="license">
|
|
{% if post.licence == 'by' %}
|
|
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/" 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 post.licence.text == 'by-nc' %}
|
|
<a rel="license" href="https://creativecommons.org/licenses/by-nc/4.0/" 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.
|
|
{% else %}
|
|
<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" 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 class="noprint">Leave a tip</dt>
|
|
<dd class="donation">
|
|
<p>
|
|
{% if post.category in labels.tiptext.keys(): %}
|
|
{{ labels.tiptext[post.category] }}
|
|
{% else %}
|
|
Did you like what you read?<br />Leave a tip!
|
|
{% endif %}
|
|
</p>
|
|
<ul>
|
|
{% for tip in tips %}
|
|
<li>
|
|
<a rel="payment" title="pay {{ author.name }} via {{ tip.label }} {{ tip.value }}" href="{{ tip.url }}">
|
|
{{ tip.value }}
|
|
<span class="method">
|
|
<svg class="icon" width="16" height="16">
|
|
<use xlink:href="#icon-{{ tip.name }}"></use>
|
|
</svg>
|
|
with {{ tip.label }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</footer>
|
|
|
|
|
|
{% if post.syndicate|length %}
|
|
<section class="syndication">
|
|
{% for url in post.syndicate %}
|
|
<a href="{{ url }}" class="u-syndication"></a>
|
|
{% endfor %}
|
|
</section>
|
|
{% endif %}
|
|
|
|
|
|
{% if post.replies|length %}
|
|
<section class="replies">
|
|
<h2><a id="replies"></a>Replies</h2>
|
|
<ol>
|
|
{% for mtime, comment in post.replies.items() %}
|
|
<li class="h-entry p-comment">
|
|
<time class="dt-published" datetime="{{ comment.pubtime }}">
|
|
{{ comment.pubdate }}
|
|
</time> 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><br />
|
|
<span class="source">
|
|
<svg class="icon" width="16" height="16">
|
|
<use xlink:href="#icon-link"></use>
|
|
</svg>
|
|
<a class="u-url" href="{{ comment.source }}">
|
|
{{ comment.source }}
|
|
</a>
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if post.reactions|length %}
|
|
<section class="reactions">
|
|
<h2><a id="reactions"></a>Reactions</h2>
|
|
<dl>
|
|
{% for character, comments in post.reactions.items() %}
|
|
<dt>{{ character }}</dt>
|
|
<dd>
|
|
<ul>
|
|
{% for mtime, comment in comments.items() %}
|
|
<li class="h-entry p-comment">
|
|
<span class="reaction">
|
|
<a class="u-url" href="{{ comment.source }}">
|
|
{{ comment.type }}
|
|
</a>
|
|
</span>
|
|
<time class="dt-published" datetime="{{ comment.pubtime }}">
|
|
{{ comment.pubdate }}
|
|
</time> 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>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</dd>
|
|
{% endfor %}
|
|
</dl>
|
|
</section>
|
|
{% endif %}
|
|
|
|
</article>
|
|
</section>
|
|
|
|
{% endblock %}
|
|
|
|
{% block pagination %}
|
|
{% endblock %}
|
|
|
|
|
|
<footer>
|
|
<div class="limit">
|
|
<nav class="p-author h-card vcard">
|
|
<h2>Contact</h2>
|
|
<div>
|
|
<dl>
|
|
<dt>
|
|
<img class="photo avatar u-photo u-avatar"
|
|
src="https://petermolnar.net/molnar_peter_avatar.jpg"
|
|
alt="Photo of Peter Molnar" />
|
|
</dt>
|
|
<dd>
|
|
<a class="fn p-name url u-url u-uid" href="/about.html">
|
|
Peter Molnar
|
|
</a>
|
|
</dd>
|
|
<dt>email</dt>
|
|
<dd>
|
|
<a rel="me" class="u-email email" href="mailto:{{ author.email }}">
|
|
{{ author.email }}
|
|
</a>
|
|
</dd>
|
|
{% if author.gpg %}
|
|
<dt>GPG</dt>
|
|
<dd>
|
|
<a rel="me" class="u-gpg gpg" href="/{{ author.gpg }}">key</a>
|
|
</dd>
|
|
{% endif %}
|
|
<dt>url</dt>
|
|
<dd>
|
|
<a rel="me" class="u-url url" href="{{ author.url }}">
|
|
{{ author.url }}
|
|
</a>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div>
|
|
<dl>
|
|
{% if author.xmpp %}
|
|
<dt>XMPP</dt>
|
|
<dd>
|
|
<a rel="me" class="u-xmpp xmpp" href="xmpp:{{ author.xmpp }}">{{ author.xmpp }}</a>
|
|
</dd>
|
|
{% endif %}
|
|
{% if author.sip %}
|
|
<dt>SIP</dt>
|
|
<dd>
|
|
<a rel="me" class="u-sip sip" href="sip:{{ author.sip }}">
|
|
{{ author.sip }}
|
|
</a>
|
|
</dd>
|
|
{% endif %}
|
|
{% if author.icq %}
|
|
<dt>ICQ</dt>
|
|
<dd>
|
|
<a rel="me" class="u-icq icq" href="icq:{{ author.icq }}">
|
|
{{ author.icq }}
|
|
</a>
|
|
</dd>
|
|
{% endif %}
|
|
{% if author.flickr %}
|
|
<dt>flickr</dt>
|
|
<dd>
|
|
<a rel="me" class="u-flickr" href="https://flickr.com/people/{{ author.flickr }}">{{ author.flickr }}</a>
|
|
</dd>
|
|
{% endif %}
|
|
{% if author.github %}
|
|
<dt>github</dt>
|
|
<dd>
|
|
<a rel="me" class="u-github" href="https://github.com/{{ author.github }}">{{ author.github }}</a>
|
|
</dd>
|
|
{% endif %}
|
|
{% if author.twitter %}
|
|
<dt>twitter</dt>
|
|
<dd>
|
|
<a rel="me" class="u-twitter" href="https://twitter.com/{{ author.twitter }}">{{ author.twitter }}</a>
|
|
</dd>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
</nav>
|
|
<div class="webring">
|
|
<a href="https://xn--sr8hvo.ws/🇻🇮📢/previous">←</a>
|
|
Member of <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
|
|
<a href="https://xn--sr8hvo.ws/🇻🇮📢/next">→</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{% include 'symbols.svg' %}
|
|
|
|
</body>
|
|
</html>
|