npx @tailwindcss/upgrade

- className="grow focus:outline-none bg-transparent py-1 text-content-text-light dark:text-content-text-dark"
+ className="grow focus:outline-hidden bg-transparent py-1 text-content-text-light dark:text-content-text-dark"

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // コピーボタンを差し込むので
    "./src/transformShikiCodeBlockCopyButton.ts"
  ],
  theme: {
    // 既存の色を拡張する（プライマリカラー等を追加する）
    extend: {
      // ネストできるので、テーマ別にそれぞれ
      colors: {
        // コンテンツで使う色
        content: {
          // プライマリーカラー
          primary: {
            // md_theme_light_primary
            light: '#4A58A9',
            dark: '#BBC3FF'
          },
          // セカンダリーカラー
          secondary: {
            // md_theme_light_secondary
            light: '#974068',
            dark: '#974068'
          },
          // 文字
          text: {
            // md_theme_dark_background : md_theme_light_background
            light: '#1B1B1F',
            dark: '#FEFBFF'
          }
        },

        // コンテナの色。コンテンツの色の下に敷く
        container: {
          // プライマリーカラー
          primary: {
            // md_theme_light_surface : md_theme_dark_surface
            light: '#FFFBFF',
            dark: '#1B1B1F'
          },
          // セカンダリーカラー
          secondary: {
            // md_theme_light_surface : md_theme_dark_surface の RGB それぞれに 0.95 倍したもの。カラーコード 明るさ とかで検索
            light: '#f2eef2',
            dark: '#19191d'
          }
        },

        // Error ?
        error: {
          // md_theme_light_error
          light: '#BA1A1A',
          dark: '#BA1A1A'
        },

        // 背景色
        background: {
          // md_theme_light_primaryContainer
          light: '#DEE0FF',
          dark: '#000000'
        },

        // 選択時の色（ホバー）
        hover: {
          // md_theme_light_primary の 25% の色。16進数なので 40 です（RGBA）
          light: '#4A58A940',
          dark: '#BBC3FF40'
        },
      },
      fontFamily: {
        // next/font で読み込んだやつ
        'body': ['var(--koruri-font)'],
      }
    },
  },
  plugins: [],
}

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --color-content-primary-light: #4a58a9;
  --color-content-primary-dark: #bbc3ff;

  --color-content-secondary-light: #974068;
  --color-content-secondary-dark: #974068;

  --color-content-text-light: #1b1b1f;
  --color-content-text-dark: #fefbff;

  --color-container-primary-light: #fffbff;
  --color-container-primary-dark: #1b1b1f;

  --color-container-secondary-light: #f2eef2;
  --color-container-secondary-dark: #19191d;

  --color-error-light: #ba1a1a;
  --color-error-dark: #ba1a1a;

  --color-background-light: #dee0ff;
  --color-background-dark: #000000;

  --color-hover-light: #4a58a940;
  --color-hover-dark: #bbc3ff40;

  --font-body: var(--koruri-font);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

const colors = resolveConfig(tailwindConfig).theme?.colors
if (colors) {
    const backgroundColor = isDarkmode ? colors['background']['dark'] : colors['background']['light']
    document.querySelector("meta[name='theme-color']")?.setAttribute('content', backgroundColor)
}

const styles = getComputedStyle(document.documentElement)
const backgroundColor = styles.getPropertyValue(isDarkmode ? "--color-background-dark" : "--color-background-light")
document.querySelector("meta[name='theme-color']")?.setAttribute('content', backgroundColor)

// @thene { } を解析
const themeBlock = cssParse.root.nodes
    .filter((node) => node.type === 'atrule')
    .find((node) => node.name === 'theme')
// 各 CSS 変数を取得。object に css 変数の key がある
const cssVariableList = Object.fromEntries(
    themeBlock
        ?.nodes
        ?.filter((node) => node.type === 'decl')
        ?.map((node) => ([node.prop, node.value])) || []
)

