Zenn
🙌

[2023年6月版]Astro.js 小ネタ集 その8 記事の読書時間を表示

2023/06/27に公開
Astro
tech

前回に引き続きAstro.jsでの小ネタを紹介していきます。

ここでは文字数から読書時間を計算してくれる 'reading-time' モジュールについてご紹介いたします。

読書時間

公式のチュートリアルに従ってブログのコンテンツに対する簡単な読書時間を表示する機能を追加してみました。

このまんまの手順ですがご紹介いたします。

1. 準備とインストール

まず以下のパッケージをインストールします。

インストールコマンドは以下です。

$ npm install reading-time mdast-util-to-string

2. remarkのプラグインを作成

続いてremarkのプラグインを自作いたします。

src/lib/remark-reading-time.ts
import type { Plugin } from "unified";

import readingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() :Plugin {
    return function (tree, { data }) {
      const textOnPage = toString(tree);
      const stat = readingTime(textOnPage);

      data.astro.frontmatter.minutesRead = stat.minutes;
    };
}

ここでは stat.minutes で分の数値だけ使用しています。

3. プラグインを有効化

astro.config.mjsにてこのプラグインを有効にいたします。

astro.config.mjs
...
import { remarkReadingTime } from "./src/lib/remark-reading-time";
...

export default defineConfig({
...
  markdown: {
    remarkPlugins: [
      ...
      remarkReadingTime
      ...
    ],
  ...
  }
});

remarkPlugins に追加すればOKです。

4. ブログ記事での利用

仕上げにブログ記事を表示するレイアウト、コンポーネントなどで以下のように使用します。

src/pages/blog/[id].astro
---
...
interface Props {
  entry: CollectionEntry<'blog'>;
  nextEntry?: CollectionEntry<'blog'>;
  prevEntry?: CollectionEntry<'blog'>;
}

const { entry, nextEntry, prevEntry } = Astro.props;
const { Content, headings, remarkPluginFrontmatter} = await entry.render();
---
<Blog entry={entry} minutesRead={remarkPluginFrontmatter["minutesRead"]} ... >
  <Content/>
</Blog>

entry.render() の戻り値でMarkdown処理後のコンテンツやメタ情報が取得できます。

const {remarkPluginFrontmatter} = await entry.render() で先ほどの data.astro.frontmatter オブジェクトが取得できます。

remarkPluginFrontmatter["minutesRead"] で frontmatter.minutesRead の値が取得できます。

今回はここまでといたします。

Discussion