
### tldr;

For some reason, I have a particular disdain for writing blog titles and meta descriptions. So I thought "maybe AI could do it for me..."

Turns out, it can. And it's pretty easy.

### Why Use AI for Blog Titles?

Because writing them feels like busy work. And they are usually words that I would struggle to come up with myself. And I hate it. ⛈

### The OG Blog Post Script

On this blog, all of my MDX files are stored in `/src/content/articles`. I have a simple script that let's
me run

```shell
$ yarn article:new some-article-slug-i-like
```

When I run that, it generates a numbered MDX file
in that directory with the appropriate slug. Here's what that script looked like originally:

```js:/scripts/add-article.js
const fs = require('fs')
const path = require('path')

// helper that gets the number of the file from a string like 0001-my-first-post.mdx
function getFileNameIndex(fileName) {
  if (!fileName) return 0
  const match = fileName.match(/^[0-9]+\-/)
  if (!match) return 0
  return parseInt(match[0].slice(0, -1), 10)
}

async function addArticle() {
  // grab the title from the command line arguments
  const title = process.argv[2]
  const directory = process.argv[3] || 'articles'
  const directoryPath = `src/content/${directory}`

  // read the src/content/articles directory and get the last numbered file (e.g. 0035-hello-world.mdx)
  const files = await fs.readdirSync(
    path.join(process.cwd(), directoryPath),
    {
      withFileTypes: true,
    }
  )

  // sort by index and grab the last file
  const lastFile = files
    .filter((file) => file.name.endsWith('.mdx'))
    .sort((a, b) => {
      const aIndex = getFileNameIndex(a?.name) || 0
      const bIndex = getFileNameIndex(b?.name) || 0
      return bIndex - aIndex
    })[0]

  // get the index of the last file
  const index = getFileNameIndex(lastFile?.name) || 0

  // ensure the new index is a string with 4 digits
  const indexString = `${index + 1}`.padStart(4, '0')

  // get the current date in the format YYYY-MM-DD
  const date = new Date().toISOString().split('T')[0];

  // create a new file name with the next index
  const newFileName = `${indexString}-${title.toLowerCase().replace(/ /g, '-')}.mdx`

  // create the new file
  await fs.writeFileSync(
    path.join(process.cwd(), directoryPath, newFileName),
    `---
author: Ty Barho
date: '${date}'
title: ${title}
description:
tags:
---

`
  );
}

async function run() {
  await addArticle()
}

run()
```

And the correspoding `package.json` entry:

```json:/package.json {8}
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap",
    "article:new": "node ./scripts/add-article.js"
  },
}
```

This was a nice setup. If I ran the command
```shell
$ yarn article:new how-to-build-an-mdx-blog-in-next
```

the script would automatically generate a file named `/src/articles/0123-how-to-build-an-mdx-blog-in-next.mdx` with
frontmatter content like this:

```text
---
author: Ty Barho
date: '08/24/2023'
title: "how-to-build-an-mdx-blog-in-next"
description:
tags:
---


```

The bad part? I still have to go write those dang SEO `title`, and `description` attributes. What a pain. 😡

### Setting Up the AI Model

I've been messing with LLM's for the past couple of weeks, and I thought: "Man, I really hate writing blog titles
and meta descriptions. I wonder if ChatGPT could do that for me."

Turns out, it can.

Here's how I edited the script...

```js:/scripts/add-article.js {3-16,58-95}
const fs = require('fs')
const path = require('path')
const OpenAI = require('openai')

require('dotenv').config({
  path: path.join(process.cwd(), '.env.development.local'),
})

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

const defaultModelOptions = {
  model: 'gpt-3.5-turbo',
  stream: false,
}

function getFileNameIndex(fileName) {
  if (!fileName) return 0
  const match = fileName.match(/^[0-9]+\-/)
  if (!match) return 0
  return parseInt(match[0].slice(0, -1), 10)
}

async function addArticle() {
  // grab the title from the command line arguments
  const title = process.argv[2]
  const directory = process.argv[3] || 'articles'
  const directoryPath = `src/content/${directory}`

  // read the src/content/articles directory and get the last numbered file (e.g. 0035-hello-world.mdx)
  const files = await fs.readdirSync(path.join(process.cwd(), directoryPath), {
    withFileTypes: true,
  })

  const lastFile = files
    .filter((file) => file.name.endsWith('.mdx'))
    .sort((a, b) => {
      const aIndex = getFileNameIndex(a?.name) || 0
      const bIndex = getFileNameIndex(b?.name) || 0
      return bIndex - aIndex
    })[0]

  // get the index of the last file
  const index = getFileNameIndex(lastFile?.name) || 0

  // ensure the index is a string with 4 digits
  const indexString = `${index + 1}`.padStart(4, '0')

  // get the current date in the format YYYY-MM-DD
  const date = new Date().toISOString().split('T')[0]

  // create a new file name with the next index
  const newFileName = `${indexString}-${title
    .toLowerCase()
    .replace(/ /g, '-')}.mdx`

  try {
    const training = [
      { role: 'system', content: '[your base training here]' },
      { role: 'user', content: '0001-sample-post-1' },
      { role: 'assistant', content: '[example response 1]' },
      { role: 'user', content: '0002-sample-post-1' },
      { role: 'assistant', content: '[example response 2]' },
    ]

    const response = await openai.chat.completions.create({
      ...defaultModelOptions,
      messages: [
        ...training
      ],
    })

    const res = response.choices[0].message.content
    const ai = JSON.parse(res)

    const content = `---
author: Ty Barho
date: '${date}'
title: "${ai.title}"
description: "${ai.description}"
tags: ${ai.tags}
---

  `

    // create the new file
    await fs.writeFileSync(
      path.join(process.cwd(), directoryPath, newFileName),
      content
    )
  } catch (e) {
    console.error(e)
    process.exit(1)
  }
}

async function run() {
  await addArticle()
}

run()
```

After a litle prompt engineering, it worked like a charm! For example, if I run it with this command:

```bash
$ yarn article:new writing-an-automated-keyword-finder-with-puppeteer-and-ai
```

Here's the frontmatter I get:

```text
---
author: Ty Barho
date: '2023-10-18'
title: "Automated Keyword Finder using Puppeteer and AI"
description: "Learn how to build an automated keyword finder using Puppeteer to scrape search engine results and AI algorithms for keyword analysis."
tags: automation,puppeteer,ai,keyword-analysis,web-scraping
---

```

Now, instead of writing all that from my already addled brain, I can do some quick edits, and I'm done.

Pretty neat, huh? 😎🤖

### Prompt Engineering Example

For simplicity, I didn't include my training data above, just so you could read the code more clearly. But, for those
who don't yet have a lot of experience with engineering these prompts, here they are for you to tweak to your
use case.

#### The System Prompt

We start with the system prompt, which gives the LLM some basic parameters to operate by.

> yellow:"Woe" I'm still working through getting System prompts to "obey" me well. Often, some of my instructions are ignored.
> I've found using language like "You may NEVER" or the Question/Answer format work most of the time, though I still get errors.

```js
{
  role: 'system',
  content: `
You are a bot that cleans blog post titles and generates tags and descriptions.
Titles must be grammatically correct.
Descriptions must be between 50 and 160 characters.
Here is an example:
<input>0014-adding-a-copy-button-mdx-code-snippets.mdx</input>
<output>
{
  "title": "Add a Copy Button to Your Rehype (NextJS / MDX) Code Snippets",
  "description": "In this article I'll show you how to add a convenient copy button to Rehype code snippets in your NextJS MDX blog.",
  "tags": "nextjs,mdx"
}
</output>

Please note that tags should be short abbreviations.
Example: artificial-intelligence = ai
Example: natural-language-processing = nlp
`,
}
```

#### The User / Assistant Prompts

These are where you give examples of expected output. This is called "multi-shot" prompt engineering,
and IMO, this is where the meat of completion goodness happens. Make sure these are solid.

```js
;[
  { role: 'user', content: `0016-nextjs-convertkit-blog-subscriber-form.mdx` },
  {
    role: 'assistant',
    content: `{
  "title": "Newsletter Subscriptions with NextJS & ConvertKit",
  "description": "In this article, I'll teach you how to create a newsletter subscription form in NextJS, and connect to ConvertKit using NextJS api routes.",
  "tags": "nextjs,convertkit,react-hook-form,yup,api"
}`,
  },
]
```

I'm only using one-shot prompting here.  You probably want to use 2 or 3 of these "shots".

> indigo:"JSON Output" Notice that in both my `system` and `assistant` prompts, I am responding in JSON. This has proven
> effective in ensuring that I only get responses in JSON that I can parse.

### Next Steps

So far, this has been a super useful time-saver. If I were looking at where to take this next, I might
extend this by chaining another trained model to revise the description for specific SEO keywords & density,
or possibly ensure that titles are more directly related to posts that I've already created, from a content
perspective.

