
### 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


Newsletter subscriptions are a mixed bag for me.  On the one hand, from a marketing perspective, your subscriber
list (that you own, and not FB or [X](https://www.twitter.com/hostmonk)) is probably your most valuable asset.

On the other hand, writing newsletters is a pain.

My goal here, I think, is to put in place something EXTREMELY automated... something along the lines of:

- Write an MDX blog post
- Commit to Git
- Vercel auto-deploys (already happens)
- Git hook fires to an API route
- A newsletter is drafted and sent to my contacts

That would be nice.  We'll see if I can get there eventually.  But for today, I just need a way to
let subscribers register from the site.

> zinc:"Email Platforms" **Full disclosure:** This is the first time I'm trying [ConvertKit]().
> I'm not an email marketing expert, but I have tried quite a few different platforms.
> In the past I have used [SendGrid](), [MailChimp](), [Brevo](), [PostMark](), and a handful of others.
> So far I haven't yet found a platform that fits 100% of my specific needs, which are:
> <br /><br />
> - Good API (bonus points for SDK)
> - Can send plain text emails
> - Easy, robust sequences
> - Cost effective at low volume
> - Paid & Free newsletter options
> <br />
> [ConvertKit]() seems to get close, which is why I'm trying it out.  If you have a recommendation, please share it on [Twitter]()

So with that out of the way, let's get started! ⚡️

### Create a ConvertKit Account

First things first, head over and [create an account at ConvertKit](https://convertkit.com/).

### Set up a contact group

Once you've created an account, you're going to want to create a tag to bucket users that register from your site.

So go to **Grow > Subscribers** from the nav bar...

![convertkit-shot-1](/images/convertkit-shot-1.png)

Then at the bottom right, click **+ Create a Tag** (it's small and hard to find... ahem 😳).

![convertkit-shot-2](/images/convertkit-shot-2.png)


### Add a NextJS /api route

Now, we want to create a NextJS /api route that adds a subscriber to our list, with the new tag
we have created.

Head over to the [ConvertKit api docs](https://developers.convertkit.com/#add-subscriber-to-a-form).

You can see from the API docs that the call we want looks like this:

```shell
# Include a tag during subscribing
curl -X POST https://api.convertkit.com/v3/forms/<form_id>/subscribe\
     -H "Content-Type: application/json; charset=utf-8"\
     -d '{ \
           "api_key": "<your_public_api_key>",\
           "email": "jonsnow@example.com",\
           "tags": [1234, 5678]\
         }'
```

So we'll need a few things to get this going:

```
1.  <form_id>
2.  <your_public_api_key>
3.  [1234,5678]  # our tag ids
```

First, let's find the Form ID...

<Loom src="https://www.loom.com/embed/23ebd3d1f7b24c95ab0d4de70a0206ba?sid=3d14cc4f-e5ee-4542-8672-b03f711ec0d6" />

Now, to get your **public_api_key**, just head over to [your ConvertKit account settings](https://app.convertkit.com/account_settings/advanced_settings).

In the Advanced section, you'll find your API key.

Lastly, we need to find our Tag IDs, which is similar to finding out our form id.

<Loom src="https://www.loom.com/embed/5763f1a5acd4410886816865cf1dd8db?sid=703bd64b-3d97-49cd-a9e2-253ccb407683" />

We are going to want to set both of these as [environment variables](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables) in our NextJS app.  So let's create a file called `.env.local` and paste in the following:

```shell
CONVERTKIT_PUBLIC_API_KEY=your_public_api_key   # Be sure and make these the actual values you got above
CONVERTKIT_SUBSCRIBE_FORM_ID=form_id            # Be sure and make these the actual values you got above
```

> indigo:"Note" You'll need to restart your dev server for these changes to take effect.

Now, we're ready to make our API route.

Create a new file at `/api/newsletter-subscribe`, and add the following code:

```js:/api/newsletter-subscribe.js
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default async function handler(req, res) {
  const { email } = req.body

  if (!email) {
    // Tell developers when they are missing params
    res.status(400).json({ message: 'No email address provided.' });
    return;
  }

  const api_key = process.env.CONVERTKIT_PUBLIC_API_KEY;
  const formId = process.env.CONVERTKIT_SUBSCRIBE_FORM_ID;

  if (!api_key || !formId) {
    // Don't tell people about internal server errors
    res.status(500);
    return;
  }

  const url = `https://api.convertkit.com/v3/forms/${formId}/subscribe`;
  const tags = [4062331];

  try {
    const body = JSON.stringify({ api_key, email, tags })

    // POST a request to the ConvertKit endpoint
    await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8'
      },
      body,
      redirect: 'follow'
    });

    // Send a non-descriptive success response
    res.status(200).json({ success: true });
  } catch(e) {
    // Don't tell people about internal server errors
    res.status(500);
  }
}

```

Now, let's see if our API route works using a cURL request from our command line.

```shell
curl --location --request POST 'http://localhost:3000/api/newsletter-subscribe' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "[youremail]+newsletter@gmail.com"
}'
```

> indigo:"Real Email" ConvertKit sends a confirmation email that you have to click to actually subscribe, so be sure to send to
a real email address.<br /><br />
> I tend to just at a `+newsletter` to my normal Gmail account, like **ty+newsletter@[yourdomain].com**.

If everything works, you should get a line back like this:

```shell
{"success":true}
```

Once you've confirmed your subscription, go back to your [ConvertKit Subscribers](https://app.convertkit.com/subscribers), and you should see **test@example.com** in your 
subscribers list!

> zinc:"On security..." From the NextJS docs...<br /><br />
> ```API Routes do not specify CORS headers, meaning they are same-origin only by default. You can customize such behavior by wrapping the request handler with the CORS request helpers.```
> <br /><br />
> So where we would typically need to add some sort of security, Next takes care of this for us.

Now, alls we need is a form. 🛠

### Create the Subscribe Form

I'm gonna burn through this with a couple of big code blocks, so if you're new to forms be sure to check out my post
on [quickly building forms with NextJS, React Hook Form, and TailwindCSS](/articles/react-fast-performant-forms).

Create a new file at `/components/Newsletter.jsx` and paste the following code:

```jsx:/components/Newsletter.jsx
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'

import { Button } from '@/components/Button'

const schema = yup.object().shape({
  email: yup
    .string()
    .email('Please enter a valid email.')
    .required('Email address is required.'),
})

function MailIcon(props) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path
        d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
        className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
      />
      <path
        d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
        className="stroke-zinc-400 dark:stroke-zinc-500"
      />
    </svg>
  )
}

