AstroでもGatsbyのexcerptがしたい!

## はじめに

先日以下の記事を読んで真似したくなったので、練習も兼ねて Cloudflare Pages に移行しました。

[日本国内だと Netlify より Cloudflare Pages の方が速い！](https://qiita.com/akitkat/items/dcbe4fcaacc051753e2b)

これで少しでも早くなってると嬉しいです。

## やったこと

作業のほとんどを以下の記事を参考に行いました。ありがとうございます!!

- [Cloudflare Pages で Gatsby を動かすのは案外難しい](https://zenn.dev/appare45/articles/cloudflarepages-gatsby)
- [GitHub Actions でビルドして Cloudflare Pages にデプロイする](https://zenn.dev/nwtgck/articles/1fdee0e84e5808)

そのほかの参考リンクは[このイシュー](https://github.com/tunamaguro/blog/issues/26)にすべて貼ってあります。

はじめに 先日以下の記事を読んで真似したくなったので、練習も兼ねて Cloudflare Pages に移行しました。 日本国内だと Netlify より Cloudflare Pages の方が速い！ これで少しでも早くなってると嬉しいです。 やったこと 作業のほとんどを以下の…

export const query = graphql`
  query ArticleQuery($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "yyyy-MM-DD")
        emoji
        category
        slug
      }
      excerpt(pruneLength: 50)
    }
  }
`;

export const Head: HeadFC = ({ data }) => (
  <Seo
    title={data.mdx.frontmatter.title}
    desription={data.mdx.excerpt}
    pathname={`/articles/${data.mdx.frontmatter.slug}`}
  />
);

import { toString } from "hast-util-to-string";
import { truncate, type Options } from "hast-util-truncate";

/** @type {import('unified').Plugin<[Options]>} */
export function rehypeExcerptContent(
  options: Options = { ellipsis: "…" },
):
  | void
  | import("unified").Transformer<import("hast").Root, import("hast").Root> {
  return function (tree, { data }) {
    const truncatedTree = truncate(tree, { ellipsis: "…", ...options });
    const excerpt = toString(truncatedTree).replaceAll(/\s/g, " ");
    // @ts-ignore See https://docs.astro.build/en/guides/markdown-content/#modifying-frontmatter-programmatically
    data.astro.frontmatter.excerpt = excerpt;
  };
}

import { rehypeExcerptContent } from "/path/to/plugin/rehypeExcerptPlugin";

// 略

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex, rehypeExcerptContent],  //👈ここ
  },

const { Content, remarkPluginFrontmatter } = await article.render();

---
// 略
const frontmatterSchema = z.object({
  excerpt: z.string(),
});

const { Content, remarkPluginFrontmatter } = await article.render();
const frontmatter = frontmatterSchema.parse(remarkPluginFrontmatter);

const contentDescription = maybeDescription ?? frontmatter.excerpt;

---
<BaseLayout
  title={title}
  description={contentDescription}
// 略