start implementing related posts system

.eleventy.js

@@ -1,5 +1,9 @@
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
+const timeToRead = require('eleventy-plugin-time-to-read');
+const safeLinks = require('@sardine/eleventy-plugin-external-links');
+const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");
+const related = require("eleventy-plugin-related");
 
 module.exports = function (eleventyConfig) {
   const parseDate = (str) => {
@@ -12,8 +16,16 @@ module.exports = function (eleventyConfig) {
   const formatPart = (part, date) =>
   new Intl.DateTimeFormat("en", part).format(date);
 
-  eleventyConfig.addPlugin(pluginRss)
-  eleventyConfig.addPlugin(syntaxHighlight)
+  eleventyConfig.setNunjucksEnvironmentOptions({
+    lstripBlocks: true,
+    trimBlocks: true
+  });
+
+  eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.addPlugin(timeToRead);
+  eleventyConfig.addPlugin(safeLinks);
+  eleventyConfig.addPlugin(eleventySass);
 
   eleventyConfig.addPassthroughCopy({ "src/static": "/" });
 
@@ -34,11 +46,35 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addFilter('urlescape', str => {
     return str.split('/').map(part => encodeURI(part)).join('/')
-  })
+  });
+
+  // this appears to potentially be dependent on rendering order
+  eleventyConfig.addFilter("related", function(obj) {
+    const post = this.ctx;
+    const posts = this.ctx.collections.posts.map(post => post.data);
+
+    const tagScore = (a, b) => {
+      const total = a.tags.length + b.tags.length;
+      const intersection = a.tags.filter(tag => b.tags.includes(tag)).length;
+      return (intersection * 2) / total;
+    }
+
+    const results = related.related({
+      serializer: (doc) => [doc.title, doc.description],
+      weights: [10, 10],
+    })(post, posts).map(result => {
+      return {
+        relative: result.relative + tagScore(post, result.document),
+        document: result.document
+      }
+    });
+
+    return results.filter(result => result.relative > 0.0).slice(0,3);
+  });
 
   eleventyConfig.addCollection('posts', collection => {
     return collection.getFilteredByGlob('src/posts/*.md').reverse()
-  })
+  });
 
   return {
     templateFormats: ["njk", "md", "html"],

package.json

@@ -10,6 +10,10 @@
     "dependencies": {
         "@11ty/eleventy": "^v2.0.0-beta.1",
         "@11ty/eleventy-plugin-rss": "^1.2.0",
-        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0"
+        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+        "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.3",
+        "@sardine/eleventy-plugin-external-links": "^1.4.0",
+        "eleventy-plugin-related": "^1.0.6",
+        "eleventy-plugin-time-to-read": "^1.3.0"
     }
 }

src/_includes/layouts/default.njk

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>{{ title if title else site.title }}</title>
     
-    <link rel="stylesheet" href="/style.css"/>
+    <link rel="stylesheet" href="/css/style.css"/>
     <link rel="stylesheet" href="/prism.css"/>
 
     <meta name="description" content="{{ description if description else site.description }}" />

src/_includes/layouts/post.njk

@@ -13,7 +13,11 @@ subhead: blog
                 {% if changed_date %}
                     <small class="updated">(updated <time datetime="{{changed_date | date_to_datetime }}">{{ changed_date | date_formatted }}</time>)</small>
                 {% endif %}
+                <span class="middot"></span>
+                <span class="readtime">{{ content | timeToRead }} to read</span>
+                <span class="middot"></span>
                 <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+                <span class="middot"></span>
                 {% if tags %}
                     <span>in 
                         {% for tag in tags %}

src/css/css.json

@@ -0,0 +1,3 @@
+{
+    "eleventyExcludeFromCollections": true
+}

src/css/style.scss

@@ -0,0 +1,160 @@
+html {
+  background-color: rgb(236, 169, 203);
+  color: rgb(92, 53, 124);
+}
+
+a {
+  color: rgb(255, 0, 140);
+}
+
+.like-a {
+  color: rgb(255, 0, 140);
+  text-decoration: underline;
+}
+
+a.active,
+li.lavender-webring-curr-site>a {
+  color: rgb(195, 0, 255);
+}
+
+#site_header {
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgb(255, 0, 140);
+}
+
+footer {
+  padding-top: 5px;
+}
+
+.footer-kitten {
+  height: 88px;
+  border-bottom: 1px solid rgb(255, 0, 140);
+  margin-bottom: 5px;
+
+  >img {
+    height: 88px;
+  }
+}
+
+footer,
+#site_header,
+.lavender-webring-container {
+  text-align: center;
+}
+
+.list-entry {
+  list-style-type: none;
+
+  h2 {
+    margin-bottom: 0;
+  }
+}
+
+#content {
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.byline {
+  font-size: 0.75rem;
+}
+
+.middot::after {
+  content: '\00B7';
+  display: inline-block;
+}
+
+time,
+.author,
+.updated {
+  font-weight: bold;
+}
+
+.article_header,
+.page_header {
+  padding-bottom: 4px;
+  border-bottom: 1px dotted rgb(219, 103, 167);
+}
+
+.article_header>h1,
+.page_header>h1 {
+  margin: 0.1rem;
+}
+
+img {
+  max-width: 75%;
+}
+
+.tag {
+  font-weight: bold;
+}
+
+.banner-link {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.kofi-banner {
+  border-radius: 8px;
+  padding: 4px;
+  border: 2px solid rgb(255, 0, 140);
+  background-color: rgba(221, 116, 174, 0.211);
+  font-size: 1.1rem;
+}
+
+.content-warnings {
+  border-radius: 8px;
+  padding: 4px;
+  border: 2px solid rgb(255, 0, 140);
+  background-color: rgba(221, 116, 174, 0.211);
+  font-size: 1.1rem;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  width: fit-content;
+
+  >p {
+    margin: 0;
+  }
+}
+
+.greentext {
+  color: #789922;
+}
+
+.lavender-webring-container,
+.sleepy-zone-webring-container {
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  font-size: 1.125rem;
+}
+
+.lavender-webring-description,
+.sleepy-zone-webring-description {
+  margin-block-end: 0.5em;
+}
+
+.lavender-webring-site-links,
+.sleepy-zone-webring-site-links {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.lavender-webring-prev-site a::before,
+.sleepy-zone-webring-prev-site a::before {
+  content: "←";
+  margin-inline-end: 1ch;
+}
+
+.lavender-webring-next-site a::after,
+.sleepy-zone-webring-next-site a::after {
+  content: "→";
+  margin-inline-start: 1ch;
+}

src/feed.njk

@@ -14,18 +14,18 @@ metadata:
     id: https://maia.crimew.gay/
 ---
 <?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.url }}">
   <title>{{ metadata.title }}</title>
   <subtitle>{{ metadata.feed.subtitle }}</subtitle>
   <link href="{{ metadata.feed.url }}" rel="self"/>
   <link href="{{ metadata.url }}"/>