export function Newsletter() {
  const [success, setSuccess] = useState(false)
  const [serverError, setServerError] = useState(null)

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: yupResolver(schema),
  })

  async function onSubmit(values) {
    // We'll wire this up next...
    console.log(values);
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
    >
      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
        <MailIcon className="h-6 w-6 flex-none" />
        <span className="ml-3">Stay up to date</span>
      </h2>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        Get notified when I publish something new, and unsubscribe at any time.
      </p>
      <div className="mt-6 flex">
        <input
          {...register('email')}
          type="email"
          placeholder="Email address"
          aria-label="Email address"
          className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-indigo-400 dark:focus:ring-indigo-400/10 sm:text-sm"
        />

        <Button type="submit" className="ml-4 flex-none">
          {isSubmitting ? 'Joining' : 'Join'}
        </Button>
      </div>
      {errors?.email || serverError ? (
        <div className="ml-3 mt-2 text-xs font-light text-red-600">
          {errors?.email?.message || serverError}
        </div>
      ) : null}
      {success ? (
        <div className="ml-3 mt-3 text-xs font-light leading-5 text-green-700">
          Thanks for joining! Check your email for a confirmation.
        </div>
      ) : null}
    </form>
  )
}

```

This should give you a presentable looking Tailwind newsletter subscribe form, complete with
schema-based validation, and ready for server errors & success messages.

### Wire the Form up to the /api route

Now we need to connect our form up to our API route.

We will handle this in our `onSubmit()` handler that we provided to the form.

```jsx:/components/Newsletter.jsx showLineNumbers

//... rest of file

export function Newsletter() {
  const [success, setSuccess] = useState(false)
  const [serverError, setServerError] = useState(null)

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: yupResolver(schema),
  })

  async function onSubmit(values) {
    // Reset the server error (if there is one)
    setServerError(null)

    // Grab the email off of the form values
    const { email } = values

    try {
      // Send the request to our API
      await fetch('/api/newsletter-subscribe', {
        method: 'POST',
        // Be sure and set the content type header if using fetch()
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        body: JSON.stringify({
          email,
        }),
      })

      // Set success to true to show the success message
      setSuccess(true)
      // Reset the form
      reset()

      // Hide the success message after a while
      setTimeout(() => {
        setSuccess(false)
      }, 3000)
    } catch (e) {
      // Log the error, and set server error message
      console.error(e)
      setServerError('There was an error subscribing.')
    }
  }

  

  return (
    {/* ... our form ...*/}
  )
}

```

And that's it!  With that in place, you should have a nice Newsletter form that looks like this:

<Newsletter />

The last thing we need to do is wire up our environment variables to Vercel deployments.

### Wiring up Vercel

I'm a big fan of using CLI's when possible.  It helps me learn how to save time by staying in the terminal
but is also *critical* to gaining knowledge on CI / CD pipelines.  If you're ignoring devops, don't.  It
can be a game changer.  Don't believe me?  Checkout what the illuminary [Kent C. Dodds has to say about automation](https://kentcdodds.com/blog/automation).

That said, let's be sure we have the Vercel CLI installed:

```shell
yarn global add vercel@latest
```

Now, pretending like we're new to this, let's see what it can do... remember, no browser help here:

```shell
vercel --help
```

This is going to spit out a big list of commands you can run, like this:

```shell
Vercel CLI 31.4.0

  ▲ vercel [options] <command | path>

  For deploy command help, run `vercel deploy --help`

  Commands:

    Basic

      deploy               [path]      Performs a deployment (default)
      dev                              Start a local development server
      env                              Manages the Environment Variables for your current Project
      git                              Manage Git provider repository for your current Project
      help                 [cmd]       Displays complete help for [cmd]
      init                 [example]   Initialize an example project
      inspect              [id]        Displays information related to a deployment
      link                 [path]      Link local directory to a Vercel Project
      ls | list            [app]       Lists deployments
      login                [email]     Logs into your account or creates a new one
      logout                           Logs out of your account
      promote              [url|id]    Promote an existing deployment to current
      pull                 [path]      Pull your Project Settings from the cloud
      redeploy             [url|id]    Rebuild and deploy a previous deployment.
      rollback             [url|id]    Quickly revert back to a previous deployment
      switch               [scope]     Switches between teams and your personal account

    Advanced

      alias                [cmd]       Manages your domain aliases
      bisect                           Use binary search to find the deployment that introduced a bug
      certs                [cmd]       Manages your SSL certificates
      dns                  [name]      Manages your DNS records
      domains              [name]      Manages your domain names
      logs                 [url]       Displays the logs for a deployment
      projects                         Manages your Projects
      rm | remove          [id]        Removes a deployment
      secrets              [name]      Manages your global Secrets, for use in Environment Variables
      teams                            Manages your teams
      whoami                           Shows the username of the currently logged in user

  Global Options:

    -h, --help                     Output usage information
    -v, --version                  Output the version number
    --cwd                          Current working directory
    -A FILE, --local-config=FILE   Path to the local `vercel.json` file
    -Q DIR, --global-config=DIR    Path to the global `.vercel` directory
    -d, --debug                    Debug mode [off]
    --no-color                     No color mode [off]
    -S, --scope                    Set a custom scope
    -t TOKEN, --token=TOKEN        Login token

  Examples:

  - Deploy the current directory

    $ vercel

  - Deploy a custom path

    $ vercel /usr/src/project

  - Deploy with Environment Variables

    $ vercel -e NODE_ENV=production

  - Show the usage information for the sub command `list`

    $ vercel help list