// 例
const backgroundColor = cssVariableList['--color-background-light']

.content_div {
    /* リンクがはみ出るので */
    overflow-wrap: break-word;
    /** 文字の色 */
    @apply text-content-text-light dark:text-content-text-dark;
}

@reference "../../styles/css/global.css";

.content_div {
    /* リンクがはみ出るので */
    overflow-wrap: break-word;
    /** 文字の色 */
    @apply text-content-text-light dark:text-content-text-dark;
}

/** 検索する */
async function executeSearchFromQueryParams(searchWord: string) {
    // pagefind で検索する
    // 省略...
}

export default function PagefindSearch() {
    // クエリパラメータから取り出す
    const searchParams = useSearchParams()
    const searchWord = searchParams.get('q') ?? ''

    // 検索する Promise。検索結果に渡す
    // 多分 Promise オブジェクトは使い回す必要があるので、useMemo()
    const promiseObject = useMemo(() => executeSearchFromQueryParams(searchWord), [searchWord])

    return(
      <Suspense fallback={<CircleLoading />}>
        <SearchResult resultListPromise={promiseObject} />
      </Suspense>
    )
}

type SearchResultProps = {
    resultListPromise: Promise<PagefindSearchFragment[]>
}

function SearchResult({ resultListPromise }: SearchResultProps) {
    // Promise を待つ
    const resultList = use(resultListPromise)
    resultList.map(...)
}

/** 検索画面 */
export default function PagefindSearch() {
    // クエリパラメータから取り出す
    const searchParams = useSearchParams()
    const searchWord = searchParams.get('q') ?? ''

    // 以下省略
}

import Form from 'next/form'

export default function SearchForm({ searchWord }: SearchFormProps) {
    // method="get" なので
    // form 確定したら /search/q={検索ワード} のページに遷移する
    return (
        <Form
            className="search-form flex flex-row w-full space-x-2 py-2 px-4 rounded-full bg-container-primary-light dark:bg-container-primary-dark"
            action="/search/"
        >
            <input
                className="grow focus:outline-hidden bg-transparent py-1 text-content-text-light dark:text-content-text-dark"
                type="input"
                placeholder="検索ワード"
                name="q"
                defaultValue={searchWord} />
        </Form>
    )
}

const ReBuildHtmlElementTagNames = [
    // グループ
    "div",
    // 改行
    "br",
    // 文字
    // 文章、文字、太字、右上につける文字、斜め、打ち消し線
    "p", "span", "strong", "sup", "em", "del",
    // リンク
    "a",
    // セクション
    "section",
    // 引用
    "blockquote",
    // 折りたたみ要素
    "details", "summary",
    // 区切り線
    "hr",
    // 画像
    "img",
    // 箇条書き
    "ol", "ul", "li",
    // 表
    "table", "thead", "tbody", "tr", "td", "th",
    // 見出し
    "h1", "h2", "h3", "h4", "h5", "h6",
    // コード・コードブロック
    "pre", "code",
    // スクリプト
    "script", "noscript",
    // iframe
    "iframe"
] as const

/**
 * Markdown から unified の HTML AST を取得する
 * 
 * @param markdown Markdown 本文
 * @returns hast (unified HTML AST)
 */
static async parseMarkdownToHtmlAst(markdown: string) {
    const remarkProcessor = unified()
        .use(remarkParse)
        .use(remarkGfm)
    const rephypeProsessor = unified()
        .use(remarkRehype, { allowDangerousHtml: true })
    // Markdown AST (mdast)
    const mdast = remarkProcessor.parse(markdown)
    // mdast -> HTML AST (hast)
    const hast = await rephypeProsessor.run(mdast)
    return hast
}

