{@html data.md}

import { fromHtml } from 'hast-util-from-html'

function toLinkCard(meta: {
  url: string;
  title: string;
  description: string;
  og: string | undefined;
  icon: string | undefined;
}): string {
  return `
<a href="${meta.url}" class="not-prose" target="_blank" rel="noreferrer">
  <div
    class="w-full flex justify-around bg-white rounded-md p-3 border"
  >
    <div class="w-1/2">
      <img src="${meta.og}" alt="${meta.title}" class="max-h-20 m-auto" />
    </div>
    <div class="flex flex-col justify-start px-1 ml-3">
      <div class="text-sm font-bold text-black whitespace-pre-wrap">
        ${meta.title}
      </div>
      <div class="text-gray-400 text-xs whitespace-pre-wrap">
        ${meta.description}
      </div>
    </div>
  </div>
</a>
`;
}

function extLinkHandler(_h: any, node: ExtLink) {
  return fromHtml(toLinkCard(node.meta), { fragment: true })
}

async function renderMarkdown(md: string) {

  const toHtml = unified()
    // mdast
    .use(remarkParse)
    .use(remarkLinkCard)
    .use(remarkGfm)
    .use(remarkRehype, {
      handlers: {
        extlink: extLinkHandler
      }
    })
    // rehype
    .use(rehypeSlug)
    .use(rehypeToc)
    .use(rehypePrettyCode)
    .use(rehypeStringify)
    ;
  const vfile = await toHtml.process(md);
  return vfile.value;
}

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)

    code: 'UND_ERR_CONNECT_TIMEOUT'