```

It looks like the one we're going to care about is `vercel env`, so let's check the help for that command:

```shell
vercel env --help
```

Which should output something like this:

```shell
Vercel CLI 31.4.0

  ▲ vercel env [options] <command>

  Commands:

    ls      [environment] [gitbranch]         List all variables for the specified Environment
    add     [name] [environment] [gitbranch]  Add an Environment Variable (see examples below)
    rm      [name] [environment] [gitbranch]  Remove an Environment Variable (see examples below)
    pull    [filename]                        Pull all Development Environment Variables from the cloud and write to a file [.env.local]

  Options:

    -h, --help                     Output usage information
    --environment                  Set the Environment (development, preview, production) when pulling Environment Variables
    --git-branch                   Specify the Git branch to pull specific Environment Variables for
    -A FILE, --local-config=FILE   Path to the local `vercel.json` file
    -Q DIR, --global-config=DIR    Path to the global `.vercel` directory
    -d, --debug                    Debug mode [off]
    --no-color                     No color mode [off]
    -t TOKEN, --token=TOKEN        Login token
    -y, --yes                      Skip the confirmation prompt when overwriting env file on pull or removing an env variable

  Examples:

  - Pull all Development Environment Variables down from the cloud

      $ vercel env pull <file>
      $ vercel env pull .env.development.local

  - Add a new variable to multiple Environments

      $ vercel env add <name>
      $ vercel env add API_TOKEN

  - Add a new variable for a specific Environment

      $ vercel env add <name> <production | preview | development>
      $ vercel env add DB_PASS production

  - Add a new variable for a specific Environment and Git Branch

      $ vercel env add <name> <production | preview | development> <gitbranch>
      $ vercel env add DB_PASS preview feat1

  - Add a new Environment Variable from stdin

      $ cat <file> | vercel env add <name> <production | preview | development>
      $ cat ~/.npmrc | vercel env add NPM_RC preview
      $ vercel env add API_URL production < url.txt

  - Remove a variable from multiple Environments

      $ vercel env rm <name>
      $ vercel env rm API_TOKEN

  - Remove a variable from a specific Environment

      $ vercel env rm <name> <production | preview | development>
      $ vercel env rm NPM_RC preview

  - Remove a variable from a specific Environment and Git Branch

      $ vercel env rm <name> <production | preview | development> <gitbranch>
      $ vercel env rm NPM_RC preview feat1
```

One thing I love about the Vercel CLI is all the helpful examples they give you.

Most CLI tools I've used (even good ones like Heroku) don't give you all the great examples
for common use cases.  Nice work there Vercel.  🎉

So to add our environment variables, it looks like we're going to want this command:

```shell
vercel env add <name>
```

We could use the `Add a new variable for a specific Environment` example, and you would definitely
do this if you were adding variables for something like a database, where you had specific environments
or if you wanted to have a "staging" setup for ConvertKit.  I don't, and I'm fine with all of 
my test environments working just like production for newsletter subscriptions (at this point in time).

So I'll just use:

```shell
vercel env add CONVERTKIT_PUBLIC_API_KEY
```

When it prompts you for the value, paste in your key and hit enter.  Then, it will ask what environments
you want to add the variables.  For this circumstance, press **a** (for all), and hit enter.

Then, do the same thing for `CONVERTKIT_SUBSCRIBE_FORM_ID`.


```shell
vercel env add CONVERTKIT_SUBSCRIBE_FORM_ID
```

Now, you should be all set.  You may need to redeploy your app if you don't have a new commit going out
soon.

### Conclusion

And there you have it!  A ConvertKit newsletter subscription form that you can use on your site.

If I were going to take this to the next steps (which I did), I would add this to my MDXComponents
file so that I can just add `<Newsletter />` tags whenever relevant.

Hope this was helpful, and happy coding! 🦄⚡️

In this article, I'll teach you how to create a newsletter subscription form in NextJS, and connect to ConvertKit using NextJS api routes.

Newsletter Subscriptions with NextJS & ConvertKit


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 love the look of [Josh W. Comeau's blog](https://www.joshwcomeau.com), especially his attention to detail in his code components.
He makes them really friendly and approachable, but also usable, and fairly copy / pastable.

I wanted to try to emulate that on this blog, with titles, highlights and line-numbers.

> I don't typically use line numbers in my code blocks, but it really helps with figuring out which line numbers to highlight.

When I started on implementing this stuff, I saw that Josh was using [prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer)
in a custom MDX component. Problem was, I'm using [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote) to render my MDX files, and I couldn't figure out how to get the two to work together.

After about a day of messing with it, I decided I would, at leat for a while, sacrifice the flexibility of a custom component for
Go To Market speed 😉 and see if I could get `next-mdx-remote` working with plugins.

Here's how I did it.

## Switch from `@mapbox/rehype-prism` to `rehype-prism-plus`

Most of the changes for this ended up being `css` or in my `/src/pages/articles/[slug].jsx` files `getStaticProps` function,
which is where the MDX is processed.

Here was my original file.

```jsx:src/pages/articles/[slug].jsx
import { MDXProvider } from '@mdx-js/react';
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm'
import rehypePrism from '@mapbox/rehype-prism'
import remarkMdxCodeMeta from 'remark-mdx-code-meta';
import { MDXRemote } from 'next-mdx-remote'

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

