こんにちはこのブログは tailwind-nextjs-starter-blog というものをベースに作らさせていただいているのですが、このブログに貼るリンクを下のリッチリンク/リンクカードみたいにしたいなと思いました。 https://github.com/timlrx/tailwind-nextjs-starter-blog なお、実装およびこの記事の作成については以下の記事を大変参考にさせていただいております。ぜひこちらもご確認ください。 https://egashira.dev/blog/nextjs-mdx-link-card ## 実装今回は tailwind-nextjs-starter-blog にそのまま実装できるような感じです。注意点としては、よくわからないけど全体が`

`タグに囲まれてしまうので制約が少し厳しいということです。 ``とかを駆使してなんとか実装できたのかな..?って思います(テンプレート側はいじっていない) 参考サイト通り`metadata-scraper`ってのを使用したいと思います。 ```zsh yarn add metadata-scraper ``` `scripts/remark-link-card.mjs`を以下のように作成しました。 ```js import { visit } from 'unist-util-visit' import getMetadata from 'metadata-scraper' const MY_HOST = 'your-domain.com' // ここは書き換えてください const isLinkNode = (node) => { return ( node.type === 'paragraph' && node.children.length === 1 && node.children[0].type === 'link' && node.children[0].children.length === 1 && node.children[0].children[0].type === 'text' ) } export function remarkLinkCard() { return async (tree) => { const nodesToProcess = [] visit(tree, isLinkNode, (node) => { nodesToProcess.push(node) }) await Promise.all( nodesToProcess.map(async (node) => { const linkNode = node.children[0] const url = linkNode.url const linkText = linkNode.children[0].value // リンクテキストとURLが同じもののみを対象とする if (url !== linkText) return try { const metadata = await getMetadata(url) const { title, description, image, icon } = metadata const domain = new URL(url) const isExternal = domain.hostname !== MY_HOST const linkCardNode = { type: 'mdxJsxFlowElement', name: 'LinkCard', attributes: [ { type: 'mdxJsxAttribute', name: 'url', value: url, }, { type: 'mdxJsxAttribute', name: 'title', value: title || '', }, { type: 'mdxJsxAttribute', name: 'description', value: description || '', }, { type: 'mdxJsxAttribute', name: 'image', value: image || '', }, { type: 'mdxJsxAttribute', name: 'icon', value: icon || '', }, { type: 'mdxJsxAttribute', name: 'isExternal', value: isExternal ? 'true' : 'false', }, ], children: [], } node.type = 'paragraph' node.children = [linkCardNode] } catch (error) { console.error(`Error fetching metadata for ${url}:`, error) } }) ) } } ``` 次は、`components/LinkCard.tsx`を作成 tailwind css を使用しているので細かいところはお好みに変えてください ```tsx import React from 'react' import Link from 'next/link' interface LinkCardProps { url: string title: string description: string image?: string icon?: string isExternal: string } const LinkCard: React.FC = ({ url, title, description, image, icon, isExternal, }) => { const domain = new URL(url).hostname return ( {/* 画像部分 */} {image && ( {title} )} {/* タイトル */} {title} {/* 説明文 */} {description && ( {description} )} {/* ドメインとアイコン */} {icon && } {domain} ) } export default LinkCard ``` そしたら、`components/MDXComponents.tsx`を編集 ```tsx import TOCInline from 'pliny/ui/TOCInline' import Pre from 'pliny/ui/Pre' import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm' import type { MDXComponents } from 'mdx/types' import Image from './Image' import CustomLink from './Link' import TableWrapper from './TableWrapper' + import LinkCard from './LinkCard' export const components: MDXComponents = { Image, TOCInline, a: CustomLink, pre: Pre, table: TableWrapper, BlogNewsletterForm, + LinkCard, } ``` `contentlayer.config.ts`に以下の内容を追加 ```ts // ほかのimportたち + import { remarkLinkCard } from './scripts/remark-link-card.mjs' ...略... export default makeSource({ contentDirPath: 'data', documentTypes: [Blog, Authors], mdx: { cwd: process.cwd(), remarkPlugins: [ remarkExtractFrontmatter, remarkGfm, remarkCodeTitles, remarkMath, remarkImgToJsx, remarkAlert, + remarkLinkCard, ], 以下続く... ``` これで完成なはずです。 mdxファイルにリンクそのものを貼るだけでビルド時にリンクカードを生成してくれると思います。 ## 参考 https://egashira.dev/blog/nextjs-mdx-link-card

All Posts

All Posts

Blogみたいなものを作ってみた