diff --git a/.gitignore b/.gitignore index 38cdc79..e235160 100644 --- 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 new file mode 100644 index 0000000..8c70de9 --- /dev/null +++ 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: /^
$\s*?(.*?)<\/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 ( + `
+ ${obj.title} + ${obj.content} +
` + ); + } +}); diff --git a/src/assets/views/layouts/base.njk b/src/assets/views/layouts/base.njk index 1ba3e3e..2bfeb36 100644 --- 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 %} + diff --git a/src/config/shortcodes.js b/src/config/shortcodes.js index d164316..88acee1 100644 --- 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 ` +
+ ${title} + ${content} +
+ `; + }); } } diff --git a/src/content/admin-config.njk b/src/content/admin-config.njk new file mode 100644 index 0000000..ff4fc34 --- /dev/null +++ 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 new file mode 100644 index 0000000..a1df4d9 --- /dev/null +++ b/src/content/admin.njk @@ -0,0 +1,21 @@ +--- +permalink: '/admin/index.html' +eleventyExcludeFromCollections: true +--- + + + + + + Content Manager + + {% script "src/assets/scripts/NetlifyCMS/collapse.js" | url %} + + + + + + + + + diff --git a/src/content/pages/index.njk b/src/content/pages/index.njk index 459cd5b..2e14658 100644 --- a/src/content/pages/index.njk +++ b/src/content/pages/index.njk @@ -8,6 +8,10 @@ title: Up to zero! 🪐
  • Edit this page: src/pages/index.md
  • Add or edit navigation: src/data/navigation.json
  • Change colors and styles: src/assets/styles/
    • + + {% collapse "This is a collapse" %} + Some content is collapsed + {% endcollapse %}