src/components/Remark42Embed.astro

@@ -1,16 +1,11 @@
 ---
-import Remark42Status from "./Remark42Status.astro";
-
 const { slug } = Astro.props;
 const pagePath = `/posts/${slug}/`;
 const host = import.meta.env.PUBLIC_REMARK42_HOST;
 const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 ---
 
-<div class="remark42-embed">
+<div id="remark42"></div>
-    <Remark42Status />
-    <div id="remark42"></div>
-</div>
 <script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
     function getTheme() {
         return document.documentElement.classList.contains("dark")
@@ -60,99 +55,28 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
             }
 
             script.onload = () => resolve(true);
-            script.onerror = (error) => {
+            script.onerror = reject;
-                script.remove();
-                reject(error);
-            };
             document.head.appendChild(script);
         });
     }
 
     async function mountRemark42() {
         const node = document.getElementById("remark42");
-        const status = document.getElementById("remark42-status");
+        if (!node) return;
-        const loadingStatus = status?.querySelector("[data-remark42-loading]");
-        const failedStatus = status?.querySelector("[data-remark42-failed]");
-        if (!node || !loadingStatus || !failedStatus) return;
 
-        window.__remark42LoadCleanup?.();
-
-        let active = true;
-        let iframe = null;
-        let timer;
-
-        const onIframeLoad = () => {
-            if (!active || !iframe || !node.contains(iframe)) return;
-            loadingStatus.hidden = true;
-            failedStatus.hidden = true;
-            status.hidden = true;
-            clearTimeout(timer);
-            observer.disconnect();
-        };
-
-        const watchIframe = () => {
-            const nextIframe = node.querySelector("iframe");
-            if (nextIframe === iframe) return;
-
-            iframe?.removeEventListener("load", onIframeLoad);
-            iframe = nextIframe;
-            iframe?.addEventListener("load", onIframeLoad, { once: true });
-        };
-
-        const observer = new MutationObserver(watchIframe);
-        observer.observe(node, { childList: true, subtree: true });
-        watchIframe();
-
-        const showFailure = () => {
-            if (!active || loadingStatus.hidden) return;
-            loadingStatus.hidden = true;
-            failedStatus.hidden = false;
-        };
-
-        window.__remark42LoadCleanup = () => {
-            active = false;
-            clearTimeout(timer);
-            observer.disconnect();
-            iframe?.removeEventListener("load", onIframeLoad);
-        };
-
-        loadingStatus.hidden = false;
-        failedStatus.hidden = true;
-        status.hidden = false;
-        timer = setTimeout(showFailure, 15000);
-
-        if (!host || !siteId) {
-            showFailure();
-            return;
-        }
-
-        try {
-            const alreadyLoaded = Boolean(window.REMARK42);
         setRemarkConfig();
         await ensureScript();
 
-            if (!active) return;
+        if (!window.REMARK42) return;
-            if (!window.REMARK42) {
-                showFailure();
-                return;
-            }
 
-            if (alreadyLoaded && typeof window.REMARK42.destroy === "function") {
+        if (typeof window.REMARK42.destroy === "function") {
             window.REMARK42.destroy();
         }
 
-            // The script creates the first iframe itself. Only remount when
+        if (typeof window.REMARK42.createInstance === "function") {
-            // reusing it on a new page/theme, or if it did not create one.
-            if (
-                (alreadyLoaded || !node.querySelector("iframe")) &&
-                typeof window.REMARK42.createInstance === "function"
-            ) {
             node.innerHTML = "";
             window.REMARK42.createInstance(window.remark_config);
         }
-        } catch {
-            showFailure();
-        }
     }
 
     function setupRemark42ThemeObserver() {
@@ -182,18 +106,3 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
     mountRemark42();
     setupRemark42ThemeObserver();
 </script>
-
-<style>
-    .remark42-embed {
-        position: relative;
-        min-width: 0;
-    }
-
-    /* Let the iframe load in the same space occupied by the centered status. */
-    :global(#remark42-status:not([hidden])) + #remark42 {
-        position: absolute;
-        inset: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-</style>

src/components/Remark42Status.astro

@@ -1,75 +0,0 @@
----
-import { getLangFromUrl } from "@/i18n";
-
-const lang = getLangFromUrl(Astro.url);
-const loadingText = lang === "zh" ? "评论区加载中……" : "Loading comments…";
-const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load comments";
----
-
-<div id="remark42-status" role="status" aria-atomic="true">
-    <p class="remark42-loading" data-remark42-loading>
-        <span class="status-spinner" aria-hidden="true"></span>
-        <span>{loadingText}</span>
-    </p>
-    <p class="remark42-failed" data-remark42-failed hidden>
-        <span>{failedText}</span>
-    </p>
-</div>
-
-<style>
-    #remark42-status {
-        --status-color: #6b7680;
-        --status-accent: var(--deep-blue);
-        display: grid;
-        place-items: center;
-        min-block-size: 10rem;
-        padding: 2rem 1rem;
-        text-align: center;
-    }
-
-    .remark42-loading,
-    .remark42-failed {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.65rem;
-        margin: 0;
-        color: var(--status-color);
-        font-size: 0.85rem;
-        font-weight: 400;
-        line-height: 1.6;
-    }
-
-    .status-spinner {
-        flex: 0 0 auto;
-        width: 1rem;
-        height: 1rem;
-        box-sizing: border-box;
-        border: 1.5px solid color-mix(in srgb, var(--status-accent) 20%, transparent);
-        border-top-color: var(--status-accent);
-        border-radius: 50%;
-        animation: status-spin 1s linear infinite;
-    }
-
-    #remark42-status[hidden],
-    [hidden] {
-        display: none;
-    }
-
-    :global(html.dark) #remark42-status {
-        --status-color: #aab7c4;
-        --status-accent: #9ecbff;
-    }
-
-    @keyframes status-spin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .status-spinner {
-            animation: none;
-        }
-    }
-</style>

src/i18n/en.ts

@@ -17,7 +17,7 @@ export default {
         publishedOn: "Published on",
         commentsDesc: [
             "Feel free to leave your thoughts here. 💭💡",
-            "After signing in, you can click “Subscribe by Email” at the bottom right of the text box to receive notifications via E-mail."
+            "After signing in, you can click the “Subscribe by Email” button at the bottom right of the text box to receive notifications of new interactions via email."
         ]
     },
     theme: {

src/layouts/MarkdownPostLayout.astro

@@ -103,9 +103,7 @@ const publishedDate = new Intl.DateTimeFormat(
         aria-labelledby="comments-heading"
       >
         <h2 id="comments-heading">{comments}</h2>
-        {t.post.commentsDesc.map((line: string) => (
+        {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
-          <p class="comments-description" set:html={line} />
-        ))}
         <Remark42Embed slug={slug} />
       </section>
     </article>
@@ -655,16 +653,6 @@ const publishedDate = new Intl.DateTimeFormat(
     scroll-margin-top: 5rem;
   }
 
-  .comments-description {
-    color: #6b7680;
-    font-size: 0.85rem;
-    line-height: 1.6;
-  }
-
-  :global(html.dark) .comments-description {
-    color: #aab7c4;
-  }
-
   :global(html.dark) .post-content {
     --article-muted: #aab7c4;
     --article-rule: rgba(170, 183, 196, 0.28);