const custom = {
  ul: props => <ul className="list-disc ml-2" {...props} />,
  li: props => <li className="font-light my-1 leading-6" {...props} />,
  hr: props => <hr className="my-16 border-zinc-300" {...props} />,
  a: props => <a {...props} target="_blank" rel="noopener noreferrer" />,
}


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

export async function getStaticPaths() {
  const articles = await getAllContent('articles');
  const paths = articles.map(a => `/articles/${a.slug}`);

  return {
    paths,
    fallback: false,
  };
}

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

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

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

I did some reading, and found that [rehype-prism-plus](https://www.npmjs.com/package/rehype-prism-plus) was a fork of `@mapbox/rehype-prism`
that allowed enabling line numbers and line highlighting.

I also found [rehype-code-titles](https://www.npmjs.com/package/rehype-code-titles) which allowed adding titles to code blocks.

So I added them as plugins.

```diff:src/pages/articles/[slug].jsx
import { MDXProvider } from '@mdx-js/react';
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm'
- import rehypePrism from '@mapbox/rehype-prism'
+ import rehypePrism from 'rehype-prism-plus'
+ import rehypeCodeTitles from 'rehype-code-titles'
import remarkMdxCodeMeta from 'remark-mdx-code-meta';
import { MDXRemote } from 'next-mdx-remote'

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

const custom = {
  ul: props => <ul className="list-disc ml-2" {...props} />,
  li: props => <li className="font-light my-1 leading-6" {...props} />,
  hr: props => <hr className="my-16 border-zinc-300" {...props} />,
  a: props => <a {...props} target="_blank" rel="noopener noreferrer" />,
}


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

export async function getStaticPaths() {
  const articles = await getAllContent('articles');
  const paths = articles.map(a => `/articles/${a.slug}`);

  return {
    paths,
    fallback: false,
  };
}

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

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

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

That produced HTML output that looked more correct.

```html:HTML {2-3}
<pre class="language-jsx">
  <code class="language-jsx code-highlight">
    <span class="code-line">
      
    </span>
  </code>
</pre>
```

Notice the `code-highlight` and `code-line` classes have been added.

## Adding the styles

I have a custom `tailwind.css` file that imports my prism styles like so:

```css:/src/styles/tailwind.css {4}
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './prism.css';
@import 'tailwindcss/utilities';
```

And my custom `prism.css` file looks like this:

```css:src/styles/prism.css
pre[class*='language-'] {
  color: theme('colors.zinc.100');
  margin-top: 1rem !important;
}

.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.selector.class,
.token.function {
  color: theme('colors.pink.400');
}

.token.attr-name,
.token.keyword,
.token.rule,
.token.pseudo-class,
.token.important {
  color: theme('colors.blue.300');
}

.token.module {
  color: theme('colors.purple.300');
}

.token.attr-value {
  color: theme('colors.blue.300');
}

.token.string {
  color: theme('colors.orange.300')
}

.token.class {
  color: theme('colors.teal.300');
}

.token.punctuation,
.token.attr-equals {
  color: theme('colors.zinc.500');
}

.token.unit,
.language-css .token.function {
  color: theme('colors.sky.200');
}

.token.comment {
  color: theme('colors.emerald.400');
  opacity: 0.7;
}

.token.property,
.token.operator,
.token.combinator {
  color: theme('colors.zinc.400');
}
```

So I found the [style guide for `rehype-prism-plus`](https://github.com/timlrx/rehype-prism-plus#styling) and made some edits:

```css:src/styles/prism.css {14-67}
pre[class*='language-'] {
  color: theme('colors.zinc.100');
  margin-top: 1rem !important;
}

/* ... token CSS ... */

.token.property,
.token.operator,
.token.combinator {
  color: theme('colors.zinc.400');
}

.code-highlight {
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */
  line-height: 1.5rem;
}

.code-line.inserted {
  background-color: theme('colors.emerald.900'); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: theme('colors.red.900'); /* Set deleted line (-) color */
}

.highlight-line {
  margin-left: -14px;
  margin-right: -16px;
  background-color: theme('colors.zinc.800'); /* Set highlight bg color */
  border-left: 2px solid theme('colors.amber.400'); /* Set highlight accent border color */
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  margin-left: -8px;
  color: theme('colors.zinc.500');
  content: attr(line);
}

.rehype-code-title {
  margin: 0 !important;
  display: inline-flex;
  position: relative;
  top: 1rem;
  left: 2rem;
  background: theme('colors.zinc.900');
  color: theme('colors.zinc.100');
  font-family: theme('fontFamily.mono');
  padding: 0.25rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border-top: 4px solid theme('colors.indigo.600');
  font-size: 0.8rem;
}
```

And that's that! 😎✨

## Using Code Block Titles in MDX

Adding a title to a code block is now really simple:

```md:MDX
'''jsx:src/components/ArticleLayout.js

'''
```

The string after the `:` will be the title of the code block, and will appear at the top left.

## Using Line Numbers in MDX

Adding line numbers to a code block is also really simple:

```md:MDX showLineNumbers
'''jsx showLineNumbers

'''
```

Easy peasy! 🍋🍋🍋

## Using Line Highlights in MDX

Lastly, here's how you can add line highlights to a code block:

```md:MDX {2}
'''jsx {2}
Here is the highlighted line!
'''
```

You can even do multiple lines, and ranges:

```md:MDX {2,4-5}
'''jsx {1,3-4}
Here is the highlighted line!

And 2 more
highlighted lines.
'''
```

## Putting it all together

Here's an example of using all 3 features in one code block:

```md:index.jsx {2,4-5} showLineNumbers
'''jsx:index.jsx {2,4-5} showLineNumbers
Here is the highlighted line!

And 2 more
highlighted lines.
'''
```

Though, like I said, I don't typically use  line numbers.

## Bonus: File diffs

One thing I realized as I was pasting the `CSS` for our code blocks were these classes:

```css:src/styles/prism.css
.code-line.inserted {
  background-color: theme('colors.emerald.900'); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: theme('colors.red.900'); /* Set deleted line (-) color */
}
```

After doing a little digging, I figured out that there was a `diff` language type that I could to show diffs.

Here's how to use it:

```txt:DIFF
'''diff
+ Added line
- Deleted line
'''
```

You simply select `diff` as the syntax language, then add `+` or `-` to the beginning of the line to indicate whether it was added or deleted.  The above block would result in:

```diff
+ Added line
- Deleted line
```

Pretty cool, eh?  😎✨

## Removing Remark Plugins

One last thing I noticed in my `getStaticProps` function was the Remark plugins that I added when I copied and pasted sample
code into this blog.

```jsx:src/pages/articles/[slug].jsx {8}
export async function getStaticProps({ params: { slug } }) {
  const { content, data } = await getContentItem(slug, 'articles');

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

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

I got curious to see if they did anything when I removed them, and they didn't.  So I removed them and the imports...

```diff:src/pages/articles/[slug].jsx
- import remarkGfm from 'remark-gfm'
import rehypePrism from 'rehype-prism-plus'
import rehypeCodeTitles from 'rehype-code-titles'
- import remarkMdxCodeMeta from 'remark-mdx-code-meta';


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

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

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

## Updating other `serialize` functions

Lastly, there were a couple of other places in my project that I needed to update my `serialize` function options:

```js:next-config.js {2,3,17}
import nextMDX from '@next/mdx'
import rehypePrism from 'rehype-prism-plus'
import rehypeCodeTitles from 'rehype-code-titles'

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx'],
  reactStrictMode: true,
  experimental: {
    scrollRestoration: true,
  }
}

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    rehypePlugins: [rehypeCodeTitles, rehypePrism],
    providerImportSource: '@mdx-js/react',
  },
})

