リンクカードを実装した話

import { NextRequest } from "next/server";

export async function GET(req: NextRequest): Promise<Response> {
    try {
        const searchParams = req.nextUrl.searchParams;
        const url = searchParams.get('url');
    
        if(url === null) {
            console.log("error: proxy");
            return Response.json({status: 500});
        }
    
        const response = await fetch(url, {
            headers: { 'Content-Type': 'text/html'}
        });
    
        const html = await response.text();
        return new Response(html, {
            status: response.status
        });
    } catch (error) {
        console.log(error);
        return Response.json({status: 500});
    }
}

export const getOGP = async (url: string) => {
    const proxyUrl = process.env.API_PROXY_URL; //proxyサーバーURL
    const result = await fetch(`${proxyUrl}?url=${url}`); //パラメータを付与してリクエスト
    const html = await result.text(); //testで処理
}

//メタデータセットの型
export interface ogpData {
    ogTitle: string;
    ogDescription: string;
    ogImageUrl: string | null;//TODO:nullの場合にはデフォルトアイコンを表示するようにする
}

import * as cheerio from 'cheerio';
import { ogpData } from '../type';

export const getOGP = async (url: string): Promise<ogpData> => {
    try {
        const proxyUrl = process.env.API_PROXY_URL; //proxyサーバーURL
        const result = await fetch(`${proxyUrl}?url=${url}`); //リクエスト飛ばす
        const html = await result.text(); //testで処理
    
        const $ = cheerio.load(html);

        const ogTitle = $('meta[property="og:title"]').attr('content') ?? $('title').text() ?? "Untitled Page";
        const ogDescription = $('meta[property="og:description"]').attr('content') ?? "";
        const ogImageUrl = $('meta[property="og:image"]').attr('content') ?? null;
        const res: ogpData = { ogTitle, ogDescription, ogImageUrl }
        return res;
    } catch (error) {
        console.log(error);
        return {
            ogTitle: "Error",
            ogDescription: "No description available",
            ogImageUrl: null
        }
    }
}

//linkCard用のNode
export interface LinkCardNode extends Node {
    type: 'linkCard';
    url: string;
}

const LINK_CARD_BEGGINING = ":::linkCard\n";
const LINK_CARD_ENDING = "\n:::";

export function isLinkCard(node: unknown): node is Paragraph {
    //paragraphじゃなかったらLinkCardでもない
    if (!isParagraph(node)) {
        return false;
    }

    //分割代入によってchildrenプロパティを抽出
    const { children } = node;

    //子要素はLinkとそれを挟むテキストのみ
    if(children.length !== 3 || !isLink(children[1])){
        return false;
    }

    //":::linkCard\nで始まっていなかったらlinkCard記法じゃない"
    const firstChild = children[0];
    if (!(isText(firstChild) && firstChild.value.startsWith(LINK_CARD_BEGGINING))) {
        return false;
    }

    //":::\nで終わってなかったらlinkCard記法じゃない"
    const lastChild = children[children.length -1];
    if (!(isText(lastChild) && lastChild.value.endsWith(LINK_CARD_ENDING))) {
        return false;
    }

    return true;
}

import { Plugin } from "unified";
import { Node, Parent } from "unist";
import { Paragraph, Link } from "mdast";
import { VFile } from "vfile";
import { visit } from "unist-util-visit";
import { LinkCardNode } from "@/lib/type";
import { isParent, isLink, isLinkCard } from "../utils";

export const linkCardPlugin: Plugin<[], Node, void> = () => {
    return (tree: Node, _file: VFile) => {
        //treeのlinkCard記法を訪れた時に、変換処理をする。
        visit(tree, isLinkCard, (node: Paragraph, index: number | undefined, parent: Parent | undefined ) => {
            if (!isParent(parent) || typeof index !== "number" || !isLink(node.children[1])) {
                return;
            }

            const children: Link = node.children[1];
            const url: string = children.url;

            parent.children[index] = {
                type: "linkCard",
                url,
            } as LinkCardNode;
        })
    }
}

export const linkCardHandler: Handler = (_h: State, node: LinkCardNode) => {
    return {
        type: "element",
        tagName: "a",
        properties: {
            href: node.url,
            className: ["linkCard"],
        },
        children: []
      };
}

import { Components } from "rehype-react";
import { JSX } from "react";
import { ExtraProps } from "hast-util-to-jsx-runtime";
import { LinkCard } from "@/components";