{
    "type": "root",
    "children": [
        {
            "type": "element",
            "tagName": "p",
            "properties": {},
            "children": [
                {
                    "type": "text",
                    "value": "どうもこんばんわ。",
                    "position": {
                        "start": {
                            "line": 1,
                            "column": 1,
                            "offset": 0
                        },
                        "end": {
                            "line": 1,
                            "column": 10,
                            "offset": 9
                        }
                    }
                }
            ],
            "position": {
                "start": {
                    "line": 1,
                    "column": 1,
                    "offset": 0
                },
                "end": {
                    "line": 1,
                    "column": 12,
                    "offset": 11
                }
            }
        }
    ],
    "position": {
        "start": {
            "line": 1,
            "column": 1,
            "offset": 0
        },
        "end": {
            "line": 7,
            "column": 1,
            "offset": 58
        }
    }
}

element.children.filter((node) => node.type === "element").map((element) => element.tagName)

npm install -g depcheck

npx depcheck

PS C:\Users\takusan23\Desktop\Dev\NextJS\ziyuutyou-next> npx depcheck
Unused dependencies
* jsdom
* rehype-pretty-code
* rehype-slug

import { codeToHtml } from "shiki"

/** ShikiCodeBlockRender へ渡す Props */
type ShikiCodeBlockRenderProps = {
    /** コード本文 */
    code: string
    /** 言語。未指定の場合は plaintext */
    language?: string
}

/** shiki を使ってシンタックスハイライトした後描画するコードブロック */
export default async function ShikiCodeBlockRender({ code, language }: ShikiCodeBlockRenderProps) {
    const syntaxHighlightingCode = await codeToHtml(
        code.trimEnd(),
        {
            lang: language ?? 'plaintext',
            theme: 'dark-plus'
        }
    )
    // この pre にスクロールバーと padding
    return <div className="[&>pre]:overflow-x-scroll [&>pre]:p-4" dangerouslySetInnerHTML={{ __html: syntaxHighlightingCode }} />
}

ShikiError: Language `gradle` is not included in this bundle. You may want to load it from external source.

/**
 * シングルトンにする。
 * よく分からないけど、明示的にすべて読み込むようにしないと、たまによくビルドがが成功しない。
 * https://shiki.style/guide/install#highlighter-usage
 */
const highlighterPromise = createHighlighter({
    themes: Object.keys(bundledThemes),
    langs: Object.keys(bundledLanguages)
})

/** shiki を使ってシンタックスハイライトした後描画するコードブロック */
export default async function ShikiCodeBlockRender({ code, language }: ShikiCodeBlockRenderProps) {
    const trimCode = code.trimEnd()
    const option = {
        lang: language ?? 'plaintext',
        theme: 'dark-plus'
    }

    const highlighter = await highlighterPromise
    let syntaxHighlightingCode: string
    try {
        // Markdown のコードブロックの言語を尊重する
        syntaxHighlightingCode = highlighter.codeToHtml(trimCode, option)
    } catch (e) {
        // 失敗したら plaintext で再試行
        console.log(`言語 ${option.lang} のシンタックスハイライトに失敗しました。plaintext にします。`)
        syntaxHighlightingCode = highlighter.codeToHtml(trimCode, { ...option, lang: 'plaintext' })
    }

    return (
        <div className="relative group">
            <div className="[&>pre]:overflow-x-scroll [&>pre]:p-4 [&>pre]:my-4" dangerouslySetInnerHTML={{ __html: syntaxHighlightingCode }} />
        </div>
    )
}

npm i hast-util-to-string
npm i github-slugger

import { ReactNode } from "react"
import GithubSlugger from "github-slugger"
import { toString } from "hast-util-to-string"
import type { Element } from "hast"

/** 見出しの id 属性作成 */
const slugger = new GithubSlugger()

/** HeadingElement に渡す Props */
type HeadingElementProps = {
    /** h1 ~ h6 のどれか */
    tagName: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
    /** id 属性作成のために h1 等のそれ自身を */
    element: Element
    /** 子。文字だと思う */
    children: ReactNode
}

