From 119272ceeaa20b4dbec283a1fcfdfbb7231d8dee Mon Sep 17 00:00:00 2001 From: Juan Carlos Asensio Date: Sun, 30 Jan 2022 16:15:09 -0500 Subject: [PATCH 1/4] Render updates for a specific demo --WIP --- .eleventy.js | 8 +++++++- src/_includes/layouts/demo.njk | 13 +++++++++++++ src/_includes/layouts/post.njk | 4 ++-- src/content-updates/1.md | 14 +++++++++----- src/content-updates/index.njk | 12 ++++++++++++ src/demos/comparator-of-repos.md | 3 +-- src/demos/demos.json | 3 +++ src/demos/index.njk | 17 +++++++++-------- src/filters/contentUpdatesForDemo.js | 3 +++ src/filters/contentUpdatesOfType.js | 3 +++ src/filters/getUniqueTagsList.js | 4 ++-- 11 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 src/_includes/layouts/demo.njk create mode 100644 src/content-updates/index.njk create mode 100644 src/demos/demos.json create mode 100644 src/filters/contentUpdatesForDemo.js create mode 100644 src/filters/contentUpdatesOfType.js diff --git a/.eleventy.js b/.eleventy.js index f5ae4c6..e5ddd13 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -10,6 +10,7 @@ const w3DateFilter = require('./src/filters/w3-date-filter.js'); const onlyUniqueFilter = require('./src/filters/only-unique-filter.js'); const getUniqueTagsList = require('./src/filters/getUniqueTagsList.js'); const cssmin = require('./src/filters/css-minify-filter.js'); +const contentUpdatesOfType = require('./src/filters/contentUpdatesOfType') // Import transforms @@ -27,6 +28,7 @@ module.exports = function(config) { config.addFilter("getUniqueTagsList", getUniqueTagsList); config.addFilter("onlyUniqueFilter", onlyUniqueFilter); config.addFilter("cssmin", cssmin); + config.addFilter("contentUpdatesOfType",contentUpdatesOfType); // Layout aliases config.addLayoutAlias('home', 'layouts/home.njk'); @@ -67,7 +69,11 @@ module.exports = function(config) { ].reverse(); }); - // config.addCollection('demoTags', getDemosUniqueTags) + config.addCollection('contentUpdates', collectionApi => { + return [ + ...collectionApi.getFilteredByGlob('./src/content-updates/*.md') + ].reverse(); + }); config.addCollection('postFeed', collectionApi => { return [...collectionApi.getFilteredByGlob('./src/posts/*.md').filter(livePosts)] diff --git a/src/_includes/layouts/demo.njk b/src/_includes/layouts/demo.njk new file mode 100644 index 0000000..d4ad83d --- /dev/null +++ b/src/_includes/layouts/demo.njk @@ -0,0 +1,13 @@ +{% set demoTitle = title %} +{% set allDemoContentUpdates = collections.contentUpdates | contentUpdatesOfType('demos') %} +{% set currentDemoContentUpdates = allDemoContentUpdates | contentUpdatesOfType('demos') %} + +

{{ demoTitle }}

+ +{% if currentDemoContentUpdates.length %} + +{% endif %} \ No newline at end of file diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk index f7cfd2d..ef51681 100644 --- a/src/_includes/layouts/post.njk +++ b/src/_includes/layouts/post.njk @@ -19,7 +19,7 @@ {{ content | safe }} {% if site.enableThirdPartyComments %} -
+
@@ -44,4 +44,4 @@ {% endblock %} -{{ content | safe }} +{{ content | safe }} \ No newline at end of file diff --git a/src/content-updates/1.md b/src/content-updates/1.md index 70ca996..c810aa5 100644 --- a/src/content-updates/1.md +++ b/src/content-updates/1.md @@ -1,10 +1,14 @@ --- date: 2022-01-28T12:00:00Z -tags: [] +tags: [demos] belongs_to_content_of_type: -- demos + - demos belongs_to_specific_file_or_page: -- Comparator Of Repos - + - Comparator Of Repos +permalink: '/content-updates/{{ belongs_to_specific_file_or_page[0] | slugify }}/index.html' +identifier: '{{demos}}-{{ belongs_to_specific_file_or_page }}-date' +eleventyComputed: + title: 'Update on {{ date | w3DateFilter }}' --- -The goal of this pen has been to provide an opportunity to learn how to work with React state, specifically how to "lift" a common part of the state object and use it across multiple child components, and how to decide what should be the minimal amount information that's kept within the state object. It's a work in progress, as it still needs to calculate a score based on sate. \ No newline at end of file + +The goal of this pen has been to provide an opportunity to learn how to work with React state, specifically how to "lift" a common part of the state object and use it across multiple child components, and how to decide what should be the minimal amount information that's kept within the state object. It's a work in progress, as it still needs to calculate a score based on sate. diff --git a/src/content-updates/index.njk b/src/content-updates/index.njk new file mode 100644 index 0000000..05cf1d5 --- /dev/null +++ b/src/content-updates/index.njk @@ -0,0 +1,12 @@ +--- +title: "All Content Updates" +--- + +

