Taylor Beseda

First Post with Sanity.io

My first post in Sanity.io's Content Lake. Created with Sanity Studio.

A photo of the canyon at my house. There's an intense fog with a rainstorm in the background.
A photo from my house in Colorado

Render PortableText to HTML

import { toHTML } from '@portabletext/to-html'
import imageUrlBuilder from '@sanity/image-url'
import { client as sanityClient } from './sanity-client.mjs'

const builder = imageUrlBuilder(sanityClient)

export function renderArticle(article) {
  const rendered = toHTML(article.content, {
    components: {
      types: {
        image: ({ value }) => {
          return `
            <figure>
              <img src="${builder.image(value).url()}" alt="${value.alt}" />
              <figcaption>${value.caption}</figcaption>
            </figure>
          `.trim()
        },
        code: ({ value }) => {
          const code = value.code
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;')
          return `
            <pre><code>${code}</code></pre>
          `.trim()
        },
      },
    },
  })
  return rendered
}

from Sanity.io (177.87ms) to HTML (13.54ms)