In the meantime, I'm just really happy that I don't have to write blog titles or meta descriptions by hand
anymore 😅.

Hope this helps someone, and happy coding! 🦄


Learn how to use AI to generate catchy and engaging blog titles for your MDX blog, and attract more readers to your content.

Generating AI-Powered Blog Titles for Your MDX Blog


The blog is coming along nicely, especially as a ground up build, but I've been missing one
important thing: **The Copy Button.**

```shell
# copy and run in terminal
open https://www.twitter.com/hostmonk
```

So, let's not stand on ceremony... let's build it! 🚀


### tldr;

There are really only 3 major concepts we need to hit to build this:

1. Getting the `<pre>` content from Rehype via a plugin.
2. A `<CopyButton>` component that copies the raw snippet content.
3. A custom `<Pre>` component that renders the `<CopyButton>`.

For those of you that just want the the code, here you go:

#### The Rehype Content Plugin

These plugin functions snag the content from your Rehype processor.

```jsx:src/lib/rehype-pre-raw.js
import { visit } from 'unist-util-visit'

export const preProcess = () => (tree) => {
  visit(tree, (node) => {
    if (node?.type === 'element' && node?.tagName === 'pre') {
      const [codeEl] = node.children

      if (codeEl.tagName !== 'code') return

      node.raw = codeEl.children?.[0].value
    }
  })
}

export const postProcess = () => (tree) => {
  visit(tree, 'element', (node) => {
    if (node?.type === 'element' && node?.tagName === 'pre') {
      node.properties['raw'] = node.raw
      // console.log(node) here to see if you're getting the raw text
    }
  })
}
```

> zinc:"Note" When you add these plugins to your serializer, you'll need to ensure that
> your `preProcess` is first in your array of plugins, and `postProcess` is last, like so: <br />
>```jsx: {7,11}
>import { serialize } from 'next-mdx-remote/serialize'
>
>const mdxSource = await serialize(content, {
>  // ...
>  mdxOptions: {
>    rehypePlugins: [
>      preProcess,
>      rehypeCodeTitles,
>      rehypePrism,
>      rehypeBlockquote,
>      postProcess,
>    ],
>  },
>  // ...
>})
>```

#### The Copy Button Component

Here is the `<CopyButton />` component, that handles the copy of our raw code.

```jsx:src/components/CopyButton/index.jsx
import { useState } from 'react'
import clsx from 'clsx'
import { ClipboardIcon, CheckIcon } from '@heroicons/react/20/solid'

const buttonClasses = 'flex items-center text-xs font-medium text-white rounded'

export function CopyButton({ text, className }) {
  const [isCopied, setIsCopied] = useState(false)

  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setIsCopied(true)

    setTimeout(() => {
      setIsCopied(false)
    }, 2500)
  }

  const Icon = isCopied ? CheckIcon : ClipboardIcon

  return (
    <button
      disabled={isCopied}
      onClick={copy}
      className={clsx(buttonClasses, className)}
    >
      <Icon className="mr-1 h-4 w-4" />
      <span>{isCopied ? 'Copied!' : 'Copy'}</span>
    </button>
  )
}

```

#### The Custom Pre Component

Here is the `<Pre />` component, which will render our `<CopyButton />`.

```jsx:src/components/Pre/index.jsx
import { CopyButton } from '@/components/CopyButton'
import clsx from 'clsx'

export function Pre({
  children,
  raw,
  buttonClasses = 'absolute top-3 right-3 bg-zinc-900',
  ...props
}) {
  return (
    <pre {...props} className={clsx('relative', props.className)}>
      {children}
      <CopyButton text={raw} className={buttonClasses} />
    </pre>
  )
}

```

Et voila! 🍟

If you want, keep reading for a deeper dive & explanation into what the code is doing
and how to wire it up in your NextJS MDX blog.


### A Deeper Dive / Explanation

From the get go, I figured the main difficulty in getting this button to render is 
getting the raw processed code out of our Rehype setup, and into a component props.

To accomplish this first step, we need to create our own Rehype tree visitor.

> yellow:"About AST's" Rehype is built on top of an HTML AST ([Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree)).  AST's are
> typically large, nested objects that describe a thing.<br /><br />
> There are AST's for language, programming languages, network interfaces like GraphQL, and even
> XML (or HTML).<br /><br />
> When parsing / changing HTML on the fly, using an AST is typically much safer than trying to
> use something like regular expressions.

To start, we'll make a `preProcess` function that will take the raw value of the underlying `code`
element, and apply / set it to the node, so we can carry it through the rest of the plugins.

```jsx:src/lib/rehype-pre-raw.js {1, 3-13}
import { visit } from 'unist-util-visit'

export const preProcess = () => (tree) => {
  visit(tree, (node) => {
    if (node?.type === 'element' && node?.tagName === 'pre') {
      const [codeEl] = node.children

      if (codeEl.tagName !== 'code') return

      node.raw = codeEl.children?.[0].value
    }
  })
}
```

Second, we'll add a `postProcess` function that adds the raw data to our `pre` node
properties.

```jsx:src/lib/rehype-pre-raw.js {15-21}
import { visit } from 'unist-util-visit'

export const preProcess = () => (tree) => {
  visit(tree, (node) => {
    if (node?.type === 'element' && node?.tagName === 'pre') {
      const [codeEl] = node.children

      if (codeEl.tagName !== 'code') return

      node.raw = codeEl.children?.[0].value
    }
  })
}

export const postProcess = () => (tree) => {
  visit(tree, 'element', (node) => {
    if (node?.type === 'element' && node?.tagName === 'pre') {
      node.properties['raw'] = node.raw
      // console.log(node) here to see if you're getting the raw text
    }
  })
}
```

Now, we simply need to install our plugin to our Rehype configuration in our `getStaticProps`
handler for our blog post page.

```jsx:src/pages/articles/[slug].js {6,18,22}
import { MDXProvider } from '@mdx-js/react'
import { serialize } from 'next-mdx-remote/serialize'
import rehypePrism from 'rehype-prism-plus'
import rehypeCodeTitles from 'rehype-code-titles'
import rehypeBlockquote from '@/lib/rehype-blockquote-meta'
import { preProcess, postProcess } from '@/lib/rehype-pre-raw'

//... rest of file

export async function getStaticProps({ params: { slug } }) {
  const { content, data } = await getContentBySlug(slug, 'articles')

  const mdxSource = await serialize(content, {
    // Optionally pass remark/rehype plugins
    components,
    mdxOptions: {
      rehypePlugins: [
        preProcess,
        rehypeCodeTitles,
        rehypePrism,
        rehypeBlockquote,
        postProcess,
      ],
    },
    scope: data,
  })

  return {
    props: {
      raw: content,
      meta: { ...data, slug },
      mdxSource,
    },
  }
}
```

Great! Now let's build a custom `<Pre />` component to wrap our copy button.

### Building a React `<Pre />` tag with a copy button

Let's start with some fairly boilerplate code, just to see if we're getting the raw
text from our Rehype plugins.

```jsx:src/components/Pre/index.jsx {2}
export function Pre({ children, raw, ...props }) {
  console.log(raw);
  return (
    <pre {...props}>
      {children}
    </pre>
  );
}
```

At this point, you should be seeing your raw text logged in the console on both client and server.

Now, let's make a copy button.

```jsx:src/components/CopyButton/index.jsx 
import { useState } from 'react'

export function CopyButton ({ text }) {
  const [isCopied, setIsCopied] = useState(false)

  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setIsCopied(true)

    setTimeout(() => {
      setIsCopied(false)
    }, 5000)
  }

  return (
    <button disabled={isCopied} onClick={copy}>
      {isCopied ? 'Copied!' : 'Copy'}
    </button>
  )
}
```

We're simply using a `setTimeout` with `useEffect` to manage a state piece, then using the MDX navigator
to write text to the browser clipboard.

Now, let's add our CopyButton component to our Pre component...

```jsx {1, 7} 
import { CopyButton } from '@/components/CopyButton'

export function Pre({ children, raw, ...props }) {
  return (
    <pre {...props}>
      {children}
      <CopyButton text={raw} />
    </pre>
  )
}
```

... and add some basic Tailwind styling to it...

```jsx {2, 4, 22}
import { useState } from 'react'
import clsx from 'clsx'

const buttonClasses = 'p-2 text-xs font-medium text-white'

export function CopyButton({ text, className }) {
  const [isCopied, setIsCopied] = useState(false)

  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setIsCopied(true)

    setTimeout(() => {
      setIsCopied(false)
    }, 5000)
  }

  return (
    <button
      disabled={isCopied}
      onClick={copy}
      className={clsx(buttonClasses, className)}
    >
      {isCopied ? 'Copied!' : 'Copy'}
    </button>
  )
}

```

