feat: version initiale

.drone.yml

@@ -0,0 +1,32 @@
+kind: pipeline
+name: production
+when:
+  event: [ push ]
+  branch: [ main ]
+
+clone:
+  git:
+    image: plugins/git
+    pull: true
+
+steps:
+  - name: build
+    image: node:latest
+    commands:
+      - npm i
+      - npx @11ty/eleventy
+
+  - name: deploy
+    image: drillster/drone-rsync
+    settings:
+      hosts:
+        from_secret: deploy_host
+      target: /var/www/sonic.fanstuff.garden
+      source: _site/*
+      user:
+        from_secret: deploy_user
+      key:
+        from_secret: deploy_key
+    when:
+      branch: main
+    delete: true

.gitignore

@@ -0,0 +1,25 @@
+# Generated files
+package/generated*
+
+# Ignore installed npm modules
+node_modules/
+
+# Ignore build tool output, e.g. code coverage
+.nyc_output/
+coverage/
+
+# Ignore API documentation
+api-docs/
+
+# Ignore folders from source code editors
+.vscode
+.idea
+
+# Ignore eleventy output when doing manual tests
+_site/
+
+package-lock.json
+
+# Ignore test files
+.cache
+test/stubs-layout-cache/_includes/*.js

CODE_OF_CONDUCT.md

@@ -0,0 +1,85 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at **kazhnuz@chlore.net**. All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the project community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
+available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
+

_data/metadata.js

@@ -0,0 +1,11 @@
+module.exports = {
+	title: "Locomotive",
+	url: "https://locomotive.quarante-douze.net/",
+	language: "fr",
+	description: "Un petit repertoire de site indé francophones",
+	author: {
+		name: "Kazhnuz",
+		email: "kazhnuz@kobold.cafe",
+		url: "https://kazhnuz.space/"
+	}
+}

_includes/layouts/base.njk

@@ -0,0 +1,15 @@
+---
+layout: layouts/parent.njk
+---
+<main id="skip">
+  <div>
+    {{ content | safe }}
+  </div>
+</main>
+
+<aside>
+  <div id="more-info">
+  <h2>Sommaire</h2>
+  {{ content | toc | safe }}
+  </div>
+</aside>

_includes/layouts/home.njk

@@ -0,0 +1,8 @@
+---
+layout: layouts/parent.njk
+---
+<main id="skip">
+  <div>
+    {{ content | safe }}
+  </div>
+</main>

_includes/layouts/parent.njk

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="{{ metadata.language }}">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{ title or metadata.title }}</title>
+		<meta name="description" content="{{ description or metadata.description }}">
+
+		{#- Atom and JSON feeds included by default #}
+		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+		<link rel="icon" type="image/x-icon" href="/favicon.svg">
+
+		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
+		<meta name="generator" content="{{ eleventy.generator }}">
+
+		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+		<style>{% getBundle "css" %}</style>
+
+	</head>
+	<body>
+		<a href="#skip" class="visually-hidden">Skip to main content</a>
+		<nav id="sidebar">
+				{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({anchorClass: "itemLink",activeAnchorClass: "active",activeListItemClass: "active",activeKey: eleventyNavigation.key, listClass: "nav", listItemClass: "item"}) | safe }}
+		</nav>
+
+		<div class="wrapper">
+		  {{ content | safe }}
+		</div>
+
+		<footer><a href="https://quarante-douze.net/"><img src="/img/qdouze.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
+
+		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
+	</body>
+</html>

_includes/layouts/post.njk

@@ -0,0 +1,28 @@
+---
+layout: layouts/parent.njk
+---
+{# Only include the syntax highlighter CSS on blog posts #}
+{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
+{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
+<h1>{{ title }}</h1>
+
+<ul class="post-metadata">
+	<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+	{%- for tag in tags | filterTagList %}
+	{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</li>
+	{%- endfor %}
+</ul>
+
+{{ content | safe }}
+
+{%- if collections.posts %}
+{%- set previousPost = collections.posts | getPreviousCollectionItem %}
+{%- set nextPost = collections.posts | getNextCollectionItem %}
+{%- if nextPost or previousPost %}
+<ul class="links-nextprev">
+	{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+	{%- if nextPost %}<li>Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+</ul>
+{%- endif %}
+{%- endif %}

_includes/postslist.njk

@@ -0,0 +1,9 @@
+{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
+<ol reversed class="postlist">
+{% for post in postslist | reverse %}
+	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
+	</li>
+{% endfor %}
+</ol>

_includes/websites.md

@@ -0,0 +1,4 @@
+- Réseau
+  - [Press Garden](https://press.fanstuff.garden)
+  - <a href="https://piaille.fr/@breezemedia" rel="me">Breeze Media (fedi)</a>
+  - <a href="https://bsky.app/profile/breezemedia.bsky.social" rel="me">Breeze Media (bsky)</a>

content/404.md

@@ -0,0 +1,19 @@
+---
+layout: layouts/base.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+---
+# Contenu non trouvé.
+
+Retournez sur <a href="/">la page d'accueil</a> et tentez une autre page.
+
+<!--
+
+Read more: https://www.11ty.dev/docs/quicktips/not-found/
+
+This will work for both GitHub pages and Netlify:
+
+* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
+* https://www.netlify.com/docs/redirects/#custom-404
+
+-->

content/about.md

@@ -0,0 +1,28 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  parent: Accueil
+  key: À propos
+  order: 0
+---
+
+# À propos
+
+Locomotive est un site de présentation de site web et créateurs web indépendants (créateurs au sens large) francophone, visant à permettre de découvrir des sujets ou des projets intéressants.
+
+## Règles d'inclusion
+
+Les règles d'inclusion sont les suivantes :
+
+- Le site web inclus doit être un site indépendant, et ne pas appartenir à une corporation et/où être une page facebook/twitter/etc.
+- Le site web ne doit pas contenir trop de publicités
+- Le site web ne doit pas faire la promotion d'idéologie d'extrème droite.
+- Le site web ne doit pas contenir de contenus générés par "IA", ni contenir de contenus volé de manière générale
+- Le site web doit être francophone (ou avoir du moins une version francophone).
+
+## Possibilités futures
+
+Je réfléchis à plusieurs moyens d'étendre la liste, qui peuvent potentiellement avoir des aventages et des inconvéniants.
+
+- **Rajouter des vidéastes youtube traitant de sujet de manière qualitative**. Le soucis de cette idée est qu'elle ferait à coup sûr la promotion de Youtube d'une manière, et ce site vise à présenter avant tout les sites indépendants. Une possibilité serait de mettre comme règle que le/la vidéaste doit être hébergée au moins de manière informale sur un autre site, mais cela limiterais certaines créatifs indépendants de qualités. Une autre possibilité serait de faire la promotion de l'utilisation d'un frontend alternatif, ou de prévenir quand on a un lien youtube.
+- **Rajouter des comptes fedivers intéressants**. Cela diminuerait la démarche "site web" de ce site, mais pourrait permettre aussi aux gens de découvrir les choses cool qui se font sur le fedivers.

content/contribuer.md

@@ -0,0 +1,40 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Contribuer à Locomotive
+  order: 10
+---
+
+# Contribuer à Locomotive
+
+Locomotive est un projet open-source, dont le code source est disponible [ici](https://git.kobold.cafe/) et qui est hébergé par Quarante-Douze. Toutes les contributions sont les bienvenues, tant qu'elles participent à aider à construire un annuaire de site web sain et anti-oppression.
+
+Il y a plusieurs manière de contribuer à la liste et de nous aider à la rendre le mieux possible !
+
+## Ajouter des sites
+
+Ce site étant un site statique dans un dépot git, il est possible d'ajouter des sites via une Merge Request. Pour cela, vous pouvez cloner le répertoire avec git, ajouter les sites dans les catégories où ils doivent aller, et c'est tout bon ! La merge request sera review pour vérifier que [tout les sites conviennent](/about/), et sera merge si c'est bon.
+
+A noter que le projet suis le [contributor-covenant](https://www.contributor-covenant.org/) comme code de conduite et que les attaques envers les contributeurs déjà en situation d'oppression seront punies.
+
+## Je ne sais pas utiliser git :(
+
+Ce n'est pas grave ! Dans ce cas, il vous suffit de participer en faisant des tickets avec les sites ou créateurs de contenus qui mériteraient selon-vous d'être ajouté à la liste !
+
+Cependant, afin de rendre la vie plus facile aux contributeurs du projet, il serait cool que vous mettiez déjà en forme votre liste de la manière suivante dans votre message :
+
+<pre>
+
+```markdown
+- [NOM_DU_SITE](https://url-du-site-dans-le-navigateur.net) - Description brève du site
+- [NOM_DU_SITE](https://url-du-site-dans-le-navigateur.net) - Description brève du site
+- [NOM_DU_SITE](https://url-du-site-dans-le-navigateur.net) - Description brève du site
+```
+
+</pre>
+
+Cela permettra de juste avoir à copier-coller les sites et les ajouter dans la merge request qu'on fera, ce qui nous permettra de plus vite les ajouter :) C'est un petit peu de temps gagné pour nous, mais cela ferait très plaisir !
+
+## Et sans compte ?
+
+Dans ce cas, vous pouvez aussi nous contacter via les réseaux sociaux, ou par mail.

content/districts/arcadia.md

@@ -0,0 +1,22 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  parent: Les districts
+  key: Arcadia
+  order: 1
+  description: Jeux vidéos, jeux en ligne et jeux de sociétés.
+---
+
+# Arcadia
+
+Arcadia est le district des jeux vidéos et de tout ce qui est jeux en général. Cela peut être aussi bien pour *parler* de jeux vidéo que pour jouer à des jeux.
+
+## Sites de jeux-vidéo
+
+## Fansite de jeux
+
+- [Planète-Sonic](https://planete-sonic.com) - Le fansite de référence francophone sur la série Sonic.
+
+## Jeux en lignes
+
+- [Woltar](https://woltar.net) - Revival d'un jeu en ligne francophone de simulation de vie. Adoptez un woltarien et gérez sa vie et socialisez avec d'autres woltariens.

content/districts/index.md

@@ -0,0 +1,22 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Les districts
+  order: 1
+---
+
+# Les districts
+
+Les districts sont le coeur de Locomotive (et avant de Goecities/Neocities districts). Il s'agit des grands types de sujets dans lesquels sont regroupés les sites. 
+
+Les noms sont inspirés (mais ne seront pas forcément repris tel quel) de [la liste des districts](http://www.geocities.ws/NapaValley/2022/cities.html) de Neocities.
+
+## Liste des districts
+
+<ul>
+  {%- for post in collections.all | sort(false, true, "data.eleventyNavigation.order") -%}
+    {%- if post.data.eleventyNavigation.parent == eleventyNavigation.key -%}
+      <li><a href="{{ post.url }}">{{ post.data.eleventyNavigation.key }}</a> - {{ post.data.eleventyNavigation.description }} </li>
+    {%- endif -%}
+  {%- endfor -%}
+</ul>

content/index.md

@@ -0,0 +1,31 @@
+---
+layout: layouts/home.njk
+eleventyNavigation:
+  key: Accueil
+  order: 0
+---
+
+<header>
+  <h1>
+    <a href="/" class="home-link">{{ metadata.title }}</a>
+  </h1>
+</header>
+
+## Bienvenue sur {{ metadata.title }} !
+
+Ce site est un petit répertoire de site web indépendant francophone, conçu dans une optique [IndieWeb](https://indieweb.org/). L'objectif de ce site est de permettre à des gens de potentiellement découvrir des sites qui peuvent les intéresser hors des grosses plateformes d'hébergement de site (les gros réseaux sociaux, fandom, etc). 
+
+Il est dédié à la francophonie, puisque de nombreuses ressources du genre existe pour les anglophone, et que je me suis dit que ce serait bien aussi de permettre de découvrir ce genre de chose pour les personnes ne parlant pas anglais.
+
+Ce site fait partie de [Quarante-Douze](https://quarante-douze.net/)
+
+## Inspiration
+
+Le site est inspiré des défunts géocities et néocities [district](http://www.geocities.ws/NapaValley/2022/cities.html), qui étaient des répertoires de site hébergé sur ces plateformes, triés par thématiques. Le tri et les noms des catégories seront inspiré du concept de District, vous pouvez voir ce site comme le petit train qui va vous amener dans différentes gares :) 
+
+Le site est aussi inspiré des [Awesome List](https://awesomelists.top/#/) ou [Delightful](https://delightful.club/) dans sa présentation.
+
+## Crédits
+
+- L'image de fond est [Steam locomotive running gear](https://commons.wikimedia.org/wiki/File:Steam_locomotive_running_gear.jpg) par Petar Milošević
+- Site généré via [Eleventy](https://www.11ty.dev/)

content/plateformes.md

@@ -0,0 +1,33 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Services du web indé
+  order: 9
+---
+
+# Plateformes indépendants
+
+Cette liste de site est séparée des autres, parce que le but est de présenter les "plateformes" et services du web indépendants. Tout ce qui est hébergements, moteurs de recherches, etc. à pour but d'être ici. Le but de ce site est de montrer qu'il existe des alternatives au web corporate même en terme de services.
+
+Cette liste, contrairement aux autres, **contient des sites anglphones** puisqu'elle traite de services notamment d'hébergement, et où vous pourrez trouver de nombreux sites.
+
+## Portails et recherche
+
+- [Ytoo!](https://ytoo.org/) - Revival du portail Yahoo
+- [Marginalia](https://search.marginalia.nu/) - Moteur de recherche de site indépendant
+
+## Hébergement
+
+- [Neocities](https://neocities.org/) - Hébergeur de site statique à la Neocities
+- [Nekoweb](https://nekoweb.org/) - Autre hébergeur de site statiques
+- [Wiki.GG](https://www.wiki.gg/) - Hébergeur de Wiki (alternative à Wikia/Fandom)
+- [Miraheze](https://miraheze.org/) - Autre hébergeur de Wiki
+
+## Réseaux sociaux
+
+- [imood](https://imood.com) - Réseau social servant à indiquer son humeur du moment
+- [Status.cafe](https://status.cafe) - Réseau sociaux minimaliste
+- [Piclog](https://piclog.blue/) - Réseau social de partage d'images fortement compressées
+- [Sheezy.art](https://sheezy.art/) - Plateforme de partage d'art à la manière de deviantART (avant Eclipse et le spam IA)
+- [Owler](https://owler.cloud/), [Blips](https://blips.club/) et [Pliko](https://pliko.net/) - Revival du Twitter à l'ancienne
+- [Fedivers]() - Réseau de réseaux sociaux fédérés

content/sitemap/sitemap.xml.njk

@@ -0,0 +1,14 @@
+---
+permalink: /sitemap.xml
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+{%- for page in collections.all %}
+	{% set absoluteUrl %}{{ page.url | htmlBaseUrl(metadata.url) }}{% endset %}
+	<url>
+		<loc>{{ absoluteUrl }}</loc>
+		<lastmod>{{ page.date | htmlDateString }}</lastmod>
+	</url>
+{%- endfor %}
+</urlset>

eleventy.config.drafts.js

@@ -0,0 +1,50 @@
+function eleventyComputedPermalink() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		// Always skip during non-watch/serve builds
+		if(data.draft && !process.env.BUILD_DRAFTS) {
+			return false;
+		}
+
+		return data.permalink;
+	}
+};
+
+function eleventyComputedExcludeFromCollections() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		// Always exclude from non-watch/serve builds
+		if(data.draft && !process.env.BUILD_DRAFTS) {
+			return true;
+		}
+
+		return data.eleventyExcludeFromCollections;
+	}
+};
+
+module.exports.eleventyComputedPermalink = eleventyComputedPermalink;
+module.exports.eleventyComputedExcludeFromCollections = eleventyComputedExcludeFromCollections;
+
+module.exports = eleventyConfig => {
+	eleventyConfig.addGlobalData("eleventyComputed.permalink", eleventyComputedPermalink);
+	eleventyConfig.addGlobalData("eleventyComputed.eleventyExcludeFromCollections", eleventyComputedExcludeFromCollections);
+
+	let logged = false;
+	eleventyConfig.on("eleventy.before", ({runMode}) => {
+		let text = "Excluding";
+		// Only show drafts in serve/watch modes
+		if(runMode === "serve" || runMode === "watch") {
+			process.env.BUILD_DRAFTS = true;
+			text = "Including";
+		}
+
+		// Only log once.
+		if(!logged) {
+			console.log( `[11ty/eleventy-base-blog] ${text} drafts.` );
+		}
+
+		logged = true;
+	});
+}

eleventy.config.images.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const eleventyImage = require("@11ty/eleventy-img");
+
+module.exports = eleventyConfig => {
+	function relativeToInputPath(inputPath, relativeFilePath) {
+		let split = inputPath.split("/");
+		split.pop();
+
+		return path.resolve(split.join(path.sep), relativeFilePath);
+	}
+
+	// Eleventy Image shortcode
+	// https://www.11ty.dev/docs/plugins/image/
+	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
+		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
+		// Warning: Avif can be resource-intensive so take care!
+		let formats = ["avif", "webp", "auto"];
+		let file = relativeToInputPath(this.page.inputPath, src);
+		let metadata = await eleventyImage(file, {
+			widths: widths || ["auto"],
+			formats,
+			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
+		});
+
+		// TODO loading=eager and fetchpriority=high
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
+};

eleventy.config.js

@@ -0,0 +1,146 @@
+const { DateTime } = require("luxon");
+const markdownItAnchor = require("markdown-it-anchor");
+
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginBundle = require("@11ty/eleventy-plugin-bundle");
+const pluginNavigation = require("@11ty/eleventy-navigation");
+const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+
+const pluginDrafts = require("./eleventy.config.drafts.js");
+const pluginImages = require("./eleventy.config.images.js");
+const pluginTOC = require('eleventy-plugin-toc');
+
+module.exports = function(eleventyConfig) {
+	// Copy the contents of the `public` folder to the output folder
+	// For example, `./public/css/` ends up in `_site/css/`
+	eleventyConfig.addPassthroughCopy({
+		"./public/": "/",
+		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css"
+	});
+
+	// Run Eleventy when these files change:
+	// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
+
+	// Watch content images for the image pipeline.
+	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
+
+	// App plugins
+	eleventyConfig.addPlugin(pluginDrafts);
+	eleventyConfig.addPlugin(pluginImages);
+	
+	// Official plugins
+	eleventyConfig.addPlugin(pluginRss);
+	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
+		preAttributes: { tabindex: 0 }
+	});
+	eleventyConfig.addPlugin(pluginNavigation);
+	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+	eleventyConfig.addPlugin(EleventyRenderPlugin);
+	eleventyConfig.addPlugin(pluginBundle);
+	eleventyConfig.addPlugin(pluginTOC, {
+    tags: ['h2'],
+    wrapper: 'div'
+  });
+
+	// Filters
+	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
+	});
+
+	eleventyConfig.addFilter('htmlDateString', (dateObj) => {
+		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
+	});
+
+	// Get the first `n` elements of a collection.
+	eleventyConfig.addFilter("head", (array, n) => {
+		if(!Array.isArray(array) || array.length === 0) {
+			return [];
+		}
+		if( n < 0 ) {
+			return array.slice(n);
+		}
+
+		return array.slice(0, n);
+	});
+
+	// Return the smallest number argument
+	eleventyConfig.addFilter("min", (...numbers) => {
+		return Math.min.apply(null, numbers);
+	});
+
+	// Return all the tags used in a collection
+	eleventyConfig.addFilter("getAllTags", collection => {
+		let tagSet = new Set();
+		for(let item of collection) {
+			(item.data.tags || []).forEach(tag => tagSet.add(tag));
+		}
+		return Array.from(tagSet);
+	});
+
+	eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
+		return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+	});
+
+	// Customize Markdown library settings:
+	eleventyConfig.amendLibrary("md", mdLib => {
+		mdLib.use(markdownItAnchor, {
+			permalink: markdownItAnchor.permalink.ariaHidden({
+				placement: "after",
+				class: "header-anchor",
+				symbol: "#",
+				ariaHidden: false,
+			}),
+			level: [1,2,3,4],
+			slugify: eleventyConfig.getFilter("slugify")
+		});
+	});
+
+	// Features to make your build faster (when you need them)
+
+	// If your passthrough copy gets heavy and cumbersome, add this line
+	// to emulate the file copy on the dev server. Learn more:
+	// https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve
+
+	// eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+
+	return {
+		// Control which files Eleventy will process
+		// e.g.: *.md, *.njk, *.html, *.liquid
+		templateFormats: [
+			"md",
+			"njk",
+			"html",
+			"liquid",
+		],
+
+		// Pre-process *.md files with: (default: `liquid`)
+		markdownTemplateEngine: "njk",
+
+		// Pre-process *.html files with: (default: `liquid`)
+		htmlTemplateEngine: "njk",
+
+		// These are all optional:
+		dir: {
+			input: "content",          // default: "."
+			includes: "../_includes",  // default: "_includes"
+			data: "../_data",          // default: "_data"
+			output: "_site"
+		},
+
+		// -----------------------------------------------------------------
+		// Optional items:
+		// -----------------------------------------------------------------
+
+		// If your site deploys to a subdirectory, change `pathPrefix`.
+		// Read more: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix
+
+		// When paired with the HTML <base> plugin https://www.11ty.dev/docs/plugins/html-base/
+		// it will transform any absolute URLs in your HTML to include this
+		// folder name and does **not** affect where things go in the output folder.
+		pathPrefix: "/",
+	};
+};

package.json

@@ -0,0 +1,47 @@
+{
+	"name": "eleventy-base-blog",
+	"version": "8.0.0",
+	"description": "A starter repository for a blog web site using the Eleventy site generator.",
+	"scripts": {
+		"build": "npx @11ty/eleventy",
+		"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
+		"start": "npx @11ty/eleventy --serve --quiet",
+		"debug": "DEBUG=Eleventy* npx @11ty/eleventy",
+		"debugstart": "DEBUG=Eleventy* npx @11ty/eleventy --serve --quiet",
+		"benchmark": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/11ty/eleventy-base-blog.git"
+	},
+	"author": {
+		"name": "Zach Leatherman",
+		"email": "zachleatherman@gmail.com",
+		"url": "https://zachleat.com/"
+	},
+	"license": "MIT",
+	"engines": {
+		"node": ">=14"
+	},
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/11ty"
+	},
+	"bugs": {
+		"url": "https://github.com/11ty/eleventy-base-blog/issues"
+	},
+	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
+	"devDependencies": {
+		"@11ty/eleventy": "^2.0.1",
+		"@11ty/eleventy-img": "^3.1.0",
+		"@11ty/eleventy-navigation": "^0.3.5",
+		"@11ty/eleventy-plugin-bundle": "^1.0.4",
+		"@11ty/eleventy-plugin-rss": "^1.2.0",
+		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"luxon": "^3.3.0",
+		"markdown-it-anchor": "^8.6.7"
+	},
+	"dependencies": {
+		"eleventy-plugin-toc": "^1.1.5"
+	}
+}

public/css/index.css

@@ -0,0 +1,331 @@
+@font-face {
+  font-family: 'Teko';
+  src: url('/fonts/teko-light-webfont.woff');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Teko';
+  src: url('/fonts/teko-regular-webfont.woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Teko';
+  src: url('/fonts/teko-medium-webfont.woff');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Teko';
+  src: url('/fonts/teko-semibold-webfont.woff');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Teko';
+  src: url('/fonts/teko-bold-webfont.woff2') format('woff2'), url('../fonts/teko-bold-webfont.woff') format('woff');
+  font-weight: 700;
+  font-display: swap;
+}
+
+:root {
+  --color-gray-20: #e0e0e0;
+  --color-gray-50: #C0C0C0;
+  --color-gray-90: #2f2f2f;
+
+	/* --text-color is assigned to --color-gray-_ above */
+	--text-color-link: #c92a2a;
+	--text-color-link-active: #c92a2a;
+	--text-color-link-visited: #c92a2a;
+
+  --background-color: #fafafa;
+  --background-menu: #495057;
+
+	--text-color: var(--color-gray-90);
+	
+	--font-family: Inter,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Cantarell,
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
+      sans-serif;
+	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
+	--font-family-logo: Teko,
+    sans-serif;
+	--font-family-title:Teko,
+    sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0 auto;
+	min-height:100%;
+	font-family: var(--font-family);
+	color: var(--text-color);
+}
+
+body {
+  padding: 24px;
+}
+
+.wrapper {
+  width: 800px;
+  margin: auto;
+  position: relative;
+}
+
+html {
+	overflow-y: scroll;
+	background-color: var(--background-color);
+}
+
+/* https://www.a11yproject.com/posts/how-to-hide-content/ */
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+a[href] {
+	color: var(--text-color-link);
+  text-decoration: underline dashed 1px;
+  border-radius: 0.1rem;
+  text-decoration: underline dashed 1px;
+  text-underline-offset: 0.1rem;
+}
+a[href]:visited {
+	color: var(--text-color-link-visited);
+}
+a[href]:hover,
+a[href]:active {
+	color: var(--text-color-link-active);
+  background-color: rgba(0,0,0,0.1);
+  text-decoration: none;
+}
+
+blockquote {
+  opacity: 75%;
+  border-left: 3px solid currentColor;
+  padding-left: 12px;
+}
+
+/* Direct Links / Markdown Headers */
+.header-anchor {
+	text-decoration: none;
+	font-style: normal;
+	font-size: 1em;
+	margin-left: .1em;
+}
+a[href].header-anchor,
+a[href].header-anchor:visited {
+	color: transparent;
+}
+a[href].header-anchor:focus,
+a[href].header-anchor:hover {
+	text-decoration: underline;
+}
+a[href].header-anchor:focus,
+:hover > a[href].header-anchor {
+	color: #aaa;
+}
+
+header {
+  background:center center url("/img/back.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius:3px;
+  height:240px;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.8);
+  display:flex;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  color: #e03131;
+  font-family: var(--font-family-title);
+  font-size: 3rem;
+}
+
+header h1 {
+  text-align: center;
+}
+
+header h1 a[href] {
+  font-size:5.5rem;
+  text-shadow: 0px 2px 3px rgba(0,0,0,0.3);
+  font-weight: 900;
+  color:white!important;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: block;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+}
+
+.quadrillage {
+  display:grid;
+  grid-template-columns : 1fr 1fr;
+  column-gap: 1rem;
+}
+
+#sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  border-right: 1px solid black;
+  background-color: var(--background-menu);
+  padding:12px;
+  height:100%;
+  box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4);
+}
+
+#sidebar > ul > li {
+  margin:0;
+  padding:3px;
+}
+
+main {
+  background-color: var(--background-color);
+  line-height:1.5rem;
+  width: 800px;
+  margin: auto;
+}
+
+main img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: auto;
+}
+
+.card,
+#sidebar ul>li,
+#links ul>li {
+  background-color: var(--background-menu);
+}
+
+#sidebar ul > li,
+#links ul > li {
+	list-style: none;
+	font-weight: bold;
+}
+
+
+#more-info ol > li,
+#more-info ul > li {
+	list-style: none;
+}
+
+#sidebar ul > li li,
+#links ul>li li,
+#more-info li {
+  border-radius:0px;
+  padding:0px;
+  margin:0px;
+  font-weight: normal;
+  border:0;
+  box-shadow: none;
+}
+
+ul.nav,
+#sidebar ul li ul,
+#links ul li ul,
+#more-info ol {
+  padding:0;
+  margin:0;
+	list-style: none;
+}
+
+#sidebar ul li a,
+#more-info ol li a {
+  display:block;
+  width:100%;
+  text-decoration:dashed;
+  color: white;
+  border-radius:3px;
+  padding:6px;
+}
+
+#more-info ol li a {
+  color: var(--text-color);
+}
+
+#links ul li > p {
+  padding: 3px;
+  margin:0;
+}
+
+#more-info h2 {
+  padding: 3px;
+  margin: 0;
+  font-size: 1rem;
+}
+
+#sidebar ul li li a,
+#links ul li li a,
+#more-info ol li a {
+  padding-left:18px;
+}
+
+#sidebar ul li a.active,
+#sidebar ul li a:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+
+#more-info ol li a:hover,
+#more-info ol li a.active {
+  background-color:rgba(0,0,0,0.1);
+}
+
+aside {
+  position: absolute;
+  top: 1px;
+  right: -264px;
+  height: 100%;
+}
+
+#more-info {
+  position: sticky;
+  top:12px;
+  border-left: 3px solid #e03131;
+  padding: 6px;
+}
+
+#sidebar {
+  min-width:280px;
+  width:280px;
+}
+
+#more-info {
+  min-width: 240px;
+  width: 240px;
+}
+
+footer {
+  text-align:right;
+  margin: auto;
+  width: 800px;
+}
+
+iframe {
+  border: none;
+}
+

