I often get asked how I build robust forms quickly.  In this article, I'll show how to quickly build a form with React Hook Form, TailwindCSS, and Yup

Building forms quickly with React, React Hook Form, TailwindCSS and Yup


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


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

react.