-  <updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
+  <updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
   <id>{{ metadata.feed.id }}</id>
   <author>
     <name>{{ metadata.author.name }}</name>
     <email>{{ metadata.author.email }}</email>
   </author>
-  {%- for post in collections.posts %}
+  {%- for post in collections.posts | reverse %}
   {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
   <entry>
     <title>{{ post.data.title }}</title>
@@ -34,7 +34,7 @@ metadata:
     {% else %}
       <link href="{{ absolutePostUrl }}"/>
     {% endif %}
-    <updated>{{ post.date | rssDate }}</updated>
+    <updated>{{ post.date | dateToRfc3339 }}</updated>
     <id>{{ absolutePostUrl }}</id>
     <content type="html">{{ post.templateContent | safe | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
   </entry>

src/posts.njk

@@ -11,8 +11,27 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
 {% block main %}
   <ul>
     {% for entry in pagination.items %}
-    <li>
-      <span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
+    <li class="list-entry">
+      <a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
+      <div class="byline">
+        <time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
+        {% if entry.data.changed_date %}
+            <small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
+        {% endif %}
+        <span class="middot"></span>
+        <span class="readtime">{{ entry.content | timeToRead }} to read</span>
+        <span class="middot"></span>
+        <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+        <span class="middot"></span>
+        {% if entry.data.tags %}
+            <span>in 
+                {% for tag in entry.data.tags %}
+                    <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+            </span>
+        {% endif %}
+        </div>
+        <span class="lead"><strong>{{ entry.data.description }}</strong></span>
     </li>
     {% endfor %}
   </ul>

src/posts/how-to-hack-an-airline.md

@@ -4,6 +4,7 @@ date: 2023-01-19
 changed_date: 2023-01-22
 description: "and grab the TSA nofly list along the way"
 tags:
+    - leak
     - security
     - infosec
     - jenkins

src/posts/nebita-malware.md

@@ -7,7 +7,7 @@ tags:
     - infosec
     - malware
     - reverse engineering
-    - php
+    - analysis
 feature_image: /img/posts/nebita-malware/cover.jpg
 feature_alt: "a glitchy edited screenshot of the nebita.com home page"
 ---

src/posts/optimeyes-leak.md

@@ -3,6 +3,7 @@ title: "infosec company owned completely by 4chan user"
 date: 2023-05-10
 description: "risk visualize deez nuts"
 tags:
+    - leak
     - security
     - infosec
     - jenkins

src/static/style.css

@@ -41,6 +41,14 @@ footer,
   text-align: center;
 }
 
+.list-entry {
+  list-style-type: none;
+}
+
+.list-entry h2 {
+  margin-bottom: 0;
+}
+
 #content {
   max-width: 900px;
   margin-left: auto;
@@ -53,6 +61,11 @@ footer,
   font-size: 0.75rem;
 }
 
+.middot::after {
+  content: '\00B7';
+  display: inline-block;
+}
+
 time,
 .author,
 .updated {

src/tagged.njk

@@ -20,9 +20,26 @@ date: git Last Modified
   <ul>
     {% set taglist = collections[ tag ] %}
     {% for entry in taglist | reverse %}
-    <li>
-      <span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
-    </li>
+      <li class="list-entry">
+          <a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
+          <div class="byline">
+          <time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
+          {% if entry.data.changed_date %}
+              <small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
+          {% endif %}
+          <span class="middot"></span>
+          <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+          <span class="middot"></span>
+          {% if entry.data.tags %}
+              <span>in 
+                  {% for tag in entry.data.tags %}
+                      <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
+                  {% endfor %}
+              </span>
+          {% endif %}
+          </div>
+          <span class="lead"><strong>{{ entry.data.description }}</strong></span>
+      </li>
     {% endfor %}
   </ul>
 {% endblock %}