feat: add experimental JS, add proepr alt text to each image

ca057 · Dec 28, 2024 · 4b0ce26 · 4b0ce26
1 parent 1ab87e6
commit 4b0ce26
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/.eleventy.js b/.eleventy.js
@@ -42,13 +42,34 @@ export default async function (eleventyConfig) {
 
   eleventyConfig.addWatchTarget("src/**/_favicon.json");
 
+  eleventyConfig.addWatchTarget("src/**/*.css");
   eleventyConfig.addBundle("css");
+  eleventyConfig.addWatchTarget("src/**/*.js");
+  eleventyConfig.addBundle("js");
   eleventyConfig.addPassthroughCopy("src/_fonts");
 
   eleventyConfig.addFilter("blurhashColorRgb", (blurhash) => `rgb(${getBlurHashAverageColor(blurhash).join(",")})`);
   eleventyConfig.addFilter("formatDate", (date, locale = "en-UK") => {
     return Temporal.PlainDate.from(date).toLocaleString(locale, { calendar: "gregory", dateStyle: "long" });
   });
+  eleventyConfig.addFilter("formatOrdinals", (count) => {
+    // copied from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+    const enOrdinalRules = new Intl.PluralRules("en-EN", { type: "ordinal" });
+
+    const suffixes = new Map([
+      ["one", "st"],
+      ["two", "nd"],
+      ["few", "rd"],
+      ["other", "th"],
+    ]);
+    const formatOrdinals = (n) => {
+      const rule = enOrdinalRules.select(n);
+      const suffix = suffixes.get(rule);
+      return `${n}${suffix}`;
+    };
+
+    return formatOrdinals(count);
+  });
 
   eleventyConfig.addPlugin(VentoPlugin);
   await eleventyConfig.addPlugin(pluginMultipleFavicons, { configNamePattern: /_favicon\.json/ });

diff --git a/src/coffee/_favicon.png b/src/coffee/_favicon.png
diff --git a/src/coffee/index.css b/src/coffee/index.css
@@ -76,3 +76,8 @@ footer {
 .nowrap {
   white-space: nowrap;
 }
+
+.coffees img:hover,
+.coffees img:active {
+  border: 2px solid blue;
+}
diff --git a/src/coffee/index.vto b/src/coffee/index.vto
@@ -25,6 +25,12 @@
       {{ include "css-reset.css" }}
       {{ include "./index.css" }}
     </style>
+    {{ js }}
+      {{ include "./overlay.js" }}
+    {{ /js }}
+    <script>
+      {{ getBundle "js" }}
+    </script>
   </head>
   <body>
     <header>
@@ -44,6 +50,7 @@
         {{ set allCoffees = coffees.images.toReversed() }}
         {{ for index of allCoffees.length }}
           {{ set coffee = allCoffees[index-1] }}
+          {{ set countOfDay = Number(coffee.id.slice(8)) + 1 }}
           <img
             id="{{ coffee.id }}"
             style="background: {{ coffee.images.blurhash |> blurhashColorRgb }}"
@@ -52,7 +59,7 @@
             height="300"
             loading="{{ (index - 1) < 10 ? 'eager' : 'lazy' }}"
             decoding="async"
-            alt="TODO"
+            alt="My {{ countOfDay  |> formatOrdinals }} coffee from {{ coffee.day |> formatDate }}."
           >
           </img>
         {{ /for }}

diff --git a/src/coffee/overlay.js b/src/coffee/overlay.js
@@ -0,0 +1,9 @@
+function addImgListeners() {
+  console.log(document.readyState);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", addImgListeners);
+} else {
+  addImgListeners();
+}