From 3e8e29435d58c913ffa3d3a0d000290070db1315 Mon Sep 17 00:00:00 2001 From: MWDelaney Date: Thu, 4 Aug 2022 11:53:27 -0400 Subject: [PATCH 1/4] :art: Add netlify identity --- .gitignore | 3 +++ src/assets/views/layouts/base.njk | 1 + 2 files changed, 4 insertions(+) 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/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 %} + From 96a55c9303342a8e9f03549c2babeef4289cac98 Mon Sep 17 00:00:00 2001 From: MWDelaney Date: Thu, 4 Aug 2022 12:30:03 -0400 Subject: [PATCH 2/4] :art: NetlifyCMS component example --- src/assets/scripts/NetlifyCMS/collapse.js | 46 +++++++++++++++++++++++ src/config/plugins.js | 37 ++++++++++++++++++ src/config/shortcodes.js | 46 +++++------------------ src/content/admin-config.njk | 22 +++++++++++ src/content/admin.njk | 21 +++++++++++ src/content/pages/index.njk | 4 ++ 6 files changed, 140 insertions(+), 36 deletions(-) create mode 100644 src/assets/scripts/NetlifyCMS/collapse.js create mode 100644 src/content/admin-config.njk create mode 100644 src/content/admin.njk 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/config/plugins.js b/src/config/plugins.js index 6c2b636..c573ca2 100644 --- a/src/config/plugins.js +++ b/src/config/plugins.js @@ -16,6 +16,43 @@ module.exports = { eleventyConfig.addPlugin(plugin); }, + /** + * Add image shortcode (requires image plugin) + * https://www.11ty.dev/docs/plugins/image/ + */ + image: function (eleventyConfig) { + const Image = require("@11ty/eleventy-img"); + + function imageShortcode(src, alt = "", className = "", style = "", sizes = "") { + let options = { + widths: [null], + formats: [null], + urlPath: "/assets/images/", + outputDir: "./public/assets/images/" + }; + + // Prepend the src directory + let srcPlusPath = "./src/" + src; + + // generate images, while this is async we don’t wait + Image(srcPlusPath, options); + + let imageAttributes = { + class: className, + style, + alt, + sizes, + loading: "lazy", + decoding: "async", + }; + // get metadata even the images are not fully generated + let metadata = Image.statsSync(srcPlusPath, options); + return Image.generateHTML(metadata, imageAttributes); + } + + eleventyConfig.addNunjucksShortcode("image", imageShortcode); + }, + /** * Rollup plugin to bundle JavaScript * https://github.com/Snapstromegon/eleventy-plugin-rollup diff --git a/src/config/shortcodes.js b/src/config/shortcodes.js index d164316..4bc6b6f 100644 --- a/src/config/shortcodes.js +++ b/src/config/shortcodes.js @@ -13,41 +13,15 @@ module.exports = { eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); }, - - /** - * Add image shortcode (requires image plugin) - * https://www.11ty.dev/docs/plugins/image/ - */ - image: function (eleventyConfig) { - const Image = require("@11ty/eleventy-img"); - - function imageShortcode(src, alt = "", className = "", style = "", sizes = "") { - let options = { - widths: [null], - formats: [null], - urlPath: "/assets/images/", - outputDir: "./public/assets/images/" - }; - - // Prepend the src directory - let srcPlusPath = "./src/" + src; - - // generate images, while this is async we don’t wait - Image(srcPlusPath, options); - - let imageAttributes = { - class: className, - style, - alt, - sizes, - loading: "lazy", - decoding: "async", - }; - // get metadata even the images are not fully generated - let metadata = Image.statsSync(srcPlusPath, options); - return Image.generateHTML(metadata, imageAttributes); - } - - 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 %}
    From a05ec7cacdf43ad068a510e9fc83c6a9b7ba40f8 Mon Sep 17 00:00:00 2001 From: MWDelaney Date: Mon, 19 Sep 2022 10:56:27 -0400 Subject: [PATCH 3/4] :rewind: Revert to match other branches --- src/config/plugins.js | 37 ---------------------------------- src/config/shortcodes.js | 43 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/config/plugins.js b/src/config/plugins.js index c573ca2..6c2b636 100644 --- a/src/config/plugins.js +++ b/src/config/plugins.js @@ -16,43 +16,6 @@ module.exports = { eleventyConfig.addPlugin(plugin); }, - /** - * Add image shortcode (requires image plugin) - * https://www.11ty.dev/docs/plugins/image/ - */ - image: function (eleventyConfig) { - const Image = require("@11ty/eleventy-img"); - - function imageShortcode(src, alt = "", className = "", style = "", sizes = "") { - let options = { - widths: [null], - formats: [null], - urlPath: "/assets/images/", - outputDir: "./public/assets/images/" - }; - - // Prepend the src directory - let srcPlusPath = "./src/" + src; - - // generate images, while this is async we don’t wait - Image(srcPlusPath, options); - - let imageAttributes = { - class: className, - style, - alt, - sizes, - loading: "lazy", - decoding: "async", - }; - // get metadata even the images are not fully generated - let metadata = Image.statsSync(srcPlusPath, options); - return Image.generateHTML(metadata, imageAttributes); - } - - eleventyConfig.addNunjucksShortcode("image", imageShortcode); - }, - /** * Rollup plugin to bundle JavaScript * https://github.com/Snapstromegon/eleventy-plugin-rollup diff --git a/src/config/shortcodes.js b/src/config/shortcodes.js index 4bc6b6f..12ce1ed 100644 --- a/src/config/shortcodes.js +++ b/src/config/shortcodes.js @@ -13,15 +13,52 @@ module.exports = { eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); }, + /** + * Add image shortcode (requires image plugin) + * https://www.11ty.dev/docs/plugins/image/ + */ + image: function (eleventyConfig) { + const Image = require("@11ty/eleventy-img"); + + function imageShortcode(src, alt = "", className = "", style = "", sizes = "") { + let options = { + widths: [null], + formats: [null], + urlPath: "/assets/images/", + outputDir: "./public/assets/images/" + }; + + // Prepend the src directory + let srcPlusPath = "./src/" + src; + + // generate images, while this is async we don’t wait + Image(srcPlusPath, options); + + let imageAttributes = { + class: className, + style, + alt, + sizes, + loading: "lazy", + decoding: "async", + }; + // get metadata even the images are not fully generated + let metadata = Image.statsSync(srcPlusPath, options); + return Image.generateHTML(metadata, imageAttributes); + } + + eleventyConfig.addNunjucksShortcode("image", imageShortcode); + }, + collapse: function (eleventyConfig) { // Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars) - eleventyConfig.addPairedShortcode("collapse", function(title, content) { - return ` + eleventyConfig.addPairedShortcode("collapse", function (title, content) { + return `
    ${title} ${content}
    `; - }); + }); } } From b9e2285c68c61703dd0ddb2083977618a85e75b6 Mon Sep 17 00:00:00 2001 From: "Michael W. Delaney" Date: Mon, 19 Sep 2022 10:57:09 -0400 Subject: [PATCH 4/4] Update shortcodes.js --- src/config/shortcodes.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/config/shortcodes.js b/src/config/shortcodes.js index 12ce1ed..88acee1 100644 --- a/src/config/shortcodes.js +++ b/src/config/shortcodes.js @@ -13,6 +13,7 @@ module.exports = { eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); }, + /** * Add image shortcode (requires image plugin) * https://www.11ty.dev/docs/plugins/image/ @@ -50,6 +51,7 @@ module.exports = { eleventyConfig.addNunjucksShortcode("image", imageShortcode); }, + collapse: function (eleventyConfig) { // Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars) eleventyConfig.addPairedShortcode("collapse", function (title, content) {