diff --git a/.eleventy.js b/.eleventy.js index dac55b2..62bcbb4 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -35,6 +35,7 @@ const {EleventyRenderPlugin} = require('@11ty/eleventy'); const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); const {slugifyString} = require('./config/utils'); const {escape} = require('lodash'); +const pluginRss = require('@11ty/eleventy-plugin-rss'); module.exports = eleventyConfig => { // Tell 11ty to use the .eleventyignore and ignore our .gitignore file @@ -83,6 +84,7 @@ module.exports = eleventyConfig => { eleventyConfig.addPlugin(EleventyRenderPlugin); eleventyConfig.addPlugin(syntaxHighlight); eleventyConfig.setLibrary('md', markdownLib); + eleventyConfig.addPlugin(pluginRss); // --------------------- Passthrough File Copy ----------------------- @@ -94,9 +96,6 @@ module.exports = eleventyConfig => { // social images to root - eleventyConfig.addPassthroughCopy({ - 'src/assets/images/favicon/site.webmanifest': 'site.webmanifest' - }); eleventyConfig.addPassthroughCopy({ 'src/assets/images/favicon/favicon.ico': 'favicon.ico' }); diff --git a/.prettierignore b/.prettierignore index 100711c..fc997d8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ -src/assets/helperfiles/* \ No newline at end of file +src/assets/helperfiles/* +src/feed.njk \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f5edaee..ee81ad8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "eleventy-excellent", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "eleventy-excellent", - "version": "1.0.2", + "version": "1.0.3", "license": "ISC", "dependencies": { "@11ty/eleventy": "^2.0.0-canary.16", @@ -16,6 +16,7 @@ "tailwindcss": "^3.0.23" }, "devDependencies": { + "@11ty/eleventy-plugin-rss": "^1.2.0", "@netlify/plugin-a11y": "^1.0.0-beta.1", "@toycode/markdown-it-class": "^1.2.4", "clean-css": "^5.3.1", @@ -54,7 +55,7 @@ "slugify": "^1.6.5" }, "engines": { - "node": "16.x" + "node": ">=16.x.x" } }, "node_modules/@11ty/dependency-tree": { @@ -178,6 +179,21 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-plugin-rss": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-1.2.0.tgz", + "integrity": "sha512-YzFnSH/5pObcFnqZ2sAQ782WmpOZHj1+xB9ydY/0j7BZ2jUNahn53VmwCB/sBRwXA/Fbwwj90q1MLo01Ru0UaQ==", + "dev": true, + "dependencies": { + "debug": "^4.3.4", + "posthtml": "^0.16.6", + "posthtml-urls": "1.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.2.0.tgz", @@ -7314,6 +7330,17 @@ "sharp": "^0.30.3" } }, + "@11ty/eleventy-plugin-rss": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-1.2.0.tgz", + "integrity": "sha512-YzFnSH/5pObcFnqZ2sAQ782WmpOZHj1+xB9ydY/0j7BZ2jUNahn53VmwCB/sBRwXA/Fbwwj90q1MLo01Ru0UaQ==", + "dev": true, + "requires": { + "debug": "^4.3.4", + "posthtml": "^0.16.6", + "posthtml-urls": "1.0.0" + } + }, "@11ty/eleventy-plugin-syntaxhighlight": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.2.0.tgz", diff --git a/package.json b/package.json index 70d2632..4980de8 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "eleventy-excellent", - "version": "1.0.2", + "version": "1.0.3", "engines": { - "node": "16.x" + "node": ">=16.x.x" }, "description": "Eleventy starter based on the workflow suggested by Andy Bell's https://buildexcellentwebsit.es/.", "main": ".eleventy.js", @@ -32,6 +32,7 @@ "tailwindcss": "^3.0.23" }, "devDependencies": { + "@11ty/eleventy-plugin-rss": "^1.2.0", "@netlify/plugin-a11y": "^1.0.0-beta.1", "@toycode/markdown-it-class": "^1.2.4", "clean-css": "^5.3.1", diff --git a/readme.md b/readme.md index 81ba1f7..fe67a5b 100644 --- a/readme.md +++ b/readme.md @@ -4,6 +4,7 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's < - [Eleventy starter](#eleventy-starter) - [Preview](#preview) + - [Deploy to Netlify](#deploy-to-netlify) - [Features](#features) - [First steps](#first-steps) - [Development](#development) @@ -11,6 +12,7 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's < - [Working locally](#working-locally) - [Creating a production build](#creating-a-production-build) - [Logbook](#logbook) + - [22-11-24](#22-11-24) - [22-11-04](#22-11-04) - [22-10-30](#22-10-30) - [22-10-03](#22-10-03) @@ -21,6 +23,10 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's < https://eleventy-excellent.netlify.app/ +## Deploy to Netlify + +[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/madrilene/eleventy-excellent) + ## Features This starter includes: @@ -38,16 +44,12 @@ This starter includes: ## First steps -- Search and replace 'eleventy-excellent.netlify.app' with your own domain. -- Set your icons in assets/images/favicon -- edit meta data in \_data/meta.js -- edit your social media in \_data/social.js and \_includes/icons. Icons must be prefixed with "social-". -- delete \_data/github.js and pages/github.njk, as they are just an example -- changed routes: - -``` -redirectFrom: ['/old-route/', '/optionally-another-old-route/'] -``` +- Important: edit meta data in `src/_data/meta.js`, it's being used all over the template. +- Search for 'eleventy-excellent.netlify.app'. You'll find an entry in `src/assets/css/global/global-styles.css`. Replace with your own domain. +- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. New icons must be prefixed with "social-". +- Delete `src/_data/**github.js**` and the blog posts, as these serve only as an example. +- Edit your preferences (colors, fluid text sizes etc.) in `src/assets/css/design-tokens`. +- Optional: set your (favicon) icons in `src/assets/images/favicon` ## Development @@ -75,6 +77,12 @@ npm run build ## Logbook +### 22-11-24 + +- updated required node version in package.json +- meta.js now controls most of the templates defaults +- added RSS feed, because of course! + ### 22-11-04 Adding blog posts for feature explanation. diff --git a/src/_data/meta.js b/src/_data/meta.js index 9cbc6bc..3200352 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -10,18 +10,28 @@ module.exports = { locale: 'en_EN', lang: 'en', skipContent: 'Skip to content', - author: 'Author name', - authorEmail: 'hola@authormail.com', - authorWebsite: 'https://www.authorsite.com', + author: 'Lene Saile', // i.e. Lene Saile - author's name. Must be set. + authorEmail: '', // i.e. hola@lenesaile.com - email of the author + authorWebsite: '', // i.e. https.://www.lenesaile.com - the personal site of the author + themeColor: '#DD4462', // Manifest: defines the default theme color for the application + themeBgColor: '#F3F3F3', // Manifest: defines a placeholder background color for the application page to display before its stylesheet is loaded meta_data: { - twitterSite: '@twitterorg', - twitterCreator: '@twitterauthor', - opengraph_default: '/assets/images/opengraph-default.jpg' + opengraph_default: '/assets/images/opengraph-default.jpg', + twitterSite: '', // i.e. @site - twitter profile of the site + twitterCreator: '', // i.e. @author - twitter profile of the site + mastodonProfile: '' // i.e. https://front-end.social/@lene - url to your mastodon instance/profile + }, + blog: { + // this is for the rss feed + name: 'My great Web Development Blog', + description: + 'Tell the word what you are writing about in your blog! It will show up on feed readers.' }, pagination: { itemsPerPage: 20 }, address: { + // edit all presets or leave empty. They are being used in the pages for privacy.md and imprint.md firma: 'Organization name', street: '123 Main St.', city: 'Ciudad', diff --git a/src/_data/social.json b/src/_data/social.json index a875b9d..ceb3d31 100644 --- a/src/_data/social.json +++ b/src/_data/social.json @@ -5,8 +5,18 @@ "icon": "github.svg" }, { - "platform": "twitter", - "url": "https://twitter.com/lenesaile", - "icon": "twitter.svg" + "platform": "mastodon", + "url": "https://front-end.social/@lene", + "icon": "mastodon.svg" + }, + { + "platform": "ko-fi", + "url": "https://ko-fi.com/lenesaile", + "icon": "kofi.svg" + }, + { + "platform": "rss", + "url": "/feed.xml", + "icon": "rss.svg" } ] diff --git a/src/_includes/icons/social-kofi.svg b/src/_includes/icons/social-kofi.svg new file mode 100644 index 0000000..8858f75 --- /dev/null +++ b/src/_includes/icons/social-kofi.svg @@ -0,0 +1,27 @@ + diff --git a/src/_includes/icons/social-mastodon.svg b/src/_includes/icons/social-mastodon.svg new file mode 100644 index 0000000..97a5ea1 --- /dev/null +++ b/src/_includes/icons/social-mastodon.svg @@ -0,0 +1,12 @@ + diff --git a/src/_includes/icons/social-rss.svg b/src/_includes/icons/social-rss.svg new file mode 100644 index 0000000..c449728 --- /dev/null +++ b/src/_includes/icons/social-rss.svg @@ -0,0 +1,15 @@ + diff --git a/src/_includes/partials/meta-info.njk b/src/_includes/partials/meta-info.njk index 78fe016..a6afb0b 100644 --- a/src/_includes/partials/meta-info.njk +++ b/src/_includes/partials/meta-info.njk @@ -43,7 +43,13 @@ - + +{% if meta.meta_data.mastodonProfile %} + + +{% endif %} + + @@ -75,8 +81,11 @@ +{% if meta.meta_data.twitterSite %} +{% endif %} {% if meta.meta_data.twitterCreator %} +{% endif %} diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk index 8eabafc..2ea784e 100644 --- a/src/_layouts/home.njk +++ b/src/_layouts/home.njk @@ -20,7 +20,10 @@ layout: base

{{ blog.title }}

+ + {% if blog.intro %}

{{ blog.intro }}

+ {% endif %}
diff --git a/src/assets/helperfiles/humans.njk b/src/assets/helperfiles/humans.njk index a485e97..10038b6 100644 --- a/src/assets/helperfiles/humans.njk +++ b/src/assets/helperfiles/humans.njk @@ -8,8 +8,8 @@ excludeFromSitemap: true Developer: {{ meta.author }} Contact: {{ meta.authorEmail }} Site: {{ meta.authorWebsite }} -{% if meta.meta_data.twitterCreator %} -Twitter: {{ meta.meta_data.twitterCreator }}{% endif %} +{% if meta.meta_data.mastodonCreator %} +Mastodon: {{ meta.meta_data.mastodonCreator }}{% endif %} /* SITE */ Doctype: HTML5 diff --git a/src/assets/images/favicon/site.webmanifest b/src/assets/helperfiles/site-manifest.njk similarity index 54% rename from src/assets/images/favicon/site.webmanifest rename to src/assets/helperfiles/site-manifest.njk index c22931c..4d3642c 100644 --- a/src/assets/images/favicon/site.webmanifest +++ b/src/assets/helperfiles/site-manifest.njk @@ -1,7 +1,12 @@ +--- +permalink: /site.manifest +eleventyExcludeFromCollections: true +excludeFromSitemap: true +--- { - "name": "Eleventy Excellent - Starter based on buildexcellentwebsite.es", - "short_name": "Eleventy Excellent", - "start_url": "https://eleventy-excellent.netlify.app", + "name": "{{ meta.siteName }} - {{ meta.siteDescription }}", + "short_name": "{{ meta.siteName }}", + "start_url": "{{ meta.url }}", "icons": [ { "src": "/android-chrome-192x192.png", @@ -20,7 +25,7 @@ "purpose": "maskable" } ], - "theme_color": "#FF5678", - "background_color": "#FF5678", + "theme_color": "{{ meta.themeColor }}", + "background_color": "{{ meta.themeBgColor }}", "display": "standalone" -} +} \ No newline at end of file diff --git a/src/feed.njk b/src/feed.njk new file mode 100644 index 0000000..06e3b27 --- /dev/null +++ b/src/feed.njk @@ -0,0 +1,33 @@ +--- +permalink: /feed.xml +eleventyExcludeFromCollections: true +excludeFromSitemap: true +--- + + + {{ meta.blog.name }} + {{ meta.blog.description }} + + + {% set postslist = collections.posts %} + {{ postslist | getNewestCollectionItemDate | dateToRfc3339 }} + {{ meta.url }}/ + + {{ meta.author }} + {{ meta.authorEmail }} + + {%- for post in postslist %} {%- set absolutePostUrl = post.url | absoluteUrl(meta.url) + %} + + {{ post.data.title }} + + {{ post.date | dateToRfc3339 }} + {{ absolutePostUrl }} + {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }} + + {%- endfor %} + diff --git a/src/pages/about.md b/src/pages/about.md index 78d98a3..754be6f 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -14,7 +14,7 @@ This starter exists to hopefully spread the use of this _excellent_ workflow. To - Find out more on https://buildexcellentwebsit.es/. - Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites -Edit your preferences in `assets/css/design-tokens`. +Edit your preferences (colors, fonts, fluid text sizes etc.) in `src/assets/css/design-tokens`. ## Watch the talk diff --git a/src/posts/2022-08-17-post-with-fetched..md b/src/posts/2022-08-17-post-with-fetched..md index 4c65b96..e885e7c 100644 --- a/src/posts/2022-08-17-post-with-fetched..md +++ b/src/posts/2022-08-17-post-with-fetched..md @@ -6,17 +6,17 @@ date: 2022-08-28 [Eleventy Fetch](https://www.11ty.dev/docs/plugins/fetch/) fetches and caches resources - at configurable intervals. -This is an example of fetching external data, in this case, my public repositories with a cache duration of 1 day. -Edit in `_data/github.js.` +This is an example of fetching external data. +In this case, my public repositories (with more than one stargazer) and a cache duration of 1 day. -{% for repository in github %} +Endpoint editable in `_data/github.js.` + +{% for repository in github %} +{% if repository.stargazers_count > 0 %} ## [{{ repository.name }}]({{ repository.html_url }}) {% include 'svg/star.svg' %} {{ repository.stargazers_count }} / {{ repository.description }} -{% else %} - -This would display if the 'item' collection were empty - +{% endif %} {% endfor %} diff --git a/src/posts/2022-08-28-post-with301-redirects.md b/src/posts/2022-08-28-post-with301-redirects.md index 1c6757d..9b6a36b 100644 --- a/src/posts/2022-08-28-post-with301-redirects.md +++ b/src/posts/2022-08-28-post-with301-redirects.md @@ -4,7 +4,10 @@ description: 'A 301 is used when a page has permanently changed location. Inform date: 2022-08-28 --- -URLs usually change over time, as you use another CMS or optimiye on your file structure. A 301 is used when a page has permanently changed location. Informing about this change is indispensable if you want to keep a positioning. +URLs usually change over time, as you use another CMS or optimizye your file structure. + +A 301 is used when a page has permanently changed location. +Informing about this change is indispensable if you want to keep your incoming links working, be it from organic Google search or other pages that have linked to your content. Aleksandr Hovhannisyan came up with an [easy solution for Eleventy and Netlify](https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/). To directly cover several possible previous routes it is created as an array. You can find the loop in `_redirects.njk`.