diff --git a/.eleventy.js b/.eleventy.js index 497d8fb..d71c8bb 100644 --- a/.eleventy.js +++ b/.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); diff --git a/config/collections/index.js b/config/collections/index.js index 9f8fdd3..0db5bc4 100644 --- a/config/collections/index.js +++ b/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 }; diff --git a/readme.md b/readme.md index f421adf..b04680c 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) + - [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 diff --git a/src/_includes/icons/cube.svg b/src/_includes/icons/cube.svg deleted file mode 100644 index e8b049c..0000000 --- a/src/_includes/icons/cube.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/_includes/icons/design-tokens.svg b/src/_includes/icons/design-tokens.svg deleted file mode 100644 index 6c1f338..0000000 --- a/src/_includes/icons/design-tokens.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_includes/icons/every-layout.svg b/src/_includes/icons/every-layout.svg deleted file mode 100644 index 31ffdd7..0000000 --- a/src/_includes/icons/every-layout.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_includes/icons/polypane.svg b/src/_includes/icons/polypane.svg deleted file mode 100644 index 88548c3..0000000 --- a/src/_includes/icons/polypane.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/_includes/icons/tailwind.svg b/src/_includes/icons/tailwind.svg deleted file mode 100644 index de5ce34..0000000 --- a/src/_includes/icons/tailwind.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_includes/icons/utopia.svg b/src/_includes/icons/utopia.svg deleted file mode 100644 index a889ce6..0000000 --- a/src/_includes/icons/utopia.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/_includes/partials/date.njk b/src/_includes/partials/date.njk new file mode 100644 index 0000000..44799d3 --- /dev/null +++ b/src/_includes/partials/date.njk @@ -0,0 +1,5 @@ + diff --git a/src/_includes/svg/curve.svg b/src/_includes/svg/curve.svg deleted file mode 100644 index 37acf80..0000000 --- a/src/_includes/svg/curve.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/_includes/svg/divider-curve.svg b/src/_includes/svg/divider-curve.svg deleted file mode 100644 index 6503ed6..0000000 --- a/src/_includes/svg/divider-curve.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/src/_includes/svg/divider-pixels.svg b/src/_includes/svg/divider-pixels.svg index 6057fc1..fe66a8f 100644 --- a/src/_includes/svg/divider-pixels.svg +++ b/src/_includes/svg/divider-pixels.svg @@ -1,5 +1,5 @@ - a custom seperator seperating the menu from the content - - diff --git a/src/_includes/svg/twitter.svg b/src/_includes/svg/twitter.svg deleted file mode 100644 index 68c37ae..0000000 --- a/src/_includes/svg/twitter.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - Link to my twitter profile. I'm not much of a broadcaster, I prefer to listen - - - diff --git a/src/_includes/svg/whatsapp.svg b/src/_includes/svg/whatsapp.svg deleted file mode 100644 index 8989334..0000000 --- a/src/_includes/svg/whatsapp.svg +++ /dev/null @@ -1,14 +0,0 @@ - - Link to contact me on whatsapp - - diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk index 3e92653..0a93aac 100644 --- a/src/_layouts/home.njk +++ b/src/_layouts/home.njk @@ -17,3 +17,24 @@ layout: base {{ content | safe }} + +
+
+

{{ blog.title }}

+

{{ blog.intro }}

+
+ + + +
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk index 18c4bf6..0643b66 100644 --- a/src/_layouts/post.njk +++ b/src/_layouts/post.njk @@ -1,6 +1,16 @@ --- -layout: page +layout: base --- +
+
+

{{ title }}

+ + {% set definedDate = date %} {% include "partials/date.njk" %} + + {{ content | safe }} +
+
+ {%- include "schemas/blogpost-schema.njk" %} diff --git a/src/assets/css/blocks/blog.css b/src/assets/css/blocks/blog.css new file mode 100644 index 0000000..d5a3aa3 --- /dev/null +++ b/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); +} diff --git a/src/assets/css/blocks/section.css b/src/assets/css/blocks/section.css index abaadbc..be454cd 100644 --- a/src/assets/css/blocks/section.css +++ b/src/assets/css/blocks/section.css @@ -1,4 +1,4 @@ -.section > .curve:first-child { +.section > .seperator:first-child { transform: rotate(180deg) translateY(-1px); } diff --git a/src/assets/css/blocks/curve.css b/src/assets/css/blocks/seperator.css similarity index 88% rename from src/assets/css/blocks/curve.css rename to src/assets/css/blocks/seperator.css index 48b2029..2e6fc2f 100644 --- a/src/assets/css/blocks/curve.css +++ b/src/assets/css/blocks/seperator.css @@ -1,4 +1,4 @@ -.curve { +.seperator { display: block; height: 3.5em; width: 100%; diff --git a/src/assets/css/utilities/content.css b/src/assets/css/utilities/content.css new file mode 100644 index 0000000..143b57a --- /dev/null +++ b/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; +} diff --git a/src/pages/index.md b/src/pages/index.md index c081eed..9a0dabe 100644 --- a/src/pages/index.md +++ b/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 diff --git a/src/posts/2022-08-28-hello.md b/src/posts/2022-08-28-hello.md new file mode 100644 index 0000000..5e097ec --- /dev/null +++ b/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. diff --git a/src/posts/2022-09-01-a-post.md b/src/posts/2022-09-01-a-post.md new file mode 100644 index 0000000..14a0d55 --- /dev/null +++ b/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. diff --git a/src/posts/posts.json b/src/posts/posts.json new file mode 100644 index 0000000..51d3d74 --- /dev/null +++ b/src/posts/posts.json @@ -0,0 +1,5 @@ +{ + "layout": "post", + "tags": "posts", + "permalink": "//blog/{{ title | slugify }}/index.html" +}