今回やること

ページ内リンクと目次

ページ内リンクでは、h2,h3タグのidを入れてそこに#でアクセスするようにします。

以下はreact-markdownのh2に割り当てるためのH2関数(h3)も同様につくる

import { ClassAttributes, HTMLAttributes } from "react"
import { ExtraProps } from "react-markdown"

export const H2 = ({
    node
}: ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & ExtraProps) => {
    const text = typeof node !== "undefined" && node.children.length > 0 && "value" in node.children[0]
        ? node?.children[0]["value"]
        : "";
    return <h2 id={text} >
        {text}
    </h2>
}

目次のコンポーネントは以下のように作成しました。

<div className="w-full md:w-1/2 mx-auto bg-light-gray border-2 border-mid-gray my-4">
    <p className="text-center bg-mid-gray text-white text-xl py-2">
        目次
    </p>
    <ReactMarkdown
        allowedElements={["h2", "h3"]}
        className='agenda' // このclassNameはglobals.cssで作成(Tailwind css)
        components={{
            h2: ({ node }) => {
                const text = typeof node !== "undefined" && node.children.length > 0 && "value" in node.children[0]
                    ? node?.children[0]["value"]
                    : "";
                return <h2>
                    <a href={`#${text}`}>{`・${text}`}</a>
                </h2>
            },
            h3: ({ node }) => {
                const text = typeof node !== "undefined" && node.children.length > 0 && "value" in node.children[0]
                    ? node?.children[0]["value"]
                    : "";
                return <h3>
                    <a href={`#${text}`}>{`・${text}`}</a>
                </h3>
            },
        }}
    >
        {data.body}
    </ReactMarkdown>
</div>

↑こんな感じになった

あとはいい感じにデザインを整えた。

プロフィール欄にSNSアカウントを載せようと思っているんだが、早くデプロイしたくて実装するのがめんどくさい。あと、アカウントがない…

今回はこれでおわり