/** h1 から h6 までを描画する。見出しはこっちで付与します。rehype-slug 実装相当です。 */
export default function HeadingElement({ tagName, element, children }: HeadingElementProps) {
    const id = slugger.slug(toString(element))
    switch (tagName) {
        case "h1":
            return <h1 id={id} className="text-2xl text-content-primary-light">{children}</h1>
        case "h2":
            return <h2 id={id} className="text-xl text-content-primary-light">{children}</h2>
        case "h3":
            return <h3 id={id} className="text-lg text-content-primary-light">{children}</h3>
        case "h4":
            return <h4 id={id} className="text-content-primary-light">{children}</h4>
        case "h5":
            return <h5 id={id} className="text-content-primary-light">{children}</h5>
        case "h6":
            return <h6 id={id} className="text-content-primary-light">{children}</h6>
    }
}

  // 箇条書き
  case "ul":
      return <ul className="list-disc m-[revert] p-[revert]">{childrenHtml}</ul>
  case "li":
      return <li>{childrenHtml}</li>

html = await fetch(
    url,
    {
        headers: [
            ['User-Agent', `GET_LINKCARD_${EnvironmentTool.BASE_URL}`]
        ],
        cache: 'force-cache',
        next: { revalidate: false }
    }
).then((res) => res.text())

/**
 * 文字列の HTML から unified HTML AST を作成する
 * 
 * @param html HTML
 * @returns 要素の配列
 */
static parseHtmlAstFromHtmlString(html: string) {
    // fragment: true で html/head/body が生成されないように
    const rephypeProsessor = unified()
        .use(rehypeParse, { fragment: true })
    const hast = rephypeProsessor.parse(html)
    return hast.children
}

const hast = MarkdownParser.parseHtmlAstFromHtmlString(html)
const metaElementList = hast
    .filter((element) => element.type === "element")
    .filter((element) => element.tagName === "meta")

// それぞれ取り出す
const ogTitle = metaElementList.find((element) => element.properties['property'] === 'og:title')?.properties['content']?.toString()
const ogDescription = metaElementList.find((element) => element.properties['property'] === 'og:description')?.properties['content']?.toString()

export default function ClientScriptRender({ src, type, children }: ScriptRenderProps) {

    // クライアントで描画されたときに src / type をセットする
    // next/link の画面遷移では <script> のスクリプトが起動しない
    const divRef = createRef<HTMLDivElement>()
    useEffect(() => {
        // すでに div に追加していれば何もしない
        if (divRef.current?.querySelector('script')) return
        // 作成
        const scriptElement = document.createElement('script')
        scriptElement.src = src ?? ""
        scriptElement.type = type ?? ""
        // 追加
        divRef.current?.append(scriptElement)
        // 一応消しておく
        return () => { divRef.current?.removeChild(scriptElement) }
    }, [])

    return (
        <div ref={divRef}>
            {children}
        </div>
    )
}

/** npm run test で実行できます */
describe('<MarkdownRender /> のテスト', () => {
    // テスト実行で一回だけ
    beforeAll(() => {
        // next/font がエラーになるのでモック
        vi.mock('next/font/local', () => ({
            default: () => ({ className: '', style: { fontFamily: '' }, variable: '' })
        }))
    })
    // 前回の render() 結果が消えるように
    afterEach(() => {
        cleanup()
    });
    test('文字が描画できる', async () => {
        // よく分からないですが、act() + <Suspense> で async function もテストできた
        // https://github.com/testing-library/react-testing-library/issues/1209
        await act(async () => {
            render(
                <Suspense>
                    <MarkdownRender markdown='text' />
                </Suspense>
            )
        })
        expect(screen.getByText('text')).toBeDefined()
        expect(screen.getByText('text').tagName).toBe('P')
    })
})

A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

