<a class="no-underline text-inherit" rel="me" href="https://diary.negitoro.dev/@takusan_23">
    @takusan_23
</a>

class ContentFolderManager {

    /** マークダウンパース結果を共用するため、シングルトンにする */
    private static _instance: ContentFolderManager

    /** マークダウンのパース結果 */
    private markdownParseList: Map<string, MarkdownData> = new Map()

    /**
     * ContentFolderManager を返します。
     * マークダウンのパース結果を共用するため、シングルトンになってます。
     * 
     * @returns ContentFolderManager
     */
    static getInstance() {
        // Next.js はシングルトンでインスタンスを共有しようとしても、ホットリードでインスタンスが再生成されるらしい
        if (process.env.NODE_ENV === 'development') {
            globalThis['_ContentFolderManager'] = globalThis['_ContentFolderManager'] ?? new ContentFolderManager()
            return globalThis['_ContentFolderManager'] as ContentFolderManager
        } else {
            ContentFolderManager._instance = ContentFolderManager._instance ?? new ContentFolderManager()
            return ContentFolderManager._instance
        }
    }
}

export class NextJsCacheStore<T> implements CacheStore<T> {

    async getCache(key: string, notExists: (key: string) => Promise<T>): Promise<T> {
        // キャッシュがあればそれ、なければ notExists を呼び出す
        const cacheOrCreate = unstable_cache(
            async () => notExists(key),
            [key],
            { tags: [key] }
        )
        // 待って返す
        const result = await cacheOrCreate()
        return result
    }

    deleteCache(key: string): void {
        revalidateTag(key)
    }

}

interface CacheStore<T> {

    getCache(key: string, notExists: (key: string) => Promise<T>): Promise<T>

    deleteCache(key: string): void
}

/** マークダウンパース結果をキャッシュして使い回す。中身は Next.js の cache() です。 */
private static cacheStore = new NextJsCacheStore<MarkdownData>()

static {
    // マークダウンファイルの変更を追跡して、キャッシュしているマークダウンパース結果を削除する
    // 複数回呼ばれるらしいので、その都度パースするではなく、消すだけ消して必要になったらパースする方向で
    this.watchFolder(ContentFolderManager.POSTS_FOLDER_PATH, (filePath) => {
        console.log(`[change] ${filePath}`)
        this.cacheStore.deleteCache(filePath)
    })
}

/**
 * Markdown をパースして返す。
 * キャッシュがあればキャッシュを返します。
 * 
 * @param filePath ファイルパス
 * @param baseUrl /posts /pages など
 * @returns MarkdownData
 */
private static async parseMarkdown(filePath: string, baseUrl: string) {
    // キャッシュがあるか問い合わせる
    const markdownData = await this.cacheStore.getCache(filePath, (_) => MarkdownParser.parse(filePath, baseUrl))
    return markdownData
}

/**
 * fs.watch を使ったフォルダの監視。複数回呼ばれるらしい。
 * マークダウンに変更があった際に通知されてほしいので。
 * 
 * @param folderPath フォルダパス
 * @param onChange 変更があった際に呼ばれます。引数はファイルパス。
 */
