Merge branch 'main' into main

.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'
   });

.prettierignore

@@ -1 +1,2 @@
-src/assets/helperfiles/*
+src/assets/helperfiles/*
+src/feed.njk

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",

package.json

@@ -1,10 +1,10 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "engines": {
-    "node": "16.x"
+    "node": ">=16.x.x"
   },
-  "description": "Eleventy starter based on the workflow suggested by Andy Bell's https://buildexcellentwebsit.es/.",
+  "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
   "main": ".eleventy.js",
   "scripts": {
     "clean": "rimraf dist",
@@ -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",

readme.md

@@ -6,11 +6,13 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
   - [Preview](#preview)
   - [Features](#features)
   - [First steps](#first-steps)
+  - [Deploy directly to Netlify](#deploy-directly-to-netlify)
   - [Development](#development)
     - [Install dependencies](#install-dependencies)
     - [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)
@@ -26,7 +28,7 @@ https://eleventy-excellent.netlify.app/
 This starter includes:
 
 - The whole CSS workflow as suggested by buildexcellentwebsit.es
-- Accessible site navigation, editable in \_data/navigation.js
+- Accessible site navigation, editable in `src/_data/navigation.js`
 - Image optimization with Eleventy-img (see blog post)
 - Youtube embed with lite-youtube (see blog post)
 - Syntax highlighting via eleventy-plugin-syntaxhighlight
@@ -38,16 +40,16 @@ This starter includes:
 
 ## First steps
 
-- Search and replace 'eleventy-excellent.netlify.app' with your own domain.
+- **Important:** edit meta data in `src/_data/meta.js`, it's being used all over the template.
-- Set your icons in assets/images/favicon
+- 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 meta data in \_data/meta.js
+- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". Great resource: https://lucide.dev/
-- edit your social media in \_data/social.js and \_includes/icons. Icons must be prefixed with "social-".
+- Not required, but recommended: Delete `github.js` in `src/_data/github.js` and the blog posts, as these serve only as an example.
-- delete \_data/github.js and pages/github.njk, as they are just an example
+- Edit your preferences (colors, fluid text sizes etc.) in `src/assets/css/design-tokens`.
-- changed routes:
+- Optional: set your (favicon) icons in `src/assets/images/favicon`.
 
-```
+## Deploy directly to Netlify
-redirectFrom: ['/old-route/', '/optionally-another-old-route/']
+
-```
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/madrilene/eleventy-excellent)
 
 ## Development
 
@@ -75,13 +77,21 @@ 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!
+- Made twitter and other meta data OPTIONAL. Added Mastodon.
+
 ### 22-11-04
 
-Adding blog posts for feature explanation.
+- Adding blog posts for feature explanation
 
 ### 22-10-30
 
-WebC in own branch, simplify main branch
+- WebC in own branch
+- simplify main branch
 
 ### 22-10-03
 
@@ -89,8 +99,7 @@ WebC in own branch, simplify main branch
 
 ### 22-10-04
 
-- All markdown syntax set. Some tests with web components and webC.
+- All markdown syntax set.
-- TODO: dark mode
 
 ## Credits and Thank yous
 

src/_data/meta.js

@@ -10,18 +10,28 @@ module.exports = {
   locale: 'en_EN',
   lang: 'en',
   skipContent: 'Skip to content',
-  author: 'Author name',
+  author: 'Lene Saile', // i.e. Lene Saile - author's name. Must be set.
-  authorEmail: 'hola@authormail.com',
+  authorEmail: '', // i.e. hola@lenesaile.com - email of the author
-  authorWebsite: 'https://www.authorsite.com',
+  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',
+    opengraph_default: '/assets/images/opengraph-default.jpg',
-    twitterCreator: '@twitterauthor',
+    twitterSite: '', // i.e. @site - twitter profile of the site
-    opengraph_default: '/assets/images/opengraph-default.jpg'
+    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',

src/_data/social.json

@@ -10,8 +10,13 @@
     "icon": "mastodon.svg"
   },
   {
-    "platform": "twitter",
+    "platform": "ko-fi",
-    "url": "https://twitter.com/lenesaile",
+    "url": "https://ko-fi.com/lenesaile",
-    "icon": "twitter.svg"
+    "icon": "kofi.svg"
+  },
+  {
+    "platform": "rss",
+    "url": "/feed.xml",
+    "icon": "rss.svg"
   }
 ]

src/_includes/icons/social-kofi.svg

@@ -0,0 +1,27 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M18 3h1c1.06 0 2.078.527 2.828 1.464C22.578 5.402 23 6.674 23 8s-.421 2.598-1.172 3.536C21.078 12.473 20.061 13 19 13h-1M1 3h17v12.461c0 1.47-.512 2.878-1.423 3.917-.91 1.038-2.146 1.622-3.434 1.622H5.857c-1.288 0-2.523-.584-3.434-1.622C1.512 18.339 1 16.93 1 15.46V3Z"
+  />
+  <path
+    fill="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1"
+    d="M13.288 8.707a2.431 2.431 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-3.44 0c-.95.939-1 2.527.2 3.736L9.497 16l3.6-3.547c1.2-1.208 1.14-2.797.19-3.736v-.01Z"
+  />
+</svg>

src/_includes/icons/social-rss.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M4 11a9 9 0 0 1 9 9"></path>
+  <path d="M4 4a16 16 0 0 1 16 16"></path>
+  <circle cx="5" cy="19" r="1"></circle>
+</svg>

src/_includes/partials/meta-info.njk

@@ -43,7 +43,13 @@
 <link rel="icon" type="image/png" href="{{ '/favicon-32x32.png' | url }}" sizes="32x32" />
 <link rel="icon" type="image/png" href="{{ '/favicon-16x16.png' | url }}" sizes="16x16" />
 <link rel="manifest" href="{{ '/site.webmanifest' | url }}" />
-<meta name="theme-color" content="#FF7F5C" />
+
+{% if meta.meta_data.mastodonProfile %}
+<!-- Mastodon verified site -->
+<link rel="me" href="{{ meta.meta_data.mastodonProfile }}" />
+{% endif %}
+
+<meta name="theme-color" content="{{ meta.themeColor }}" />
 <meta name="generator" content="Eleventy" />
 
 <!-- Facebook Open Graph meta -->
@@ -75,8 +81,11 @@
 
 <!-- Twitter Open Graph meta -->
 <meta name="twitter:card" content="summary_large_image" />
+{% if meta.meta_data.twitterSite %}
 <meta name="twitter:site" content="{{ meta.meta_data.twitterSite }}" />
+{% endif %} {% if meta.meta_data.twitterCreator %}
 <meta name="twitter:creator" content="{{ meta.meta_data.twitterCreator }}" />
+{% endif %}
 
 <!-- disallow Twitter from using your site's info for personalization purposes -->
 <meta name="twitter:dnt" content="on" />

src/_layouts/home.njk

@@ -20,7 +20,10 @@ layout: base
 <article class="region">
   <div class="wrapper flow prose">
     <h2>{{ blog.title }}</h2>
+    <!-- blog intro text is optional. -->
+    {% if blog.intro %}
     <p>{{ blog.intro }}</p>
+    {% endif %}
   </div>
   <!-- TODO: duplicate of partials/blog.njk -->
 

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 %}
+{% if meta.meta_data.mastodonCreator %}
-Twitter: {{ meta.meta_data.twitterCreator }}{% endif %}
+Mastodon: {{ meta.meta_data.mastodonCreator }}{% endif %}
 
 /* SITE */
 Doctype: HTML5

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",
+  "name": "{{ meta.siteName }} - {{ meta.siteDescription }}",
-  "short_name": "Eleventy Excellent",
+  "short_name": "{{ meta.siteName }}",
-  "start_url": "https://eleventy-excellent.netlify.app",
+  "start_url": "{{ meta.url }}",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",
@@ -20,7 +25,7 @@
       "purpose": "maskable"
     }
   ],