Here, we're adding `clsx` to allow for appended styles, and adding some very basic Tailwind styling to the
button.  To get it looking right in our Code editor, however, we are going to want to add some positioning
and more specific styles, where we're actually enabling the Pre tag in our MDX Components.

To do this, we're going to add a `buttonClasses` prop to the `<Pre />` tag, that we can then pass to the
instance of our `<CopyButton />` component.

```jsx:src/components/Pre/index.jsx {6,12}
import { CopyButton } from '@/components/CopyButton'

export function Pre({
  children,
  raw,
  buttonClasses = 'absolute top-3 right-3 bg-zinc-900',
  ...props
}) {
  return (
    <pre {...props}>
      {children}
      <CopyButton text={raw} className={buttonClasses} />
    </pre>
  )
}

```

Lastly, We will also need to safely add the `relative` Tailwind class to our new `Pre` component...

```jsx:src/components/Pre/index.jsx {2,11} showLineNumbers
import { CopyButton } from '@/components/CopyButton'
import clsx from 'clsx'

export function Pre({
  children,
  raw,
  buttonClasses = 'absolute top-3 right-3 bg-zinc-900',
  ...props
}) {
  return (
    <pre {...props} className={clsx('relative', props.className)}>
      {children}
      <CopyButton text={raw} className={buttonClasses} />
    </pre>
  )
}

```

This makes the absolute positioning of our CopyButton work correctly.

Here's the finished code for the `<Pre />` and `<CopyButton />` components:

```jsx:src/components/Pre/index.jsx
import { CopyButton } from '@/components/CopyButton'
import clsx from 'clsx'

export function Pre({
  children,
  raw,
  buttonClasses = 'absolute top-3 right-3 bg-zinc-900',
  ...props
}) {
  return (
    <pre {...props} className={clsx('relative', props.className)}>
      {children}
      <CopyButton text={raw} className={buttonClasses} />
    </pre>
  )
}

```

```jsx:src/components/CopyButton/index.jsx
import { useState } from 'react'
import clsx from 'clsx'
import { ClipboardIcon, CheckIcon } from '@heroicons/react/20/solid'

const buttonClasses = 'flex items-center text-xs font-medium text-white rounded'

export function CopyButton({ text, className }) {
  const [isCopied, setIsCopied] = useState(false)

  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setIsCopied(true)

    setTimeout(() => {
      setIsCopied(false)
    }, 2500)
  }

  const Icon = isCopied ? CheckIcon : ClipboardIcon

  return (
    <button
      disabled={isCopied}
      onClick={copy}
      className={clsx(buttonClasses, className)}
    >
      <Icon className="mr-1 h-4 w-4" />
      <span>{isCopied ? 'Copied!' : 'Copy'}</span>
    </button>
  )
}

```

And with that, we have a couple of nice components to add to our MDX Components.

### Adding the Pre component to MDX Components

The last step is enabling the custom `<Pre />` component in our MDX Components.  To do this,
just find where you're creating your custom components to your Markdown processor.

I'm using MDX remote, and I'm customizing components specifically for my `/articles/[slug].jsx` page, like so...

```jsx:src/pages/articles/[slug].jsx {11,25,34}
import { MDXProvider } from '@mdx-js/react'
// ... other imports
import { MDXRemote } from 'next-mdx-remote'
import { preProcess, postProcess } from '@/lib/rehype-pre-raw'


import components from '@/components/MDXComponents'
import { ArticleLayout } from '@/components/ArticleLayout'
import { getAllContent, getContentBySlug } from '@/lib/getContent'

const { Note, Pre } = components

const custom = {
  ul: (props) => <ul className="ml-2 list-disc" {...props} />,
  li: (props) => <li className="my-1 font-light leading-6" {...props} />,
  hr: (props) => <hr className="my-16 border-zinc-300" {...props} />,
  a: (props) => <a {...props} target="_blank" rel="noopener noreferrer" />,
  h3: (props) => (
    <h3
      className="mb-10 mt-24 text-3xl font-bold tracking-tight sm:mt-36"
      {...props}
    />
  ),
  blockquote: (props) => <Note {...props} />,
  pre: (props) => <Pre {...props} />,
}

export default function Article(props) {
  return (
    <MDXProvider components={components}>
      <ArticleLayout {...props}>
        <MDXRemote
          {...props.mdxSource}
          components={{ ...components, ...custom }}
        />
      </ArticleLayout>
    </MDXProvider>
  )
}
```

And with that, we have successfully integrated a **Copy Button** to our Rehype code snippets
on our blog!

Hope this was helpful, and happy coding! 😎🚀


In this article I'll show you how to add a convenient copy button to Rehype code snippets in your NextJS MDX blog.

Add a copy button to your Rehype (NextJS / MDX) code snippets


This is my 11th article in this NextJS MDX.  Already, I have been surprised to find how difficult a time
I am having hunting down articles for links

The main reason it's so hard is because in VSCode, I have no concept of the order in which I wrote something.

My blog is sorted by `publishDate` in the frontmatter, but I don't have a way to sort my VSCode files by that. I got
irritated enough to do something about it.  Here's what I did...

### Step 1: Simple ordering for my files

This is personal blog, so I didn't need super fancy sorting or filtering, or anything like that.  I was pretty sure
I could just add a numeric integer at the front of each file to get the level of organization I was looking for.

My original file structure looked like this:

```
/src
  /content
    /articles
      adding-fancy-og-images-nextjs-mdx-blog.mdx
      adding-next-sitemap-to-your-nextjs-site.mdx
      draft-article.mdx
      eas-build-ios-app-crashing-debug-tips.mdx
      easy-callout-content-with-rehype-plugins.mdx
      enriched-bible-verse-react-component.mdx
      filtering-by-publish-date-nextjs-mdx-blog.mdx
      filtering-by-tags-nextjs-mdx-blog.mdx
      importing-testing-nextjs-code-playground.mdx
      improving-mdx-code-editor-theme-highlight-line-numbers.mdx
      simple-bible-gateway-verse-component.mdx
      tailwind-plus-sandpack-playground-component.mdx
```

Pretty difficult to tell which order I wrote things in, or otherwise orient myself to my own content.

Plus, there's always that `draft-article.mdx` file that I have in there for quickly copying and pasting
frontmatter to a new article.  Lame.

Here's how I decided to change it:

```
/src
  /content
    /articles
      0001-simple-bible-gateway-verse-component.mdx
      0002-adding-next-sitemap-to-your-nextjs-site.mdx
      0003-eas-build-ios-app-crashing-debug-tips.mdx
      0004-adding-fancy-og-images-nextjs-mdx-blog.mdx
      0005-filtering-by-publish-date-nextjs-mdx-blog.mdx
      0006-filtering-by-tags-nextjs-mdx-blog.mdx
      0007-improving-mdx-code-editor-theme-highlight-line-numbers.mdx
      0008-tailwind-plus-sandpack-playground-component.mdx
      0009-importing-testing-nextjs-code-playground.mdx
      0010-easy-callout-content-with-rehype-plugins.mdx
```

Much cleaner, and now I at least have some idea of the order in which I wrote things.

> purple:"Note" I _did_ go through and rename these manually, based on `publish` date.  There were only 10 articles though, so it only took about 5 minutes.<br /><br />
> If I had many more than that, I probably would whip together a on-off "rename" script.

### Step 2: Fix my broken links and page renders

Once I renamed everything, the site worked, but there was a major hitch...  All of my content URLs changed.

Because of how I was pulling data in `getStaticProps`, urls that used to be:

```
http://localhost:3000/articles/adding-next-sitemap-to-your-nextjs-site
```

were now:

```
http://localhost:3000/articles/0002-adding-next-sitemap-to-your-nextjs-site
```

Here is how I fixed it.

```jsx:/src/lib/getContent.js {6,11,13,19,21,26-35,38,43,48-49}
import glob from 'fast-glob'
import * as path from 'path'
import fs from 'fs'
import matter from 'gray-matter'

async function getFileSlugs(srcDir) {
  // ...
}

export async function getAllTags(srcDir) {
  let fileSlugs = await getFileSlugs(srcDir)

  const cb = (fileSlug) => getContentItem(fileSlug, srcDir)

  // ...
}

export async function getAllContent(srcDir) {
  let fileSlugs = await getFileSlugs(srcDir)
  
  const cb = (fileSlug) => getContentItem(fileSlug, srcDir)

  //...
}

export async function getContentBySlug(slug, srcDir) {
  const fileSlugs = await getFileSlugs(srcDir)
  const foundSlug = fileSlugs.find((fileSlug) => fileSlug.replace(/^[0-9]+\-/, '') === slug);

  if (!foundSlug) {
    return null;
  }

  return getContentItem(foundSlug, srcDir);
}

export async function getContentItem(fileSlug, srcDir) {
  const filePath = path.join(process.cwd(), `src/content/${srcDir}/${fileSlug}.mdx`)
  const source = fs.readFileSync(filePath)

  const { content, data } = matter(source)

  const slug = fileSlug.replace(/^[0-9]+\-/, '')

  return {
    content,
    data,
    fileSlug,
    slug,
  }
}

```

