Question: example "notion-to-md" repositories?

[hecker]

Hello, I currently have a problem because I don't know how to put blocks like "video" into nice html. Even after following your wiki you provided. Here is my current code: https://github.com/hecker/hecker.vc/blob/main/lib/notion.ts

My question is: do you know if there are any repositories that are open-source and already use notion-to-md so I can check how it works and get some inspiration?

[that-ambuj]

Have you tried using the n2m.setCustomTransformer("video", cb-function) method to handle videos as the way you want? You can checkout the example for custom transformers to achieve the required results.

[souvikinator]

Like @that-ambuj mentioned you can use the setCustomTransformer method to render the element the way you want. Here is a simple example:

n2m.setCustomTransformer("video", async (block) => {
  const { video } = block as any;
  const { type } = video;
  const video_url = video[type].url;
  return `
    <video src="${video_url}" controls>
      Your browser does not support the video tag.
    </video>
  `;
});

do you know if there are any repositories that are open-source and already use notion-to-md so I can check how it works and get some inspiration?

As far as your question is concerned I would suggest checking out the used by section on the right sidebar of the repo or here is the link

[hecker]

Thanks your the help! Now this is what I get... I am pretty new to web dev so I am not sure how to program it that it recognizes

[souvikinator]

So it's a minor fix. In the code sample, I have provided, there is leading space in the string due to which it is rendered as a code block. Here is how you can fix it:

n2m.setCustomTransformer("video", async (block) => {
  const { video } = block as any;
  const { type } = video;
  const video_url = video[type].url;
  return `<video src="${video_url}" controls> Your browser does not support the video tag. </video>`;
});

or

n2m.setCustomTransformer("video", async (block) => {
  const { video } = block as any;
  const { type } = video;
  const video_url = video[type].url;
  return (`
      <video src="${video_url}" controls>
         your browser does not support the video tag.
     </video>
  `).trim();
});

[hecker]

Thanks! But it is still displayed as text (not code, but normal text). Maybe it's about how I implemented it?

My implementation:

<section>
      <h1 className="font-bold text-3xl font-serif mb-5">
        {blogPost.metadata.title}
      </h1>
      <article className="prose dark:prose-invert prose-code">
        {blogPost.metadata.updated && (
          <Callout
            text={"Last updated in " + blogPost.metadata.updated + "."}
            emoji="🗓️"
          />
        )}
        <ReactMarkdown>{blogPost.content}</ReactMarkdown>
      </article>
    </section>

[souvikinator]

I believe react-markdown doesn't render HTML by default you need to use another package as a plugin.

Refer to this: https://stackoverflow.com/a/70548866