more examples, better structure, changed favicons

.eleventy.js

@@ -22,12 +22,7 @@ const {
 } = require('./config/filters/index.js');
 
 // module import shortcodes
-const {
-  asideShortcode,
-  insertionShortcode,
-  imageShortcodePlaceholder,
-  liteYoutube
-} = require('./config/shortcodes/index.js');
+const {imageShortcodePlaceholder, liteYoutube} = require('./config/shortcodes/index.js');
 
 // module import collections
 const {getAllPosts} = require('./config/collections/index.js');
@@ -53,6 +48,7 @@ module.exports = eleventyConfig => {
   eleventyConfig.addLayoutAlias('base', 'base.njk');
   eleventyConfig.addLayoutAlias('page', 'page.njk');
   eleventyConfig.addLayoutAlias('home', 'home.njk');
+  eleventyConfig.addLayoutAlias('blog', 'blog.njk');
   eleventyConfig.addLayoutAlias('post', 'post.njk');
 
   // 	---------------------  Custom filters -----------------------
@@ -74,8 +70,6 @@ module.exports = eleventyConfig => {
   eleventyConfig.addFilter('entries', Object.entries);
 
   // 	--------------------- Custom shortcodes ---------------------
-  eleventyConfig.addPairedShortcode('aside', asideShortcode);
-  eleventyConfig.addPairedShortcode('insertion', insertionShortcode);
   eleventyConfig.addNunjucksAsyncShortcode('imagePlaceholder', imageShortcodePlaceholder);
   eleventyConfig.addShortcode('youtube', liteYoutube);
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); // current year, stephanie eckles

config/shortcodes/aside/index.js

@@ -1,12 +0,0 @@
-const markdownLib = require('../../plugins/markdown');
-const outdent = require('outdent');
-
-const aside = children => {
-	if (!children) {
-		throw new Error('You must provide a non-empty string for an aside.');
-	}
-	const content = markdownLib.renderInline(children);
-	return `<aside class="post-aside">${outdent`${content}`}</aside>`;
-};
-
-module.exports = aside;

config/shortcodes/index.js

@@ -1,10 +1,6 @@
 const imageShortcodePlaceholder = require('./imagePlaceholder');
-const insertionShortcode = require('./insertion');
-const asideShortcode = require('./aside');
 const liteYoutube = require('./youtube-lite');
 module.exports = {
   imageShortcodePlaceholder,
-  insertionShortcode,
-  asideShortcode,
   liteYoutube
 };

config/shortcodes/insertion/index.js

@@ -1,30 +0,0 @@
-const {outdent} = require('outdent');
-const markdownLib = require('../../plugins/markdown');
-
-// this is not working yet
-
-const insertion = (img, figcaption, alt, children) => {
-  if (!img) {
-    throw new Error(`Must have an image-path.`);
-  }
-  if (!alt) {
-    throw new Error('Images must have an alt text.');
-  }
-  if (!figcaption) {
-    throw new Error('Must have a figcaption');
-  }
-  if (!children) {
-    throw new Error('add a content.');
-  }
-  const content = markdownLib.render(children.trim());
-  return outdent`<div class="switcher py-size-1 breakout">
-  {% imagePlaceholder "./src/assets/images/${img}", "bg-transparent pt-size-0", "
-  h-full", "object-cover w-full h-max rounded-tr-2xl", "${figcaption}", "${alt}", "
-  (max-width: 463px) 400px, (max-width: 718px) 700px, (max-width: 912px) 400px, 700px" %}
-  <div class="font-display text-size-2 opacity-80">
-  ${content}
-  </div>
- </div>`;
-};
-
-module.exports = insertion;

src/_data/navigation.js

@@ -1,12 +1,12 @@
 module.exports = {
   top: [
     {
-      text: 'Markdown',
-      url: '/markdown/'
+      text: 'About',
+      url: '/about/'
     },
     {
-      text: 'Github Fetch',
-      url: '/github/'
+      text: 'Blog',
+      url: '/blog/'
     }
   ],
   bottom: [

src/_includes/partials/blog-card.njk

@@ -0,0 +1,7 @@
+<li class="card flow clickable-card overflow-hidden">
+  <h3>
+    <a href="{{ post.url | url }}">{{ post.data.title }}</a>
+  </h3>
+  {% set definedDate = post.date %} {% include "partials/date.njk" %}
+  <p>{{ post.data.description }}</p>
+</li>

src/_includes/partials/footer.njk

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div class="site-foot__inner">
       <nav id="footernav" class="site-foot__inner">
-        <a href="/">&copy; {% year %} {{ meta.siteName }}</a>
+        &copy; {% year %} <a href="/">{{ meta.siteName }}</a>
 
         {% for item in navigation.bottom %}
 

src/_includes/partials/header.njk

@@ -5,7 +5,9 @@
     <a href="/" class="logo | no-underline">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
         <path
-          d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
+          fill-rule="evenodd"
+          d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
+          clip-rule="evenodd"
         />
       </svg>
 

src/_layouts/blog.njk

@@ -0,0 +1,22 @@
+---
+layout: base
+---
+
+<header class="section spot-color-secondary">
+  <div class="section__inner region">
+    <div class="wrapper flow">
+      <section class="prose text-center">
+        <h1 class="fade-in">{{ title }}</h1>
+      </section>
+    </div>
+  </div>
+
+  {% include 'svg/divider-edgy.svg' %}
+</header>
+
+<article class="wrapper region">
+  <ul class="grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
+    {% set postslist = collections.posts %} {% for post in postslist %} {% include
+    "partials/blog-card.njk" %} {% endfor %}
+  </ul>
+</article>

src/_layouts/home.njk

@@ -6,7 +6,6 @@ layout: base
   <div class="section__inner">
     <div class="wrapper flow region">
       <h1 class="text-center">{{ title }}</h1>
-      <p>{{ item.summary | md | safe }}</p>
     </div>
   </div>
   {% include 'svg/divider-waves.svg' %}
@@ -26,15 +25,7 @@ layout: base
   <!-- TODO: duplicate of partials/blog.njk -->
 
   <ul class="grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
-    {% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %}
-
-    <li class="card flow clickable-card overflow-hidden">
-      <h3>
-        <a href="{{ post.url | url }}">{{ post.data.title }}</a>
-      </h3>
-      {% set definedDate = post.date %} {% include "partials/date.njk" %}
-      <p>{{ post.data.description }}</p>
-    </li>
-    {% endfor %}
+    {% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %} {%
+    include "partials/blog-card.njk" %} {% endfor %}
   </ul>
 </article>

src/_layouts/post.njk

@@ -3,7 +3,7 @@ layout: base
 ---
 
 <article class="region blog">
-  <div class="wrapper flow content">
+  <div class="wrapper flow prose">
     <h1 class="gradient-text">{{ title }}</h1>
 
     {% set definedDate = date %} {% include "partials/date.njk" %}

src/assets/css/blocks/signoff.css

@@ -1,14 +0,0 @@
-.signoff h2 {
-  font-weight: 400;
-  font-size: var(--size-step-1);
-  max-width: 30ch;
-  letter-spacing: var(--tracking);
-}
-
-.signoff p {
-  font-size: var(--size-step-6);
-  font-weight: 700;
-  letter-spacing: var(--tracking-s);
-  line-height: 1;
-  color: var(--color-primary);
-}

src/assets/css/blocks/site-foot.css

@@ -6,8 +6,10 @@
 
 .site-foot__inner {
   display: flex;
-  gap: var(--space-s-m);
+  gap: var(--space-xs-s);
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .site-foot svg {

src/assets/css/blocks/textgradient.css

@@ -1,18 +1,19 @@
 .gradient-text {
-	color: transparent;
-	background: conic-gradient(
-		var(--color-primary) 12%,
-		var(--color-primary) 12%,
-		var(--color-primary) 33%,
-		var(--color-secondary) 33%,
-		var(--color-secondary) 55%,
-		#1471bb 55%,
-		#1471bb 70%,
-		#ff8b59 70%,
-		#ff8b59 87%,
-		#c569bc 87%
-	);
-	background-size: 50%;
-	background-clip: text;
-	-webkit-background-clip: text;
+  color: transparent;
+  background: conic-gradient(
+    var(--color-primary) 12%,
+    var(--color-primary) 12%,
+    var(--color-primary) 33%,
+    var(--color-secondary) 33%,
+    var(--color-secondary) 55%,
+    #1471bb 55%,
+    #1471bb 70%,
+    #ff8b59 70%,
+    #ff8b59 87%,
+    #c569bc 87%
+  );
+  padding: 0.6rem 0;
+  background-size: 50%;
+  background-clip: text;
+  -webkit-background-clip: text;
 }

src/assets/css/global/variables.css

@@ -1,7 +1,7 @@
 /* Global variables */
 :root {
   --gutter: var(--space-s-m);
-  --border-radius: var(--size-step-0);
+  --border-radius: 0.5rem;
   --transition-base: 250ms ease;
   --transition-movement: 200ms linear;
   --transition-fade: 200ms ease;

src/assets/design-tokens/text-sizes.json

@@ -13,7 +13,7 @@
     {
       "name": "Step 1",
       "min": 19,
-      "max": 28
+      "max": 26
     },
     {
       "name": "Step 2",

src/assets/images/favicon/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="90">🧡</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="83">⭐</text></svg>

src/pages/about.md

@@ -0,0 +1,21 @@
+---
+title: About
+permalink: /about/index.html
+description: About this starter
+layout: page
+youtube: true
+---
+
+Based on the companion website of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'.
+An approach that promotes modern CSS with methodologies, fluid type & space, flexible Layouts and Progressive Enhancement.
+
+This starter exists to hopefully spread the use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/).
+
+- 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`.
+
+## Watch the talk
+
+{% youtube '5uhIiI9Ld5M', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}

src/pages/blog.md

@@ -0,0 +1,6 @@
+---
+title: Blog
+description: 'All blog posts can be found here'
+layout: blog
+permalink: /blog/index.html
+---

src/pages/github.njk

@@ -1,18 +0,0 @@
----
-title: Github
-permalink: /github/index.html
-description: Showing Lenes repositories via eleventy fetch
-layout: page
----
-
-This is an example of fetching external data. Edit in _data/github.js.
-
-<ul>
-  {% for repository in github %}
-  <li>
-    <a href="{{ repository.html_url }}">{{ repository.name }} </a>
-  </li>
-  {% else %}
-  <li>This would display if the 'item' collection were empty</li>
-  {% endfor %}
-</ul>

src/pages/index.md

@@ -5,17 +5,11 @@ description: 'Key principles using modern CSS, fluid type, fluid space, flexible
 layout: 'home'
 blog:
   title: 'Blog'
-  intro: "I'm writing about everything I know!"
+  intro: "I'm showing the last 4 blog posts!"
 ---
 
-## An opiniated Eleventy starter
+## An Eleventy starter
 
-Based on the companion website of [Andy Bell](https://twitter.com/hankchizljaw/)'s talk 'Be the browser’s mentor, not its micromanager'.
-This approach promotes modern CSS with methodologies, fluid type & Space, flexible Layouts and Progressive Enhancement.
+This (opiniated) [Eleventy](https://www.11ty.dev/) starter is based on [Andy Bell](https://twitter.com/piccalilli_)'s talk 'Be the browser’s mentor, not its micromanager' and it's companion website buildexcellentwebsit.es.
 
-This starter really just exists to hopefully spread the use of this excellent workflow. To work with it efficiently you should be familiar with cube.fyi, utopia.fyi and every-layout.dev.
-
-Page based on this starter: www.lenesaile.com
-
-- Find out more on https://buildexcellentwebsit.es/.
-- Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites
+Roughly speaking, 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 this way we try to shape frontends that look good to everyone, regardless of device, connection speed or context.

src/pages/legal.md

@@ -7,7 +7,7 @@ description: Imprint infos
 layout: page
 ---
 
-Imprint infos.
+Edit your details in `_data/meta.js`
 
 {{ meta.address.firma }}
 {{ meta.address.street }}

src/pages/privacy.md

@@ -7,9 +7,7 @@ description: I respect the EU General Data Protection Regulation (GDPR). This po
 layout: page
 ---
 
-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.
-
-...
+Edit your details in `_data/meta.js`
 
 **Data controller**
 {{ meta.address.firma }}

src/posts/2022-08-17-post-with-fetched..md

@@ -0,0 +1,20 @@
+---
+title: 'Post with fetched content'
+description: 'Eleventy Fetch fetches and caches resources - at configurable intervals. In this example I am fetching my public repositories with a cache duration of 1 day.'
+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.`
+
+<ul>
+  {% for repository in github %}
+  <li>
+    <a href="{{ repository.html_url }}">{{ repository.name }} </a>
+  </li>
+  {% else %}
+  <li>This would display if the 'item' collection were empty</li>
+  {% endfor %}
+</ul>

src/posts/2022-08-28-post-with301-redirects.md

@@ -1,12 +1,12 @@
 ---
 title: 'Post with 301 redirects'
-description: 'Every post starts with planning. Pie tart cake halvah tiramisu macaroon chocolate marzipan pie. Jelly tootsie roll cake cake chupa chups. Shortbread tart gummi bears sweet roll!'
+description: 'A 301 is used when a page has permanently changed location. Informing about this change is indispensable if you want to keep a positioning. Aleksandr Hovhannisyan came up with an easy solution for Eleventy and Netlify.'
 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.
 
-Aleksandr Hovhannisyan came up with a [great 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`.
+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`.
 
 ## Usage
 

src/posts/2022-11-02-markdown.md

@@ -1,11 +1,12 @@
 ---
-title: All the markdown
-permalink: /markdown/index.html
-description: "That's a markdown page"
-layout: page
+title: 'Post with all the markdown'
+description: 'A lot of markdown packages are installed to help you write your posts. All presets are personal preference.'
+date: 2022-11-02
 ---
 
-Jelly sesame snaps gummies cookie oat cake. Cake gingerbread bonbon muffin gummies gummies oat cake candy icing. Danish bear claw marshmallow gingerbread jelly beans. Icing muffin ice cream pastry chupa chups.
+A lot of markdown packages are installed to help you write your posts. You can configure them in `config/plugins/markdown.js`.
+
+As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of `target: '_blank'` and `rel: 'noreferrer noopener'` for external links (all links with the pattern`/^https?:/`).
 
 ## h2 Heading