Move blogposts to mdx

src/components/AgeRestrictedModal.astro

@@ -4,11 +4,11 @@ import { IconTriangleExclamation } from "./icons";
 ---
 
 <div
-  style={{ display: "none" }}
   id="modal-age-restricted"
   class="fixed inset-0 bg-stone-100 dark:bg-stone-900"
   role="dialog"
   aria-labelledby="title-age-restricted"
+  hidden
 >
   <div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
     <div class="text-bm-500 dark:text-bm-400">
@@ -30,9 +30,9 @@ import { IconTriangleExclamation } from "./icons";
       screen from appearing in the future.
     </p>
     <div
-      style={{ display: "none" }}
       id="age-verification-button-list"
       class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 sm:max-w-2xl sm:flex-row"
+      hidden
     >
       <button
         data-modal-reject
@@ -88,14 +88,12 @@ import { IconTriangleExclamation } from "./icons";
           localStorage.ageVerified = "true";
           document.body.style.overflow = "auto";
           document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
-          modal.style.display = "none";
+          modal.hidden = true;
           addAgeVerifiedQueryToLinks();
         },
         { once: true },
       );
-      modal
-        .querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
-        .style.removeProperty("display");
+      modal.querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!.hidden = false;
       rejectButton.focus();
     }
   };

src/components/AgeRestrictedScriptInline.astro

@@ -1,4 +1,4 @@
 ---
 ---
 
-<script is:inline>(a=>{let b="body>",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]!=d&&((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>
+<script is:inline>(a=>{let b="body>",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&g[e]!=d&&((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.hidden=!1))})(document)</script>

src/components/DarkModeScript.astro

@@ -26,7 +26,7 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
     document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
       button.addEventListener("click", toggleColorScheme);
       button.classList.remove("hidden");
-      button.style.removeProperty("display");
+      button.hidden = false;
       button.setAttribute("aria-hidden", "false");
     });
   };

src/components/MastodonComments.astro

@@ -31,19 +31,19 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
     <span data-noscript
       ><a class="u-syndication text-link underline" href={link} target="_blank">View comments on Mastodon</a>.</span
     >
-    <span style={{ display: "none" }} data-no-comments
+    <span hidden data-no-comments
       >No comments yet. <a class="text-link underline" href={link} target="_blank"
         >Be the first to join the conversation on Mastodon</a
       >.</span
     >
-    <span style={{ display: "none" }} data-comments
+    <span hidden data-comments
       >Join the conversation <a class="text-link underline" href={link} target="_blank">by replying on Mastodon</a
       >.</span
     >
-    <span style={{ display: "none" }} data-error>Unable to load comments. Please try again later.</span>
+    <span hidden data-error>Unable to load comments. Please try again later.</span>
   </p>
   <button
-    style={{ display: "none" }}
+    hidden
     class="group mx-auto w-64 rounded-lg bg-bm-300 px-4 py-1 text-stone-800 disabled:bg-bm-400 dark:bg-green-800 dark:text-stone-100 dark:disabled:bg-green-900"
     id="load-comments-button"
   >
@@ -66,7 +66,7 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
       Loading...
     </span>
   </button>
-  <div id="comments" style={{ display: "none" }}></div>
+  <div id="comments" hidden></div>
 </section>
 
 <template id="template-comment-emoji">
@@ -101,7 +101,7 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
         target="_blank"
       >
         <time class="dt-published mr-1" data-published-date aria-label="Publish date"></time>
-        <time style={{ display: "none" }} class="italic" data-edited-date>(edited)</time>
+        <time hidden class="italic" data-edited-date>(edited)</time>
       </a>
     </div>
     <div
@@ -249,7 +249,7 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
           edited.title = comment.edited_at;
           edited.classList.remove("hidden");
           edited.classList.add("dt-updated");
-          edited.style.removeProperty("display");
+          edited.hidden = false;
         }
 
         const commentBoxContent = commentBox.querySelector<HTMLElementTagNameMap["div"]>("div[data-content]")!;
@@ -276,26 +276,20 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
       if (commentsList.length) {
         const fragment = document.createDocumentFragment();
         commentsList.forEach((comment) => fragment.appendChild(comment));
-        commentsDescription
-          .querySelector<HTMLElementTagNameMap["span"]>("span[data-comments]")!
-          .style.removeProperty("display");
+        commentsDescription.querySelector<HTMLElementTagNameMap["span"]>("span[data-comments]")!.hidden = false;
         const commentsDiv = section.querySelector<HTMLElementTagNameMap["div"]>("div#comments")!;
         commentsDiv.appendChild(fragment);
-        commentsDiv.style.removeProperty("display");
+        commentsDiv.hidden = false;
       } else {
-        commentsDescription
-          .querySelector<HTMLElementTagNameMap["span"]>("span[data-no-comments]")!
-          .style.removeProperty("display");
+        commentsDescription.querySelector<HTMLElementTagNameMap["span"]>("span[data-no-comments]")!.hidden = false;
       }
     } catch (e) {
       console.error("Fetch Mastodon comments error", e);
-      commentsDescription
-        .querySelector<HTMLElementTagNameMap["span"]>("span[data-error]")!
-        .style.removeProperty("display");
+      commentsDescription.querySelector<HTMLElementTagNameMap["span"]>("span[data-error]")!.hidden = false;
     } finally {
-      loadCommentsButton.style.display = "none";
+      loadCommentsButton.hidden = true;
       loadCommentsButton.blur();
-      commentsDescription.style.removeProperty("display");
+      commentsDescription.hidden = false;
     }
   }
 
@@ -327,9 +321,9 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
       { once: true },
     );
     const commentsDescription = commentSection.querySelector<HTMLElementTagNameMap["p"]>("p#comments-description")!;
-    commentsDescription.style.display = "none";
-    commentsDescription.querySelector<HTMLElementTagNameMap["span"]>("span[data-noscript]")!.style.display = "none";
-    loadCommentsButton.style.removeProperty("display");
+    commentsDescription.hidden = true;
+    commentsDescription.querySelector<HTMLElementTagNameMap["span"]>("span[data-noscript]")!.hidden = true;
+    loadCommentsButton.hidden = false;
   }
 
   initCommentSection();

src/components/NoteTooltip.astro

@@ -0,0 +1,16 @@
+---
+type Props = {
+  id: number;
+  title: string;
+  text: string;
+};
+
+const { id, title, text } = Astro.props;
+---
+
+<Fragment>
+  <a class="decoration-dotted" id={`note-${id}`} href={`#note-${id}`} title={title} data-tooltip>
+    {text}
+  </a>
+  <sup>{id}</sup>
+</Fragment>