This is a little involved, so let's break it down.

First, I renamed every instance of `slug` to `fileSlug`, since it now represented a string like

```
0045-my-article-name
```

Next, I created a new `slug` variable in the `getContentItem` function, which is just the `fileSlug` with the
leading numbers removed.

```jsx:/src/lib/getContent.js {7,12-13}
export async function getContentItem(fileSlug, srcDir) {
  const filePath = path.join(process.cwd(), `src/content/${srcDir}/${fileSlug}.mdx`)
  const source = fs.readFileSync(filePath)

  const { content, data } = matter(source)

  const slug = fileSlug.replace(/^[0-9]+\-/, '')

  return {
    content,
    data,
    fileSlug,
    slug,
  }
}
```

This got my links working again, however, NextJS could not find any of the pages, because the `slug` was now
different than the file name.

Now, I just needed to get NextJS `getStaticProps` reading the right file again.  So I created a new method
called `getContentBySlug` that takes a `slug` and `srcDir` and returns the content item.

```jsx:/src/lib/getContent.js
export async function getContentBySlug(slug, srcDir) {
  const fileSlugs = await getFileSlugs(srcDir)
  const foundSlug = fileSlugs.find((fileSlug) => fileSlug.replace(/^[0-9]+\-/, '') === slug);

  if (!foundSlug) {
    return null;
  }

  return getContentItem(foundSlug, srcDir);
}
```

Lastly, I just need to change what method I was using in my `/pages/articles/[slug].js` file.

```diff:/src/pages/articles/[slug].js
import { MDXProvider } from '@mdx-js/react';
import { serialize } from 'next-mdx-remote/serialize';
import rehypePrism from 'rehype-prism-plus'
import rehypeCodeTitles from 'rehype-code-titles'
import rehypeBlockquote from '@/lib/rehype-blockquote-meta';
import { MDXRemote } from 'next-mdx-remote'

import components from '@/components/MDXComponents';
import { ArticleLayout } from '@/components/ArticleLayout';
+ import { getAllContent, getContentBySlug } from '@/lib/getContent';
- import { getAllContent, getContentItem } from '@/lib/getContent';

... other code 

export async function getStaticProps({ params: { slug } }) {
+  const { content, data } = await getContentBySlug(slug, 'articles');
-  const { content, data } = await getContentItem(slug, 'articles');

  const mdxSource = await serialize(content, {
    // Optionally pass remark/rehype plugins
    components,
    mdxOptions: {
      rehypePlugins: [rehypeCodeTitles, rehypePrism, rehypeBlockquote],
    },
    scope: data,
  });

  return {
    props: {
      raw: content,
      meta: { ...data, slug },
      mdxSource,
    },
  };
}
```

And that's that!  All my NextJS articles are working again by slug. 🦄

### Step 3: Create a new, orderd MDX article from a NodeJS script

Finally, I wanted to make it easier to create new articles, and get rid of that `draft-article.mdx` file.

To do this, I created a new Node.js script called `add-article.js` in my `/scripts` folder.

It simply takes in a filename as the only argument, and creates the next numbered article with that filename
slugified.

```js:/scripts/add-article.js
const fs = require('fs')
const path = require('path')

function getFileNameIndex(fileName) {
  const match = fileName.match(/^[0-9]+\-/)
  if (!match) return 0
  return parseInt(match[0].slice(0, -1), 10)
}

async function addArticle() {
  // grab the title from the command line arguments
  const title = process.argv[2]

  // read the src/content/articles directory and get the last numbered file (e.g. 0035-hello-world.mdx)
  const files = await fs.readdirSync(
    path.join(process.cwd(), 'src/content/articles'),
    {
      withFileTypes: true,
    }
  )

  const lastFile = files
    .filter((file) => file.name.endsWith('.mdx'))
    .sort((a, b) => {
      const aIndex = getFileNameIndex(a.name)
      const bIndex = getFileNameIndex(b.name)
      return bIndex - aIndex
    })[0]

  // get the index of the last file
  const index = getFileNameIndex(lastFile.name)

  // ensure the index is a string with 4 digits
  const indexString = `${index + 1}`.padStart(4, '0')

  // get the current date in the format YYYY-MM-DD
  const date = new Date().toISOString().split('T')[0];

  // create a new file name with the next index
  const newFileName = `${indexString}-${title
    .toLowerCase()
    .replace(/ /g, '-')}.mdx`

  // create the new file
  await fs.writeFileSync(
    path.join(process.cwd(), 'src/content/articles', newFileName),
    `---
author: Ty Barho
date: '${date}'
title: ${title}
description:
tags:
---

`
  );
}

async function run() {
  await addArticle()
}

run()

```

To run it, I first needed to make it executable with:

```bash
$ chmod 755 ./scripts/add-article.js
```

Then, I could run it with:

```bash
$ ./scripts/add-article.js "My New Article"
```

Lastly, I wanted it to be a little bit more convenient, so I added a `yarn` script in my `package.json`, like so:

```json {9}
{
  "name": "tailwindui-template",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap",
    "article:new": "node ./scripts/add-article.js"
  },
  "browserslist": "defaults, not ie <= 11",
  "dependencies": {
  },
  "devDependencies": {
  }
}

```

Now, any time I need a new article, I can simply run:

```bash
$ yarn article:new "My New Article"
```

Et voila`!  A new article is created, and I can get to writing.

### Conclusion

All in all, it was pretty easy to add some basic organization to my NextJS MDX blog, assuming it doesn't
grow out of control.  My numbering scheme works for up to 9,999 articles.  I have a hard time believing
I'll ever write that many.

> blue:"Let's Math" At a cadence of 1 article per week, it would take me 192 years to write 9,989 articles. <br /><br />
> I think I'm safe. 😎

As always, happy coding! ✨




MDX Blogs in NextJS can quickly become hard to manage.  After only 10 articles, I found myself getting irritated with the manual process of creating new articles.  I decided to reorganize, and write a few Node scripts to help me out.

Quickly organizing your NextJS MDX blog with Node scripts


Recently, I wanted to add semi-nice callouts to this blog, similar to this one:

![Close.com Callout Example](/images/close-callout-example.png)

But here's the deal... I really didn't want to have to write a custom component to render it, like this:


```jsx:Boo.jsx
<Callout color="red">
  My Message
</Callout>
```

No thanks.

What I really wanted was to be able to leverage the `blockquote` tag in my MDX, similar to how
[Rehype](https://www.npmjs.com/package/rehype) handles my code blocks.

With [Rehype](https://www.npmjs.com/package/rehype), I can simply write:

```
'''jsx:filename.jsx
 // ... my code here
''''
```

And get syntax highlighting plus a nice filename header. So for my callouts, I wanted to be able to write:

```
> color:"Title" And here is my content...
```

Wouldn't that be great? 😉

### Rehype Plugins to the Rescue

After doing some digging on the best way to tap into the life-cycle of the MDX compiler with
my mdx-remote setup, I found that I could use a custom rehype plugin to do exactly what I wanted.

I was already using the [`rehype-code-titles`](https://www.npmjs.com/package/rehype-code-titles) plugin, so I decided to start with the
basics of that [source code](https://github.com/rockchalkwushock/rehype-code-titles/blob/production/src/index.ts).

```js:src/lib/rehype-blockquote-meta.js
import { visit } from 'unist-util-visit'

export default function rehypeBlockquote() {
  return function transformer(tree) {
    const visitor = (
      node,
      index,
      parent
    ) => {
      // If it's not a blockquote, do nothing
      if (!parent || node.tagName !== 'blockquote') {
        return
      }
    }

    visit(tree, 'element', visitor)
  }
}
```

So this pretty much does nothing but tells if the node is a `blockquote`.  If it's not,
we just return out of the tree traversal for this node.

Next, I needed to do a little bit of regex parsing on the children of the `blockquote`
children, to find my `color:"Title"` pattern, and do something with it.

```js:src/lib/rehype-blockquote-meta.js {15,17-41,44}
import { visit } from 'unist-util-visit'