stderr | __test__/MarkdownRender.test.tsx > <MarkdownRender /> のテスト > HTML に style が書かれていたら自分で描画するのを辞める
A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

 ✓ __test__/MarkdownRender.test.tsx (25 tests) 365ms
   ✓ <MarkdownRender /> のテスト > 文字が描画できる 47ms
   ✓ <MarkdownRender /> のテスト > 太字が描画できる 55ms
   ✓ <MarkdownRender /> のテスト > 打ち消し線が描画出来る 9ms
   ✓ <MarkdownRender /> のテスト > 斜線が描画できる 8ms
   ✓ <MarkdownRender /> のテスト > <p> が描画できる 12ms
   ✓ <MarkdownRender /> のテスト > <span> が描画できる 13ms
   ✓ <MarkdownRender /> のテスト > <sup> が描画できる 7ms
   ✓ <MarkdownRender /> のテスト > 改行できる 7ms
   ✓ <MarkdownRender /> のテスト > リンクが描画できる 19ms
   ✓ <MarkdownRender /> のテスト > リンクカードの取得に失敗した 17ms
   ✓ <MarkdownRender /> のテスト > リンクカードの取得に成功した 23ms
   ✓ <MarkdownRender /> のテスト > <section> を描画できる 6ms
   ✓ <MarkdownRender /> のテスト > 引用できる 7ms
   ✓ <MarkdownRender /> のテスト > 折りたたみ要素が描画できる 9ms
   ✓ <MarkdownRender /> のテスト > 区切り線が描画出来る 6ms
   ✓ <MarkdownRender /> のテスト > 画像が描画できる 8ms
   ✓ <MarkdownRender /> のテスト > 箇条書きが描画できる 15ms
   ✓ <MarkdownRender /> のテスト > テーブルが描画できる 13ms
   ✓ <MarkdownRender /> のテスト > 見出しが描画できる 25ms
   ✓ <MarkdownRender /> のテスト > コードブロックが描画出来る 16ms
   ✓ <MarkdownRender /> のテスト > <code> が描画できる 8ms
   ✓ <MarkdownRender /> のテスト > <script> が挿入される 5ms
   ✓ <MarkdownRender /> のテスト > <iframe> が挿入される 15ms
   ✓ <MarkdownRender /> のテスト > 自前で描画しないタグも描画できる 6ms
   ✓ <MarkdownRender /> のテスト > HTML に style が書かれていたら自分で描画するのを辞める 7ms

 Test Files  1 passed (1)
      Tests  25 passed (25)
   Start at  01:11:34
   Duration  8.24s

 PASS  Waiting for file changes...
       press h to show help, press q to quit

/**
 * 関連する記事を取得する
 * タグを基準に、新しい順で。
 * 
 * @param excludeUrl 除外する URL。自分のこと。
 * @param tagNameList タグの配列
 * @param maxSize 最大件数
 * @returns BlogItem[]
 */
static async findRelatedBlogItemList(excludeUrl: string, tagNameList: string[], maxSize: number) {
    const blogList = await this.getBlogItemList()
    // 関連しているかの判断は、引数に渡したタグが、何個一致しているか
    // 記事は新しい順
    const relatedBlogItemList = blogList
        // タグ無いとかは弾いておく
        .filter((blogItem) => blogItem.link !== excludeUrl && blogItem.tags.length !== 0)
        // 関係ない記事が出そうなので、2つ以上一致しているとき
        // 一旦件数と Pair する
        .map((blogItem) => {
            const containsTagCount = blogItem.tags.filter((tagName) => tagNameList.includes(tagName)).length
            return { containsTagCount, blogItem }
        })
        .filter((pair) => 2 <= pair.containsTagCount)
        // 一致している順
        .sort((a, b) => b.containsTagCount - a.containsTagCount)
        // 返すときは BlogItem[] に戻す
        .map((pair) => pair.blogItem)
        .splice(0, maxSize)
    return relatedBlogItemList
}

private static chunkedPage<T>(origin: T[], size: number) {
    return origin
        .map((_, i) => i % size === 0 ? origin.slice(i, i + size) : null)
        .filter((nullabeList) => nullabeList !== null)
}

Please install @types/node by running:

	npm install --save-dev @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your app and pages directories).