Merge pull request #2 from madrilene/main

Catchup with upstream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "engines": {
     "node": ">=16.x.x"
   },

readme.md

@@ -1,6 +1,8 @@
 # Eleventy starter
 
-Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <https://buildexcellentwebsit.es/>.
+Opiniated but easy to use Eleventy starter, based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
+If you end up using this starter, [feel free to send me a link](mailto:hola@lenesaile.com), I'd love to see it!
+Let me know if you miss any features. Currently in planning are automatically generated OpenGraph images (as fallback) and mode.
 
 - [Eleventy starter](#eleventy-starter)
   - [Preview](#preview)
@@ -15,8 +17,8 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
     - [22-11-24](#22-11-24)
     - [22-11-04](#22-11-04)
     - [22-10-30](#22-10-30)
-    - [22-10-03](#22-10-03)
     - [22-10-04](#22-10-04)
+    - [22-10-03](#22-10-03)
   - [Credits and Thank yous](#credits-and-thank-yous)
 
 ## Preview
@@ -39,7 +41,7 @@ https://eleventy-excellent.netlify.app/
 - Advanced markdown handling
 - Bundling via esbuild
 - RSS feed
-- Links to spcial networks in footer
+- Links to social networks in footer
 - Mastodon domain verification snippet
 
 ## First steps
@@ -86,55 +88,54 @@ npm run build
 - 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 verification and more social icon defaults
+- made twitter and other meta data OPTIONAL
+- added Mastodon verification and more social icon defaults
 - focus-within for the cards
 
 ### 22-11-04
 
-- Adding blog posts for feature explanation
+- added blog posts for feature explanation
 
 ### 22-10-30
 
 - WebC in own branch
 - simplify main branch
 
-### 22-10-03
+### 22-10-04
 
-- first commit. Updated
+- all markdown syntax set
 
-### 22-10-04
+### 22-10-03
 
-- All markdown syntax set.
+- first commit. Updated
 
 ## Credits and Thank yous
 
 **Andy Bell**
 
-His CSS methodology makes sense to me. It also goes hand in hand with the Every Layout solutions he co-authors. An ardent opponent of the utility class framework Tailwind CSS. But has recently published an approach that incorporates Tailwind CSS into his methodology. This is built into my website and I'm working on tweaking it.
-I learned how to use Eleventy in 2020 with his (now free) course.
+His CSS methodology "CUBE" makes sense to me. It goes hand in hand with _Every Layout_ (which he co-authors). He has recently published an approach that incorporates Tailwind CSS into his methodology. Also, I learned how to use Eleventy in 2020 with his (now free) course.
 
 - https://cube.fyi/
 - https://buildexcellentwebsit.es/
 - https://learneleventyfromscratch.com/
 
 **Heydon Pickering**
 
-I strongly orientate myself on Heydon's approaches and love his books.
+I strongly orientate myself on Heydon's approaches and really love his books.
 
 - https://every-layout.dev/
 - https://inclusive-components.design/
 
 **Zach Leatherman**
 
-He is developing Eleventy.
+He is developing Eleventy and is constantly making it even better!
 
 - https://www.11ty.dev/
 - https://www.zachleat.com/
 
 **Stephanie Eckles**
 
-She provides a lot of resources for Eleventy and modern CSS.
+Stephanie provides a lot of resources for Eleventy and modern CSS.
 
 - https://smolcss.dev/
 - https://moderncss.dev/
@@ -146,13 +147,6 @@ I love order and structure. Aleksandr does this in an exemplary way, which is wh
 - https://github.com/AleksandrHovhannisyan
 - https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/
 
-**Oliver Schöndorfer**
-
-Oliver is a type expert. He writes the Pimp my Type Newsletter where I dscovered the font I'm using for this website.
-
-- https://pimpmytype.com/outfit/
-- https://pimpmytype.com/category/fontfriday/
-
 **Manuel Matuzović**
 
 Manuel is an accessibility expert. The menu I'm using is from one of his articles on web.dev.

src/_data/meta.js

@@ -5,7 +5,7 @@ module.exports = {
   url: process.env.URL || 'http://localhost:8080',
   siteName: 'Eleventy Excellent',
   siteDescription:
-    "Eleventy starter based on the workflow suggested by Andy Bell's https://buildexcellentwebsit.es/.",
+    'Eleventy starter based on the workflow suggested by buildexcellentwebsit.es.',
   siteType: 'Person', // schema
   locale: 'en_EN',
   lang: 'en',

src/_layouts/home.njk

@@ -17,7 +17,7 @@ layout: base
   </div>
 </article>
 
-<article class="region">
+<article class="region" style="--region-space-top: var(--space-s)">
   <div class="wrapper flow prose">
     <h2>{{ blog.title }}</h2>
     <!-- blog intro text is optional. -->

src/assets/css/blocks/code.css

@@ -82,11 +82,11 @@ pre[class*='language-'] {
 }
 
 .token.attr-value {
-  color: #c3e88d;
+  color: #80cbc4;
 }
 
 .token.attribute {
-  color: #c3e88d;
+  color: #80cbc4;
 }
 
 .token.boolean {
@@ -110,11 +110,11 @@ pre[class*='language-'] {
 }
 
 .token.class-name {
-  color: #f2ff00;
+  color: #ff8b59;
 }
 
 .token.color {
-  color: #f2ff00;
+  color: #ff8b59;
 }
 
 .token.comment {
@@ -126,23 +126,23 @@ pre[class*='language-'] {
 }
 
 .token.deleted {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .token.doctype {
   color: #546e7a;
 }
 
 .token.entity {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .token.function {
   color: #d2b1e7;
 }
 
 .token.hexcode {
-  color: #f2ff00;
+  color: #ff8b59;
 }
 
 .token.id {
@@ -181,47 +181,47 @@ pre[class*='language-'] {
 }
 
 .token.pseudo-class {
-  color: #c3e88d;
+  color: #80cbc4;
 }
 
 .token.pseudo-element {
-  color: #c3e88d;
+  color: #80cbc4;
 }
 
 .token.punctuation {
-  color: #89ddff;
+  color: #80cbc4;
 }
 
 .token.regex {
-  color: #f2ff00;
+  color: #ff8b59;
 }
 
 .token.selector {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .token.string {
-  color: #c3e88d;
+  color: #f48ea2;
 }
 
 .token.symbol {
   color: #d2b1e7;
 }
 
 .token.tag {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .token.unit {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .token.url {
   color: #fd9170;
 }
 
 .token.variable {
-  color: #f07178;
+  color: #ee979c;
 }
 
 .codepen {

src/assets/css/utilities/region.css

@@ -1,9 +1,9 @@
 /**
- * REGION 
- * Add consistent vertical padding to create regions of content 
+ * REGION
+ * Add consistent vertical padding to create regions of content
  * Can either be configured by setting --region-space or use a default from the space scale
  */
 .region {
-  padding-top: var(--region-space, var(--space-l-2xl));
-  padding-bottom: var(--region-space, var(--space-l-2xl));
+  padding-top: var(--region-space-top, var(--space-l-2xl));
+  padding-bottom: var(--region-space-bottom, var(--space-l-2xl));
 }

src/assets/helperfiles/site-manifest.njk

@@ -1,5 +1,5 @@
 ---
-permalink: /site.manifest
+permalink: /site.webmanifest
 eleventyExcludeFromCollections: true
 excludeFromSitemap: true
 ---

src/pages/404.md

@@ -7,4 +7,9 @@ excludeFromSitemap: true
 noindex: true
 ---
 
-# Sorry, that page doesn't exist!
+## Sorry, that page doesn't exist!
+
+[Please try visiting the home page!](/)
+
+Please let me know if you encounter more errors:
+<a href="mailto:{{ meta.address.email }}">{{ meta.address.email }}</a>

src/pages/index.md

@@ -5,13 +5,13 @@ description: 'Key principles using modern CSS, fluid type, fluid space, flexible
 layout: 'home'
 blog:
   title: 'Blog'
-  intro: "I'm showing the last 4 blog posts!"
+  intro: "I'm showing the last 4 blog posts, but there might be more!"
 ---
 
 ## An Eleventy starter
 
 This (opiniated) [Eleventy](https://www.11ty.dev/) starter is based on [Andy Bell's](https://twitter.com/piccalilli_) talk 'Be the browser’s mentor, not its micromanager' and it's companion website buildexcellentwebsit.es.
 
-In his words, it's about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spaceing, as well as modern CSS features.
+In his words, it's about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spacing, as well as modern CSS features.
 
 This way we can shape frontends that look good to everyone, regardless of device, connection speed or context.

src/pages/privacy.md

@@ -9,11 +9,24 @@ layout: page
 
 Edit your details in `_data/meta.js`
 
+I respect the EU General Data Protection Regulation (GDPR) and this policy document explains how I collect and handle any information you provide to me.
+
+**What background data is collected?**
+This site does not use any third party tracking scripts.
+
+**How do I use the data you provide?**
+This website does not collect any data.
+
+**How secure is your data?**
+Very secure, as this website does not collect any information.
+
+**How secure is this website?**
+This website transmits itself using HTTPS, encrypting all data between the browser and the server. Your network provider can still see that you are downloading assets from this site, but not its content. This also protects you from third parties intercepting data, for example, while browsing on public WiFi, or from network providers injecting advertisements on this site. All relevant response HTTP headers are set for your protection and the Content Security Policy is adjusted to this websites requirements.
+
 **Data controller**
 {{ meta.address.firma }}
 {{ meta.address.street }}
-{{ meta.address.zip }}, {{ meta.address.city }},
-
+{{ meta.address.zip }}, {{ meta.address.city }}
 Tel: <a href="tel:{{ meta.address.mobileCall }}">{{ meta.address.mobileDisplay }}</a>
 Mail: <a href="mailto:{{ meta.address.email }}">{{ meta.address.email }}</a>
 

src/posts/2022-09-01-post-with-code.md

@@ -7,8 +7,28 @@ date: 2022-09-01
 This theme uses 11ty's [Syntax Highlighting Plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/), a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.
 
 ```js
-function myFunction() {
-  return true;
+const cards = [...document.querySelectorAll('.card')];
+cards.forEach(card => {
+  card.style.cursor = 'pointer';
+  let down,
+    up,
+    link = card.querySelector('a');
+  card.onmousedown = () => (down = +new Date());
+  card.onmouseup = () => {
+    up = +new Date();
+    if (up - down < 200) {
+      link.click();
+    }
+  };
+});
+```
+
+```css
+form {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 ```