fix webmentions & css

_config/filters.js

@@ -1,4 +1,5 @@
 import { DateTime } from "luxon";
+import sanitizeHtml from 'sanitize-html';
 
 export default function(eleventyConfig) {
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
@@ -6,6 +7,10 @@ export default function(eleventyConfig) {
 		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
 	});
 
+	eleventyConfig.addFilter('dateFromTimestamp', (timestamp) => {
+		return DateTime.fromISO(timestamp, { zone: 'America/New_York' }).toJSDate()
+	})
+
 	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
 		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
 		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
@@ -36,7 +41,7 @@ export default function(eleventyConfig) {
 		const clean = (entry) => {
 			const { html, text } = entry.content
 			if (html) {
-			entry.content.value = sanitizeHTML(text, allowedHTML)
+			entry.content.value = sanitizeHtml(text, allowedHTML)
 			};
 			return entry;
 		}
@@ -82,6 +87,7 @@ export default function(eleventyConfig) {
 		return mentions.filter(entry => !!entry['mentionType'])
 	});
 
+
 	// Return the smallest number argument
 	eleventyConfig.addFilter("min", (...numbers) => {
 		return Math.min.apply(null, numbers);
@@ -97,3 +103,4 @@ export default function(eleventyConfig) {
 	});
 
 };
+

_data/webmentions.js

@@ -1,28 +1,24 @@
-import "dotenv/config.js";
+import Fetch from "@11ty/eleventy-fetch";
+import 'dotenv/config';
 import fs from "fs";
-import fetch from "node-fetch";
 import unionBy from "lodash-es/unionBy.js";
 import domain from "./metadata.js";
 
