Blog/src/components/Webmentions.astro

---
import { getWebmentionEndpoint } from '@/lib/webmentions';
import { siteConfig } from '@/site.config';

interface Props {
  target?: string;
}

const { target = new URL(Astro.url.pathname, siteConfig.site.url).href } = Astro.props;
const config = siteConfig.webmentions;
const endpoint = config.endpoint.trim();
const receiveEndpoint = endpoint ? getWebmentionEndpoint(endpoint, 'receive') : '';
const getEndpoint = endpoint ? getWebmentionEndpoint(endpoint, 'get') : '';
---

{config.enabled && endpoint && <section
  class="webmentions-shell"
  id="webmentions"
  aria-labelledby="webmentions-title"
  data-webmentions-root
  data-get-endpoint={getEndpoint}
  data-receive-endpoint={receiveEndpoint}
  data-target={target}
  data-site-origin={new URL(siteConfig.site.url).origin}
  data-pagefind-ignore="all"
>
  <h2 class="sr-only" id="webmentions-title">WebMention</h2>

  <div class="webmentions-loading" data-webmentions-loading role="status" aria-label="正在读取 WebMention">
    <svg class="webmentions-loading-spinner" viewBox="25 25 50 50" aria-hidden="true">
      <circle class="webmentions-loading-path" cx="50" cy="50" r="20" fill="none"></circle>
    </svg>
    <span>Loading...</span>
  </div>
  <p class="webmentions-status" data-webmentions-status role="status" hidden></p>

  <div class="webmentions-reactions" data-webmentions-reactions hidden>
    <div data-webmentions-reaction-group="like" hidden>
      <h3><span data-webmentions-like-count>0</span> 人喜欢</h3>
      <div class="webmentions-reaction-list" data-webmentions-like-list></div>
    </div>
    <div data-webmentions-reaction-group="repost" hidden>
      <h3><span data-webmentions-repost-count>0</span> 次转发</h3>
      <div class="webmentions-reaction-list" data-webmentions-repost-list></div>
    </div>
  </div>

  <div class="webmentions-discussion" data-webmentions-discussion hidden>
    <h3><span data-webmentions-discussion-count>0</span> 条回应与提及</h3>
    <ol data-webmentions-list></ol>
  </div>

  {config.form && <form class="webmention-form" action={receiveEndpoint} method="post" data-webmention-form>
    <label for="webmention-source">发送 WebMention</label>
    <div class="webmention-form-row">
      <input id="webmention-source" name="source" type="url" inputmode="url" autocomplete="url" placeholder="https://example.com/your-post" required />
      <input name="target" type="hidden" value={target} />
      <button type="submit">发送</button>
    </div>
    <p class="webmention-form-status" data-webmention-form-status role="status" aria-live="polite"></p>
  </form>}
</section>}