export default withMDX(nextConfig)
```

This ensures any pages that straight MDX in my `/pages` directory will also have the code block features.

And finally, I'm generating an RSS feed in my `pages/index.jsx` file, so I needed to update that method as well,
otherwise, I was getting NextJS build errors.

```jsx:/src/pages/index.jsx {3}
export async function getStaticProps() {
  if (process.env.NODE_ENV === 'production') {
    await generateRssFeed()
  }

  const articles = (await getAllContent('articles'))
    .slice(0, 4)
    .map(({ component, ...meta }) => meta)

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

And the `generateRssFeed` function:

```js:src/lib/generateRssFeed.js {7,8,38-45}
import ReactDOMServer from 'react-dom/server'
import { Feed } from 'feed'
import { mkdir, writeFile } from 'fs/promises'
import { withRouter } from 'next/router'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
import rehypePrism from 'rehype-prism-plus'
import rehypeCodeTitles from 'rehype-code-titles'

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

export async function generateRssFeed() {
  let articles = await getAllContent('articles')
  let siteUrl = process.env.NEXT_PUBLIC_SITE_URL
  let author = {
    name: 'Ty Barho',
    email: 'ty@tybarho.com',
  }

  let feed = new Feed({
    title: author.name,
    description: 'Writing on technology, dad-hacking, and spiritual formation.',
    author,
    id: siteUrl,
    link: siteUrl,
    image: `${siteUrl}/favicon.ico`,
    favicon: `${siteUrl}/favicon.ico`,
    copyright: `All rights reserved ${new Date().getFullYear()}`,
    feedLinks: {
      rss2: `${siteUrl}/rss/feed.xml`,
      json: `${siteUrl}/rss/feed.json`,
    },
  })

  for (let article of articles) {
    let url = `${siteUrl}/articles/${article.slug}`
    const mdxSource = await serialize(article.content, {
      // Optionally pass remark/rehype plugins
      components,
      mdxOptions: {
        rehypePlugins: [rehypeCodeTitles, rehypePrism],
      },
      scope: article.data,
    })

    let html = ReactDOMServer.renderToStaticMarkup(
      <MDXRemote {...mdxSource} components={components} />
    )

    feed.addItem({
      title: article.data.title,
      id: url,
      link: url,
      description: article.data.description,
      content: html,
      author: [author],
      contributor: [author],
      date: new Date(article.data.date),
    })
  }

  await mkdir('./public/rss', { recursive: true })
  await Promise.all([
    writeFile('./public/rss/feed.xml', feed.rss2(), 'utf8'),
    writeFile('./public/rss/feed.json', feed.json1(), 'utf8'),
  ])
}

```

And that's that!  🎉  Hope you enjoyed!

It took me a lot of messing with different libararies to get the next-mdx-remote working with line numbers and highlighted lines.  Here's how I did it.

Titles, highlights, and line numbers with next-mdx-remote


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.

Filtering by Publish Date in your NextJS MDX Blog


A lifetime ago, I was primarily a UX designer.  Nothing was more fun than openeing my design tool of choice and creating a beautiful, shareable image for a blog post.

Nowawdays, with engineering as the priority, I don't have time to create these image manually, but I still want them to look good.

Enter [@vercel/og]().  🚀

With this library from [Vercel](), we'll get set up to dynamically generate nice-looking shareable images for our posts.

## Getting Started

First, we'll need to install the package.

```bash
$ yarn add @vercel/og
```

## Building the base API Route

To start, we'll create a file at `/pages/api/og.js`.  This will be our base API route for generating our images.

```js:/src/pages/api/og.js
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <p>Hello world</p>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}
```

Visiting [http://localhost:3000/api/og](http://localhost:3000/api/og) should now render a simple image with the text "Hello world".  Like this:

> Note: Image generation can be slow...

![OG Sample 1](/images/og-sample-1.png)

## Adding a custom background image

I use [TailwindCSS]() for my styling, and `@vercel/og` has [experimental support](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-tailwind-css---experimental) for it, so let's try it out.

```js:src/pages/api/og.js {20,23-25}

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`
        }}
      >
        <div tw="flex relative w-[100%] h-[100%]">
          <p tw="text-white text-7xl tracking-tighter top-10 right-10 absolute text-right max-w-4xl">Hello World</p>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