public/favicon.svg

@@ -0,0 +1 @@
+<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect fill="#e03131" fill-opacity="1" height="512" width="512" rx="32" ry="32"></rect><g class="" style="" transform="translate(0,0)"><path d="M18 18v31.758C38.244 53.855 59.076 55.953 80 56a317.745 317.745 0 0 0 50.658-4.27C143.375 100.622 200.964 135.96 268 136c15.1-.044 30.093-1.903 44.395-5.504 3.702 25.632 27.322 44.78 55.275 44.813.475-.01.95-.027 1.424-.048 4.215 14.473 20.33 24.72 38.906 24.738 22.09 0 40-14.327 40-32-.022-13.555-10.718-25.63-26.697-30.137a48.067 48.067 0 0 0 2.203-14.21c-.02-19.245-11.602-36.886-30.057-45.772C402.962 63.617 407.94 47.92 408 32c-.033-7.4-1.128-6.774-3.268-14zm-2 205v18h23v48H25v94h142v-94h-14v-48h23v-18zm360 0v18h17v46h46v-46h17v-18zM57 241h14v48H57zm32 0h46v48H89zm231 20c-7.25 0-14.577 1.013-19.154 2.54-2.077.69-3.287 1.444-3.846 1.855V287h46v-21.605c-.56-.41-1.77-1.164-3.846-1.856C334.577 262.012 327.25 261 320 261zm-135 44v30h247v18H185v30h279c36 0 36-78 0-78zM25 401v37.22L75.67 401zm416 0v78h53.906c-4.965-9.187-9.113-19.953-12.734-31.557-4.94-15.833-8.498-32.39-10.227-46.443zm-289 1.49c-10.72 0-20.57 3.55-28.455 9.533L164.325 463h32.714a47.358 47.358 0 0 0 1.96-13.51c0-26.064-20.936-47-47-47zm112 0c-8.46 0-16.374 2.217-23.213 6.088L284.327 463h24.712a47.358 47.358 0 0 0 1.96-13.51c0-26.064-20.936-47-47-47zm112 0c-8.46 0-16.374 2.217-23.213 6.088L396.327 463c1.68 2.254 1.69 1.93 1.673 4.2V481h-56.945c8.586 9.524 21.034 15.49 34.945 15.49 26.064 0 47-20.936 47-47s-20.936-47-47-47zm-278.994 5.174L43.456 447H87.06c.512-13.423 5.137-25.816 12.633-35.975zm130.105 12.633C220.78 428.302 217 438.43 217 449.49c0 4.703.69 9.234 1.96 13.51h42.313zm112 0C332.78 428.302 329 438.43 329 449.49c0 4.703.69 9.234 1.96 13.51h42.313zm-227.684 5.392c-4.08 6.97-6.426 15.096-6.426 23.8 0 26.064 20.936 47 47 47 13.91 0 26.36-5.966 34.945-15.49h-31.27zM25.023 465c.522 16.756 14.085 30 30.977 30s30.455-13.244 30.977-30zm204.032 16c8.586 9.524 21.034 15.49 34.945 15.49 13.91 0 26.36-5.966 34.945-15.49z" fill="#fff" fill-opacity="1"></path></g></svg>