.eleventy.js

require("dotenv").config();
const marked = require("marked");
const contentful = require("contentful");
const jsx = require("eleventy-plugin-static-jsx");

const client = contentful.createClient({
  // This is the space ID. A space is like a project folder in Contentful terms
  space: process.env.CTFL_SPACE,
  // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
  accessToken: process.env.CTFL_ACCESSTOKEN,
});

const { documentToHtmlString } = require("@contentful/rich-text-html-renderer");

function imageProcessing(photo) {
  return `
    <img class='u-max-full-width'
        srcset="https:${photo.fields.file.url}?w=480&fm=webp&q=80&fit=fill&f=faces 480w,
        https:${photo.fields.file.url}?w=800&fm=webp&q=80&fit=fill&f=faces 800w" sizes="(max-width: 600px) 480px,800px"
        src="https:${photo.fields.file.url}?w=480&fit=fill&f=faces"
        alt="${photo.fields.title}" loading="lazy">
    `;
}

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(jsx);
  eleventyConfig.addPassthroughCopy("assets");
  eleventyConfig.addPassthroughCopy("images");

  eleventyConfig.addShortcode("documentToHtmlString", documentToHtmlString);
  eleventyConfig.addShortcode("imageProcessing", imageProcessing);
  eleventyConfig.addShortcode("marked", marked);

  eleventyConfig.addShortcode("bannerBlock", function (bannerBlock) {
    return `
        <section id="wrapper">
            <header id="${bannerBlock.fields.sectionLink}">
                <div class="inner">
                    <h2>${bannerBlock.fields.sectionTitle}</h2>
                    ${documentToHtmlString(bannerBlock.fields.content)}
                </div>
            </header>
        </section>
    `;
  });
  eleventyConfig.addShortcode("contentBlock", function (contentBlock) {
    return `
        <section id="${contentBlock.fields.sectionLink}">
            <div class="wrapper">
                <div class="inner">
                    <h3 class="major">${contentBlock.fields.sectionTitle}</h3>
                    ${documentToHtmlString(contentBlock.fields.content)}
                </div>
            </div>
        </section>
    `;
  });

  eleventyConfig.addShortcode("footerBlock", function (footerBlock) {
    return `
        <section id="footer">
            <div class="inner">
                <div class="copyright">
                    ${marked(footerBlock.fields.content)}
                </div>
            </div>
        </section>
    `;
  });

  eleventyConfig.addShortcode("cardBlock", async function (cardBlock) {
    const output = await Promise.all(
      cardBlock.fields.cards.map(({ sys }) => {
        return (cards = client.getEntry(sys.id).then((card) => {
          return `
            <article>
                <a href="#" class="image">${imageProcessing(
                  card.fields.image
                )}</a>
                <h3 class="major">${card.fields.sectionTitle}</h3>
                ${documentToHtmlString(card.fields.content)}
            </article>
            `;
        }));
      })
    );
    return `
        <section id="${
          cardBlock.fields.sectionLink
        }" class="wrapper alt style1">
            <div class="inner">
                <h2 class="major">${cardBlock.fields.sectionTitle}</h2>
                <section class="features">
                    ${output.join("")}
                </section>
            </div>
        </section>
    `;
  });

  eleventyConfig.addShortcode("featuretteBlock", function (featuretteBlock) {
    if (featuretteBlock.fields.imageLocation) {
      return `
        <section id="${
          featuretteBlock.fields.sectionLink
        }" class="wrapper spotlight style1">
            <div class="inner">
                <a href="#" class="image">${imageProcessing(
                  featuretteBlock.fields.image
                )}</a>
                <div class="content">
                    <h2 class="major">${
                      featuretteBlock.fields.sectionTitle
                    }</h2>
                    ${documentToHtmlString(featuretteBlock.fields.content)}
                </div>
            </div>
        </section>
    `;
    } else {
      return `
        <section id="${
          featuretteBlock.fields.sectionLink
        }" class="wrapper alt spotlight style2">
            <div class="inner">
                <a href="#" class="image">${imageProcessing(
                  featuretteBlock.fields.image
                )}</a>
                <div class="content">
                    <h2 class="major">${
                      featuretteBlock.fields.sectionTitle
                    }</h2>
                    ${documentToHtmlString(featuretteBlock.fields.content)}
                </div>
            </div>
        </section>
    `;
    }
  });
};