```

This should land you with something that looks like this:

![OG Sample 2](/images/og-sample-2.png)

## Handling custom sizes

Now, not all platforms want the same size image, so we'll want to customize the returned size based on the platforms we're targeting.  Let's go ahead and make that dynamic.

```js:src/pages/api/og.js {10-11,33-34}
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler(req) {
  const { searchParams } = req.nextUrl;

  const width = searchParams.get('w') ? parseInt(searchParams.get('w'), 10) : 1200;
  const height = searchParams.get('h') ? parseInt(searchParams.get('h'), 10) : 630;

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`
        }}
      >
        <div tw="flex relative w-[100%] h-[100%]">
          <p tw="text-white text-7xl tracking-tighter top-10 right-10 absolute text-right max-w-4xl">Hello World</p>
        </div>
      </div>
    ),
    {
      width,
      height,
    },
  );
}

```

This should let you query your image with new parameters.  For example if you wanted and `800x800` image, simply query the url [http://localhost:3000/api/og?w=800&h=800](http://localhost:3000/api/og?w=800&h=800), and you should get this:

![OG Sample 3](/images/og-sample-3.png)

See where we're going with this?  😎

## Enabling dynamic text in your OG images

Now that we're familiar with adding parameters, let's add dynamic text to our image.  While we're at it, let's add a little `textShadow` to make it pop.


```js:src/pages/api/og.js {10,33-38}
import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default async function handler(req) {
  const { searchParams } = req.nextUrl

  const text = searchParams.get('c') || 'Check out tybarho.com!'
  const width = searchParams.get('w')
    ? parseInt(searchParams.get('w'), 10)
    : 1200
  const height = searchParams.get('h')
    ? parseInt(searchParams.get('h'), 10)
    : 630

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`,
        }}
      >
        <div tw="flex relative w-[100%] h-[100%] p-8">
          <p
            tw="text-white text-7xl tracking-tighter text-right"
            style={{ textShadow: '1px 1px 30px #00000070' }}
          >
            {text}
          </p>
        </div>
      </div>
    ),
    {
      width,
      height,
    }
  )
}
```

That should give you something that looks like this:

![OG Sample 4](/images/og-sample-4.png)

## Adding a friendly avatar

I'd also like my ugly mug to show up on these posts, to give them a little more personality.  Let's add that in.

We'll be a little fancy, and use a dynamic Github username to pull the current profile pic from Github.

```js:src/pages/api/og.js {12,41-43}
import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default async function handler(req) {
  const { searchParams } = req.nextUrl

  
  const text = searchParams.get('c') || 'Check out tybarho.com!'
  const username = searchParams.get('username') || 'tbarho'
  const width = searchParams.get('w')
    ? parseInt(searchParams.get('w'), 10)
    : 1200
  const height = searchParams.get('h')
    ? parseInt(searchParams.get('h'), 10)
    : 630

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`,
        }}
      >
        <div tw="flex relative w-[100%] h-[100%] p-8">
          <p
            tw="text-white text-7xl tracking-tighter text-right"
            style={{ textShadow: '1px 1px 30px #00000070' }}
          >
            {text}
          </p>
          <div tw="bg-white rounded-full w-64 h-64 absolute bottom-8 left-8 flex justify-center items-center shadow-xl">
            <img tw="w-60 h-60 rounded-full" src={`https://www.github.com/${username}.png`} />
          </div>
        </div>
      </div>
    ),
    {
      width,
      height,
    }
  )
}

```

This should result in something that looks like this...

![OG Sample 5](/images/og-sample-5.png)

## Adding automatic OG Images to our blog route

Finally, let's add these images to our blog route.

I need a number of different sizes to be generated for different social networks, 
so I'm going to create a little helper function that I can import into my pages.

```js:src/lib/ogSizes.js
const BASE_URL = __DEV__ ? 'http://localhost:3000' : 'https://www.mysite.com'

export const ogSizes = [
  {
    path: 'Facebook',
    width: 940,
    height: 788,
  },
  {
    path: 'Instagram',
    width: 1080,
    height: 1080,
  },
  {
    path: 'LinkedIn',
    width: 1200,
    height: 1200,
  },
  {
    path: 'Twitter',
    width: 1600,
    height: 900,
  },
  {
    path: 'Pinterest',
    width: 1000,
    height: 1500,
  },
];
```

The `path` attribute is really just there for my own reference.

Next, let's update the layout file for our blog posts.  If you haven't set up `next-seo` yet, check out [this article on setting up NextSeo on your site](https://www.tybarho.com/articles/adding-next-sitemap-to-your-nextjs-site).


```js:src/pages/blog/[slug].js {2,7-9,12-17, 29}
// ... other imports
import { ogSizes, BASE_URL } from '../../lib/ogSizes'