export default function rehypeBlockquote() {
  return function transformer(tree) {
    const visitor = (
      node,
      index,
      parent
    ) => {
      // If it's not a blockquote, do nothing
      if (!parent || node.tagName !== 'blockquote') {
        return
      }

      const blockquote = node;

      const children = blockquote?.children?.reduce((memo, child) => {
        if (child.type !== 'element') {
          memo.push(child);
          return memo;
        }

        for (const c of child.children) {
          if (c.type === 'text') {
            const res = /^([^\:]+)\:"([^"]+)/gi.exec(c.value);

            if (res && res.length) {
              const color = res[1];
              const title = res[2];

              blockquote.properties['dataBqColor'] = color;
              blockquote.properties['dataBqTitle'] = title;
              c.value = c.value.replace(/^([^\:]+)\:"([^"]+)"\s/gi, '')
            }
          }

          memo.push(c);
        }

        return memo;
      }, []);

      
      blockquote.children = children;
    }

    visit(tree, 'element', visitor)
  }
}
```

This is a little involved, so let's break it down.

Remember, we're traversing the AST (Abstract Syntax Tree) of the MDX.  Our plugin basically
looks across all the nodes in the tree, starting with the top level nodes.

So first, we assign the current node to a variable, `blockquote`.

```js
const blockquote = node;
```

Next, we take all the children of the node, and reduce them to a new array of nodes.  This
will let us parse out the `color` and `"Title"`, then treat the rest of the nodes normally.

```js
const children = blockquote?.children?.reduce((memo, child) => {
  // ...
}, []);
```

Next, we check to see if the child is an `element` node.  If it's not, we just push it
onto the `memo` array and return the memo.

```js
if (child.type !== 'element') {
  memo.push(child);
  return memo;
}
```

Lastly, we check to see if the child is a `text` node.  If it is, we run our regex
against the text to see if it matches our `color:"Title"` pattern.

```js
if (c.type === 'text') {
  const res = /^([^\:]+)\:"([^"]+)/gi.exec(c.value);

  if (res && res.length) {
    const color = res[1];
    const title = res[2];

    blockquote.properties['dataBqColor'] = color;
    blockquote.properties['dataBqTitle'] = title;
    c.value = c.value.replace(/^([^\:]+)\:"([^"]+)"\s/gi, '')
  }
}
```

When we run our regex, we're able to pull out the `color` and `title` from the text, and
assign them to the `blockquote` node as data properties.

```js
blockquote.properties['dataBqColor'] = color;
blockquote.properties['dataBqTitle'] = title;
```

With that, we can actually pass those properties to a React component, and handle them there.

### Building the "Note" React Component

Now that we have our data properties on the `blockquote` node, we can pass them to a React
component.  I decided to call mine `Note`, and it looks like this:

```jsx:src/components/Note.js
import React from 'react'

const containerClasses = 'tracking-tight -ml-4 -mr-4 px-5 py-4 sm:-ml-6 sm:-mr-6 sm:rounded-lg sm:shadow sm:px-2';
const titleClasses = 'absolute -top-[27px] py-0 rounded-t leading-6 px-5 text-xs border-b-0 z-10 font-bold border-t-4 sm:left-0';

export function Note({
  'data-bq-color': color,
  'data-bq-title': title,
  children,
}) {

  if (!color) {
    return <blockquote>{children}</blockquote>
  }

  let colorClass = `bg-${color}-50 border border-${color}-200 text-${color}-800`;

  return (
    <div className="relative my-24 w-full">
      <div className={`${containerClasses} ${colorClass}`}>
        {title ? <div className={`${titleClasses} ${colorClass}`}>{title}</div> : null}
        <div className="p-3">
          {children}
        </div>
      </div>
    </div>
  )
}
```

It's a pretty simple component, just pulling the data properties that were passed to the
component by `next-mdx-remote`, then building up some TailwindCSS styles based on the
`color` property.

### Adding the "Note" Component to MDX

Lastly, I just needed to add the `Note` component to the `MDXComponents` object in
`src/components/MDXComponents.js`:

```jsx:src/components/MDXComponents.js {1,3,6}
import React from 'react'

import { Note } from './Note'

export const MDXComponents = {
  Note,
}
```

And I was ready to try it out with:

```md:my-draft.mdx
> amber:"Custom Title" Here is my nice custom call out.
```

Here's what I got...

<BadNote color="missing" title="Custom Title">
  Here is my nice custom call out.
</BadNote>

😭 Not great.  This is where I found a TailwindCSS gotcha that I didn't know about.

### Interpolated TailwindCSS Classes

Apparently, the Tailwind parser traverses string literals to find classes to add to the
final CSS.  This is great, because it means you can do things like this:

```jsx
<div className="bg-red-500 text-white">
  This is a red box with white text.
</div>
```

But what confuses it is when you try to interpolate a variable into the string.  So
something like this:

```jsx
const color = 'red';

<div className={`bg-${color}-500 text-white`}>
  This is a red box with white text.
</div>
```

The compiler doesn't seem to be able to find `bg-red-500` in the string, so it doesn't
add it to the final CSS.  This is what was happening with my `Note` component.

> sky:"Full Disclosure" I haven't actually verified that this is how the compiler works.  I'm just assuming based on behavior.<br /><br />
> Feel free to run it down for yourself, or perhaps I will in another post.

**So what was the fix?  🛠**

I had to write code that ensured **every** color class I was using was represented by an
actual string in my component file.

```jsx:src/components/Note.js {18-87}
import React from 'react'

const containerClasses = 'tracking-tight -ml-4 -mr-4 px-5 py-4 sm:-ml-6 sm:-mr-6 sm:rounded-lg sm:shadow sm:px-2';
const titleClasses = 'absolute -top-[27px] py-0 rounded-t leading-6 px-5 text-xs border-b-0 z-10 font-bold border-t-4 sm:left-0';

export function Note({
  'data-bq-color': color,
  'data-bq-title': title,
  children,
}) {

  if (!color) {
    return <blockquote>{children}</blockquote>
  }

  let colorClass = '';

  switch (color) {
    case 'slate':
      colorClass = 'bg-slate-50 border border-slate-200 text-slate-800';
      break;
    case 'gray':
      colorClass = 'bg-zinc-50 border border-zinc-200 text-zinc-800';
      break;
    case 'zinc':
      colorClass = 'bg-zinc-50 border border-zinc-200 text-zinc-800';
      break;
    case 'neutral':
      colorClass = 'bg-neutral-50 border border-neutral-200 text-neutral-800';
      break;
    case 'stone':
      colorClass = 'bg-stone-50 border border-stone-200 text-stone-800';
      break;
    case 'red':
      colorClass = 'bg-red-50 border border-red-200 text-red-800';
      break;
    case 'orange':
      colorClass = 'bg-orange-50 border border-orange-200 text-orange-800';
      break;
    case 'amber':
      colorClass = 'bg-amber-50 border border-amber-200 text-amber-800';
      break;
    case 'yellow':
      colorClass = 'bg-yellow-50 border border-yellow-200 text-yellow-800';
      break;
    case 'lime':
      colorClass = 'bg-lime-50 border border-lime-200 text-lime-800';
      break;
    case 'green':
      colorClass = 'bg-green-50 border border-green-200 text-green-800';
      break;
    case 'emerald':
      colorClass = 'bg-emerald-50 border border-emerald-200 text-emerald-800';
      break;
    case 'teal':
      colorClass = 'bg-teal-50 border border-teal-200 text-teal-800';
      break;
    case 'cyan':
      colorClass = 'bg-cyan-50 border border-cyan-200 text-cyan-800';
      break;
    case 'sky':
      colorClass = 'bg-sky-50 border border-sky-200 text-sky-800';
      break;
    case 'blue':
      colorClass = 'bg-blue-50 border border-blue-200 text-blue-800';
      break;
    case 'indigo':
      colorClass = 'bg-indigo-50 border border-indigo-200 text-indigo-800';
      break;
    case 'violet':
      colorClass = 'bg-violet-50 border border-violet-200 text-violet-800';
      break;
    case 'purple':
      colorClass = 'bg-purple-50 border border-purple-200 text-purple-800';
      break;
    case 'fuchsia':
      colorClass = 'bg-fuchsia-50 border border-fuchsia-200 text-fuchsia-800';
      break;
    case 'pink':
      colorClass = 'bg-pink-50 border border-pink-200 text-pink-800';
      break;
    case 'rose':
      colorClass = 'bg-rose-50 border border-rose-200 text-rose-800';
      break;
    default:
      colorClass = 'bg-yellow-50 border border-yellow-200 text-yellow-800';  
  }

  return (
    <div className="relative my-24 w-full">
      <div className={`${containerClasses} ${colorClass}`}>
        {title ? <div className={`${titleClasses} ${colorClass}`}>{title}</div> : null}
        <div className="p-3">
          {children}
        </div>
      </div>
    </div>
  )
}
```

I have to be honest, I don't love this.  It feels like the Tailwind compiler should be smart
enough to interpolate those strings on its own, based on the AST it's reading from the JSX file.

But, ć'est la vie.  It works, and I can move on with my life.

Now, with that in place, I can create any Tailwind color note I want.

```md
> red:"Custom Title" Here is my nice custom call out.
```

> red:"Custom Title" Here is my nice custom call out.

```md
> orange:"Custom Title" Here is my nice custom call out.
```

> orange:"Custom Title" Here is my nice custom call out.

```md
> yellow:"Custom Title" Here is my nice custom call out.
```

> yellow:"Custom Title" Here is my nice custom call out.

```md
> green:"Custom Title" Here is my nice custom call out.
```

> green:"Custom Title" Here is my nice custom call out.

```md
> blue:"Custom Title" Here is my nice custom call out.
```

> blue:"Custom Title" Here is my nice custom call out.

```md
> indigo:"Custom Title" Here is my nice custom call out.
```

> indigo:"Custom Title" Here is my nice custom call out.

```md
> violet:"Custom Title" Here is my nice custom call out.
```

> violet:"Custom Title" Here is my nice custom call out.

All the colors of the Tailwind Rainbow. 🌈

### Conclusion

Once you get the hang of it, writing Rehype parsers for your MDX blog is pretty easy.  I hope 
this helps you get confident enough to try some cool stuff!

Happy coding! 🤓 ⌨️

Easily call out content in your blog posts using blockquote markdown, mdx, and a custom rehype plugin.

Easy call-outs with blockquote, MDX, and Rehype


In the [previous article](/articles/tailwind-plus-sandpack-playground-component), we started work on building a nice `<CodePlayground />`
component for our NextJS MDX blog from scratch, using [Sandpack](https://sandpack.codesandbox.io/)
and [TailwindCSS](https://tailwindcss.com/).

We started out with a pretty blank canvas, and were able to build out our Playground
well enough so that markdown like this:

```md:MDX
<CodePlayground />
```

Produces this nifty playground component:

<CodePlayground_05 />

There were, however, 2 features I didn't get to implementing:

  - A **Test Runner** and
  - **Module Importing**

### Import modules to code examples in Sandpack

Sandpack makes this pretty dead simple.

In our `<CodePlayground />` component, we simply need to ensure the `<SandpackProvider />`
supports the `customSetup` prop, like so:

```jsx:src/components/CodePlayground.jsx {3,18}
//...