private static watchFolder(
    folderPath: string,
    onChange: (filePath: string) => void
) {
    (async () => {
        const pagesWatcher = fs.watch(folderPath)
        for await (const result of pagesWatcher) {
            if (result.eventType === 'change' && result.filename) {
                onChange(path.join(folderPath, result.filename))
            }
        }
    })()
}

 ⨯ unhandledRejection: StaticGenBailoutError: Route /posts/android_video_editor_akari_droid/ with `dynamic = "error"` couldn't be rendered statically because it used `revalidateTag C:\Users\takusan23\Desktop\Dev\NextJS\ziyuutyou-next\content\posts\ziyuutyou_update_2024.md`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering
    at trackDynamicDataAccessed (webpack-internal:///(rsc)/./node_modules/next/dist/server/app-render/dynamic-rendering.js:106:15)
    at revalidate (webpack-internal:///(rsc)/./node_modules/next/dist/server/web/spec-extension/revalidate.js:51:52)
    at revalidateTag (webpack-internal:///(rsc)/./node_modules/next/dist/server/web/spec-extension/revalidate.js:26:12)
    at NextJsCacheStore.deleteCache (webpack-internal:///(rsc)/./src/NextJsCacheStore.ts:25:66)
    at eval (webpack-internal:///(rsc)/./src/ContentFolderManager.ts:45:29)
    at eval (webpack-internal:///(rsc)/./src/ContentFolderManager.ts:196:21) {
  code: 'NEXT_STATIC_GEN_BAILOUT'

const { PHASE_DEVELOPMENT_SERVER } = require('next/dist/shared/lib/constants')

module.exports = async (phase, { defaultConfig }) => {

    /** @type {import('next').NextConfig} */
    const nextConfig = {
        output: 'export',
        trailingSlash: true,
        webpack(config) {
            // SVG をコンポーネントにできる
            config.module.rules.push({
                test: /\.svg$/,
                use: ['@svgr/webpack'],
            })
            return config
        },
        experimental: {
            scrollRestoration: true,
        }
    }

    // このサイトは静的書き出しを使っていますが、静的書き出しモードでは使えない機能を開発中のみ使いたいため、
    // 開発時のみ静的書き出しモードを OFF にする。（ Next.js の revalidateTag ）
    // 開発時のみ OFF になるが、本番環境は静的書き出しを使うため、静的書き出しで使える機能のみを使う必要があります。
    // https://nextjs.org/docs/app/building-your-application/deploying/static-exports#supported-features
    if (phase === PHASE_DEVELOPMENT_SERVER) {
        nextConfig.output = undefined
    }

    return nextConfig
}

export class NextJsCacheStore<T> implements CacheStore<T> {

    async getCache(key: string, notExists: (key: string) => Promise<T>): Promise<T> {
        // キャッシュがあればそれ、なければ notExists を呼び出す
        const cacheOrCreate = unstable_cache(
            async () => notExists(key),
            [key],
            { tags: [key] }
        )
        // 待って返す
        const result = await cacheOrCreate()
        return result
    }

    deleteCache(key: string): void {
        // 未実装
        // ブラウザのスーパーリロードをすれば消せます。
    }

}

import { useSyncExternalStore } from "react"
import { ThemeTool, Theme } from "../../src/ThemeTool"

const subscribe = (onStoreChange: () => void) => {
    window.addEventListener('storage', onStoreChange)
    return () => {
        window.removeEventListener('storage', onStoreChange)
    }
}
const getSnapshot = () => ThemeTool.readTheme()
const getServerSnapshot = () => 'light'

/**
 * テーマ用カスタムフック。
 * 現在のテーマ設定と、テーマ変更の関数を返します。
 */
export default function useTheme() {
    // useSyncExternalStore で localStorage と React のステートをつなげる
    const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

    // 設定変更用関数
    function setTheme(theme: Theme) {
        ThemeTool.saveTheme(theme)
        // subscribe で通知が行くように
        window.dispatchEvent(new Event('storage'))
    }

    return { theme, setTheme }
}

<details>
    <summary>
        目次
    </summary>
    <p><a href="#1">1</a></p>
    <p><a href="#2">2</a></p>
    <p><a href="#3">3</a></p>
</details>

{/* group つける */}
<details className="group select-none">
    <summary className="list-none">
        {/* 開いてるときと閉じてる時を作っておく、CSS で切り替える。group-open で group 付けた要素の状態参照ができる */}
        <p className="flex group-open:hidden">ここを押すと開く</p>
        <p className="hidden group-open:flex">もう一回ここを押すと閉じる</p>
    </summary>
    <p><a href="#1">1</a></p>
    <p><a href="#2">2</a></p>
    <p><a href="#3">3</a></p>
</details>

{/* group つける */}
<details className="group select-none">
    <summary className="list-none">
        {/* group-open で group 付けた要素の状態参照ができる */}
        <div className="flex flex-row">
            <p className="grow">もくじ</p>
            {/* アイコンは https://fonts.google.com/icons から */}
            <div className="rotate-180 group-open:rotate-0">
                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                    <path d="m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z" />
                </svg>
            </div>
        </div>
    </summary>
    <p><a href="#1">1</a></p>
    <p><a href="#2">2</a></p>
    <p><a href="#3">3</a></p>
</details>

const remarkParser = await unified()
    .use(rehypePrettyCode, {
        theme: "dark-plus",
        transformers: [
            // コピーボタンを差し込む
            transformShikiCodeBlockCopyButton()
        ]
    })
    .process(matterResult.content)

/** コピーボタンにつける Tailwind CSS のユーティリティ名 */
const className = 'hidden group-hover:flex p-2 m-2 absolute top-0 right-0 cursor-pointer rounded-md bg-background-dark border-2 border-content-primary-dark text-content-primary-dark fill-content-primary-dark'

export default function transformShikiCodeBlockCopyButton(): ShikiTransformer {
    return {
        name: 'transformShikiCodeBlockCopyButton',

        // 生成後の <pre> 要素を編集する
        pre(node) {

            // コピーボタンを追加するためにまず親を position: relative する
            // src の中ですが、このファイルだけ特別にユーティリティ名走査対象にしているので Tailwind CSS が使えます。
            node.properties.class = 'relative group'

            // コピーボタンを差し込む
            node.children.push({
                type: 'element',
                tagName: 'button',
                properties: {
                    data: this.source,
                    onclick: /* javascript */ `navigator.clipboard.writeText(this.attributes.data.value)`,
                    class: className,
                },
                children: [
                    {
                        type: 'element',
                        tagName: 'svg',
                        properties: {
                            xmlns: 'http://www.w3.org/2000/svg',
                            height: '24',
                            viewBox: '0 -960 960 960',
                            width: '24'
                        },
                        children: [
                            {
                                type: 'element',
                                tagName: 'path',
                                properties: {
                                    // アイコンは https://fonts.google.com/icons より
                                    d: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z'
                                },
                                children: []
                            }
                        ]
                    }
                ],
            })
        }
    }
}

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // コピーボタンを差し込むので
    "./src/transformShikiCodeBlockCopyButton.ts"
  ],
  // 以下省略
}

import ContentFolderManager from "../../../../src/ContentFolderManager"

/** 動的ルーティング */
type PageProps = {
    params: { blog: string }
}

/**
 * ルートハンドラー
 * 静的書き出し時に生成するため、request 引数は使ってはいけない
 */
export async function GET(_: Request, { params }: PageProps) {
    return Response.json({ dynamic_routing: params.blog })
}

// app/posts/[blog]/page.tsx の generateStaticParams と同じ
export async function generateStaticParams() {
    // 記事一覧
    const fileNameList = await ContentFolderManager.getBlogNameList()
    // この場合はキーが blog になるけどこれはファイル名によって変わる（[page].tsxなら page がキーになる）
    return fileNameList.map((name) => ({ blog: name }))
}

{"dynamic_routing":"ziyuutyou_update_2024"}

import { ImageResponse } from "next/og"

/** 動的ルーティング */
type PageProps = {
    params: { blog: string }
}

/**
 * OGP 画像を生成するルートハンドラー
 * OGP 画像を静的書き出し時に生成するため、request 引数は使ってはいけない。
 */
export async function GET(_: Request, { params }: PageProps) {
    return new ImageResponse(
        (
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    padding:10
                }}
            >
                <h1 style={{ fontSize: 60 }}>
                    ここにタイトルを入れる
                </h1>
                <p style={{ fontSize: 30 }}>
                    2024-05-02
                </p>
                <p style={{ fontSize: 30 }}>
                    @takusan_23
                </p>
            </div>
        ),
        {
            width: 1200,
            height: 630
        }
    )
}

/** 動的ルーティング */
export async function generateStaticParams() {
    // 各自よしなに実装してください。page.tsx の動的ルーティングと同じです。
    // return [{ blog: 'first' }]
}

/** head に値を入れる */
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
    const markdownData = await ContentFolderManager.getBlogItem(params.blog)
    const ogpTitle = `${markdownData.title} - ${EnvironmentTool.SITE_NAME}`
    const ogpUrl = `${EnvironmentTool.BASE_URL}${markdownData.link}`

    return {
        title: ogpTitle,
        alternates: {
            canonical: ogpUrl
        },
        openGraph: {
            title: ogpTitle,
            url: ogpUrl,
            // OGP 画像は opengraph-image.png/route.tsx 参照
            images: `${ogpUrl}opengraph-image.png` // ←これ
        }
    }
}

class FileReadTool {

    /** <img> の src へ base64 のデータを渡す際に先頭に入れておく文字列。png 版。 */
    static BASE64_PREFIX_PNG = 'data:image/png;base64,'

    /** {@link BASE64_PREFIX_PNG}の svg 版。 */
    static BASE64_PREFIX_SVG = 'data:image/svg+xml;,'

    /**
     * 引数に渡したファイルパスのデータを base64 形式で読み出して返す
     * 
     * @param filePathSegments ファイルパス。/app/icon.png なら可変長引数に 'app', 'icon.png' を渡す。
     * @returns base64 のデータ
     */
    static async readBase64(...filePathSegments: string[]) {
        return await fs.readFile(path.join(process.cwd(), ...filePathSegments), { encoding: 'base64' })
    }

    /**
     * テキストファイルを読み出す。
     * 
     * @param filePathSegments ファイルパス。/public/icon/menu.svg なら可変長引数に 'public', 'icon', 'menu.svg' を渡す。
     */
    static async readTextFile(...filePathSegments: string[]) {
        return await fs.readFile(path.join(process.cwd(), ...filePathSegments), { encoding: 'utf-8' })
    }

    /**
     * 引数に渡したファイルパスを読み出して Buffer で返す
     * 
     * @param filePathSegments ファイルパス。/styles/css/fonts/font.ttf なら可変長引数に 'styles', 'css', 'fonts', 'font.ttf' を渡す。
     */
    static async readByteArray(...filePathSegments: string[]) {
        return await fs.readFile(path.join(process.cwd(), ...filePathSegments))
    }
}

// /app/posts/[blog]/opengraph-image.png/route.tsx
// TODO PageProps の定義
// TODO generateStaticParams の実装

export async function GET(_: Request, { params }: PageProps) {
    // 記事を取得
    const markdownData = await ContentFolderManager.getBlogItem(params.blog)

    // Tailwind CSS の色を取得
    const colors = resolveConfig(tailwindConfig).theme?.colors
    const backgroundColor = colors['background']['light']
    const containerColor = colors['container']['primary']['light']
    const contentColor = colors['content']['primary']['light']

    // 表示するアイコン。base64 とかで直接渡すのがいいらしい（相対 URL 無理だった）
    const [iconBase64, homeIconBase64, blogIconBase64, tagIconBase64] = await Promise.all([
        // アバター画像。/app/icon.png
        FileReadTool.readBase64('app', 'icon.png'),
        // ナビゲーションドロワーのアイコン
        FileReadTool.readTextFile('public', 'icon', 'home.svg'),
        FileReadTool.readTextFile('public', 'icon', 'book.svg'),
        FileReadTool.readTextFile('public', 'icon', 'sell.svg')
    ])

    // フォントファイル
    // styles/css/fonts にある ttf を見に行く
    const fontFileBuffer = await FileReadTool.readByteArray('styles', 'css', 'fonts', 'Koruri-Regular-sub.ttf')

    return new ImageResponse(
        (
            // 背景
            <div
                style={{
                    height: '100%',
                    width: '100%',
                    position: 'relative',
                    display: 'flex',
                    backgroundColor: backgroundColor,
                    fontFamily: 'KoruriFont'
                }}
            >

                {/* flex 横並び。 */}
                {/* パーセントで仕切るんじゃなくて、flex-grow 使うべきな気がするけど、width 明示的に指定しないとテキストの折り返し出来ない気がして、、 */}
                <div
                    style={{
                        height: '100%',
                        width: '100%',
                        position: 'absolute',
                        display: 'flex',
                        flexDirection: 'row'
                    }}
                >

                    {/* アイコン並んでる部分 */}
                    <div
                        style={{
                            width: '10%',
                            display: 'flex',
                            flexDirection: 'column',
                            marginTop: 20,
                            alignItems: 'center'
                        }}
                    >
                        {/* アバター画像 */}
                        <img
                            style={{ borderRadius: 50 }}
                            width={70}
                            height={70}
                            src={`${FileReadTool.BASE64_PREFIX_PNG}${iconBase64}`}
                        />

                        {/* ナビゲーションドロワーのアイコン並んでる部分 */}
                        {
                            [homeIconBase64, blogIconBase64, tagIconBase64].map((svg) => (
                                <img
                                    style={{ marginTop: 40 }}
                                    width={50}
                                    height={50}
                                    src={`${FileReadTool.BASE64_PREFIX_SVG}${svg}`}
                                />
                            ))
                        }
                    </div>

                    {/* flex 縦並び */}
                    <div
                        style={{
                            width: '90%',
                            display: 'flex',
                            flexDirection: 'column',
                            paddingRight: 30
                        }}
                    >

                        {/* タイトルバーの部分 */}
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                alignItems: 'center'
                            }}
                        >
                            <h1
                                style={{
                                    flexGrow: 1,
                                    fontSize: 40,
                                    color: contentColor
                                }}
                            >
                                {EnvironmentTool.SITE_NAME}
                            </h1>
                        </div>

                        {/* 記事のタイトルと投稿日時の部分 */}
                        <div
                            style={{
                                flexGrow: 1,
                                display: 'flex',
                                flexDirection: 'column',
                                padding: 20,
                                backgroundColor: containerColor,
                                borderTopLeftRadius: 40,
                                borderTopRightRadius: 40
                            }}
                        >

                            <h1
                                style={{
                                    fontSize: 70,
                                    color: contentColor,
                                    flexGrow: 1,
                                    wordBreak: 'break-all'
                                }}
                            >
                                {markdownData.title}
                            </h1>

                            <p
                                style={{
                                    fontSize: 40,
                                    color: contentColor,
                                    alignSelf: 'flex-end'
                                }}
                            >
                                {markdownData.createdAt}
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        ),
        {
            width: 1200,
            height: 630,
            fonts: [
                {
                    name: 'KoruriFont',
                    data: fontFileBuffer
                }
            ]
        }
    )
}

