Add h-entry properties, remove more twitter stuff, fix using content …

…var for sponsorships page content

.eleventy.js

@@ -1,5 +1,4 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const embedTwitter = require("eleventy-plugin-embed-twitter");
 const embedYouTube = require("eleventy-plugin-youtube-embed");
 
 module.exports = function (eleventyConfig) {
@@ -13,21 +12,13 @@ module.exports = function (eleventyConfig) {
     "./src/_client_scripts/app_search.js": "/js/app_search.js",
   });
   eleventyConfig.addPlugin(syntaxHighlight);
-  eleventyConfig.addPlugin(embedTwitter, {
-    theme: "light",
-    align: "center",
-    doNotTrack: "true",
-  });
 
   eleventyConfig.addPlugin(embedYouTube, {
     lite: true,
   });
 
   eleventyConfig.ignores.add("./src/_archive");
 
-  // 1. You attempted to set one of Eleventy’s reserved data property names: content. You can opt-out of this behavior with `eleventyConfig.setFreezeReservedData(false)` or rename/remove the property in your data cascade that conflicts with Eleventy’s reserved property names (e.g. `eleventy`, `pkg`, and others). Learn more: https://v3.11ty.dev/docs/data-eleventy-supplied/ (via EleventyBaseError)
-  eleventyConfig.setFreezeReservedData(false);
-
   return {
     dir: {
       data: "_data",

lib/dateUtils.js

@@ -35,6 +35,16 @@ const DateUtils = {
     while (num.length < 2) num = "0" + num;
     return num;
   },
+  formatDateForTimeElement: function (dateString) {
+    // YYYY-MM-DD HH:MM:SS
+    const timestamp = Date.parse(dateString);
+    const date = new Date(timestamp);
+    return `${date.getFullYear()}-${DateUtils.addLeadingZero(date.getMonth() + 1)}-${DateUtils.addLeadingZero(
+      date.getDate(),
+    )} ${DateUtils.addLeadingZero(date.getHours())}:${DateUtils.addLeadingZero(
+      date.getMinutes(),
+    )}:${DateUtils.addLeadingZero(date.getSeconds())}`;
+  },
   formatDateForDisplay: function (dateString) {
     const timestamp = Date.parse(dateString);
     const date = new Date(timestamp);

package.json

@@ -24,7 +24,6 @@
     "@whitep4nth3r/get-random-entry": "^0.0.2",
     "algoliasearch": "^4.17.0",
     "dotenv": "^16.0.3",
-    "eleventy-plugin-embed-twitter": "^1.3.6",
     "eleventy-plugin-youtube-embed": "^1.7.1",
     "googleapis": "^108.0.0",
     "markdown-it": "^13.0.1",

src/_components/author.js

@@ -2,21 +2,21 @@ const BioImage = require("./bioImage");
 const SocialLinks = require("./socialLinks");
 const NameLogo = require("./svg/nameLogo");
 
-function Author({ author, hideOnSmallScreens = false }) {
+function Author({ author, uUrl, hideOnSmallScreens = false }) {
   const hideClass = hideOnSmallScreens ? " author--hideSmall" : "";
   return /*html*/ `
   <div class="author${hideClass}">
     <a href="/about/" class="author__cta" aria-label="About Salma">
       <div class="author__imgContainer">
         ${BioImage({ image: author.imageBio })}
       </div>
-      <div class="author__name">
+      <div class="author__name p-author">
         ${NameLogo()}
       </div>
     </a>
 
     <div class="author_social">
-      ${SocialLinks()}
+      ${SocialLinks({ uUrl })}
     </div>
   </div>
   `;

src/_components/blogEndAuthor.js

@@ -5,7 +5,7 @@ var md = require("markdown-it")({
   html: true,
 });
 
-function BlogEndAuthor({ author }) {
+function BlogEndAuthor({ author, uUrl }) {
   return /*html*/ `
   <div class="blogEndAuthor">
     <div class="blogEndAuthor__imgContainer">
@@ -18,7 +18,7 @@ function BlogEndAuthor({ author }) {
     </div>
 
     <div class="blogEndAuthor_social">
-      ${SocialLinks()}
+      ${SocialLinks({ uUrl: uUrl })}
     </div>
   </div>
   `;

src/_components/homeAbout.js

@@ -15,7 +15,7 @@ function homeAbout({ bio }) {
       ${md.render(bio)}
     </div>
     <div class="homeAbout__social">
-      ${SocialLinks()}
+      ${SocialLinks({ uUrl: "https://whitep4nth3r.com" })}
     </div>
   </div>
   `;

src/_components/publishedDate.js

@@ -8,7 +8,9 @@ function PublishedDate({ date, readingTime, isTalk, updatedDate }) {
   return /* html */ `
   <div class="publishedDate">
     <p class="publishedDate__item">
-      ${updated}${DateUtils.formatDateForDisplay(displayDate)}
+      ${updated}<time class="dt-published" datetime="${DateUtils.formatDateForTimeElement(
+    displayDate,
+  )}">${DateUtils.formatDateForDisplay(displayDate)}</time>
     </p>
     <p class="publishedDate__item">
       ${readingTime} min ${timeSuffix}

src/_components/responsiveImage.js

@@ -4,8 +4,6 @@ function ResponsiveImage({ image, classOverride = null, loading = null }) {
   const className = classOverride ? classOverride : "post__responsiveImage";
   const loadingStrat = loading ? loading : "lazy";
   const { contentType } = image;
-  // Inspect contentType to convert GIF to WebP and not AVIF
-  // more info: https://twitter.com/whitep4nth3r/status/1460244790059188226
   const isGif = contentType === "image/gif";
 
   // Note, this array could be further optimised looking at the resulting quality and file size

src/_components/socialLinks.js

@@ -5,7 +5,7 @@ const YouTubeIcon = require("./svg/youtubeIcon");
 const BlueskyIcon = require("./svg/blueskyIcon");
 const FeedIcon = require("./svg/feedIcon");
 
-function SocialLinks() {
+function SocialLinks({ uUrl }) {
   return /*html*/ `
   <ul class="socialLinks">
     <li>
@@ -27,12 +27,12 @@ function SocialLinks() {
       <a href="/feed.xml" class="socialLinks__item" target="_blank" aria-label="Subscribe to RSS Feed">${FeedIcon()}</a>
     </li>
   </ul>
-  <div class="h-card" aria-hidden="true" style="display: none;">
+  <div class="h-card" rel="author" aria-hidden="true" style="display: none;">
     <span class="p-name">Salma Alam-Naylor</span>
     <span class="p-nickname">whitep4nth3r</span>
     <div class="p-org">Sentry</div>
     <img class="u-photo" src="https://images.ctfassets.net/56dzm01z6lln/69YokY1TvGVk37gCQmQJDo/c315f0996556c9c1f276d12d5f201a76/headshot_relaxed.png"/>
-    <a class="u-url" href="https://whitep4nth3r.com">w</a>,
+    <a class="u-url" href="${uUrl}">w</a>,
     <span class="p-locality">Manchester</span>,
     <div class="p-country-name">UK</div>
     <div class="p-category">Software Engineer</div>

src/_components/tabbedBio.js

@@ -11,7 +11,7 @@ function TabbedBio({ shortBio, speakerBio, longBio }) {
         <a href="#long" class="bio__button" data-view="long">Long bio</a>
       </div>
       <div class="bio__links">
-      ${SocialLinks()}
+      ${SocialLinks({ uUrl: "https://whitep4nth3r.com/about/" })}
       </div>
     </div>
   

src/blog/blog-pages.11ty.js

@@ -78,7 +78,7 @@ exports.render = async function (data) {
 
   return /* html */ `
     <div class="post__meta">
-      <p class="post__meta__topic">${post.topicsCollection.items[0].name}</p>
+      <p class="post__meta__topic p-category">${post.topicsCollection.items[0].name}</p>
       ${PublishedDate({
         date: post.date,
         readingTime: post.readingTime,
@@ -90,7 +90,11 @@ exports.render = async function (data) {
     <section class="post">
       <aside class="post__aside">
         <div class="post__authorContainer">
-          ${Author({ author: post.author, hideOnSmallScreens: true })}
+          ${Author({
+            author: post.author,
+            uUrl: `https://whitep4nth3r.com/blog/${data.post.slug}/`,
+            hideOnSmallScreens: true,
+          })}
         </div>
         <div class="post__asideStickyGroup">
           <span class="post__newsletterSignupWide">${NewsletterSignup({
@@ -103,7 +107,7 @@ exports.render = async function (data) {
       <article class="post__article h-entry">
         <div class="post__excerpt">${md.render(post.excerpt)}</div>
         <hr class="post__separator" aria-hidden="true" />
-        <div class="post__body">
+        <div class="post__body e-content">
           ${outOfDateWarning({ post })}
           ${RichText(post.body, {
             renderRssFriendlyImg: false,
@@ -121,7 +125,7 @@ exports.render = async function (data) {
         })}</span>
         <hr class="post__separator" />
 
-        ${BlogEndAuthor({ author: post.author })}
+        ${BlogEndAuthor({ author: post.author, uUrl: `https://whitep4nth3r.com/blog/${data.post.slug}/` })}
 
         ${
           post.relatedPostsCollection?.items.length > 0