{{ title }}

+ +{% set demoContentUpdates = collections.contentUpdates | contentUpdatesOfType('demos') %} +{% set postContentUpdates = collections.contentUpdates | contentUpdatesOfType('posts') %} + +

All content updates: {{ collections.contentUpdates.length }}

+

Demo content updates: {{ demoContentUpdates.length }}

+

Post content updates: {{ postContentUpdates.length }}

\ No newline at end of file diff --git a/src/demos/comparator-of-repos.md b/src/demos/comparator-of-repos.md index 451e511..5098268 100644 --- a/src/demos/comparator-of-repos.md +++ b/src/demos/comparator-of-repos.md @@ -3,8 +3,7 @@ title: Comparator Of Repos description: Take your favorite repos head-to-head! image_url: https://shots.codepen.io/username/pen/MWoMGwj-800.webp?version=1635951846 tags: -- react + - react link: https://codepen.io/jcasensio/full/MWoMGwj date: 2022-01-16T15:00:00Z - --- diff --git a/src/demos/demos.json b/src/demos/demos.json new file mode 100644 index 0000000..915af6b --- /dev/null +++ b/src/demos/demos.json @@ -0,0 +1,3 @@ +{ + "layout": "layouts/demo.njk" +} \ No newline at end of file diff --git a/src/demos/index.njk b/src/demos/index.njk index 4f40c40..e7b383a 100644 --- a/src/demos/index.njk +++ b/src/demos/index.njk @@ -7,17 +7,18 @@ permalink: '/demos/index.html' {% set demoList = collections.demos %} {% set demoNavItems = demoList | getUniqueTagsList %} + {% set css %} {% for item in demoNavItems %} - .filter-{{ item }} nav li.{{ item }} a { - color: var(--color-accent); - border-bottom: solid var(--border); - } + .filter-{{ item }} nav li.{{ item }} a { + color: var(--color-accent); + border-bottom: solid var(--border); + } - .filter-{{ item }} ul.list li:not(.{{ item }}) { - display: none; - } - {% endfor %} + .filter-{{ item }} ul.list li:not(.{{ item }}) { + display: none; + } +{% endfor %} {% endset %} {% block head %} diff --git a/src/filters/contentUpdatesForDemo.js b/src/filters/contentUpdatesForDemo.js new file mode 100644 index 0000000..63cd8d8 --- /dev/null +++ b/src/filters/contentUpdatesForDemo.js @@ -0,0 +1,3 @@ +module.exports = contentUpdatesForDemo = (collection, contentTypeStr) => { + return collection.filter(item => item.data.belongs_to_specific_file_or_page.includes(contentTypeStr)); +} \ No newline at end of file diff --git a/src/filters/contentUpdatesOfType.js b/src/filters/contentUpdatesOfType.js new file mode 100644 index 0000000..b6b17d4 --- /dev/null +++ b/src/filters/contentUpdatesOfType.js @@ -0,0 +1,3 @@ +module.exports = contentUpdatesOfType = (collection, contentTypeStr) => { + return collection.filter(item => item.data.belongs_to_content_of_type.includes(contentTypeStr)); +} diff --git a/src/filters/getUniqueTagsList.js b/src/filters/getUniqueTagsList.js index 9ad8e30..3b26e16 100644 --- a/src/filters/getUniqueTagsList.js +++ b/src/filters/getUniqueTagsList.js @@ -1,9 +1,9 @@ const onlyUniqueFilter = require('./only-unique-filter'); -module.exports = getUniqueTagsList = (collection) => { +module.exports = getUniqueTagsList = (collectionApi) => { let tags = []; - collection.forEach(item => { + collectionApi.forEach(item => { tags = [...tags, ...item.data.tags] }) return tags.filter(onlyUniqueFilter) From bb5f14a36ffd342851b52c3603b204f6c6388439 Mon Sep 17 00:00:00 2001 From: Juan Carlos Asensio Date: Mon, 31 Jan 2022 18:20:47 -0500 Subject: [PATCH 2/4] Add collection-level frontmatter formating for content updates --WIP --- src/content-updates/1.md | 3 +-- src/content-updates/content-updates.11tydata.js | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 src/content-updates/content-updates.11tydata.js diff --git a/src/content-updates/1.md b/src/content-updates/1.md index c810aa5..0d9ca58 100644 --- a/src/content-updates/1.md +++ b/src/content-updates/1.md @@ -1,14 +1,13 @@ --- date: 2022-01-28T12:00:00Z tags: [demos] +camilo: 'camilo' belongs_to_content_of_type: - demos belongs_to_specific_file_or_page: - Comparator Of Repos permalink: '/content-updates/{{ belongs_to_specific_file_or_page[0] | slugify }}/index.html' identifier: '{{demos}}-{{ belongs_to_specific_file_or_page }}-date' -eleventyComputed: - title: 'Update on {{ date | w3DateFilter }}' --- The goal of this pen has been to provide an opportunity to learn how to work with React state, specifically how to "lift" a common part of the state object and use it across multiple child components, and how to decide what should be the minimal amount information that's kept within the state object. It's a work in progress, as it still needs to calculate a score based on sate. diff --git a/src/content-updates/content-updates.11tydata.js b/src/content-updates/content-updates.11tydata.js new file mode 100644 index 0000000..e90ac66 --- /dev/null +++ b/src/content-updates/content-updates.11tydata.js @@ -0,0 +1,5 @@ +module.exports = { + eleventyComputed: { + title: data => `Updated on ${data.date}` + } +} \ No newline at end of file From 12759463bc51b44f22b0f004c05007791caf61ff Mon Sep 17 00:00:00 2001 From: Juan Carlos Asensio Date: Sun, 6 Feb 2022 08:11:51 -0500 Subject: [PATCH 3/4] Update content-update filters and data cascade. Tweak demo layout to display content-updates. --- src/_includes/layouts/demo.njk | 14 ++++++++++++-- src/content-updates/1.md | 7 ++----- src/content-updates/content-updates.11tydata.js | 4 +++- src/demos/index.njk | 1 + src/filters/contentUpdatesOfType.js | 16 +++++++++++++++- 5 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/_includes/layouts/demo.njk b/src/_includes/layouts/demo.njk index d4ad83d..f6c8058 100644 --- a/src/_includes/layouts/demo.njk +++ b/src/_includes/layouts/demo.njk @@ -7,7 +7,17 @@ {% if currentDemoContentUpdates.length %}
    {% for item in currentDemoContentUpdates | reverse %} - {{item.data.title}} +
  • + {# This line ↓↓ returns the HTML output (what .md files are compiled into) EXACTLY the way we want it!! ↓↓ #} + {{ item.templateContent | truncate(100) | safe }} + {{item.data.when}} +
    • {% endfor %}
-{% endif %} \ No newline at end of file +{% endif %} + +{# This line ↓↓ returns frontMatter + content in a strange format ↓↓ #} +{# {% renderFile "./src/content-updates/1.md" %} #} + +{# This line ↓↓ returns only the raw content without .md formatting!! ↓↓ #} +{# {{ item.template.frontMatter.content }} #} \ No newline at end of file diff --git a/src/content-updates/1.md b/src/content-updates/1.md index 0d9ca58..7f4a655 100644 --- a/src/content-updates/1.md +++ b/src/content-updates/1.md @@ -1,13 +1,10 @@ --- date: 2022-01-28T12:00:00Z -tags: [demos] -camilo: 'camilo' +tags: [] belongs_to_content_of_type: - demos belongs_to_specific_file_or_page: - Comparator Of Repos -permalink: '/content-updates/{{ belongs_to_specific_file_or_page[0] | slugify }}/index.html' -identifier: '{{demos}}-{{ belongs_to_specific_file_or_page }}-date' --- -The goal of this pen has been to provide an opportunity to learn how to work with React state, specifically how to "lift" a common part of the state object and use it across multiple child components, and how to decide what should be the minimal amount information that's kept within the state object. It's a work in progress, as it still needs to calculate a score based on sate. +The goal of this pen has been to provide an opportunity to learn how to work with React state, specifically how to "lift" a common piece of state and use it across multiple child components, and how to decide what should be the minimal amount information that's kept within the state object. It's a work in progress, as it still needs to calculate a score based on sate. diff --git a/src/content-updates/content-updates.11tydata.js b/src/content-updates/content-updates.11tydata.js index e90ac66..0a566a8 100644 --- a/src/content-updates/content-updates.11tydata.js +++ b/src/content-updates/content-updates.11tydata.js @@ -1,5 +1,7 @@ module.exports = { eleventyComputed: { - title: data => `Updated on ${data.date}` + title: data => `${data.page.fileSlug}`, + when: data => `Updated on ${data.date}`, + permalink: data => `/content-updates/${data.page.fileSlug}/index.html` } } \ No newline at end of file diff --git a/src/demos/index.njk b/src/demos/index.njk index e7b383a..64355a4 100644 --- a/src/demos/index.njk +++ b/src/demos/index.njk @@ -1,5 +1,6 @@ --- title: 'Demos' +layout: '' permalink: '/demos/index.html' --- diff --git a/src/filters/contentUpdatesOfType.js b/src/filters/contentUpdatesOfType.js index b6b17d4..f4bb6cb 100644 --- a/src/filters/contentUpdatesOfType.js +++ b/src/filters/contentUpdatesOfType.js @@ -1,3 +1,17 @@ module.exports = contentUpdatesOfType = (collection, contentTypeStr) => { - return collection.filter(item => item.data.belongs_to_content_of_type.includes(contentTypeStr)); + return collection.filter((item) => { + const dataObj = item.data; + let belongsToContentType = false; + let hasTag = false + + if ('belongs_to_content_of_type' in dataObj && Array.isArray(dataObj.belongs_to_content_of_type)) { + belongsToContentType = dataObj.belongs_to_content_of_type.includes(contentTypeStr); + } + + if ('tags' in dataObj && Array.isArray(dataObj.tags)) { + hasTag = dataObj.tags.includes(contentTypeStr); + } + + return belongsToContentType || hasTag; + }); } From 68945e276885769ee09b6b6901181acac62b8783 Mon Sep 17 00:00:00 2001 From: Juan Carlos Asensio Date: Sun, 6 Feb 2022 10:33:07 -0500 Subject: [PATCH 4/4] Use date filters --- .eleventy.js | 2 ++ src/_includes/layouts/demo.njk | 13 ++++++++++--- src/filters/contentUpdatesForDemo.js | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index e5ddd13..1f53d20 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -11,6 +11,7 @@ const onlyUniqueFilter = require('./src/filters/only-unique-filter.js'); const getUniqueTagsList = require('./src/filters/getUniqueTagsList.js'); const cssmin = require('./src/filters/css-minify-filter.js'); const contentUpdatesOfType = require('./src/filters/contentUpdatesOfType') +const contentUpdatesForDemo = require('./src/filters/contentUpdatesForDemo') // Import transforms @@ -29,6 +30,7 @@ module.exports = function(config) { config.addFilter("onlyUniqueFilter", onlyUniqueFilter); config.addFilter("cssmin", cssmin); config.addFilter("contentUpdatesOfType",contentUpdatesOfType); + config.addFilter("contentUpdatesForDemo", contentUpdatesForDemo); // Layout aliases config.addLayoutAlias('home', 'layouts/home.njk'); diff --git a/src/_includes/layouts/demo.njk b/src/_includes/layouts/demo.njk index 8c1a753..2a693e1 100644 --- a/src/_includes/layouts/demo.njk +++ b/src/_includes/layouts/demo.njk @@ -1,15 +1,22 @@ {% set demoTitle = title %} -{% set currentDemoUpdates = collections.contentUpdates | contentUpdatesOfType('demos') %} +{% set allDemoUpdates = collections.contentUpdates | contentUpdatesOfType('demos') %} +{# Need to figure out how to get content updates only for this specific demo +https://www.11ty.dev/docs/languages/nunjucks/#usage-4 +#} +{% set currentDemoUpdates = allDemoUpdates | contentUpdatesForDemo('Comparator of Repos') %}

{{ demoTitle }}

- {% if currentDemoUpdates.length %}
    {% for item in currentDemoUpdates | reverse %}
  • {# This line ↓↓ returns the HTML output (what .md files are compiled into) EXACTLY the way we want it!! ↓↓ #} {{ item.templateContent | truncate(100) | safe }} - {{item.data.when}} + {% if item.data.date %} + + + + {% endif %}
    • {% endfor %}
diff --git a/src/filters/contentUpdatesForDemo.js b/src/filters/contentUpdatesForDemo.js index 63cd8d8..a5feb38 100644 --- a/src/filters/contentUpdatesForDemo.js +++ b/src/filters/contentUpdatesForDemo.js @@ -1,3 +1,3 @@ module.exports = contentUpdatesForDemo = (collection, contentTypeStr) => { - return collection.filter(item => item.data.belongs_to_specific_file_or_page.includes(contentTypeStr)); + return collection.filter(item => item.data.belongs_to.includes(contentTypeStr)); } \ No newline at end of file