export function CodePlayground_05({ files, customSetup }) {
  const [mode, setMode] = useState('result')
  const isPreview = mode === 'result'

  const previewProps = {
    mode,
    setMode,
    isPreview,
  }

  return (
    <SandpackProvider
      template="react"
      theme={theme}
      files={files}
      customSetup={customSetup}
    >
      <SandpackLayout className="!-mx-4 !block !rounded-none sm:!mx-0 sm:!rounded-lg">
        <TitleBar />
        <SandpackCodeEditor showTabs />
        <Console {...previewProps} />
        <Preview {...previewProps} />
      </SandpackLayout>
    </SandpackProvider>
  )
}
```

We can then pass a custom setup property in our Markdown, like this:

```md:MDX {18-22}
<CodePlayground_05 files={{
  '/App.js': `import React from 'react';
import { times } from 'lodash';

export default function App() {
  return (
    <ul>
      {times(5, n => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}

`
  }}
  customSetup={{
    dependencies: {
      lodash: 'latest'
    }
  }}
/>
```

That small change will let us import `times` from lodash, and use
it in our code example.

<CodePlayground_05 files={{
  '/App.js': `import React from 'react';
import { times } from 'lodash';

export default function App() {
  return (
    <ul>
      {times(5, n => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}
`
}}
  customSetup={{
    dependencies: {
      lodash: 'latest'
    }
  }}
/>

Pretty slick, eh? 👍

### Adding a Test Runner to our Sandpack code playground

Sandpack also makes adding a test runner super simple.

To start, we're gonna update our main `<Playground />` component to support 3 modes instead of 2: `['result', 'console', 'tests']`.

```diff:/src/components/CodePlayground.jsx
export function CodePlayground_06({ files, customSetup }) {
  const [mode, setMode] = useState('result')
- const isPreview = mode === 'result';

  const previewProps = {
    mode,
    setMode,
-   isPreview,
  }

  return (
    <SandpackProvider
      template="react"
      theme={theme}
      files={files}
      customSetup={customSetup}
    >
      <SandpackLayout className="!-mx-4 !block !rounded-none sm:!mx-0 sm:!rounded-lg">
        <TitleBar />
        <SandpackCodeEditor showTabs />
        <Actions {...previewProps} />
        <Preview {...previewProps} />
      </SandpackLayout>
    </SandpackProvider>
  )
}
```

Next, we'll update our `<Preview />` component to add the `<SandpackTests />` renderer.

```jsx:src/components/CodePlayground.jsx {8,22,34,45-52}
import React, { useState, useEffect } from 'react'
import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
  SandpackConsole,
  SandpackTests,
  UnstyledOpenInCodeSandboxButton,
  useSandpack,
  useSandpackNavigation,
} from '@codesandbox/sandpack-react'

// ...

function Preview({ mode }) {
  return (
    <>
      <div className="rounded-b-lg bg-zinc-900 p-4">
        <div
          className={clsx(
            mode === 'result' ? 'block' : 'hidden',
            'overflow-hidden rounded bg-white p-1'
          )}
        >
          <SandpackPreview
            showOpenInCodeSandbox={false}
            showRefreshButton={false}
          />
        </div>

        <div
          className={clsx(
            mode === 'console' ? 'block' : 'hidden',
            'min-h-[160px] overflow-hidden rounded'
          )}
        >
          <SandpackConsole
            standalone
            resetOnPreviewRestart
            showHeader={false}
          />
        </div>

        <div
          className={clsx(
            mode === 'tests' ? 'block' : 'hidden',
            'min-h-[160px] overflow-hidden rounded'
          )}
        >
          <SandpackTests />
        </div>
      </div>
    </>
  )
}
```

And lastly, we'll update our `<Actions />` (formerly `<Console />`) component
to add a button for **Tests**.

```jsx:src/components/CodePlayground.jsx {1,15-16,21-22,26-31}
function Actions({ mode, setMode }) {
  const [reloading, setReloading] = useState(false)
  const { sandpack, listen } = useSandpack()
  const { refresh } = useSandpackNavigation()
  const activeClass = 'border-b border-amber-500'

  useEffect(() => {
    //...
  }, [listen])

  return (
    <div className="flex items-center justify-between border border-zinc-700 bg-zinc-900 px-3">
      <div>
        <button
          className={clsx('mr-6 py-3', mode === 'result' ? activeClass : null)}
          onClick={() => setMode('result')}
        >
          Preview
        </button>
        <button
          className={clsx('mr-6 py-3', mode === 'console' ? activeClass : null)}
          onClick={() => setMode('console')}
        >
          Console
        </button>
        <button
          className={clsx('py-3', mode === 'tests' ? activeClass : null)}
          onClick={() => setMode('tests')}
        >
          Tests
        </button>
      </div>
      <div>
        <button
          onClick={() => {
            setReloading(true)
            refresh()
          }}
          disabled={sandpack?.status === 'idle'}
        >
          <RefreshIcon
            className={clsx(
              'h-5 w-5 text-zinc-400',
              reloading && 'animate-spin',
              sandpack?.status === 'idle' && 'text-zinc-600'
            )}
          />
        </button>
      </div>
    </div>
  )
}
```

Et voila!  We have a functioning **Tests** panel in our `<CodePlayground />`.  🦄

<CodePlayground_06 />

### Actually running tests in our CodePlayground

[Sandpack](https://sandpack.codesandbox.io/) makes it pretty simple to run tests in the
playground;  you just need to add test files to your sandpack instance.

<CodePlayground_06 files={{
  '/App.js': `import React from 'react'

export default function App() {
  return (
    <h1>Hello World</h1>
  )
}
`,
  '/example.test.js': `describe('An example suite', () => {
  test('true should be true', () => {
    expect(true).toEqual(true);
  });
});
`
}} />

I'm not sure what the <span className="bg-yellow-500 text-yellow-800 rounded leading-6">1 skipped</span>
thing is all about, but I'll look into it.

In the meantime, happy hacking! 😎


Learn how to import dependencies and enable a Jest-based test runner, all inside of a Sandpack code playground.

Adding Imports and a Test Runner to Sandpack

Want to add a Code Playground to your NextJS MDX blog?  This article will teach you how, step by step, using Sandpack from CodeSandbox and TailwindCSS.

Using Sandpack & TailwindCSS to build a Code Playground Component


I've been wanting to make articles on this blog a little bit more navigable / organized, and I decided that
adding tags would probably be a pretty low friction way to do that.

Let me show you how I did it.

## Adding Tags to MDX Articles

Let's add some tags to our articles.

Since we're already using front-matter, all we need to do is add a tags property to our meta.

```md:/src/content/articles/my-article.mdx {4}
---
title: 'My Article'
date: '2021-01-01'
tags: nextjs, mdx, react
---
```

Now, let's put together a simple component that will display the tags on our `<ArticleLayout />` component.

```jsx:src/components/ArticleTags.jsx
import React from 'react'

export function ArticleTags({ tags }) {
  if (!tags?.length) {
    return null
  }

  tags = tags.split(',').map((t) => t.trim())

  return tags.map((tag, i) => (
    <span
      key={i}
      className="ml-2 rounded-full bg-indigo-100 px-3 text-[11px] font-light text-indigo-500 ring-1 ring-indigo-300"
    >
      {tag}
    </span>
  ))
}
```

Let's add that to our `<ArticleLayout />` component.

```jsx:src/components/ArticleLayout.jsx {2,26}
// ...
import { ArticleTags } from '@/components/ArticleTags'

export function ArticleLayout({
  children,
  meta,
  isRssFeed = false,
  previousPathname,
}) {

  // ...

  return (
    {/* ... */}
    <article>
      <header className="flex flex-col">
        <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
          {meta.title}
        </h1>
        <time
          dateTime={meta.date}
          className="order-first flex items-center justify-between text-base text-zinc-400 dark:text-zinc-500 print:hidden"
        >
          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
          <span className="ml-3 grow">{formatDate(meta.date)}</span>
          <ArticleTags tags={meta.tags} />
          {meta.author !== 'Ty Barho' ? (
            <span className="text-xs bg-indigo-100 text-indigo-600 rounded-lg px-2">by {meta.author}</span>
          ) : null}
        </time>
      </header>
      <Prose className="mt-8">{children}</Prose>
    </article>
    {/* ... */}
  )
}

```

That should give us something that looks like this:

![Simple Tags Render](/images/simple-tags-render.png)

Nice! 😎

## Filtering Articles by Tag

Lastly, let's make sure users can filter articles by tag on our main `/articles` route.

Conceptually, the list _could_ be filtered based on a query string in the URL, like this:

```
/articles?tag=nextjs
```

However, when using `getStaticPaths` in NextJS to build static pages, we can't use query strings in the URL, so we'll need to use a different approach.

One way we can do this is by creating a new URL structure for our tagged article routes. Something like:

```
/[tag]/articles
```

This way, we can implement the dynamic tag pages, and still render out our same components on statically generated pages.

Let's get started.

## Getting Around `getStaticPaths` with Tags

First, let's create our new dynamic route for our tag pages.

We want it to look similar to our `/articles` route, so let's reuse the components from there.

```jsx:pages/[tag]/articles.jsx
import { NextSeo } from 'next-seo'

import { SimpleLayout } from '@/components/SimpleLayout'
import { Article } from '@/components/Article'
import { getAllContent } from '@/lib/getContent'

export default function ArticlesIndex({ articles }) {
  const title = 'Articles - Ty Barho'
  const description =
    'Some of my long-form thoughts on software, dad-hacking, theology, and more, collected in chronological order.'
  const canonical = 'https://tybarho.com/articles'

  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
        }}
      />
      <SimpleLayout
        title="Writing on Javascript, dad-hacking, and spiritual formation."
        intro="Some of my long-form thoughts on software, dad-hacking, theology, and more, collected in chronological order."
      >
        <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
          <div className="flex max-w-3xl flex-col space-y-16">
            {articles.map((article) => (
              <Article key={article.slug} article={article} />
            ))}
          </div>
        </div>
      </SimpleLayout>
    </>
  )
}

