diff options
| -rw-r--r-- | _layouts/post.html | 121 | ||||
| -rw-r--r-- | blog.html | 85 | ||||
| -rw-r--r-- | mentions.js | 13 |
3 files changed, 196 insertions, 23 deletions
diff --git a/_layouts/post.html b/_layouts/post.html index a00961b..fe036d2 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,37 +1,116 @@ --- layout: default --- + <article class="h-entry"> -<a href="/blog"> + <a href="/blog"> <p>⟸ Back to blog</p> -</a> -<h1 class="p-name">{{page.title}}</h1> -<time class="dt-published" datetime="{{page.date}}"> - <p><em style="color: gray">{{page.date | date: "%-d %B %Y"}}</em></p> -</time> + </a> + <h1 class="p-name">{{page.title}}</h1> + <script type="text/javascript" src="../../../mentions.js"></script> + <time class="dt-published" datetime="{{page.date}}"> + <p> + <svg + alt="date published" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-calendar-fill" + viewBox="0 0 16 16" + > + <path + d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" + /> + </svg> + <em style="color: gray; padding-right: 1em" + >{{page.date | date: "%-d %B %Y"}}</em + > + <svg + alt="reading time" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-stopwatch-fill" + viewBox="0 0 16 16" + > + <path + d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z" + /> + </svg> + {% assign time = page.content | number_of_words: "auto" | divided_by: 238 + %} {% if time == 0 %} + <em style="color: gray; padding-right: 1em">Less than a minute</em> + {% elsif time == 1 %} + <em style="color: gray; padding-right: 1em">{{time}} minute</em> + {% else %} + <em style="color: gray; padding-right: 1em">{{time}} minutes</em> + {% endif %} + <svg + alt="interactions" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-chat-right-text-fill" + viewBox="0 0 16 16" + > + <path + d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" + /> + </svg> + <a + style="text-decoration: none" + href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ" + ><em style="color: gray" id="interactions" + ><span + data-webmention-count + data-url="https://www.mounderfod.online{{page.url | relative_url}}" + ></span> </em + ></a> + </p> + </time> -<p class="p-summary" style="display: none;">{{post.excerpt | strip_html | truncatewords: 20}}</p> -<span rel="author" class="h-card p-author" style="display: none;"> + <p class="p-summary" style="display: none"> + {{post.excerpt | strip_html | truncatewords: 20}} + </p> + <span rel="author" class="h-card p-author" style="display: none"> <p class="p-name">Noah</p> <p class="p-nickname">mounderfod</p> <p class="p-given-name">Noah</p> <a class="u-url" rel="me" href="https://mounderfod.online"></a> <p class="p-country-name">United Kingdom</p> </span> -<a class="u-url" style="display: none;" href="https://mounderfod.online{{page.url}}">https://mounderfod.online{{page.url}}</a> + <a + class="u-url" + style="display: none" + href="https://mounderfod.online{{page.url}}" + >https://mounderfod.online{{page.url}}</a + > -{% for tag in page.tags %} -<p class="p-category" style="display: none;">{{tag}}</p> -{% endfor %} + {% for tag in page.tags %} + <p class="p-category" style="display: none">{{tag}}</p> + {% endfor %} -<div class="e-content" style="color: black;">{{content}}</div> + <div class="e-content" style="color: black">{{content}}</div> -<p> - <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-tag-fill" - viewBox="0 0 16 16"> - <path - d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> + <p> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-tag-fill" + viewBox="0 0 16 16" + > + <path + d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" + /> </svg> - <em style="color: gray;">{{page.tags | join: ", "}}</em> -</p> -</article> \ No newline at end of file + <em style="color: gray">{{page.tags | join: ", "}}</em> + </p> + <a href="/blog"> + <p>⟸ Back to blog</p> + </a> +</article> diff --git a/blog.html b/blog.html index b8dcb57..6e51827 100644 --- a/blog.html +++ b/blog.html @@ -4,9 +4,90 @@ title: Blog permalink: /blog/ --- -<a href="/feed.xml"><p>Click here for RSS feed</p></a> +<h1 style="text-align: center">Blog</h1> +<script type="text/javascript" src="../mentions.js"></script> + +<a href="/feed.xml" style="text-align: center" + ><p style="color: -webkit-link">Click here for RSS feed</p></a +> {% for post in site.posts %} <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> -<p><em>{{post.date | date: "%-d %B %Y"}}</em></p> +<p> + <svg + alt="date published" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-calendar-fill" + viewBox="0 0 16 16" + > + <path + d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" + /> + </svg> + <em style="color: gray; padding-right: 1em" + >{{post.date | date: "%-d %B %Y"}}</em + > + <svg + alt="reading time" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-stopwatch-fill" + viewBox="0 0 16 16" + > + <path + d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z" + /> + </svg> + {% assign time = post.content | number_of_words: "auto" | divided_by: 238 %} + {% if time == 0 %} + <em style="color: gray; padding-right: 1em">Less than a minute</em> + {% elsif time == 1 %} + <em style="color: gray; padding-right: 1em">{{time}} minute</em> + {% else %} + <em style="color: gray; padding-right: 1em">{{time}} minutes</em> + {% endif %} + <svg + alt="interactions" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-chat-right-text-fill" + viewBox="0 0 16 16" + > + <path + d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" + /> + </svg> + <a + style="text-decoration: none" + href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ" + ><em style="color: gray" id="interactions" + ><span + data-webmention-count + data-url="https://www.mounderfod.online{{post.url | relative_url}}" + ></span> </em + ></a> +</p> <p>{{ post.excerpt | truncatewords: 50 }}</p> +<p> + <svg + alt="tags" + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="gray" + class="bi bi-tag-fill" + viewBox="0 0 16 16" + > + <path + d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" + /> + </svg> + <em style="color: gray">{{post.tags | join: ", "}}</em> +</p> {% endfor %} diff --git a/mentions.js b/mentions.js new file mode 100644 index 0000000..83a1c5a --- /dev/null +++ b/mentions.js @@ -0,0 +1,13 @@ +jQuery(function ($) { + $("*[data-webmention-count]").each(function (i, e) { + $.getJSON( + "https://webmention.io/api/count", + { + target: $(e).data("url"), + }, + function (data) { + $(e).text(data.count + " mentions"); + } + ); + }); +}); |