added reading time plugin and published new blog post

.eleventy.js

@@ -4,6 +4,7 @@ const pluginPageAssets = require("eleventy-plugin-page-assets");
 const pluginInclusiveLanguage = require("@11ty/eleventy-plugin-inclusive-language");
 const del = require("del");
 const htmlmin = require("html-minifier");
+const readingtime = require("@myxotod/eleventy-plugin-readingtime");
 
 const config = {
   dir: {
@@ -56,6 +57,9 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(pluginHighlight);
   eleventyConfig.addPlugin(pluginInclusiveLanguage);
+  eleventyConfig.addPlugin(readingtime, {
+    verbose: true
+  });
 
   // Filters
   const publishedPosts = (post) => {
@@ -94,7 +98,7 @@ module.exports = (eleventyConfig) => {
       })
       .filter(publishedPosts);
   });
-  eleventyConfig.addCollection('coding', (collectionApi) => {
+  eleventyConfig.addCollection('page_coding', (collectionApi) => {
     return collectionApi.getFilteredByGlob(config.dir.input + '/coding/**/*.md')
       .filter(publishedPosts);
   });

README.md

@@ -2,7 +2,7 @@
 
 Personal website of Maximilian Boll. Feel free to look around.
 
-![](https://img.shields.io/badge/version-v1.1.9-brightgreen?style=for-the-badge)
+![](https://img.shields.io/badge/version-v1.2.0-brightgreen?style=for-the-badge)
 ![](https://img.shields.io/github/last-commit/MyXoToD/makkusu.dev?style=for-the-badge)
 ![](https://img.shields.io/github/actions/workflow/status/MyXoToD/makkusu.dev/deploy.yml?style=for-the-badge)
 

package.json

@@ -23,6 +23,7 @@
     "@11ty/eleventy-plugin-inclusive-language": "^1.0.3",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@myxotod/eleventy-plugin-readingtime": "^1.0.1",
     "del": "^6.0.0",
     "eleventy-plugin-page-assets": "github:maxboeck/eleventy-plugin-page-assets",
     "html-minifier": "^4.0.0",

src/_includes/post-coding.njk

@@ -9,7 +9,7 @@
     <iframe title="{{ project.data.title }}" src="https://codepen.io/MyXoToD/embed/{{ project.data.codepen }}?default-tab=result&editable=true&theme-id=dark&data-show-tab-bar=no" loading="lazy"></iframe>
   </div>
   <div class="post__data">
-    <div class="post__date">{{ project.date | formatDate }}</div>
+    <div class="post__date">{{ project.date | formatDate }} ({{ project | readingtime }})</div>
     <h2 class="post__title"><a href="{{ project.url | url }}">{{ project.data.title }}</a></h2>
 
     <p class="post__excerpt">{{ project.data.excerpt }}</p>

src/_includes/post-tag.njk

@@ -0,0 +1,25 @@
+{% if post.data.cover %}
+  {% set cover = post.url + post.data.cover %}
+{% else %}
+  {% set cover = fallbackcover %}
+{% endif %}
+
+<article class="post">
+  <a href="{{ post.url | url }}" class="post__image">
+    <img src="{{ cover }}" alt="{{ post.data.title }}">
+  </a>
+  <div class="post__data">
+    <div class="post__date">{{ post.date | formatDate }}</div>
+    <h2 class="post__title"><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
+
+    <p class="post__excerpt">{{ post.data.excerpt }}</p>
+
+    <ul class="post__tags">
+      {% for tag in post.data.tags %}
+        <li class="post__tag">
+          <a href="{{ '/blog/tag/' + tag + '/' | url }}">{{ tag }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</article>

src/_includes/post.njk

@@ -9,7 +9,7 @@
     <img src="{{ cover }}" alt="{{ post.data.title }}">
   </a>
   <div class="post__data">
-    <div class="post__date">{{ post.date | formatDate }}</div>
+    <div class="post__date">{{ post.date | formatDate }} ({{ post | readingtime }})</div>
     <h2 class="post__title"><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
 
     <p class="post__excerpt">{{ post.data.excerpt }}</p>

src/_layouts/post.njk

@@ -25,7 +25,7 @@ include_prism: true
         <img src="{{ '/assets/images/avatar.webp' | url }}" alt="Maximilian Boll">
       </div>
       <div class="post-detail__author">Maximilian Boll</div>
-      <div class="post-detail__date">{{ date | formatDateFull }}</div>
+      <div class="post-detail__date">{{ date | formatDateFull }} ({{ content | readingtime }})</div>
     </div>
 
     {{ content | safe }}

src/assets/stylesheets/_post.scss

@@ -339,6 +339,30 @@
       font-weight: 900;
     }
   }
+
+  table {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    font-family: var(--ff-sans);
+    background-color: rgba(var(--c-copy-rgb), .02);
+
+    th, td {
+      padding: .5rem;
+    }
+
+    tr {
+      &:nth-child(odd) {
+        background-color: var(--c-elevation-1);
+      }
+    }
+
+    thead {
+      tr {
+        background-color: var(--c-accent) !important;
+      }
+    }
+
+  }
 }
 
 .post-progress {