-
 // Configuration Parameters
 const CACHE_DIR = '_cache';
 const API_ORIGIN = 'https://webmention.io/api/mentions.jf2';
 const TOKEN = process.env.WEBMENTION_IO_TOKEN;
 
 async function fetchWebmentions(since, perPage = 10000) {
-  // If we don't have a domain name or token, abort
 	if (!domain || !TOKEN) {
 	console.warn('>>> unable to fetch webmentions: missing domain or token');
 	return false;
 	}
-
-  let url = `${API_ORIGIN}?domain=${domain}&token=${TOKEN}&per-page=${perPage}`;
+	let url = `${API_ORIGIN}?token=${TOKEN}&per-page=${perPage}`;
 	if (since) url += `&since=${since}`; // only fetch new mentions
-
 	const response = await fetch(url);
 	if (response.ok) {
-	const feed = await response.json();
+		let feed = await response.json();
 		console.log(`>>> ${feed.children.length} new webmentions fetched from ${API_ORIGIN}`);
 		return feed;
 	}

_includes/layouts/base.njk

@@ -31,7 +31,10 @@
 		{#- Add an arbitrary string to the bundle #}
 		{%- css %}/* This is an arbitrary CSS string added to the bundle */{% endcss %}
 		{#- Add the contents of a file to the bundle #}
-		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+		{% css %}{% include "public/css/index.css" %}{% endcss %}
+		{% css %}{% include "public/css/webmentions.css" %}{% endcss %}
+		{% css %}{% include "public/css/message-box.css" %}{% endcss %}
+		{% css %}{% include "public/css/prism-diff.css" %}{% endcss %}
 		{#- Or you can add from node_modules #}
 		{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
 

_includes/layouts/post.njk

@@ -27,7 +27,8 @@ layout: layouts/base.njk
 
 <hyvor-talk-comments website-id="9100" page-id="{{ permalink }}"></hyvor-talk-comments>
 
-{% include 'webmentionlist.njk' %}
+{% include 'webmentions.njk' %}
+
 
 {%- endif %}
 {%- endif %}

_includes/likes.njk

@@ -11,9 +11,9 @@
 		  {% endif %}
 
 		  {% if webmention.author.photo %}
-		  <img src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" alt="" class="webmentions__face" loading="lazy" />
+		  <img eleventy:ignore class="webmention__author__photo" src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" class="webmentions__face" loading="lazy" />
 		  {% else %}
-		  <img class="webmention__author__photo" src="{{ '/img/default_avatar.png' | url }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" alt="" class="webmentions__face" />
+		  <img eleventy:ignore class="webmention__author__photo" src="{{ '/img/default_avatar.png' | url }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" class="webmentions__face" />
 		  {% endif %}
 
 		  {% if webmention.url != "" %}
@@ -23,7 +23,6 @@
 		</div>
   {% endif %}
 
-    
   {% if reposts.length > 0 %}
 		<h4>{{ reposts.length }} Repost{% if reposts.length != 1 %}s{% endif %}</h4>
 			<div class="webmentions__facepile">
@@ -33,9 +32,9 @@
 			{% endif %}
 
 			{% if webmention.author.photo %}
-			<img src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" alt="" class="webmentions__face" loading="lazy" />
+			<img eleventy:ignore class="webmention__author__photo" src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" class="webmentions__face" loading="lazy" />
 			  {% else %}
-			  <img class="webmention__author__photo" src="{{ '/img/default_avatar.png' | url }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" alt="" class="webmentions__face" />
+			  <img eleventy:ignore class="webmention__author__photo" src="{{ '/img/default_avatar.png' | url }}" alt="{{ webmention.author.name }}" title="{{ webmention.author.name }}" class="webmentions__face" />
 			{% endif %}
 			{% if webmention.url != "" %}
 			</a>

_includes/webmention.njk

@@ -3,15 +3,15 @@
 	{% if webmention.author %}
 		<a class="webmention__author p-author h-card u-url" href="{{ webmention.url }}" target="_blank" rel="noopener noreferrer">
 		  {% if webmention.author.photo %}
-			<img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}">
+			<img eleventy:ignore class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="{{ webmention.author.name }}">
 		  {% else %}
-			<img class="webmention__author__photo" src="{{ '/img/webmention-avatar-default.svg' | url }}" alt="">
+			<img eleventy:ignore class="webmention__author__photo" src="{{ '/blog/img/default_avatar.png' | url }}" alt="">
 		  {% endif %}
 		  <strong class="p-name">{{ webmention.author.name }}</strong>
 		</a>
 	  {% else %}
 		<span class="webmention__author">
-		  <img class="webmention__author__photo" src="{{ '/img/webmention-avatar-default.svg' | url }}" alt="">
+		  <img class="webmention__author__photo" src="{{ '/blog/img/default_avatar.png' | url }}" alt="">
 		  <strong>Anonymous</strong>
 		</span>
 	  {% endif %}

eleventy.config.js

@@ -92,9 +92,9 @@ export default async function(eleventyConfig) {
 		extensions: "html",
 
 		// Output formats for each image.
-		formats: ["jpeg", "png"],
+		formats: ["jpeg", "png", "webp"],
 
-		widths: ["600"],
+		widths: ["auto", 400, 600],
 
 		urlPath: "/img/",
 
@@ -102,6 +102,7 @@ export default async function(eleventyConfig) {
 			// e.g. <img loading decoding> assigned on the HTML tag will override these values.
 			loading: "lazy",
 			decoding: "async",
+			sizes: "100vw",
 		}
 	});
 

package.json

@@ -4,7 +4,7 @@
 	"description": "A starter repository for a blog web site using the Eleventy site generator.",
 	"type": "module",
 	"scripts": {
-		"build": "npx @11ty/eleventy --incremental",
+		"build": "npx @11ty/eleventy --incremental --quiet",
 		"build-full": "npx @11ty/eleventy",
 		"build-nocolor": "cross-env NODE_DISABLE_COLORS=1 npx @11ty/eleventy",
 		"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
@@ -51,6 +51,7 @@
 		"@fontsource/atkinson-hyperlegible": "^5.0.3",
 		"@zachleat/heading-anchors": "^1.0.1",
 		"dotenv": "^16.3.1",
-		"lodash-es": "^4.17.21"
+		"lodash-es": "^4.17.21",
+		"sanitize-html": "^2.13.1"
 	}
 }