[
    {
        title: "記事のタイトル",
        content: "どうもこんにちは、今回は～"
    }
]

// 擬似コード
// 全部の記事を JSON で静的書き出し時に作っておいて、検索実行時に取得する
const allBlogJson = await fetch('search.json').then(res => res.json())

// 検索ワードが含まれているか
const keyword = keywordInput.value
const searchResult = allBlogJson.filter(blog => blog.content.match(keyword))

// 表示する
searchResult.forEach(containsBlog => {
    // todo
})

npm i -D pagefind

"deploy": "npm run build && pagefind --site out"

/** await pagefind.search の返り値 */
type PagefindSearchResults = {
    results: PagefindSearchResult[]
}

/** 各検索結果エントリ。data() を await することで詳細を取得する。 */
type PagefindSearchResult = {
    id: string,
    data: () => Promise<PagefindSearchFragment>
}

/** PagefindSearchResult.data() の返り値 */
type PagefindSearchFragment = {
    url: string,
    content: string,
    meta: Record<string, string>
}

/** 開発時は適当な値を返す pagefind。UI の調整用。 */
function pagefindInDevMock() {
    // 適当にダミーを作って返す
    const results: PagefindSearchResult[] = (new Array(5)).fill(0).map((_, index) => ({
        id: 'example',
        data: () => new Promise((resolve) => resolve({
            url: `/posts/page/${index + 1}/`,
            content: 'process.env.NODE_ENV === development',
            meta: { 'title': `Page ${index + 1}` }
        }))
    }))
    const result: PagefindSearchResults = {
        results: results
    }
    return { search: () => new Promise<PagefindSearchResults>((resolve) => resolve(result)) }
}