-  "theme_color": "#FF5678",
+  "theme_color": "{{ meta.themeColor }}",
-  "background_color": "#FF5678",
+  "background_color": "{{ meta.themeBgColor }}",
   "display": "standalone"
-}
+}

src/feed.njk

@@ -0,0 +1,33 @@
+---
+permalink: /feed.xml
+eleventyExcludeFromCollections: true
+excludeFromSitemap: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ meta.url }}/">
+  <title>{{ meta.blog.name }}</title>
+  <subtitle>{{ meta.blog.description }}</subtitle>
+  <link href="{{ meta.url }}/feed.xml" rel="self" />
+  <link href="{{ meta.url }}/" />
+  {% set postslist = collections.posts %}
+  <updated>{{ postslist | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+  <id>{{ meta.url }}/</id>
+  <author>
+    <name>{{ meta.author }}</name>
+    <email>{{ meta.authorEmail }}</email>
+  </author>
+  {%- for post in postslist %} {%- set absolutePostUrl = post.url | absoluteUrl(meta.url)
+  %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}" />
+    <updated>{{ post.date | dateToRfc3339 }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content
+      xml:lang="{{ locale }}"
+      type="html"
+      >{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content
+    >
+  </entry>
+  {%- endfor %}
+</feed>

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
 

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.
+This is an example of fetching external data.
-Edit in `_data/github.js.`
+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 %}
+{% endif %}
-
-This would display if the 'item' collection were empty
-
 {% endfor %}

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`.