Slugify headings for filenames in Obsidian

Generate QOTD in Obsidian templates


For Reasons(TM) that include compatibility, I'm writing my site content using [Commonmark](https://commonmark.org/). This means I'm just going to be pasting plain gist links into my posts and hoping for the best.

To help this 'best' to happen, I've also needed to make a few modifications to my Next.js site to ensure these get rendered as embeds.

## Requirements

* You should be using Next.js's preferred `next-mdx-remote` method of handling MDX files
* [`@remark-embedder/core`](https://github.com/remark-embedder/core)
* [`react-gist`](https://github.com/tleunen/react-gist)

## Step 1. Create the `@remark-embedder` gist link transformer

https://gist.github.com/solace/eefab1e4ff24ddef86542c94678fbb51#file-gisttransformer-ts

## Step 2. Modify your page to apply both the transform and `react-gist` component

**Note:** It is apparently possible to apply the `mdxOptions` used by the `serialize` function in `next.config.mjs` but I was unable to change my `next.config.js` to `.mjs` and still have Next.js run.

https://gist.github.com/solace/eefab1e4ff24ddef86542c94678fbb51#file-post-tsx

*et voilà*.

If you're happy to keep using `.mdx` and including `<Gist id="[the_id]" />` in your markdown, you can skip the transformer entirely, which is what I was doing before. But then you wouldn't be needing this post.


Convert unadorned gist links in markdown to React-compatible embeds in Next.js.

Requirements

Step 1. Create the @remark-embedder gist link transformer

Step 2. Modify your page to apply both the transform and react-gist component

Step 1. Create the `@remark-embedder` gist link transformer

Step 2. Modify your page to apply both the transform and `react-gist` component