Building a static website with reusable blocks, using ZeroPoint Starter

Blocks, components, modules, widgets, partials, or whatever you call them are a common way designers and stakeholders expect to visualize websites.

ZeroPoint Starter includes eleventy-plugin-reusable-components preconfigured (and commented out), which makes it easy to create and manage reusable HTML components.

This guide will show you how to install and configure the plugin and create your first reusable block. In the Advanced Usage section, you'll learn how to integrate reusable blocks with a git-based CMS like Decap CMS or Sveltia CMS.

Advantages of Reusable Blocks

• 🧱 Build pages with pre-designed blocks
• 🔄 Easily update content across multiple pages
• 🎨 Maintain consistent design and layout
• ⚙️ Simplify collaboration between designers and developers

Get Started with Reusable Blocks

1. Install the Plugin

   Install the Eleventy Reusable Components plugin:

   npm install --save-dev eleventy-plugin-reusable-components

2. Configure the Plugin

   Uncomment the plugin's configuration in src/config/plugins.js:

   import reusableComponents from "eleventy-plugin-reusable-components";
   
   export default function (eleventyConfig) {
     eleventyConfig.addPlugin(reusableComponents, {
       componentsDir: "src/assets/components/*.njk"
     });
   }

3. Create Your First Component

   Create a new file in the src/assets/components/ directory named text.njk:

   ---
   # Required fields
   title: Text
   
   # Default Values
   textContent: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
   
   # CMS fields
   cms:
     - label: "Text Content"
       name: "textContent"
       widget: "markdown"
   ---
   
   <section class="component component-{{ title | slugify }}">
     {{- textContent | safe -}}
   </section>

   This component has a single field, textContent. The default value is a block of placeholder text.

   Use Your Component

   Open any page on your site and add the following anywhere in the content:

   {{-
     {
       "type": "text",
       "value": "Hello, world!"
     } | renderComponent | safe
   -}}

   See the Eleventy Reusable Components documentation for complete usage instructions.

Advanced Usage

1. Use Components in a CMS

   Eleventy's data cascade makes it easy to integrate reusable components with a CMS like Decap CMS or Sveltia.

   1. Install a CMS

      Follow the Adding a CMS guide.

   2. Generate Editor Components

      To make your reusable components available in the CMS editor, create a new file named content/admin/editor-components.js.jk with the following content:

      content/admin/editor-components.js.njk

      ---
      eleventyExcludeFromCollections: true
      permalink: "/admin/editor-components.js"
      ---
      
      const componentData = [
      
      ];
      
      componentData.forEach(data => {
        window.CMS.registerEditorComponent({
          id: `${data.name}-component`,
          label: data.label,
          fields: data.fields,
          pattern: new RegExp(
            String.raw`^\{\{\-?\s*\{(?=[^}]*\n?"type":\s*"${data.name}")([\s\S]*?)\}\s*\|\s*renderComponent\s*\|\s*safe\s*\-?\}\}$`
          ),
      
          fromBlock: function(match) {
            let props = {};
            try {
              props = JSON.parse('{' + match[1].trim() + '}');
            } catch (e) {
              console.error('Error parsing block JSON:', match[1], e);
              return {};
            }
            return props;
          },
      
          toBlock: function(obj) {
            // Serialize all field values (not just obj.props)
            var json = JSON.stringify(obj, null, 2);
            // Add a line break before the type as the first json object key
            json = json.replace(/^{/, '{\n"type": "' + data.name + '",');
            return '{\{- ' + json + ' | renderComponent | safe -}\}';
          },
      
          toPreview: function(obj) {
            return `<div style='border:1px solid #ccc;padding:1em;'><strong>${data.label}</strong><pre>${JSON.stringify(obj.props, null, 2)}</pre></div>`;
          }
        });
      });

      This file generates a JavaScript array of your reusable components and registers them with the CMS.

   3. Add the Script to the CMS Template

      Add the following line to content/admin/admin.yml:

      content/admin/admin.yml

      <script src="/admin/editor-components.js"></script>

      You can now add your reusable components to any page managed by the CMS!

2. Bundle Styles with Components

   Coming soon!

---

• Back Home
• Previous: Adding a CMS