export async function getStaticProps() {
  return {
    props: {
      articles: (await getAllContent('articles')).map(
        ({ component, ...meta }) => meta
      ),
    },
  }
}
```

Now let's try it out by navigating to [http://localhost:3000/nextjs/articles](http://localhost:3000/nextjs/articles).

![getStaticPaths Error](/images/get-static-paths-error.png)

No worries. NextJS is just telling us that we need to implement a `getStaticPaths` function to generate the static pages for each tag.

First, though, we need a function to get all of the tags from our articles. Let's add that to our `/lib/getContent.js` file.

```js
// /src/lib/getContent.js

// ...

// Add the getSlugs function
async function getSlugs(srcDir) {
  return (
    await glob(['*.mdx', '*/index.mdx'], {
      cwd: path.join(process.cwd(), `src/content/${srcDir}`),
    })
  ).map((n) => n.replace(/\.mdx$/, ''))
}

// A function to gather all tags from articles
export async function getAllTags(srcDir) {
  let slugs = await getSlugs(srcDir)

  const cb = (slug) => getContentItem(slug, srcDir)

  function reducer(memo, item) {
    if (!item?.data?.tags?.length) {
      return memo
    }

    const itemTags = item.data.tags
      .split(',')
      .map((tag) => tag.trim().toLowerCase())

    itemTags.forEach((tag) => {
      if (!memo.includes(tag)) {
        memo.push(tag)
      }
    })

    return memo
  }

  const items = await Promise.all(slugs.map(cb))
  const tags = items.reduce(reducer, [])

  return tags.sort()
}

export async function getAllContent(srcDir) {
  // Update getAllContent to use getSlugs
  let slugs = await getSlugs(srcDir)

  const cb = (slug) => getContentItem(slug, srcDir)

  let items = await Promise.all(slugs.map(cb))

  return items
    .filter((item) => item.data.date)
    .sort((a, z) => new Date(z.data.date) - new Date(a.data.date))
}
```

Now, we need to add the `getStaticPaths` function to our `/src/pages/[tag]/articles.jsx` file.

```jsx
// /src/pages/[tag]/articles.jsx

// ...

export async function getStaticPaths() {
  const tags = await getAllTags('articles')
  const paths = tags.map((tag) => `/${tag}/articles`)

  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps() {
  return {
    props: {
      articles: (await getAllContent('articles')).map(
        ({ component, ...meta }) => meta
      ),
    },
  }
}
```

Now if you refresh the page, you should see an exact duplicate of the `/articles` page, but with the tag name in the URL.

![Tagged Articles Page](/images/tags-bad-render-1.png)

This is because we are missing 2 key items:

1. We need to filter the articles by tag in the `getStaticProps` function
2. We need to update our `/[tag]/articles.jsx` render to show a different UX for "filtered" articles

Let's start with the first one.

## Filtering Articles by Tag

We need to update our `getStaticProps` function to filter the articles by tag.

```jsx
// /src/pages/[tag]/articles.jsx

// ...

export async function getStaticProps({ params: { tag } }) {
  return {
    props: {
      articles: (await getAllContent('articles'))
        .map(({ component, ...meta }) => meta)
        .filter(
          (meta) =>
            meta?.data?.tags &&
            meta?.data?.tags
              .split(',')
              .map((t) => t.trim().toLowerCase())
              .includes(tag)
        ),
    },
  }
}
```

Now, if you visit [http://localhost:3000/nextjs/articles](http://localhost:3000/nextjs/articles) you should only see articles with the `nextjs` tag.

![Tagged Articles Page](/images/tags-filtered-list.png)

Great! 💪

Now let's update our render to show a different UX for our "filtered" articles.

## Updating the UX for Filtered Articles

To start, we want to update the title and intro text to reflect the tag we are filtering by.

We first need to be sure the tag is getting passed to the component from `getStaticProps`.

```jsx
// /src/pages/[tag]/articles.jsx

// ...

export async function getStaticProps({ params: { tag } }) {
  return {
    props: {
      tag, // <-- Add this
      articles: (await getAllContent('articles'))
        .map(({ component, ...meta }) => meta)
        .filter(
          (meta) =>
            meta?.data?.tags &&
            meta?.data?.tags
              .split(',')
              .map((t) => t.trim().toLowerCase())
              .includes(tag)
        ),
    },
  }
}
```

Now, in our `<ArticlesIndex />` component, we can change the details to reflect the tag.

```jsx
// /src/pages/[tag]/articles.jsx

// ...

export default function ArticlesIndex({ articles, tag }) {
  const title = `${tag} Articles - Ty Barho`
  const description = `Some of my long-form thoughts on ${tag}`
  const canonical = `https://tybarho.com/${tag}/articles`

  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
        }}
      />
      <SimpleLayout
        title={
          <>
            Articles tagged with:{' '}
            <span className="ml-4 rounded-full bg-pink-100 px-8 py-1 text-4xl font-light text-pink-600 ring-1 ring-pink-300">
              {tag}
            </span>
          </>
        }
        intro={`Here is a list of all articles I've written on the topic of ${tag}.`}
      >
        <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
          <div className="flex max-w-3xl flex-col space-y-16">
            {articles.map((article) => (
              <Article key={article.slug} article={article} />
            ))}
          </div>
        </div>
      </SimpleLayout>
    </>
  )
}
```

This should render out something like this...

![Tagged Articles Page](/images/updated-articles-component.png)

## Adding Tag Links to our Main Articles Page

Now that we have our tag links working, we want to add them to our main `/articles` page.

Let's utilize the `<ArticleTags />` component we used earlier, in conjunction with our `getAllTags` function.

```jsx
import { NextSeo } from 'next-seo'

