component-sample | カスタムコンポーネント | docusaurus-memo

2. 全 docs を取得し、frontmatter でフィルタ @docusaurus/plugin-content-docs が生成する metadata は @theme/DocCardList や @theme/DocList などで使えますが、一覧ページをカスタム MDX にして React で制御することで自由にできます。

tsx

// src/components/ReadingList.tsx
import React from 'react';
import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';

export default function ReadingList({ status = 'reading' }) {
  const allDocs = useAllDocsData();
  const readingDocs =
    allDocs?.['docs']?.docs?.filter(
      (doc) => doc.frontMatter.status === status
    ) ?? [];

  return (
    <div className="grid gap-4">
      {readingDocs.map((doc) => (
        <div key={doc.id}>
          <a href={doc.permalink} className="font-bold text-blue-600">
            {doc.title}
          </a>
        </div>
      ))}
    </div>
  );
}

mdx

import ReadingList from '@site/src/components/ReadingList';

# 📚 読書中の本

<ReadingList status="reading" />