export default function PagefindSearch() {
    // キーワード
    const [searchWord, setSearchWord] = useState('')
    // 検索結果
    const [searchResult, setSearchResult] = useState<PagefindSearchFragment[]>([])

    // pagefind を読み込む
    // window.pagefind が使えるように 
    // なんでこんな回りくどい方法を取っているかというと、pagefind は静的書き出し後に生成する JavaScript をロードする必要があり、開発時は使えない。
    useEffect(() => {
        (async () => {
            if (!window["pagefind"]) {
                try {
                    window["pagefind"] = await import(
                        // @ts-expect-error pagefind.js generated after build
                        /* webpackIgnore: true */ "/pagefind/pagefind.js"
                    )
                } catch (e) {
                    // 開発時は適当にハードコートされた値を返す。本番は await import するはずなので問題ないはず
                    if (process.env.NODE_ENV === 'development') {
                        window["pagefind"] = pagefindInDevMock()
                    }
                }
            }
        })();
    }, [])

    // 検索する
    async function search(keyword: string) {
        if (window["pagefind"]) {
            // 検索する
            const pagefindResult = await window["pagefind"].search(keyword) as PagefindSearchResults
            // 10件取り出してロードする
            const searchResultFragmentList = await Promise.all(pagefindResult.results.slice(0, 10).map((r) => r.data()))
            // 文字制限したい
            const formatTextResultFragmentList = searchResultFragmentList.map((fragment) => ({ ...fragment, content: fragment.content.substring(0, 100) }))
            // UI に反映
            setSearchResult(formatTextResultFragmentList)
        }
    }

    // 検索結果を JSX で組み立てる
    return (
        <div className="flex flex-col">

            <input
                value={searchWord}
                onChange={(ev) => setSearchWord(ev.target.value)} />
        
            <button onClick={() => search(searchWord)}>
                検索
            </button>

            {
                searchResult.map((result) => (
                    <Link href={result.url} key={result.url}>
                        {fragment.meta['title']}
                    </Link>
                ))
            }
        </div>
    )
}

