some bigger changes, detailed in readme

This commit is contained in:
madrilene 2022-11-24 13:48:09 +01:00
parent ddaebca80d
commit 9834b3a635
18 changed files with 209 additions and 46 deletions

View file

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

View file

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

33
package-lock.json generated
View file

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

View file

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

View file

@ -4,6 +4,7 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
- [Eleventy starter](#eleventy-starter)
- [Preview](#preview)
- [Deploy to Netlify](#deploy-to-netlify)
- [Features](#features)
- [First steps](#first-steps)
- [Development](#development)
@ -11,6 +12,7 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
- [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)
@ -21,6 +23,10 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
https://eleventy-excellent.netlify.app/
## Deploy to Netlify
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/madrilene/eleventy-excellent)
## Features
This starter includes:
@ -38,16 +44,12 @@ This starter includes:
## First steps
- 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
- edit your social media in \_data/social.js and \_includes/icons. Icons must be prefixed with "social-".
- delete \_data/github.js and pages/github.njk, as they are just an example
- changed routes:
```
redirectFrom: ['/old-route/', '/optionally-another-old-route/']
```
- Important: edit meta data in `src/_data/meta.js`, it's being used all over the template.
- 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 your social media in `src/_data/social.js` and `src/_includes/icons`. New icons must be prefixed with "social-".
- Delete `src/_data/**github.js**` and the blog posts, as these serve only as an example.
- Edit your preferences (colors, fluid text sizes etc.) in `src/assets/css/design-tokens`.
- Optional: set your (favicon) icons in `src/assets/images/favicon`
## Development
@ -75,6 +77,12 @@ 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!
### 22-11-04
Adding blog posts for feature explanation.

View file

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

View file

@ -5,8 +5,18 @@
"icon": "github.svg"
},
{
"platform": "twitter",
"url": "https://twitter.com/lenesaile",
"icon": "twitter.svg"
"platform": "mastodon",
"url": "https://front-end.social/@lene",
"icon": "mastodon.svg"
},
{
"platform": "ko-fi",
"url": "https://ko-fi.com/lenesaile",
"icon": "kofi.svg"
},
{
"platform": "rss",
"url": "/feed.xml",
"icon": "rss.svg"
}
]

View file

@ -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>

After

Width:  |  Height:  |  Size: 915 B

View file

@ -0,0 +1,12 @@
<svg
aria-hidden="true"
focusable="false"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="currentColor"
>
<path
d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 346 B

View file

@ -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" />

View file

@ -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 -->

View file

@ -8,8 +8,8 @@ excludeFromSitemap: true
Developer: {{ meta.author }}
Contact: {{ meta.authorEmail }}
Site: {{ meta.authorWebsite }}
{% if meta.meta_data.twitterCreator %}
Twitter: {{ meta.meta_data.twitterCreator }}{% endif %}
{% if meta.meta_data.mastodonCreator %}
Mastodon: {{ meta.meta_data.mastodonCreator }}{% endif %}
/* SITE */
Doctype: HTML5

View file

@ -1,7 +1,12 @@
---
permalink: /site.manifest
eleventyExcludeFromCollections: true
excludeFromSitemap: true
---
{
"name": "Eleventy Excellent - Starter based on buildexcellentwebsite.es",
"short_name": "Eleventy Excellent",
"start_url": "https://eleventy-excellent.netlify.app",
"name": "{{ meta.siteName }} - {{ meta.siteDescription }}",
"short_name": "{{ meta.siteName }}",
"start_url": "{{ meta.url }}",
"icons": [
{
"src": "/android-chrome-192x192.png",
@ -20,7 +25,7 @@
"purpose": "maskable"
}
],
"theme_color": "#FF5678",
"background_color": "#FF5678",
"theme_color": "{{ meta.themeColor }}",
"background_color": "{{ meta.themeBgColor }}",
"display": "standalone"
}
}

33
src/feed.njk Normal file
View file

@ -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>

View file

@ -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

View file

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

View file

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