mdxでカスタムコンポーネントを利用する（カード型リンク）

import { css } from "hono/css";
import { useTheme } from "@/app/components/context/useTheme";
 
export const ExtOgpLink = async ({ url }: { url: string }) => {
  const cssTheme = useTheme();
  const ogp = await getOgp(url);
 
  const cssRoot = css`
    height: 6.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    grid-template-rows: 6.5rem;
    border: solid 1px;
    border-color: ${cssTheme.borderColor};
    background-color: ${cssTheme.bodyBgColor};
    margin-top: 1rem;
    margin-bottom: 1rem;
  `;
 
  const cssAnchor = css`
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    z-index: 100;
  `;
 
  const cssImgBase = css`
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  `;
  const cssImg = css`
    ${cssImgBase}
    object-fit: cover;
  `;
  const cssNoImg = css`
    ${cssImgBase}
    border-right: solid 1px;
    border-color: ${cssTheme.borderColor};
    margin: 0px;
 
    display: grid;
    justify-items: center;
    align-items: center;
  `;
 
  const cssDescription = css`
    height: 100%;
    width: 100%;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2.5rem;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
  `;
 
  const cssTitle = css`
    height: 100%;
    width: 85%;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
 
    display: grid;
    text-align: left;
    align-items: center;
  `;
 
  const cssTitleText = css`
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  `;
 
  const cssWeakText = css`
    height: 100%;
    width: 85%;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    font-size: smaller;
    color: ${cssTheme.fontWeakColor};
    margin-top: 0rem;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
  `;
 
  return (
    <>
      {ogp && (
        <div class={cssRoot}>
          <a class={cssAnchor} href={url}></a>
          {ogp.image ? (
            <img class={cssImg} src={ogp.image} />
          ) : (
            <div class={cssNoImg}>no image</div>
          )}
          <div class={cssDescription}>
            <div class={cssTitle}>
              <p class={cssTitleText}>{ogp.title}</p>
            </div>
            <div class={cssWeakText}>
              {ogp.site_name}
              <br />
              {ogp.url}
            </div>
          </div>
        </div>
      )}
    </>
  );
};
 
type OgpData = {
  title: string;
  image?: string;
  url?: string;
  site_name?: string;
};
const getOgp = async (url: string): Promise<OgpData | undefined> => {
  type OgpDataTmp = {
    [key: string]: string;
  };
 
  const encodedUri = encodeURI(url);
  const headers = { "User-Agent": "bot" };
 
  try {
    const res = await fetch(encodedUri, { headers: headers });
    const htmlData = await res.text();
    const ogpRegex =
      /<meta\s+property="og:([^"]+)"\s+content="([^"]+)"\s*\/?>/g;
    let match;
    const ogpData: OgpDataTmp = {};
 
    while ((match = ogpRegex.exec(htmlData)) !== null) {
      ogpData[match[1]] = match[2];
    }
    if ("title" in ogpData) {
      return ogpData as OgpData;
    } else {
      return undefined;
    }
  } catch (error) {
    console.error(error);
    return undefined;
  }
};

---
title: mdxでカスタムコンポーネントを利用する（カード型リンク）
createdAt: 2024-09-28
imageSrc: 20240928.webp
tags: [mdx]
---
 
import { ExtOgpLink } from "../../components/common/ExtOgpLink";
 
## タイトル
 
<ExtOgpLink url="https://blog.scaletools.net/posts/20240912_cfpages_honox" />