Feature Request: link previews

I'd like to know if there is any interest in supporting link previews like this:

It might be difficult to achieve a solution that fits all websites, but for example GitHub provides OpenGraph images for links to repositories:

For example this repo provides the following OpenGraph meta tags:

<meta property="og:image" content="https://opengraph.githubassets.com/a344e5c79dcb3a5edc88978b7e02e7805f557cce4a0b4a729b0c7755de3497fc/souvikinator/notion-to-md">
<meta property="og:image:alt" content="Convert notion pages, block and list of blocks to markdown (supports nesting and custom parsing) - souvikinator/notion-to-md: Convert notion pages, block and list of blocks to markdown (supports ne...">
<meta property="og:image:alt" content="Convert notion pages, block and list of blocks to markdown (supports nesting and custom parsing) - souvikinator/notion-to-md: Convert notion pages, block and list of blocks to markdown (supports ne...">

<meta property="og:image:height" content="600">
<meta property="og:image:width" content="1200">
<meta property="og:site_name" content="GitHub">
<meta property="og:title" content="souvikinator/notion-to-md: Convert notion pages, block and list of blocks to markdown (supports nesting and custom parsing)">
<meta property="og:url" content="https://github.com/souvikinator/notion-to-md">
<meta property="og:description" content="Convert notion pages, block and list of blocks to markdown (supports nesting and custom parsing) - souvikinator/notion-to-md: Convert notion pages, block and list of blocks to markdown (supports ne...">

The OG image is generated on the fly by GitHub and looks like this: https://opengraph.githubassets.com/a344e5c79dcb3a5edc88978b7e02e7805f557cce4a0b4a729b0c7755de3497fc/souvikinator/notion-to-md

My suggestion would be to use either the OG image as link preview, or generate a card like Notion does from the OG meta data.

If there is any interest in supporting this officially as part of the library, I would like to submit a PR. Please let me know what you think!

Sorry, I didn't think it through when I created this issue. Of course, this library is meant to be convert Notion Blocks to Markdown. The actually styling should be handled by the Markdown renderer. Therefore, I will close this issue.

If someone is interested in styling link previews, I used the following custom transformer:

n2m.setCustomTransformer('link_preview', async (block) => {
  const { link_preview } = block as LinkPreviewBlockObjectResponse;
  const { url } = link_preview;

  const response = await fetch(url);
  const html = await response.text();
  const doc = domino.createWindow(html).document;
  const metadata = getMetadata(doc, url);

  console.log({ metadata });

  const preview = metadata.image
    ? `<img src="${metadata.image}" alt="${metadata.title}" />`
    : `<div style="display: flex; align-items: center; padding: 10px 10px">
        <img style="margin-right: 10px;" src="${metadata.icon}" />
        <span>${metadata.title}</span>
      </div>`;

  return `
  <div class="not-prose">
    <a href="${url}" target="_blank" rel="noopener noreferrer">
      <div style="border-radius: 5px; border-width: 1px; overflow: hidden;">
        ${preview}
      </div>
    </a>
  </div>`;
});

It renders like this on my blog:

https://zirkelc.dev/posts/serverless-plugin-exporting-environment-variables-and-stack-outputs

souvikinator / notion-to-md

Feature Request: link previews #97