export default function Page({ meta }) {
  // ... other code

  const title = `${meta.title} - ${meta.author}`;
  const description = meta.description;
  const canonical = `https://www.tybarho.com${router.asPath}`;

  // Map our images helper
  const images = ogSizes.map(({ width, height }) => ({
    url: `${BASE_URL}/api/og?c=${encodeURIComponent(meta.title)}&username=[your_gh_username]&w=${width}&h=${height}`,
    width,
    height,
    type: 'image/png'
  }));

  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
          images,
        }}
      />
      {/* ... other page code*/}
    </>
  );
}
```

Now, if you check out the developer console in your browser, you should see the OG image tags being added to your `<head>` tag.

![OG Images Tags](/images/og-images-tags.png)

## Wrap Up

So there you go.  Automatic, "fancy," OG images on your NextJS site.  Feel free to experiment and go as hog-wild as you want.

I recommend checking out the [`@vercel/og` docs](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-an-external-dynamic-image) for more interesting things you can do.

Happy coding! ✨


Tired of having to build nice looking OG images for every platform manually?  Automatically create shareable OG images for every blog post with @vercel/og.

Adding Fancy OG Images to your NextJS MDX Blog


Today I'm going to do some basic SEO work for this site.  I thought I would take the opportunity
to log my how-to here.  More content, right? 😉

Here are the additions I'll be making:

1.  A statically generated sitemap & robots.txt
2.  Basic SEO & OpenGraph data to all pages & articles

To implement this stuff, I'll be using 2 excellent packages:

1. [next-sitemap](https://www.npmjs.com/package/next-sitemap)
2. [next-seo](https://www.npmjs.com/package/next-seo)

Let's get started.

## Adding a sitemap in your NextJS site

First thing you'll want to do is add the package to your site

```
$ yarn add next-sitemap
```

Then, in your `package.json` file, you're going to want to set up a `postbuild` script.  Mine looks like this:

```json:package.json {9}
{
  "name": "tybarho.com",
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },
}

```

Now, I want to be sure that all of my markdown files are indexed to my generated sitemaps.  Sitemaps are generated **after** NextJS
statically builds my site.  For some context, here is my _rough_ folder structure:

```txt {3-7}
/src
  /components
  /content
    /articles
      slug-of-article.mdx
    /lessons
      slug-of-lesson.mdx
  /pages
    index.js
    /articles
      [slug].js
      index.js
    /lessons
      [slug].js
      index.js
```

So I need to tell `next-sitemap` about the files in `/content/articles` and `/content/lessons`.  Luckily, I can do this with a custom config.

To add a custom config, in your project root, add a file called `next-sitemap.config.js`.  For my site, this will be the contents of that file.

```js:next-sitemap.config.js
const fs = require('fs')
const path = require('path')

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) {
      result.push(
        await config.transform(
          config,
          `/articles/${article.replace('.mdx', '')}`
        )
      )
    }

    for (const lesson of lessons) {
      result.push(
        await config.transform(config, `/lessons/${lesson.replace('.mdx', '')}`)
      )
    }

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

To test it out, run:

```bash
$ yarn postbuild
```

This should generate files at `/public/sitemap.xml` and `/public/sitemap-0.xml` that you can review to make sure they look right, and all your pages are included.

And that's that!

> **NOTE:** If you're not seeing every page in your sitemap, try re-running the full `yarn build` command to generate a new `/.dist` folder.

## Adding decent SEO to your NextJS site

Now, to add some SEO & OpenGraph data to my pages, I'm going to use the [next-seo](https://www.npmjs.com/package/next-seo) package.

Start by installing it:

```bash
$ yarn add next-seo
```

Now, the first thing we want to do is add some base SEO to every page on our site.  We can do this by editing our `pages/_app.jsx`.  If you don't have one, create one.

```jsx:src/pages/_app.jsx {2,20,27-34}
import { useEffect, useRef } from 'react'
import { DefaultSeo } from 'next-seo'

import { Footer } from '@/components/Footer'
import { Header } from '@/components/Header'

import '@/styles/tailwind.css'
import 'focus-visible'

function usePrevious(value) {
  let ref = useRef()

  useEffect(() => {
    ref.current = value
  }, [value])

  return ref.current
}

const baseUrl = 'https://www.tybarho.com'

export default function App({ Component, pageProps, router }) {
  let previousPathname = usePrevious(router.pathname)

  return (
    <>
      <DefaultSeo
        openGraph={{
          type: 'website',
          locale: 'en_US',
          url: `${baseUrl}`,
          site_name: 'TyBarho.com',
        }}
      />
      <div className="fixed inset-0 flex justify-center sm:px-8">
        <div className="flex w-full max-w-7xl lg:px-8">
          <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
        </div>
      </div>
      <div className="relative">
        <Header />
        <main>
          <Component previousPathname={previousPathname} {...pageProps} />
        </main>
        <Footer />
      </div>
    </>
  )
}
```

The main thing here is the `<DefaultSeo ... />` component we're adding.  There are a [ton of options](https://github.com/garmeeh/next-seo#nextseo-options) you can configure, but we're just starting with some base ones.

Now, let's add some custom SEO data to our home page.

```jsx:src/pages/index.js {2,7-9,13-22}
// Other imports
import { NextSEO } from 'next-seo';

// ...

export default function Home({ articles }) {
  const title = 'Ty Barho'
  const description = "I'm Ty, a software designer and entrepreneur based in Georgetown, Texas. I like to make things that help people."
  const canonical = 'https://www.tybarho.com';
  
  return (
    <>
      <NextSEO
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
        }}
      />
      <Container className="mt-9">
      {/* rest of code */}
    </>
  );
}
```

Now, open your developer console to verify the new SEO data is on your page.

![NextSEO Check Image](/images/next-seo-check.png 'image_tooltip')


Looks like it worked! ✨🦄

Now you can easily add SEO data to any page on your NextJS site.

## Checking your OG Data

Once you've deployed your site, or using a tool like [ngrok](https://ngrok.com/), you probably want to see what your OG data is going to look like on different platforms.