<style>
  .webmentions-shell {
    font-family: var(--reading-font-family);
    font-size: .94rem;
  }

  .webmentions-status,
  .webmention-form-status {
    color: var(--color-muted);
    font-size: .86rem;
  }

  .webmentions-loading {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    color: var(--color-muted);
    font-size: .86rem;
  }

  .webmentions-loading[hidden] {
    display: none;
  }

  .webmentions-loading-spinner {
    width: 2.625rem;
    height: 2.625rem;
    animation: webmentions-loading-rotate 2s linear infinite;
  }

  .webmentions-loading-path {
    animation: webmentions-loading-dash 1.5s ease-in-out infinite;
    stroke: var(--color-accent);
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .webmentions-status {
    margin: 0;
    padding-block: .25rem 1rem;
  }

  @keyframes webmentions-loading-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes webmentions-loading-dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .webmentions-loading-spinner,
    .webmentions-loading-path {
      animation-duration: 3s;
    }
  }

  .webmentions-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-bottom: 2rem;
  }

  .webmentions-reactions h3,
  .webmentions-discussion h3 {
    margin: 0 0 .75rem;
    color: var(--color-text);
    font-family: var(--reading-font-family);
    font-size: .9375rem;
    font-weight: 500;
  }

  .webmentions-reaction-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }

  :global(.webmention-reaction) {
    display: grid;
    width: 2.25rem;
    height: 2.125rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-code);
    color: var(--color-muted);
    font-family: var(--mirages-font-ui);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
  }

  :global(.webmention-site-icon) {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
  }

  :global(.webmention-site-icon img),
  :global(.webmention-icon-fallback) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  :global(.webmention-site-icon img) {
    z-index: 1;
    padding: .3rem;
    border-radius: inherit;
    background: var(--color-surface);
    object-fit: contain;
    opacity: 0;
  }

  :global(.webmention-site-icon[data-icon-loaded='true'] img) {
    opacity: 1;
  }

  :global(.webmention-icon-fallback) {
    display: grid;
    place-items: center;
  }

  :global(.webmention-reaction:hover) {
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
  }

  .webmentions-discussion ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :global(.webmention-item) {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .75rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border);
  }

  :global(.webmention-avatar) {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-code);
    color: var(--color-muted);
    font-family: var(--mirages-font-ui);
    font-size: .75rem;
    font-weight: 600;
  }

  :global(.webmention-meta) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .65rem;
    min-width: 0;
  }

  :global(.webmention-author) {
    color: var(--color-text);
    font-size: .8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  :global(.webmention-host) {
    color: var(--color-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
  }

  :global(.webmention-date),
  :global(.webmention-kind) {
    color: var(--color-muted);
    font-size: .75rem;
  }

  :global(.webmention-content) {
    margin: .5rem 0 0;
    color: var(--color-text);
    font-size: .9375rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  :global(.webmention-source-link) {
    display: inline-block;
    margin-top: .45rem;
    color: var(--color-accent);
    font-size: .78rem;
  }

  .webmention-form {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
  }

  .webmention-form > label {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-muted);
    font-size: .8rem;
  }

  .webmention-form-row {
    display: flex;
    gap: .625rem;
  }

  .webmention-form input[type='url'] {
    min-width: 0;
    flex: 1 1 auto;
    height: 2.125rem;
    padding: .438rem .525rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: .8125rem;
    box-shadow: none;
  }

  .webmention-form input[type='url']:focus {
    border-color: var(--color-accent);
    outline: none;
  }

  .webmention-form button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 2.25rem;
    padding: 0 .875rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    cursor: pointer;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
  }

  .webmention-form button:disabled {
    cursor: wait;
    opacity: .6;
  }

  .webmention-form-status {
    min-height: 1.5em;
    margin: .4rem 0 0;
  }

  @media (max-width: 37.5rem) {
    .webmentions-shell {
      font-size: .9rem;
    }

    .webmention-form-row {
      align-items: stretch;
      flex-direction: column;
    }

    .webmention-form button {
      align-self: flex-end;
      min-width: 5.5rem;
    }
  }
</style>

<script>
  type WebmentionRecord = {
    id: string;
    source: string;
    hostname: string;
    createdAt: string;
    title: string;
    content: string;
    author: string;
    siteName: string;
    favicons: string[];
    type: string;
  };

  type WebmentionClientState = {
    bound?: boolean;
    controller?: AbortController;
    metadataCache?: Map<string, Promise<SourceMetadata | null>>;
    observer?: IntersectionObserver;
  };

  type SourceMetadata = {
    title: string;
    siteName: string;
    favicon: string;
  };

  declare global {
    interface Window {
      __miragesWebmentions?: WebmentionClientState;
    }
  }

  const state = window.__miragesWebmentions ??= {};
  const metadataCache = state.metadataCache ??= new Map<string, Promise<SourceMetadata | null>>();

  const getString = (record: Record<string, unknown>, key: string) => {
    const value = record[key];
    return typeof value === 'string' ? value.trim() : '';
  };

  const safeSource = (value: string) => {
    try {
      const url = new URL(value);
      return url.protocol === 'http:' || url.protocol === 'https:' ? url : null;
    } catch {
      return null;
    }
  };

  const safeAsset = (value: string, base: URL) => {
    if (!value) return '';
    try {
      const url = new URL(value, base);
      return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : '';
    } catch {
      return '';
    }
  };

  const plainText = (value: string) => {
    if (!value) return '';
    const parsed = new DOMParser().parseFromString(value, 'text/html');
    return (parsed.body.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 1200);
  };

  const objectValue = (value: unknown) => (
    value && typeof value === 'object' && !Array.isArray(value)
      ? value as Record<string, unknown>
      : null
  );

  const normalizeMention = (value: unknown): WebmentionRecord | null => {
    if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
    const record = value as Record<string, unknown>;
    const source = safeSource(getString(record, 'source'));
    if (!source) return null;
    const author = plainText(getString(record, 'author_name'));
    const siteName = plainText(getString(record, 'site_name'))
      || plainText(getString(record, 'site_title'))
      || author
      || source.hostname;
    const favicon = safeAsset(
      getString(record, 'favicon') || getString(record, 'site_icon') || getString(record, 'icon'),
      source
    );
    const favicons = Array.from(new Set([
      favicon,
      `https://favicon.im/${encodeURIComponent(source.hostname)}?larger=true`
    ].filter(Boolean)));
    return {
      id: getString(record, 'id'),
      source: source.href,
      hostname: source.hostname,
      createdAt: getString(record, 'created_at'),
      title: plainText(getString(record, 'title')),
      content: plainText(getString(record, 'content')),
      author: author || source.hostname,
      siteName,
      favicons,
      type: getString(record, 'type').toLowerCase()
    };
  };

  const kindOf = (mention: WebmentionRecord) => {
    if (mention.type.includes('like')) return 'like';
    if (mention.type.includes('repost') || mention.type.includes('share')) return 'repost';
    if (mention.type.includes('reply')) return 'reply';
    return 'mention';
  };

  const kindLabel = (kind: ReturnType<typeof kindOf>) => ({
    like: '喜欢',
    repost: '转发',
    reply: '回应',
    mention: '提及'
  })[kind];

  const initialFor = (name: string) => Array.from(name.trim())[0]?.toLocaleUpperCase() ?? '@';

  const displayTitle = (mention: WebmentionRecord) => mention.title || mention.siteName || mention.hostname;

  const sourceSlug = (source: URL) => {
    const segments = source.pathname.split('/').filter(Boolean);
    const segment = segments.at(-1) ?? '';
    try {
      return decodeURIComponent(segment).replace(/\.(?:html?|php)$/i, '');
    } catch {
      return segment.replace(/\.(?:html?|php)$/i, '');
    }
  };

  const isSlugTitle = (title: string, source: URL) => {
    const normalized = (value: string) => value
      .trim()
      .toLocaleLowerCase()
      .replace(/[\s_-]+/g, '-');
    return Boolean(title) && normalized(title) === normalized(sourceSlug(source));
  };

  const parseSourceDocument = (html: string, base: URL): SourceMetadata => {
    const sourceDocument = new DOMParser().parseFromString(html, 'text/html');
    const metaContent = (selector: string) => (
      sourceDocument.querySelector<HTMLMetaElement>(selector)?.content ?? ''
    );
    const faviconHref = sourceDocument.querySelector<HTMLLinkElement>(
      'link[rel~="icon"], link[rel="shortcut icon"]'
    )?.getAttribute('href') ?? '';
    return {
      title: plainText(metaContent('meta[property="og:title"]') || sourceDocument.title),
      siteName: plainText(metaContent('meta[property="og:site_name"]')),
      favicon: safeAsset(faviconHref, base)
    };
  };

  const fetchSourceDocument = async (mention: WebmentionRecord, requestUrl = mention.source) => {
    const controller = new AbortController();
    const timeout = window.setTimeout(() => controller.abort(), 8000);
    try {
      const response = await fetch(requestUrl, {
        headers: { Accept: 'text/html,application/xhtml+xml' },
        signal: controller.signal
      });
      if (!response.ok) return null;
      const contentType = response.headers.get('content-type') ?? '';
      if (!contentType.toLowerCase().includes('text/html')) return null;
      return parseSourceDocument(await response.text(), new URL(mention.source));
    } catch {
      return null;
    } finally {
      window.clearTimeout(timeout);
    }
  };

  const fetchMicrolinkMetadata = async (mention: WebmentionRecord) => {
    const source = new URL(mention.source);
    const url = new URL('https://api.microlink.io/');
    url.searchParams.set('url', mention.source);
    const controller = new AbortController();
    const timeout = window.setTimeout(() => controller.abort(), 8000);
    try {
      const response = await fetch(url, {
        headers: { Accept: 'application/json' },
        signal: controller.signal
      });
      if (!response.ok) return null;
      const payload = objectValue(await response.json());
      const data = objectValue(payload?.data);
      if (!data) return null;
      const title = plainText(typeof data.title === 'string' ? data.title : '');
      return {
        title: isSlugTitle(title, source) ? '' : title,
        siteName: plainText(typeof data.publisher === 'string' ? data.publisher : ''),
        favicon: ''
      };
    } catch {
      return null;
    } finally {
      window.clearTimeout(timeout);
    }
  };

  const sourceMetadata = (mention: WebmentionRecord, siteOrigin: string) => {
    const sourceOrigin = new URL(mention.source).origin;
    const canFetchDirectly = sourceOrigin === window.location.origin || sourceOrigin === siteOrigin;
    const cacheKey = `${canFetchDirectly ? 'direct' : 'external'}:${mention.source}`;
    const cached = metadataCache.get(cacheKey);
    if (cached) return cached;

    const directUrl = sourceOrigin === siteOrigin
      ? new URL(`${new URL(mention.source).pathname}${new URL(mention.source).search}`, window.location.origin).href
      : mention.source;
    const request = canFetchDirectly
      ? fetchSourceDocument(mention, directUrl).then((metadata) => metadata ?? fetchMicrolinkMetadata(mention))
      : fetchMicrolinkMetadata(mention);
    metadataCache.set(cacheKey, request);
    return request;
  };

  const enrichMention = async (mention: WebmentionRecord, siteOrigin: string) => {
    const metadata = await sourceMetadata(mention, siteOrigin);
    if (!metadata) return mention;
    return {
      ...mention,
      title: mention.title || metadata.title,
      siteName: metadata.siteName || mention.siteName,
      favicons: Array.from(new Set([metadata.favicon, ...mention.favicons].filter(Boolean)))
    };
  };

  const sourceLink = (mention: WebmentionRecord, className: string) => {
    const link = document.createElement('a');
    link.className = className;
    link.href = mention.source;
    link.target = '_blank';
    link.rel = 'nofollow ugc noopener noreferrer';
    return link;
  };

  const createSiteIcon = (mention: WebmentionRecord, className: string) => {
    const wrapper = document.createElement('span');
    wrapper.className = className;
    wrapper.setAttribute('aria-hidden', 'true');

    const fallback = document.createElement('span');
    fallback.className = 'webmention-icon-fallback';
    fallback.textContent = initialFor(mention.siteName || mention.hostname);

    const image = document.createElement('img');
    image.alt = '';
    image.loading = 'lazy';
    image.decoding = 'async';
    image.referrerPolicy = 'no-referrer';
    image.addEventListener('load', () => {
      wrapper.dataset.iconLoaded = 'true';
    });
    let faviconIndex = 0;
    image.addEventListener('error', () => {
      faviconIndex += 1;
      const nextFavicon = mention.favicons[faviconIndex];
      if (nextFavicon) {
        image.src = nextFavicon;
        return;
      }
      image.remove();
    });

    wrapper.append(fallback);
    const firstFavicon = mention.favicons[0];
    if (firstFavicon) {
      image.src = firstFavicon;
      wrapper.append(image);
    }
    return wrapper;
  };

  const renderReaction = (mention: WebmentionRecord) => {
    const link = sourceLink(mention, 'webmention-reaction');
    const title = displayTitle(mention);
    link.append(createSiteIcon(mention, 'webmention-site-icon'));
    link.title = `${title} (${mention.hostname})`;
    link.setAttribute('aria-label', `${title}：${kindLabel(kindOf(mention))}`);
    return link;
  };

  const renderDiscussion = (mention: WebmentionRecord) => {
    const kind = kindOf(mention);
    const item = document.createElement('li');
    item.className = 'webmention-item';

    const avatar = createSiteIcon(mention, 'webmention-avatar webmention-site-icon');

    const body = document.createElement('div');
    const meta = document.createElement('div');
    meta.className = 'webmention-meta';

    const author = sourceLink(mention, 'webmention-author');
    author.textContent = displayTitle(mention);
    meta.append(author);

    if (displayTitle(mention) !== mention.hostname) {
      const host = document.createElement('span');
      host.className = 'webmention-host';
      host.textContent = mention.hostname;
      meta.append(host);
    }

    if (mention.createdAt) {
      const date = new Date(mention.createdAt);
      if (!Number.isNaN(date.getTime())) {
        const time = document.createElement('time');
        time.className = 'webmention-date';
        time.dateTime = date.toISOString();
        time.textContent = new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium' }).format(date);
        meta.append(time);
      }
    }

    const type = document.createElement('span');
    type.className = 'webmention-kind';
    type.textContent = kindLabel(kind);
    meta.append(type);
    body.append(meta);

    const text = mention.content;
    if (text) {
      const content = document.createElement('p');
      content.className = 'webmention-content';
      content.textContent = text;
      body.append(content);
    }

    const source = sourceLink(mention, 'webmention-source-link');
    source.textContent = '查看来源';
    body.append(source);
    item.append(avatar, body);
    return item;
  };

  const renderMentions = (root: HTMLElement, mentions: WebmentionRecord[]) => {
    const loading = root.querySelector<HTMLElement>('[data-webmentions-loading]');
    const status = root.querySelector<HTMLElement>('[data-webmentions-status]');
    const likeGroup = root.querySelector<HTMLElement>('[data-webmentions-reaction-group="like"]');
    const repostGroup = root.querySelector<HTMLElement>('[data-webmentions-reaction-group="repost"]');
    const reactions = root.querySelector<HTMLElement>('[data-webmentions-reactions]');
    const discussion = root.querySelector<HTMLElement>('[data-webmentions-discussion]');
    const likeList = root.querySelector<HTMLElement>('[data-webmentions-like-list]');
    const repostList = root.querySelector<HTMLElement>('[data-webmentions-repost-list]');
    const list = root.querySelector<HTMLOListElement>('[data-webmentions-list]');
    if (!loading || !status || !likeGroup || !repostGroup || !reactions || !discussion || !likeList || !repostList || !list) return;

    const likes = mentions.filter((mention) => kindOf(mention) === 'like');
    const reposts = mentions.filter((mention) => kindOf(mention) === 'repost');
    const discussions = mentions.filter((mention) => !['like', 'repost'].includes(kindOf(mention)));

    likeList.replaceChildren(...likes.map(renderReaction));
    repostList.replaceChildren(...reposts.map(renderReaction));
    list.replaceChildren(...discussions.map(renderDiscussion));

    const likeCount = root.querySelector<HTMLElement>('[data-webmentions-like-count]');
    const repostCount = root.querySelector<HTMLElement>('[data-webmentions-repost-count]');
    const discussionCount = root.querySelector<HTMLElement>('[data-webmentions-discussion-count]');
    if (likeCount) likeCount.textContent = String(likes.length);
    if (repostCount) repostCount.textContent = String(reposts.length);
    if (discussionCount) discussionCount.textContent = String(discussions.length);

    likeGroup.hidden = likes.length === 0;
    repostGroup.hidden = reposts.length === 0;
    reactions.hidden = likes.length + reposts.length === 0;
    discussion.hidden = discussions.length === 0;
    loading.hidden = true;
    status.textContent = mentions.length ? '' : '暂时还没有站外回应。';
    status.hidden = mentions.length > 0;
  };

  const fetchWebmentions = (root: HTMLElement) => {
    if (root.dataset.webmentionsLoaded) return;
    root.dataset.webmentionsLoaded = 'true';
    const loading = root.querySelector<HTMLElement>('[data-webmentions-loading]');
    const status = root.querySelector<HTMLElement>('[data-webmentions-status]');
    const getEndpoint = root.dataset.getEndpoint;
    const target = root.dataset.target;
    const siteOrigin = root.dataset.siteOrigin;
    if (!loading || !status || !getEndpoint || !target || !siteOrigin) return;

    state.controller?.abort();
    const controller = new AbortController();
    state.controller = controller;
    const url = new URL(getEndpoint);
    url.searchParams.set('target', target);

    fetch(url, { headers: { Accept: 'application/json' }, signal: controller.signal })
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
      })
      .then((data: unknown) => {
        if (!root.isConnected) return;
        const mentions = Array.isArray(data)
          ? data.map(normalizeMention).filter((mention): mention is WebmentionRecord => mention !== null)
          : [];
        renderMentions(root, mentions);
        if (!mentions.length) return;
        void Promise.all(mentions.map((mention) => enrichMention(mention, siteOrigin))).then((enriched) => {
          if (root.isConnected) renderMentions(root, enriched);
        });
      })
      .catch(() => {
        if (controller.signal.aborted || !root.isConnected) return;
        loading.hidden = true;
        status.textContent = '站外回应暂时无法读取。';
        status.hidden = false;
      });
  };

  const loadCurrentWebmentions = () => {
    const root = document.querySelector<HTMLElement>('[data-webmentions-root]');
    if (!root || root.dataset.webmentionsBound) return;
    root.dataset.webmentionsBound = 'true';

    state.observer?.disconnect();
    if (!('IntersectionObserver' in window)) {
      fetchWebmentions(root);
      return;
    }

    state.observer = new IntersectionObserver((entries, observer) => {
      if (!entries.some((entry) => entry.isIntersecting)) return;
      observer.disconnect();
      fetchWebmentions(root);
    }, { rootMargin: '400px 0px' });
    state.observer.observe(root);
  };

  const submitWebmention = (form: HTMLFormElement) => {
    const status = form.querySelector<HTMLElement>('[data-webmention-form-status]');
    const button = form.querySelector<HTMLButtonElement>('button[type="submit"]');
    if (!status || !button) return;
    button.disabled = true;
    status.textContent = '正在发送...';

    const body = new URLSearchParams();
    for (const [name, value] of new FormData(form)) {
      if (typeof value === 'string') body.append(name, value);
    }

    fetch(form.action, {
      method: 'POST',
      body,
      // webmentiond currently requires this Content-Type without a charset suffix.
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(async (response) => {
      if (!response.ok) {
        const message = plainText(await response.text());
        throw new Error(message || `HTTP ${response.status}`);
      }
      status.textContent = '已收到，验证通过并经审核后会显示在这里。';
      const source = form.elements.namedItem('source');
      if (source instanceof HTMLInputElement) source.value = '';
    }).catch((error: unknown) => {
      const message = error instanceof Error ? error.message : '';
      status.textContent = message ? `发送失败：${message}` : '发送失败，请稍后重试。';
    }).finally(() => {
      button.disabled = false;
    });
  };

  if (!state.bound) {
    state.bound = true;
    document.addEventListener('submit', (event) => {
      const form = event.target;
      if (!(form instanceof HTMLFormElement) || !form.matches('[data-webmention-form]')) return;
      event.preventDefault();
      submitWebmention(form);
    });
    document.addEventListener('astro:page-load', loadCurrentWebmentions);
    document.addEventListener('astro:before-swap', () => {
      state.observer?.disconnect();
      state.controller?.abort();
    });
  }

  loadCurrentWebmentions();
</script>