【Astro】マークダウンブログでmeta descriptionを動的に生成する

マークダウンで記事を書く時、frontmatterにdescriptionをいちいち書くのも悪い方法ではないですが、ちょっと手間に思うときがあると思います。ただしく内容を抑えるには、いちいち書くのが一番最適な方法ですが、今回は、文章の先頭100文字を取得する方法を試してみました。

今回のコードは以下においています。

astro-trial

要点としては、

markdownファイルから読み込むレイアウトファイルを作成
レイアウトファイルで、記事データを取得
記事データから、html化前のマークダウンデータを取得
descriptionに不要なデータは抜き取り、100文字取得
上記のようなものになります。

Astroの公式サイトでは、markdownのデータの取得方法は以下の書かれ方をしており、ここには記事自体のデータは含まれていません。そのため、descriptionの自動化はできないのでは？と思いました。

const {frontmatter} = Astro.props;

そこで、以下のようにし、frontmatter以外に何があるのか見てみたところ記事を取得する関数がちゃんと用意されていました。

あとは、descriptionに不要なタグなどを取り除けば完成です。(replace部分については、ChatGPTに作成してもらい、テストなどもしていないので、動作に問題がある場合があります。コードを見る分には問題ないと思います。)

const data = Astro.props;
const description =
    (await data.rawContent()) // 記事取得
        // ヘッダータグ、リンク、画像、リスト、コードブロックを削除
        .replace(/(^#+\s)|(\s#+$)/gm, "") // ヘッダータグ
        .replace(/\[([^\]]+)\]\([^\)]+\)/gm, "$1") // リンク
        .replace(/!\[[^\]]*\]\([^\)]+\)/gm, "") // 画像
        .replace(/(?:^|\n)(?:-|\d+\.)\s+/gm, "") // リスト
        .replace(/`[^`]+`/gm, "") // インラインコード
        .replace(/(?:^|\n)```[\s\S]*?```/gm, "") // 複数行のコードブロック
        .replace(/\n/g, '') // 改行文字
        .substring(0, 100);