My favorite site for this is [OpenGraph.XYZ](https://www.opengraph.xyz/).

Just put your URL in, and you'll get a nice preview of what your OG data will look like on different platforms.

![OpenGraph.XYZ](/images/opengraphxyz-p22.png 'image_tooltip')

And that's that!  Happy SEO-ing!  🚀


Today I'm doing some SEO optimization for the tybarho.com NextJS SSG site, and sharing my how-to along the way.

Adding a Sitemap & SEO to your NextJS Statically Generated Site


I recently wanted / needed to speed up how I prepare for teaching lessons on Sundays. What I realized quickly was that
I was going to need to build something custom. As part of that build process, I wanted to make sure
I was sharing what I built for others to use, in case they find it helpful.

## Some Background

I've been teaching intermittently on Sundays for a little over a year now. Over about [17 lessons](/lessons), I've
figured out, out least for myself, it takes about 3-4 hours to prep a lesson.

Here's what my process typically looks like.  I've **bolded** the items that are purely clerical.

- **Open a Google Doc**
- **Copy some basic formatting from a previous lesson**
- Intro study of the Scripture I'm covering
- Starting breaking Scripture into sections.  I was generally entering in the OSIS to [BibleGateway](https://www.biblegateway.com), then copying the text into my doc
- Write an engaging, researched Q&A for each section of Scripture
- **Save the Google Doc as a PDF on Google Drive**
- **Make the PDF public**
- **Save the PDF to my Remarkable**
- **Use a free QR code generator to create a QR code that points to the public PDF**
- **Validate the QR Code with my phone**
- **Open a new Google Doc**
- **Paste the QR Code into the Doc**
- **Save as a PDF**
- **Save the PDF to my Remarkable**
- **Print the QR Code**

The number of **clerical** steps seemed to be a bit ridiculous to me, so I decided to see if I could eliminate them.

What I eventually ended up doing was creating the [lessons](/lessons) section of this site, which uses:

- NextJS to statically render MDX
- A `<Verse />` component
- A `<Question />` component
- Dynamically generated QR codes

This structure gives me a lot of flexibility, which I'll probably go into in another post, but today, I just want to share the `<Verse /`> React component.

## The `<Verse />` Component

To keep it simple, I'll show you the usage.

### Usage

```jsx
<Verse verse="Genesis 1:1-3" />
```

This will output...

---

<Verse verse="Genesis 1:1-3" />

---

No lookup, copying, pasting, formatting... it just works.  Nice.

### The Component Code

```jsx:src/components/Verse.js
import React, { useState, useEffect } from 'react';


export function Verse({ verse = '1 Thessalonians 1:5-6' }) {
  const [content, setContent] = useState(null);

  useEffect(() => {
    (async function fetchVerse() {
      const res = await fetch(`/api/verses?verse=${verse}`,{
        method: 'GET',
      })

      const json = await res.json();

      const { content } = json;

      const slice = /^[0-9]{1}/.test(content[5]) ? 5 : 6;
      const clean = content.slice(slice, content.length - 2).join(' ').replace(/$[a-zA-Z0-9]+$/gi, '').replace(/\[[a-z]+\]/gi, '').replace(
        'Sign Up For Weekly Updates Sign up now for the latest news and deals from Bible Gateway!',
        ''
      );

      setContent(clean);
    })();
  }, []);

  if (!content) {
    return <>No verse yet...</>
  }

  // This uses Tailwind CSS for the styling
  return (
    <div className="my-4">
      <h2 className="font-semibold tracking-tight">Read {verse}</h2>
      <div className="text-zinc-800 font-light text-sm mt-4 dark:text-zinc-300">
        {content}
      </div>
    </div>
  );
}

export default Verse;
```

As you can see, it does connect to my local NextJS `api`, so here is the code for that...

### The API Code

To fetch the verse from [BibleGateway](https://www.biblegateway.com), I'm using the [bible-gateway-api](https://www.npmjs.com/package/bible-gateway-api) package.

```bash
$ yarn add bible-gateway-api
```

There is some risk with this library, because under the hood, it's really just scraping the HTML from BibleGateway.  However, it's been working well for me so far, and
since this is a pet project that I only use for teaching classes, I'm not too worried about it.

```javascript:src/api/verse.js

import { BibleGatewayAPI } from "bible-gateway-api";
 
let bgw = new BibleGatewayAPI();

export default async function handler(req, res) {
  const { verse: verseParam } = req.query;

  if (!verseParam) {
    res.status(400).json({ error: 'No verse provided' });
    return;
  }

  const { verse, content } = await bgw.search(verseParam, 'CSB');

  res.status(200).json({ verse, content })
}
```

Pretty straight-forward, eh?

## Pitfalls

The major pitfalls of this component are:

1. **It doesn't yet support SSG.**  I will likely be adding that soon, and will post on it when I do.  This was a quick fix for teaching lessons, and not a true SEO play.
2. **BibleGateway API changes.**  Obviously I don't control that codebase, so there's always some chance that my component (or API route, rather) will muck up at some point.
3. **It should probably reference BibleGateway with some link credit.**  Again, this was a rapid prototype, and I'll probably add that soon.


Still, it's been a huge time-saver so far, and helps me write nice clean lessons in MDX.  Here's an excerpt from a recent lesson on [John 4](/lessons/john-4-1-26):

```jsx:example.mdx

<Verse verse="John 4:1-7" />
<Question>Traditionally, all of the women in a town or village would go to draw water together early in the morning.  John tells us that the woman was by herself, and that it was mid-day (or about noon).  Why do you think this was?</Question>
<Question>It sounds like Jesus is barking an order a bit.  If we examine more closely, what has John established that helps us paint a clearer picture?  What picture is that?</Question>

<Verse verse="John 4:9" />
<Question>What is the woman’s posture right here?  What do you think she might be thinking, especially given her life circumstances, and how her community probably views her?</Question>

<Verse verse="John 4:10" />
<Question>What is Jesus saying here?  What is the gift of God?  Why doesn’t the Samaritan woman know it?</Question>
<Question>What are Jesus’ implications with the phrase “he would give you”?</Question>

```

Stay tuned for more posts on how I put this together!





My component and api code for a simple component that takes an OSIS string like Gen.1.1 and imports the verse text