import { SimpleLayout } from '@/components/SimpleLayout'
import { Article } from '@/components/Article'
import { ArticleTags } from '@/components/ArticleTags'
import { getAllContent, getAllTags } from '@/lib/getContent'

export default function ArticlesIndex({ articles, tags }) {
  const title = 'Articles - Ty Barho'
  const description =
    'Some of my long-form thoughts on software, dad-hacking, theology, and more, collected in chronological order.'
  const canonical = 'https://tybarho.com/articles'

  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
        }}
      />
      <SimpleLayout
        title="Writing on Javascript, dad-hacking, and spiritual formation."
        intro={
          <>
            Some of my long-form thoughts on software, dad-hacking, theology, and more, collected in chronological order.
            <div className="py-4">
              <ArticleTags tags={tags} />
            </div>
          </>
        }
      >
        <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
          <div className="flex max-w-3xl flex-col space-y-16">
            {articles.map((article) => (
              <Article key={article.slug} article={article} />
            ))}
          </div>
        </div>
      </SimpleLayout>
    </>
  )
}

export async function getStaticProps() {
  const tags = await getAllTags('articles')
  const articles = (await getAllContent('articles')).map(
    ({ component, ...meta }) => meta
  )

  return {
    props: {
      tags,
      articles,
    },
  }
}
```

When we check the page... oops.  We get this:

![Tags Split Error](/images/tags-split-error.png)

Looks like our `ArticleTags` component is expecting a string, but we are passing it an array of objects.

Let's fix that.

```jsx
// /src/components/ArticleTags.jsx

import React from 'react'

export function ArticleTags({ tags }) {
  if (!tags?.length) {
    return null
  }

  // Check the type of tags
  if (typeof tags === 'string') {
    tags = tags.split(',').map(t => t.trim().toLocaleLowerCase());
  } else {
    tags = tags.map(t => t.trim().toLocaleLowerCase());
  }

  return tags.map((tag, i) => (
    <span key={i} className="text-[11px] font-light text-pink-600 bg-pink-100 ring-1 ring-pink-300 px-3 rounded-full ml-2">
      {tag}
    </span>
  ))
}

```

Now, let's make the tag chips clickable links with `next/link`'s `<Link />` component.

```jsx
// /src/components/ArticleTags.jsx

import React from 'react'
import Link from 'next/link'

export function ArticleTags({ tags }) {
  if (!tags?.length) {
    return null
  }

  if (typeof tags === 'string') {
    tags = tags.split(',').map((t) => t.trim().toLocaleLowerCase())
  } else {
    tags = tags.map((t) => t.trim().toLocaleLowerCase())
  }

  return tags.map((tag, i) => (
    <Link
      key={i}
      href={`/${tag}/articles`}
      className="ml-2 rounded-full bg-pink-100 px-3 py-1 text-[11px] font-light text-pink-600 ring-1 ring-pink-300"
    >
      {tag}
    </Link>
  ))
}
```

That should give you something like this:

![Clickable Tags](/images/clickable-tags.png)

_Nice!_ ✨

## Finally, Adding Our New Routes to the Sitemap

Now, let's generate our sitemap using

```bash
$ yarn build
```

Check your `/public/sitemap-0.xml` file, and see if your new url's were picked up.

![Sitemap with Tags](/images/sitemap-with-tags.png)

Hooray, looks like we're good to go!  Now you can tag articles to your ❤️'s content!

Happy coding! 🚀


Is your NextJS MDX blog growing out of control?  Learn how to add tags to your articles and filter them by tag.

Filtering by Tags in your NextJS MDX Blog


When writing for this site, I often find myself needing to be able to keep an article or lesson in draft, but also publish
something to production.

Today, this NextJS MDX blog doesn't support the concept of a "draft" post, so let's introduce one.

First, in my content directory where I hold all my MDX files (for me, it's `/src/content/articles`), I'm going to add a new file called
`draft-article.mdx`.

```md:src/content/articles/draft-article.mdx {3}
---
author: Ty Barho
date: 
title: A Draft Article
description: 
---

This is only a draft.
```

## Filtering Articles by Publish Status with NextJS & MDX

Currently, I have functions for fetching my articles in `/src/lib/getContent.js`:

```js:src/lib/getContent.js {6, 20}
import glob from 'fast-glob'
import * as path from 'path'
import fs from 'fs'
import matter from 'gray-matter'

export async function getAllContent(srcDir) {
  let slugs = (
    await glob(['*.mdx', '*/index.mdx'], {
      cwd: path.join(process.cwd(), `src/content/${srcDir}`),
    })
  ).map((n) => n.replace(/\.mdx$/, ''))

  const cb = (slug) => getContentItem(slug, srcDir)

  let items = await Promise.all(slugs.map(cb))

  return items.sort((a, z) => new Date(z.data.date) - new Date(a.data.date))
}

export async function getContentItem(slug, srcDir) {
  const filePath = path.join(process.cwd(), `src/content/${srcDir}/${slug}.mdx`)
  const source = fs.readFileSync(filePath)

  const { content, data } = matter(source)

  return {
    content,
    data,
    slug,
  }
}
```

First, let's update the `getAllContent` function to filter out any articles that don't have a `date` property set.  Like so:

```js:src/lib/getContent.js {13}
export async function getAllContent(srcDir) {
  let slugs = (
    await glob(['*.mdx', '*/index.mdx'], {
      cwd: path.join(process.cwd(), `src/content/${srcDir}`),
    })
  ).map((n) => n.replace(/\.mdx$/, ''))

  const cb = (slug) => getContentItem(slug, srcDir)

  let items = await Promise.all(slugs.map(cb))

  return items
          .filter((item) => item.data.date)
          .sort((a, z) => new Date(z.data.date) - new Date(a.data.date))
}
```

Now, let's check and see that our test article is not showing up in our `/articles` page.

As you can see, the draft article is not showing up in the list of articles.

![No Draft Article](/images/no-draft-article.png)

Great! 🦄

Now, we need to make sure that article isn't accessible via the `/articles/[slug]` page by visiting [http://localhost:3000/articles/draft-article](http://localhost:3000/articles/draft-article).

![Draft Article 404](/images/draft-article-404.png)

Sure enough, we get a 404.

**But wait... why?**

We haven't written any special code to prevent this article from showing up, so why isn't it showing up?

## NextJS `getStaticPaths` & `fallback: false`

The reason is because of how NextJS handles dynamic routes.

When you visit a page like `/articles/[slug]`, NextJS will generate a static page for each slug in the `getStaticPaths` function.

Here's ours...

```js:src/pages/articles/[slug].js {2}
export async function getStaticPaths() {
  const articles = await getAllContent('articles');
  const paths = articles.map(a => `/articles/${a.slug}`);
  
  return {
    paths,
    fallback: false,
  };
}
```

As you can see, we are using the `getAllContent` method we just updated to find our lists of paths.

By using `fallback: false`, we are also telling NextJS that we don't want to generate any pages that don't exist in the `paths` array.

Here is how [`fallback: false`](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false) works...

Yet another thing NextJS handles for us nearly automatically!

## Fixing our NextJS Sitemap to Exclude Drafts

Now, we need to make sure that our sitemap doesn't include any draft articles.

In `next-sitemap.config.js` we will add a helper function to grab the front-matter of each article and filter out any articles that don't have a `date` property.

```js:next-sitemap.config.js {2, 4-9,25,27,38,40}
// ... other imports
const matter = require('gray-matter')

function getFileData(sourceDir, filePath) {
  filePath = path.join(process.cwd(), `./src/content/${sourceDir}/${filePath}`)
  const source = fs.readFileSync(filePath)

  return matter(source).data
}

// ...

module.exports = {
  siteUrl: 'https://www.tybarho.com',
  sitemapSize: 7000,
  exclude: [],
  generateRobotsTxt: true,
  additionalPaths: async (config) => {
    let result = []

    const articles = fs.readdirSync(path.resolve('./src/content/articles'))
    const lessons = fs.readdirSync(path.resolve('./src/content/lessons'))

    for (const article of articles) {
      const data = getFileData('articles', article)

      if (data.date) {
        result.push(
          await config.transform(
            config,
            `/articles/${article.replace('.mdx', '')}`
          )
        )
      }
    }

    for (const lesson of lessons) {
      const data = getFileData('lessons', lesson)

      if (data.date) {
        result.push(
          await config.transform(
            config,
            `/lessons/${lesson.replace('.mdx', '')}`
          )
        )
      }
    }

    return result
  },
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
  },
}
```

Be sure and run `yarn postbuild` to regenerate the sitemap and, check `/public/sitemap-0.xml` ensure that the draft article is not included.

> **Note:** You may need to run `yarn build` first

And that's that!  We are now filtering out all of our draft articles! 😎🚀

Need to keep some of your content in draft mode while you polish it?  Learn how to ensure your articles are published when you want, without messing up your ability to build your NextJS site.

mdx.