MWDelaney · MWDelaney · Aug 4, 2022 · Aug 4, 2022 · Sep 19, 2022 · Sep 19, 2022
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,6 @@ public
 
 # macOS related files
 .DS_Store
+
+# Local Netlify folder
+.netlify
diff --git a/src/assets/scripts/NetlifyCMS/collapse.js b/src/assets/scripts/NetlifyCMS/collapse.js
@@ -0,0 +1,46 @@
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "collapse",
+
+  // Visible label in NetlifyCMS
+  label: "Collapse",
+
+  // Fields the user needs to fill out when adding an instance of the component. Follows the NetlifyCMS pattern:
+  //  https://www.netlifycms.org/docs/widgets/
+  fields: [
+    { name: 'title', label: 'Title', widget: 'string' },
+    { name: 'content', label: 'Content', widget: 'markdown' }
+  ],
+
+  // Pattern to identify a block as being an instance of this component.
+
+  // Shortcode pattern
+  pattern: /^{\% collapse \"(\S+)\" \%}([\s\S]*?){\% endcollapse \%}$/,
+
+  // HTML pattern
+  // pattern: /^<details>$\s*?<summary>(.*?)<\/summary>\n\n(.*?)\n^<\/details>$/ms,
+
+
+  // Function to extract the data from the matched block
+  fromBlock: function(match) {
+    return {
+      title: match[1] ? match[1].trim() : '',
+      content: match[2] ? match[2].trim() : ''
+    };
+  },
+
+  // Function to create a block from an instance of this component
+  toBlock: function(obj) {
+    return `{% collapse "${obj.title}" %}\n${obj.content}\n{% endstrong %}`;
+  },
+
+  // What to preview in NetlifyCMS
+  toPreview: function(obj) {
+    return (
+      `<details>
+        <summary>${obj.title}</summary>
+        ${obj.content}
+      </details>`
+    );
+  }
+});
diff --git a/src/assets/views/layouts/base.njk b/src/assets/views/layouts/base.njk
@@ -51,5 +51,6 @@
 
     {# Script bundle #}
     {% script "src/assets/scripts/main.js" | url %}
+    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
   </body>
 </html>
diff --git a/src/config/shortcodes.js b/src/config/shortcodes.js
@@ -49,5 +49,18 @@ module.exports = {
     }
 
     eleventyConfig.addNunjucksShortcode("image", imageShortcode);
+  },
+
+
+  collapse: function (eleventyConfig) {
+    // Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
+    eleventyConfig.addPairedShortcode("collapse", function (title, content) {
+      return `
+          <details>
+            <summary>${title}</summary>
+            ${content}
+          </details>
+        `;
+    });
   }
 }
diff --git a/src/content/admin-config.njk b/src/content/admin-config.njk
@@ -0,0 +1,22 @@
+---
+eleventyExcludeFromCollections: true
+permalink: "/admin/config.yml"
+---
+backend:
+  name: git-gateway
+  branch: editor-components
+media_folder: "src/assets/images"
+public_folder: "/assets/images"
+collections:
+  - name: "pages"
+    label: "Pages"
+    editor:
+      preview: false
+    folder: "src/content/pages"
+    create: true
+    extension: "md"
+    format: "frontmatter"
+    fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "Permalink Override (Pattern: '/your-slug/')", name: "permalink", widget: "string", required: false }
+      - { label: "Body", name: "body", widget: "markdown" }
diff --git a/src/content/admin.njk b/src/content/admin.njk
@@ -0,0 +1,21 @@
+---
+permalink: '/admin/index.html'
+eleventyExcludeFromCollections: true
+---
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content Manager</title>
+
+  {% script "src/assets/scripts/NetlifyCMS/collapse.js" | url %}
+
+</head>
+<body>
+  <!-- Include the script that builds the page and powers Netlify CMS -->
+  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
+
+</body>
+</html>
diff --git a/src/content/pages/index.njk b/src/content/pages/index.njk
@@ -8,6 +8,10 @@ title: Up to zero! 🪐
   <li>Edit this page: <code>src/pages/index.md</code></li>
   <li>Add or edit navigation: <code>src/data/navigation.json</code></li>
   <li>Change colors and styles: <code>src/assets/styles/</code></li>
+
+  {% collapse "This is a collapse" %}
+    Some content is collapsed
+  {% endcollapse %}
 </ul>
 
 <hr>