Sanity.io components in 11ty

web|_data|basicpages.js

const groq = require('groq')
const BlocksToMarkdown = require('@sanity/block-content-to-markdown')
const client = require('../utils/sanityClient.js')
const serializers = require('../utils/serializers')
const overlayDrafts = require('../utils/overlayDrafts')
const hasToken = !!client.config().token

function generateBasicpage (basicpage) {
  return {
    ...basicpage,
    body: BlocksToMarkdown(basicpage.body, { serializers, ...client.config() })
  }
}

async function getBasicpages () {
  const filter = groq`*[_type == "basicpage" && defined(slug)]`
  const projection = groq`{
    _id,
    publishedAt,
    title,
    slug,
    pageBuilder,
    body[]{
      ...,
      children[]{
        ...,
        // Join inline reference
        _type == "authorReference" => {
          // check /studio/documents/authors.js for more fields
          "name": @.author->name,
          "slug": @.author->slug
        }
      }
    },
  }`
  const order = `| order(publishedAt asc)`
  const query = [filter, projection, order].join(' ')
  const basicpages = await client.fetch(query).catch(err => console.error(err))
  const reducedBasicpages = overlayDrafts(hasToken, basicpages)
  const prepareBasicpages = reducedBasicpages.map(generateBasicpage)
  return prepareBasicpages
}

module.exports = getBasicpages

web|_includes|basicpage.njk

---
layout: layouts/base.njk
---

<article>
  <h1>{{ basicpage.title }}</h1>
  {{ basicpage.body | markdownify | safe }}
  {% for component in basicpage.pageBuilder %}
    {% set componentType = component._type %}
    {% if componentType == 'hero' %}
      {%- include "components/hero.njk" -%}
    {% elseif componentType == 'textWithIllustration' %}
      {%- include "components/textWithIllustration.njk" -%}
    {% endif %}
  {% endfor %}
</article>

web|_includes|layouts|hero.njk

{# Styling #}
{% set css %}{% include "_site/dist/css/components/hero.css" %}{% endset %}

{# Markup #}
<section class="hero component">
  <style>{{ css | cssmin | safe }}</style>
  <header class="hero__content">
    <div class="hero__inner">
      <div class="hero__body">
        <h2 class="hero__title">{{ component.heading }}</h2>
        <p class="hero__tagline">{{ component.tagline }}</p>
      </div>
    </div>
  </header>
  <div class="hero__image"><img src="{% croppedUrlFor component.image, '1290', '500' %}" alt="{{ component.image.alt }}" /></div>
</section>

web|basicpage.njk

---
layout: layouts/basicpage
tags:
  - myBasicpages
pagination:
  alias: basicpage
  data: basicpages
  size: 1
  addAllPagesToCollections: true
permalink: /{{ basicpage.slug.current | slug }}/index.html
---