Astroの勉強

import { remarkLinkCard } from "@/components/linkcard/remarkLinkCard";
import { rehypeShiki } from "@astrojs/markdown-remark";
import { compile } from "@mdx-js/mdx";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";
import remarkBreaks from "remark-breaks";
import remarkFrontmatter from "remark-frontmatter";
import remarkGfm from "remark-gfm";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import remarkSmartypants from "remark-smartypants";
import myUnifiedPluginHandlingYamlMatter from "./my-unified-plugin-handling-yaml-matter";
export default async function markdownToHtml(markdown: string): Promise<{
  content: string;
  matter: Record<string, unknown>;
}> {
  // const highlighter = await shiki.getHighlighter({ theme: "poimandres" });
  const file = await compile(markdown, {
    remarkPlugins: [
      remarkFrontmatter,
      [remarkMdxFrontmatter, { name: "matter" }],
      myUnifiedPluginHandlingYamlMatter,
      remarkGfm,
      remarkSmartypants,
      remarkBreaks,
      remarkLinkCard,
    ],
    rehypePlugins: [
      [
        rehypeRaw,
        {
          passThrough: [
            "mdxjsEsm",
            "mdxFlowExpression",
            "mdxJsxFlowElement",
            "mdxJsxTextElement",
            "mdxTextExpression",
          ],
        },
      ],
      [rehypeShiki],
      [rehypeStringify],
    ],
    outputFormat: "function-body",
  });
  return {
    content: String(file),
    matter: file.data.matter as Record<string, unknown>,
  };
}

import { runSync, type Jsx } from "@mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
import LinkCard from "./linkcard/LinkCard.tsx";
export default function MDXContent({ html }: { html: string }) {
  const { default: Content } = runSync(html, {
    Fragment: runtime.Fragment,
    jsxs: runtime.jsxs as Jsx,
    jsx: runtime.jsx as Jsx,
    baseUrl: import.meta.url,
  });
  return <Content components={{ "link-card": LinkCard }} />;
}

export function remarkLinkCard() {
  return async (tree: Node) => {
    const tasks: Array<() => Promise<void>> = [];
    visit(tree, "paragraph", (node: ParagraphNode) => {
      if (
        node.children &&
        node.children.length === 1 &&
        node.children[0].type === "link"
      ) {
        const linkNode = node.children[0] as LinkNode;
        if (linkNode.url?.startsWith("http")) {
          const task = async () => {
            const metadata = await fetchMetadata(linkNode.url);
            const nodeData = JSON.stringify({
              ...metadata,
              url: linkNode.url,
            }).replace(/"/g, "&quot;");
            (node as unknown as LinkCardNode).type = "html";
            (
              node as unknown as LinkCardNode
            ).value = `<link-card node="${nodeData}"></link-card>`;
            (node as unknown as LinkCardNode).children = [];
          };
          tasks.push(task);
        }
      }
    });
    await Promise.all(tasks.map((task) => task()));
  };
}

unist-util-visitを使用して、Treeからリンクをlink-cardに変換しています。

export function listenPaste(id: string, textarea: HTMLTextAreaElement) {
  textarea.addEventListener("paste", async (event) => {
    const items = event.clipboardData?.items;
    if (!items) return;

    for (const item of items) {
      if (item.type.indexOf("image") !== -1) {
        const blob = item.getAsFile();
        if (!blob) continue;

        const base64Image = await readAsDataURL(blob);
        if (typeof base64Image !== "string") continue;
        const base64Data = base64Image.split(",")[1];
        const imageUrl = await uploadImage(base64Data, id);

        // カーソル位置に画像のURLを挿入
        const startPos = textarea.selectionStart;
        const endPos = textarea.selectionEnd;
        const currentValue = textarea.value;
        const newValue =
          currentValue.substring(0, startPos) +
          `![](${imageUrl})` +
          currentValue.substring(endPos);
        textarea.value = newValue;
        textarea.selectionStart = textarea.selectionEnd =
          startPos + imageUrl.length;
        // onChangeイベントを手動で発火
        const changeEvent = new Event("change", { bubbles: true });
        textarea.dispatchEvent(changeEvent);
      }
    }
  });
}

$content.subscribe(async (content) => {
  $images.set(extractImageUrls(content));
  const { matter } = markdownToHtml(content);
  $title.set((matter.title as string | undefined) ?? "");
  $description.set((matter.description as string | undefined) ?? "");
  $tags.set((matter.tags as string[] | undefined) ?? []);
});