<div
    data-pagefind-body
    className="content_div"
    dangerouslySetInnerHTML={{ __html: markdownData.html }} />

const REGEX_MARKDOWN_CODE_BLOCK = /```([\S])([\s\S\n]*?)```/g

// マークダウン読み出す
const rawMarkdownText = await fs.readFile(filePath, { encoding: 'utf-8' })
// 文字数カウント。
// 正規表現でコードブロックを取り出して、その分の文字数を消す
const markdownCodeBlockAllExtract = Array.from(rawMarkdownText.matchAll(this.REGEX_MARKDOWN_CODE_BLOCK), (m) => m[0])
const markdownCodeBlockLength = markdownCodeBlockAllExtract.reduce((accumulator, currentValue) => accumulator + currentValue.length, 0)
const textCount = rawMarkdownText.length - markdownCodeBlockLength

class ContentFolderManager {

    static POSTS_FOLDER_PATH = path.join(process.cwd(), `content`, `posts`)
    static POSTS_BASE_URL = `/posts`

    static async getBlogItem(fileName: string) {
        const filePath = path.join(this.POSTS_FOLDER_PATH, `${fileName}.md`)
        return this.parseMarkdown(filePath, this.POSTS_BASE_URL)
    }

    private static async parseMarkdown(filePath: string, baseUrl: string) {
        // todo
    }
}

<div className="flex flex-col items-center w-full space-y-6">
    {(() => {

        // ロード中
        if (isLoading) {
            return <CircleLoading />
        }

        // まだ検索してない
        if (!searchResult) {
            return searchLogoElement
        }

        // 検索したけど 0 件だった
        if (searchResult.length === 0) {
            return (
                <>
                    {searchLogoElement}
                    <p className="text-content-primary-light dark:text-content-primary-dark">
                        検索結果が見つかりませんでした。
                    </p>
                </>
            )
        }

        // 検索結果を出す
        return <SearchResult resultList={searchResult} />

    })()}
</div>