round ups

.eleventy.js

@@ -39,7 +39,7 @@ const {
 } = require('./config/shortcodes/index.js');
 
 // module import collections
-const {getAllProjects} = require('./config/collections/index.js');
+const {getAllPosts} = require('./config/collections/index.js');
 
 // module import transforms
 
@@ -101,7 +101,7 @@ module.exports = eleventyConfig => {
   // 	--------------------- Custom transforms ---------------------
 
   // 	--------------------- Custom collections -----------------------
-  eleventyConfig.addCollection('projects', getAllProjects);
+  eleventyConfig.addCollection('posts', getAllPosts);
 
   // 	--------------------- Plugins ---------------------
   eleventyConfig.addPlugin(EleventyRenderPlugin);

config/collections/index.js

@@ -1,9 +1,9 @@
 /** Returns all blog posts as a collection. */
-const getAllProjects = collection => {
-	const projects = collection.getFilteredByGlob('./src/projects/*.md');
-	return projects.reverse();
+const getAllPosts = collection => {
+  const projects = collection.getFilteredByGlob('./src/posts/*.md');
+  return projects.reverse();
 };
 
 module.exports = {
-	getAllProjects
+  getAllPosts
 };

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)
+  - [Features](#features)
   - [Using this](#using-this)
     - [Install dependencies](#install-dependencies)
     - [Working locally](#working-locally)
@@ -18,9 +19,31 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
 
 https://eleventy-excellent.netlify.app/
 
+## Features
+
+This eleventy starter already includes:
+
+- accessible site navigation, editable in \_data/navigation.js
+- Image optimisation with Eleventy-img
+- SEO (XML-sitemap, metadata)
+- dayjs handling dates & times
+- Many filters and shortcodes
+- The whole CSS workflow as suggested by buildexcellentwebsit.es
+- 301 redirects for netlify
+- all kind of markdown handling
+- bundling via esbuild
+
 ## Using this
 
-Search and replace 'eleventy-excellent.netlify.app' with your own domain.
+- 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
+- delete \_data/github.js and pages/github.njk, as they are just an example
+- changed routes:
+
+```
+redirectFrom: ['/old-route/', '/optionally-another-old-route/']
+```
 
 ### Install dependencies
 

src/_includes/icons/cube.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" viewBox="0 0 120 139" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="m2.932 101.287 56.338 34.42 58.252-33.307L59.27 69.092 2.932 101.287Z" fill="#DBDBDB" fill-opacity=".2"/><path d="M59.27 2.475v66.618l58.252 33.307V35.782L59.27 2.475ZM59.27 2.475v66.618L2.932 101.287V35.782L59.27 2.475Z" fill="#F3F3F3" fill-opacity=".3"/><path d="M117.522 38.26c-.432 0-.856-.113-1.231-.328l-57.01-32.6-55.557 32.26A2.479 2.479 0 0 1 .082 34.82a2.475 2.475 0 0 1 1.15-1.507L58.026.337a2.474 2.474 0 0 1 2.474 0l58.244 33.299a2.474 2.474 0 0 1-1.231 4.624h.008Z" fill="#fff"/><path d="M56.792 4.949V2.474A2.473 2.473 0 0 1 59.27 0a2.479 2.479 0 0 1 2.477 2.474V4.95M59.27 29.19a2.482 2.482 0 0 1-2.478-2.474v-3.629a2.473 2.473 0 0 1 2.478-2.474 2.479 2.479 0 0 1 2.477 2.474v3.629a2.473 2.473 0 0 1-2.477 2.474Zm0-10.885a2.48 2.48 0 0 1-2.478-2.474v-3.626a2.473 2.473 0 0 1 2.478-2.474 2.48 2.48 0 0 1 2.477 2.474v3.626a2.473 2.473 0 0 1-2.477 2.474ZM59.27 61.836a2.48 2.48 0 0 1-2.478-2.475v-3.625a2.472 2.472 0 0 1 2.478-2.475 2.479 2.479 0 0 1 2.477 2.475v3.625a2.473 2.473 0 0 1-2.477 2.475Zm0-10.882a2.479 2.479 0 0 1-2.478-2.475v-3.628a2.472 2.472 0 0 1 2.478-2.474 2.479 2.479 0 0 1 2.477 2.474v3.628a2.473 2.473 0 0 1-2.477 2.475Zm0-10.882a2.479 2.479 0 0 1-2.478-2.475V33.97a2.472 2.472 0 0 1 2.478-2.474 2.479 2.479 0 0 1 2.477 2.474v3.628a2.472 2.472 0 0 1-1.529 2.286 2.48 2.48 0 0 1-.948.189ZM59.27 71.567a2.48 2.48 0 0 1-2.478-2.474v-2.475a2.473 2.473 0 0 1 2.478-2.474 2.48 2.48 0 0 1 2.477 2.474v2.475a2.473 2.473 0 0 1-2.477 2.474ZM117.522 104.874a2.476 2.476 0 0 1-2.477-2.474V35.782a2.476 2.476 0 0 1 4.229-1.75c.465.464.726 1.094.726 1.75V102.4a2.473 2.473 0 0 1-2.478 2.474ZM2.478 104.543A2.479 2.479 0 0 1 0 102.069V35.454a2.473 2.473 0 0 1 2.478-2.474 2.479 2.479 0 0 1 2.477 2.474v66.615a2.474 2.474 0 0 1-2.477 2.474Z" fill="#fff"/><path d="m116.602 99.682 2.152 1.23a2.475 2.475 0 0 1-2.46 4.296l-2.152-1.23M109.023 100.675a2.509 2.509 0 0 1-1.229-.325l-3.172-1.816a2.468 2.468 0 0 1-1.16-1.499 2.466 2.466 0 0 1 .876-2.607 2.475 2.475 0 0 1 2.747-.19l3.172 1.816a2.473 2.473 0 0 1-1.234 4.621Zm-9.52-5.444c-.431 0-.855-.112-1.229-.325L95.1 93.09a2.475 2.475 0 1 1 2.463-4.296l3.175 1.816a2.473 2.473 0 0 1-1.234 4.621ZM89.982 89.787c-.432 0-.856-.113-1.231-.328l-3.172-1.813a2.476 2.476 0 0 1-.92-3.378 2.478 2.478 0 0 1 3.382-.918l3.173 1.816a2.475 2.475 0 0 1-1.232 4.62Zm-9.523-5.45c-.43 0-.854-.113-1.228-.328l-3.173-1.813a2.48 2.48 0 0 1-1.23-2.462 2.475 2.475 0 0 1 1.807-2.078 2.483 2.483 0 0 1 1.883.239l3.176 1.815a2.476 2.476 0 0 1 1.171 2.79 2.474 2.474 0 0 1-2.406 1.837ZM70.954 78.9c-.431 0-.855-.112-1.229-.328l-3.175-1.815a2.476 2.476 0 0 1-.965-3.404 2.475 2.475 0 0 1 3.428-.89l3.172 1.816a2.476 2.476 0 0 1 1.162 2.783 2.474 2.474 0 0 1-2.393 1.838ZM38.6 84.232a2.479 2.479 0 0 1-2.398-1.829 2.472 2.472 0 0 1 1.148-2.786l3.09-1.792a2.478 2.478 0 0 1 3.67 2.772 2.474 2.474 0 0 1-1.18 1.506l-3.087 1.792c-.378.22-.807.337-1.244.337Zm9.264-5.382a2.48 2.48 0 0 1-2.39-1.83 2.472 2.472 0 0 1 1.145-2.783l3.087-1.795a2.48 2.48 0 0 1 3.744 1.801 2.471 2.471 0 0 1-1.26 2.48l-3.088 1.796c-.377.216-.803.33-1.237.33ZM10.799 100.373a2.48 2.48 0 0 1-2.396-1.83 2.472 2.472 0 0 1 1.15-2.785l3.087-1.795a2.48 2.48 0 0 1 3.701 1.808 2.474 2.474 0 0 1-1.21 2.47l-3.09 1.796a2.478 2.478 0 0 1-1.242.336Zm9.268-5.379a2.483 2.483 0 0 1-2.39-1.83 2.475 2.475 0 0 1 1.14-2.785l3.09-1.792a2.481 2.481 0 0 1 3.423.875 2.473 2.473 0 0 1-.933 3.403l-3.087 1.792c-.377.22-.807.337-1.243.337Zm9.253-5.385a2.48 2.48 0 0 1-2.39-1.83 2.472 2.472 0 0 1 1.144-2.782L31.16 83.2a2.48 2.48 0 0 1 3.388.895 2.473 2.473 0 0 1-.896 3.384l-3.09 1.795a2.482 2.482 0 0 1-1.243.334ZM5.864 103.627l-2.14 1.241a2.48 2.48 0 0 1-3.702-1.808 2.474 2.474 0 0 1 1.21-2.47l2.143-1.242" fill="#fff"/><path d="M59.27 138.182c-.445 0-.881-.119-1.264-.346L1.214 104.198a2.467 2.467 0 0 1-1.183-1.517 2.472 2.472 0 0 1 1.81-3.048 2.48 2.48 0 0 1 1.9.31l55.552 32.901 56.998-32.591a2.488 2.488 0 0 1 1.933-.33 2.476 2.476 0 0 1 1.309 4.003 2.497 2.497 0 0 1-.788.618l-58.244 33.313c-.375.213-.8.325-1.231.325Z" fill="#fff"/><path d="M59.27 138.182a2.48 2.48 0 0 1-2.478-2.475V69.092a2.473 2.473 0 0 1 2.478-2.474 2.48 2.48 0 0 1 2.477 2.474v66.615a2.474 2.474 0 0 1-2.477 2.475Z" fill="#fff"/><path d="M59.273 71.567a2.48 2.48 0 0 1-2.383-1.844 2.472 2.472 0 0 1 1.163-2.777l58.238-33.31a2.48 2.48 0 0 1 3.623 2.796 2.476 2.476 0 0 1-1.16 1.5L60.501 71.238a2.462 2.462 0 0 1-1.228.328Z" fill="#fff"/><path d="M59.267 71.567a2.48 2.48 0 0 1-1.26-.346L1.213 37.583a2.477 2.477 0 0 1-.868-3.391 2.475 2.475 0 0 1 2.483-1.188c.322.046.632.155.912.321l56.793 33.638a2.475 2.475 0 0 1-1.267 4.604Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h120v138.182H0z"/></clipPath></defs></svg>

src/_includes/icons/design-tokens.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 85 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 23.817v45.841a3.09 3.09 0 0 0 1.521 2.662L41.71 96l40.87-23.683a3.09 3.09 0 0 0 1.541-2.673V23.817L43.258.409a3.09 3.09 0 0 0-3.091.01L0 23.818Zm5.617 6.357v38.04L38.9 87.825V48.777L5.617 30.174Zm38.9 18.616v39.09l33.986-19.693V30.109L44.518 48.79Zm30.98-23.439L41.734 6.01 8.514 25.358l33.206 18.56L75.498 25.35Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M41.709 59.627c6.515 0 11.796-5.281 11.796-11.796S48.224 36.034 41.71 36.034s-11.797 5.282-11.797 11.797c0 6.515 5.282 11.796 11.797 11.796Zm0 6.18c9.928 0 17.976-8.048 17.976-17.976 0-9.928-8.048-17.976-17.976-17.976-9.928 0-17.976 8.048-17.976 17.976 0 9.928 8.048 17.976 17.976 17.976Z" fill="currentColor"/><circle cx="41.709" cy="47.831" r="12.358" fill="var(--spot-color)"/></svg>

src/_includes/icons/polypane.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M112.135 59.995c.335 22.204-15.257 43.47-36.562 49.776-19.461 6.256-42.288-.178-55.305-16.023C7.045 78.514 3.98 55.41 13.057 37.352 21.455 19.31 40.945 7.29 60.837 7.885c20.018.004 39.136 12.854 46.934 31.252 2.898 6.546 4.412 13.697 4.364 20.858Z" fill="#fff" fill-opacity=".25"/><path d="M60.064 11.735c-17.118-.098-33.978 9.586-42.152 24.744-9.559 16.443-7.764 38.392 4.09 53.214 11.62 15.408 32.994 22.148 51.424 16.645 20.176-5.494 35.133-25.448 34.803-46.342a46.607 46.607 0 0 0-1.678-12.634c-4.867-18.694-21.89-33.459-41.175-35.278a44.2 44.2 0 0 0-5.312-.349Zm.092 4.36c4.904.026 9.793.91 14.416 2.548v65.641H47.525V17.918a39.082 39.082 0 0 1 2.832-.695 40.673 40.673 0 0 1 9.799-1.129ZM42.242 19.83V99.98C26.846 93.153 15.945 76.89 16.23 59.895a41.795 41.795 0 0 1 .19-4.189c1.306-15.495 11.713-29.625 25.82-35.876Zm37.613 1.074c6.617 3.348 12.398 8.335 16.469 14.616 6.433 9.223 8.655 20.91 6.778 31.884H79.855v-46.5Z" fill="#fff"/></svg>

src/_includes/icons/tailwind.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M126.998 69c-25.603 0-41.603 12.779-48.004 38.332 9.604-12.774 20.802-17.572 33.603-14.375 7.304 1.826 12.525 7.111 18.299 12.967 9.415 9.536 20.308 20.576 44.101 20.576 25.603 0 41.602-12.779 48.003-38.332-9.599 12.774-20.801 17.568-33.598 14.375-7.304-1.826-12.525-7.111-18.304-12.972C161.684 80.04 150.79 69 126.998 69Zm-47.995 57.5c-25.607 0-41.602 12.77-48.003 38.327 9.599-12.779 20.801-17.572 33.603-14.375 7.3 1.822 12.52 7.112 18.299 12.963C92.317 172.96 103.21 184 127.002 184c25.603 0 41.603-12.774 48.004-38.332-9.604 12.779-20.802 17.572-33.603 14.375-7.304-1.821-12.521-7.111-18.299-12.967-9.415-9.536-20.308-20.576-44.1-20.576Z" fill="currentColor"/></svg>

src/_includes/icons/utopia.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#utopia)"><path d="M69.464 59.675c11.848.595 18.407.638 28.963.364 20.595-.589 22.419-.535 24.923.595 2.28 1.072 4.007 3.183 4.007 5.053 0 3.05-2.414 4.914-11.387 8.783-6.436 2.781-8.249 4.287-9.069 7.379-.317 1.41-.499 8.874-.499 23.626 0 24.113.536 38.373 1.641 44.063 1.502 8.011 4.42 15.16 7.745 19.071 1.958 2.278 8.335 5.557 13.623 6.967 4.784 1.275 15.629 1.409 20.456.182 9.751-2.369 15.554-8.242 18.638-18.937 2.183-7.502 3.003-17.893 3.368-42.789.365-25.356-.225-30.822-3.824-35.007-1.55-1.822-3.143-2.733-12.803-7.148-4.859-2.16-7.095-5.782-5.223-8.333 2.547-3.413 7.562-4.458 17.86-3.751 9.041.695 18.124.634 27.155-.182 11.708-1.136 15.553-.777 18.316 1.774 3.915 3.595.59 8.922-7.38 11.928-12.031 4.506-13.125 5.825-13.672 17.024-1.55 31.615-3.556 54.309-5.696 64.597-4.51 21.531-15.307 34.595-33.714 40.726-17.27 5.733-36.042 5.733-54.219 0-8.753-2.733-14.583-6.19-20.686-12.154-11.44-11.199-14.766-22.988-15.554-55.402-.67-28.958-1.218-44.074-1.625-46.062-.773-3.339-3.283-5.246-10.545-8.118-3.325-1.27-6.79-2.91-7.793-3.639-4.553-3.322-4.602-7.282-.09-9.608 3.893-2.004 5.078-2.047 27.084-1.002Z" fill="currentColor"/></g><defs><clipPath id="utopia"><path fill="currentColor" transform="translate(39 59)" d="M0 0h176v141H0z"/></clipPath></defs></svg>

src/_includes/partials/date.njk

@@ -0,0 +1,5 @@
+<time datetime="{{ definedDate | toIsoString }}">
+  {{
+    definedDate | formatDate('MMMM D, YYYY')
+  }}
+</time>

src/_includes/svg/curve.svg

@@ -1 +0,0 @@
-<svg class="curve" preserveAspectRatio="none" viewBox="0 0 1440 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z"/></svg>

src/_includes/svg/divider-curve.svg

@@ -1,11 +0,0 @@
-<svg
-  class="curve"
-  preserveAspectRatio="none"
-  viewBox="0 0 1440 320"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M0,192L34.3,186.7C68.6,181,137,171,206,181.3C274.3,192,343,224,411,240C480,256,549,256,617,266.7C685.7,277,754,299,823,298.7C891.4,299,960,277,1029,266.7C1097.1,256,1166,256,1234,240C1302.9,224,1371,192,1406,176L1440,160L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"
-  ></path>
-</svg>

src/_includes/svg/divider-pixels.svg

@@ -1,5 +1,5 @@
 <svg
-  class="curve"
+  class="seperator"
   preserveAspectRatio="none"
   viewBox="0 0 1440 320"
   fill="none"

src/_includes/svg/seperator.svg

@@ -1,13 +0,0 @@
-<svg
-  width="1408"
-  height="12"
-  viewBox="0 0 1408 12"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <title>a custom seperator seperating the menu from the content</title>
-  <path
-    d="M138.006 1.53747C164.73 3.01154 190.154 4.42686 216.058 5.79613C229.614 6.51252 256.885 6.80254 272.818 6.50776C275.533 6.45754 278.475 6.44463 281.296 6.45138C314.987 6.53138 344.93 5.64725 374.217 4.62477C404.837 3.55583 434.881 3.86093 465.069 4.70774C489.845 5.4027 516.041 5.60457 542.245 5.85171C556.994 5.99086 571.293 6.38925 585.68 6.69792C606.657 7.14812 625.137 8.02749 645.199 8.57456C673.514 9.34693 702.981 10.1727 734.55 9.86184C767.901 9.53332 800.5 8.90447 830.73 7.85618C855.876 6.98397 878.984 5.81935 904.06 4.93542C917.899 4.44751 933.905 4.26429 948.982 3.95502C977.36 3.37302 1000.27 4.27937 1023.99 5.21253C1038.63 5.78858 1055.39 6.1836 1071.88 6.41565C1096.02 6.75529 1120.41 6.99011 1145.21 7.1376C1204.87 7.49213 1262.26 6.84005 1317.3 5.43942C1345.73 4.71608 1374.03 4.05983 1403.28 3.56755C1404.91 3.54015 1406.41 3.47068 1407.97 3.42066C1407.54 3.59812 1407.96 3.87443 1406.55 3.93458C1401.94 4.1303 1396.74 4.26191 1391.64 4.39133C1355.16 5.31436 1318.89 6.28444 1282.06 7.13205C1252.91 7.80278 1223.3 8.39154 1192 8.32524C1174.38 8.28812 1156.69 8.26728 1139.1 8.33001C1109.05 8.43759 1080.93 7.81966 1052.6 7.27755C1032.76 6.89821 1014.92 6.19293 996.439 5.56984C969.32 4.65574 940.179 4.83617 913.472 5.839C888.085 6.79221 864.328 7.9725 838.489 8.85286C817.795 9.55794 795.279 10.0155 773.147 10.4824C758.618 10.789 743.42 11.0322 728.357 11.091C714.392 11.1452 699.809 11.0282 686.225 10.7841C669.854 10.4897 654.171 9.99623 638.336 9.5625C609.843 8.78219 581.503 7.97488 552.985 7.19954C549.159 7.09552 544.699 7.09632 540.502 7.07389C512.021 6.92223 484.236 6.62289 457.698 5.77727C433.27 4.99894 408.638 4.95428 382.955 5.79077C358.977 6.57168 333.699 7.28727 307.941 7.60488C294.86 7.76626 280.437 8.17279 265.079 7.77598C251.439 7.42364 235.59 7.84268 220.929 7.40479C207.196 6.99468 195.241 6.45635 184.262 5.75524C164.494 4.49276 143.974 3.29421 119.94 2.44284C97.5278 1.64923 57.3468 2.02241 37.8429 3.14673C30.4097 3.57509 22.081 3.95502 13.3452 4.22558C10.1227 4.32543 4.55614 4.04733 0.0563354 3.94173C1.91745 3.63385 2.55467 3.17888 5.83899 3.04311C23.4789 2.31302 40.9055 1.45727 60.123 1.04856C76.0001 0.710709 94.3081 0.870502 111.446 0.934221C120.038 0.96618 128.429 1.27564 138.009 1.53747H138.006Z"
-    fill="black"
-  />
-</svg>

src/_includes/svg/twitter.svg

@@ -1,14 +0,0 @@
-<svg
-  width="24"
-  height="24"
-  fill="currentColor"
-  stroke-width="2"
-  class="ai ai-TwitterFill"
->
-  <title>
-    Link to my twitter profile. I'm not much of a broadcaster, I prefer to listen
-  </title>
-  <path
-    d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41l.002-.003z"
-  />
-</svg>

src/_includes/svg/whatsapp.svg

@@ -1,14 +0,0 @@
-<svg
-  width="24"
-  height="24"
-  fill="currentColor"
-  stroke-width="2"
-  class="ai ai-WhatsappFill"
->
-  <title>Link to contact me on whatsapp</title>
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M17.415 14.382c-.298-.149-1.759-.867-2.031-.967-.272-.099-.47-.148-.669.15-.198.296-.767.966-.94 1.164-.174.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.019-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.074-.149-.668-1.612-.916-2.207-.241-.579-.486-.5-.668-.51-.174-.008-.372-.01-.57-.01-.198 0-.52.074-.792.372-.273.297-1.04 1.016-1.04 2.479 0 1.462 1.064 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.57-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347zm-5.422 7.403h-.004a9.87 9.87 0 0 1-5.032-1.378l-.36-.214-3.742.982.999-3.648-.235-.374a9.861 9.861 0 0 1-1.511-5.26c.002-5.45 4.436-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.892 6.993c-.002 5.45-4.436 9.885-9.884 9.885zm8.412-18.297A11.815 11.815 0 0 0 11.992 0C5.438 0 .102 5.335.1 11.892a11.864 11.864 0 0 0 1.587 5.945L0 24l6.304-1.654a11.881 11.881 0 0 0 5.684 1.448h.005c6.554 0 11.89-5.335 11.892-11.893a11.821 11.821 0 0 0-3.48-8.413"
-  />
-</svg>

src/_layouts/home.njk

@@ -17,3 +17,24 @@ layout: base
     {{ content | safe }}
   </div>
 </article>
+
+<article class="wrapper region">
+  <div class="wrapper flow prose">
+    <h2>{{ blog.title }}</h2>
+    <p>{{ blog.intro }}</p>
+  </div>
+  <!-- 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 %}
+  </ul>
+</article>

src/_layouts/post.njk

@@ -1,6 +1,16 @@
 ---
-layout: page
+layout: base
 ---
 
+<article class="region blog">
+  <div class="wrapper flow content">
+    <h1 class="gradient-text">{{ title }}</h1>
+
+    {% set definedDate = date %} {% include "partials/date.njk" %}
+
+    {{ content | safe }}
+  </div>
+</article>
+
 <!-- include blogpost schema  -->
 {%- include "schemas/blogpost-schema.njk" %}

src/assets/css/blocks/blog.css

@@ -0,0 +1,11 @@
+.blog h1 {
+  font-size: var(--size-step-4);
+}
+
+.blog h2 {
+  font-size: var(--size-step-3);
+}
+
+.blog h3 {
+  font-size: var(--size-step-2);
+}

src/assets/css/blocks/section.css

@@ -1,4 +1,4 @@
-.section > .curve:first-child {
+.section > .seperator:first-child {
   transform: rotate(180deg) translateY(-1px);
 }
 

src/assets/css/blocks/seperator.css

@@ -1,4 +1,4 @@
-.curve {
+.seperator {
   display: block;
   height: 3.5em;
   width: 100%;

src/assets/css/utilities/content.css

@@ -0,0 +1,19 @@
+/* breakout content elements to wrapper based on full bleed image solution by josh cumeau. https://www.joshwcomeau.com/css/full-bleed/ */
+
+.content {
+  --wrapper-max-width: 75rem;
+  display: grid;
+  grid-template-columns:
+    1fr
+    min(48ch, 100%)
+    1fr;
+}
+
+.content > * {
+  grid-column: 2;
+}
+
+.content .breakout {
+  width: 100%;
+  grid-column: 1 / 4;
+}

src/pages/index.md

@@ -3,11 +3,14 @@ permalink: /index.html
 title: ' Eleventy Excellent'
 description: 'Key principles using modern CSS, fluid type, fluid space, flexible layout and progressive enhancement will help you to build better front-ends that work for everyone.'
 layout: 'home'
+blog:
+  title: 'Blog'
+  intro: "I'm writing about everything I know!"
 ---
 
 ## An opiniated Eleventy starter
 
-Based on the companion website of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'.
+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.
 
 Page based on this starter: www.lenesaile.com

src/posts/2022-08-28-hello.md

@@ -0,0 +1,11 @@
+---
+title: 'Hello, this is a post'
+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!'
+date: 2022-08-28
+---
+
+## A title
+
+Pie tart cake halvah tiramisu macaroon chocolate marzipan pie. Jelly tootsie roll cake cake chupa chups. Cupcake tart caramels jelly toffee. Shortbread tart gummi bears sweet roll donut dragée sesame snaps lollipop biscuit. Shortbread cookie gummies tart toffee sweet roll croissant. Cheesecake topping jelly beans muffin icing pie. Icing muffin chocolate cake biscuit sweet roll lollipop. Chocolate cake chocolate cake topping biscuit jujubes caramels.
+
+Sweet roll sesame snaps jelly beans oat cake liquorice pastry sugar plum marshmallow. Sugar plum pie fruitcake fruitcake brownie toffee halvah lemon drops. Jelly-o chocolate cake halvah carrot cake tootsie roll. Cheesecake chocolate bar brownie candy muffin bonbon. Caramels chocolate cake jelly cupcake cake gummies croissant marshmallow. Icing cheesecake soufflé lollipop pudding donut.

src/posts/2022-09-01-a-post.md

@@ -0,0 +1,13 @@
+---
+title: 'What an interesting title'
+description: 'Every post starts with planning. Icing lemon drops macaroon sugar plum chupa chups. Bonbon cake chupa chups sugar plum brownie marshmallow jelly sweet roll.'
+date: 2022-09-01
+---
+
+## Hello there!
+
+Icing lemon drops macaroon sugar plum chupa chups. Bonbon cake chupa chups sugar plum brownie marshmallow jelly sweet roll. Dessert jelly-o tootsie roll ice cream tart. Tootsie roll dragée chocolate cake wafer wafer chupa chups sesame snaps jelly. Jujubes candy chocolate jelly wafer. Tiramisu danish donut shortbread chocolate bar bear claw. Fruitcake bear claw pudding jujubes pastry cheesecake biscuit cake marzipan. Lollipop jelly beans donut bonbon tiramisu tiramisu muffin pie marzipan. Jujubes marshmallow marshmallow brownie pastry tart marzipan jelly-o. Gummies gummi bears chocolate cake sweet biscuit pastry apple pie. Halvah carrot cake chocolate bar gummies donut. Apple pie ice cream muffin brownie sweet roll. Donut oat cake muffin cotton candy sugar plum candy gummi bears biscuit lemon drops. Pie apple pie topping dessert chocolate sweet roll cheesecake brownie.
+
+Tiramisu chocolate cake lollipop chocolate bar lemon drops. Marshmallow topping dragée sweet roll cookie tootsie roll icing danish chocolate. Lollipop cupcake sugar plum dragée candy chocolate. Bonbon sweet roll candy canes tiramisu carrot cake jelly-o wafer. Bear claw bonbon tiramisu marzipan pudding liquorice jujubes sweet. Halvah caramels apple pie carrot cake donut pie. Bonbon lollipop jujubes gummies chocolate cake. Carrot cake powder tootsie roll biscuit soufflé sugar plum. Gummi bears bonbon toffee dessert pastry chocolate cake dessert chocolate. Sweet cake jujubes sesame snaps muffin candy sugar plum. Jelly shortbread liquorice lemon drops cookie lemon drops muffin. Bonbon bear claw tart biscuit jujubes chocolate cake powder lemon drops chocolate. Chocolate sweet roll dragée sweet bonbon jelly toffee. Bonbon cupcake lollipop biscuit tootsie roll.
+
+Bonbon gummi bears shortbread candy ice cream apple pie cupcake tiramisu jelly. Croissant caramels chocolate candy sweet roll jelly. Muffin cupcake lemon drops tart topping gummi bears. Chupa chups tootsie roll dragée chocolate croissant. Chocolate bar jelly beans tootsie roll muffin sweet cotton candy gummies. Donut muffin candy cookie pudding bear claw gummi bears. Sesame snaps biscuit marshmallow gummies sesame snaps biscuit. Biscuit cotton candy sugar plum powder jelly beans. Gummies candy apple pie jelly beans jujubes. Jelly tiramisu lollipop pie chocolate chocolate jelly. Sweet roll wafer liquorice dessert cookie. Cotton candy wafer cotton candy cupcake tootsie roll cookie. Tart cupcake carrot cake ice cream fruitcake.

src/posts/posts.json

@@ -0,0 +1,5 @@
+{
+  "layout": "post",
+  "tags": "posts",
+  "permalink": "//blog/{{ title | slugify }}/index.html"
+}