export const aHandler: Components['a'] = (props: JSX.IntrinsicElements['a'] & ExtraProps): JSX.Element => {
    //分割代入で展開
    const { node, className, href, ...restProps } = props;

    if (className === 'linkCard') {
        const url = href ?? null;
        return <LinkCard href={url}/>;
    }

    return <a {...restProps} />;
};

import { TweetNode, LinkCardNode } from "../type"

declare module 'mdast' {
    interface RootContentMap {
        tweet: TweetNode;//TweetNodeを許容するよう設定
        linkCard: LinkCardNode;//LinkCardNodeを許容するよう設定
    }
}

interface MarkdownContent {
    toc: TableOfContentsItem[];
    JSXElement: JSX.Element;
}

//remarkRehypeに渡すカスタムハンドラ
const remarkRehypeHandlers: Partial<Record<Nodes['type'], Handler>> = {
    tweet: tweetHandler, //tweetNodeに対する処理を定義
    linkCard: linkCardHandler, //linkCardに対する処理を定義
};

//remarkReactに渡すカスタムハンドラ
const rehypeReactHandlers: Partial<Components> = {
    div: divHandler, //divにclassを付与するタイプのカスタム
    a: aHandler, //aにclassを付与するタイプのカスタム
}

export async function markdownToJSX(content: string): Promise<MarkdownContent> {
    const tableOfContents: TableOfContentsItem[] = [];

    //markdown →　JSX
    const result = await unified()
    .use(remarkParse)
    .use(tocPlugin, {toc: tableOfContents})//目次抽出
    .use(tweetPlugin)
    .use(linkCardPlugin)
    .use(remarkGfm)
    .use(remarkRehype, { handlers: remarkRehypeHandlers })
    .use(rehypeHighlight)
    .use(rehypeSlug)//id付与
    .use(rehypeReact,{
        Fragment,
        jsx,
        jsxs,
        components: rehypeReactHandlers
    })
    .process(content);

    return {
        toc: tableOfContents,
        JSXElement: result.result
    };
}

import styles from "./LInkCard.module.css"
import { getOGP } from "@/lib";
import { ogpData } from "@/lib";
import Link from "next/link";
import { FaImage } from "react-icons/fa";

interface LinkCardProps {
    href: string | null;
}

export const LinkCard = async ({ href }: LinkCardProps) => {
    //hrefが空の場合
    if ( href === null ) {
        return (
            <div>
                Not Fount
            </div>
        )
    }

    const ogpDate: ogpData = await getOGP(href);

    return(
        <Link href={href} className={styles.LinkCard}>
            <div className={styles.flex}>
                <div className={styles.ogText}>
                    <p className={styles.ogTitle}>{ogpDate.ogTitle}</p>
                    <p className={styles.ogDescription}>{ogpDate.ogDescription}</p>
                </div>
                {ogpDate.ogImageUrl ? (
                    <div className={styles.imgWrap}>
                        <img
                        src={ogpDate.ogImageUrl} 
                        alt="OG Image" 
                        className={styles.img}
                        />
                    </div>
                ) : (
                    <FaImage size={40} />
                )}
            </div>
        </Link>
    )
}

.LinkCard {
    margin: 24px 0;
    display: block;
    /*!importntしないと.markdown aのオーバーライドを逃れられない*/
    text-decoration: none !important;
    color: #000000 !important;
    width: 100%;
    height: 140px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #eee2bc;
}

@media(prefers-color-scheme: dark) {
    .LinkCard {
        background-color: #1e1e1e;
        border: 1px solid #f3d500;
    }
}

.flex {
    display: flex;
    justify-content: space-between;
}

.ogText {
    flex: 1;
    margin: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.ogTitle {
    margin: 0;
    font-weight: bold;
    color: #6f5d00;
    height: 40px;
    font-size: 1.125rem !important;/*.markdown pのオーバーライド回避*/
    line-height: 1.25rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
    .ogTitle {
        color: #f3d500;
    }
}

.ogDescription {
    margin: 0;
    height:64px;
    font-size: 0.875rem !important;
    line-height: 1rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
    .ogDescription {
        color: #cccccc; /* 説明文の色を調整 */
    }
}

@media (max-width: 767px) {
    .imgWrap {
        display: none;
    }
}

.img{
    margin: 0 !important;
    width: auto !important;
    height: 138px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}