deploy: 5374a62

index.js

@@ -0,0 +1,13 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('./sw.js')
+    .then(() => navigator.serviceWorker.ready)
+    .then(() => {
+      const $elemList = document.querySelectorAll('[data-blurhash]');
+      for (const $elem of $elemList) {
+        const blurhash = $elem.dataset.blurhash;
+        $elem.style.backgroundSize = `100% 100%`;
+        $elem.style.backgroundImage = `url(/.blurhash/${encodeURIComponent(blurhash)})`;
+      }
+    });
+}

styles.css

@@ -0,0 +1,23 @@
+@import url(https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css);
+@import url(https://unpkg.com/github-markdown-css@4.0.0/github-markdown.css);
+@import url(https://unpkg.com/prism-themes@1.9.0/themes/prism-nord.min.css);
+
+body {
+  padding: 64px;
+  max-width: 1024px;
+  margin: auto;
+}
+
+@media screen and (max-width: 630px) {
+  body {
+    padding: 32px;
+  }
+}
+
+h1 {
+  text-align: center;
+}
+
+p img {
+  display: inline;
+}

sw.js

@@ -0,0 +1,35 @@
+importScripts('https://unpkg.com/blurhash-sw@1.0.15/dist/index.js');
+
+blurhashSW({
+  routeUrl: '/.blurhash/:blurhash',
+  width: 32,
+  height: 32,
+});
+
+self.addEventListener('install', (ev) => {
+  ev.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (ev) => {
+  ev.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (/** @type {FetchEvent} */ ev) => {
+  const url = new URL(ev.request.url);
+  const delay = parseInt(url.searchParams.get('__delay__'));
+
+  if (Number.isFinite(delay)) {
+    return ev.respondWith(
+      Promise.all([
+        fetch(ev.request, { cache: 'no-store', mode: 'cors', credentials: 'omit' }).then((res) => {
+          return new Response(res.body, {
+            headers: new Headers([...res.headers, ['Cache-Control', 'no-store']]),
+          });
+        }),
+        new Promise((resolve) => setTimeout(resolve, delay)),
+      ]).then(([res]) => res),
+    );
+  } else {
+    return;
+  }
+});