docs: finition de la documentation

Fixes #3

.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/erratum.kazhnuz.space
+      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

README.md

@@ -4,12 +4,52 @@ Embarcadère est une petite page simple que j'ai créé pour me servir de page d
 
 ## Modifier la page
 
-- La page HTML contient toute les données, les liens et les éléments utilisable.
+Le site peut être modifié via le fichier `_data/config.json`, de la manière suivante.
-- Pour changer le moteur de recherche, il suffit de remplacer l'action et le "name" du champ de recherche
+
-- Les icones utilisable sont [trouvable ici](https://forkaweso.me/Fork-Awesome/icons/)
+## Customisation
-- Les couleurs sont modifiable via les variable css utilisées.
+
+Le site peut être customisé par trois moyens principaux : modifier l'image de fond, le favicon modifier la mascotte (et son texte/alt) et la couleur d'accents.
+
+- Le fond peut être modifié en modifiant /public/img/background.jpg
+- La couleur d'accent peut être modifié en modifiant le contenu de `accentColor` dans le fichier `_data/config.json`
+- La mascotte peut être modifiée en modifiant /public/img/mascotte.png
+  - Son alt-text se trouve dans le fichier `_data/config.json` dans `mascotte.alt`
+  - Une description supplémentaire peut être trouvée dans le fichier `_data/config.json` dans `mascotte.message` et s'affichera au survol de la mascotte
+- Le favicon peut être modifié en modifiant /public/favicon.png
+
+## Modifié les sites
+
+Les sites sont inclu dans les variables `featuredSites` ou dans des blocks dans la variable `siteBlocks`. Pour modifier les sites "mis en avant" (les boutons colorés), il vous suffit de modifier les sites qui sont géré de la manire suivante.
+
+```json
+  "featuredSites":[
+    {"nom":"<nom qui sera affiché sur le bouton>", "url":"<url du site>", "emoji":"<Un emoji à utiliser>"},
+  ]
+```
+
+Pour modifier les sites dans les blocks, vous pouvez le faire de la manière suivante
+
+```json
+  "siteBlocks":[
+    {
+      "nom":"<nom du block>",
+      "sites":[
+        {"nom":"<nom qui sera affiché sur le lien>", "url":"<url du site>", "emoji":"<Un emoji à utiliser>"},
+      ]
+    },
+  ]
+```
+
+Un lien supplémentaire `moreLink` peut également être modifié
+
+```json
+  "moreLink": {
+    "nom": "Plus de liens sur mon shaarli !",
+    "url": "https://shaarli.kazhnuz.space",
+    "emoji": "🔗"
+  },
+```
 
 ## Crédits
 
-- Icones par fork-awesome
 - Fond d'écran venant d'Elementary OS, fait par Ashim DSilva

_data/config.json

@@ -0,0 +1,109 @@
+{
+  "accentColor":"#c2255c",
+  "mascotte":{
+    "message":"Mascotte créée par Withelias !",
+    "alt":"Un petit kobold marron dans une tasse avec marquée Kobold Café"
+  },
+  "featuredSites":[
+    {"nom":"Kobold Cafe", "url":"https://kobold.cafe/", "emoji":"☕"},
+    {"nom":"Code Source", "url":"https://git.kobold.cafe/kazhnuz/embarcadere", "emoji":"ℹ️"}
+  ],
+  "moreLink": {
+    "nom": "Plus de liens sur mon shaarli !",
+    "url": "https://shaarli.kazhnuz.space",
+    "emoji": "🔗"
+  },
+  "siteBlocks":[
+    {
+      "nom":"Réseaux sociaux",
+      "sites":[
+        {"nom":"Fedivers", "url":"https://fediverse.party/", "emoji":"🌍"},
+        {"nom":"Sheezy.art", "url":"https://sheezy.art/", "emoji":"🖼️"},
+        {"nom":"Micro réseaux-sociaux", "url":"https://quarante-douze.net/les-micro-r%C3%A9seaux-sociaux", "emoji":"📋"}
+      ]
+    },
+    {
+      "nom":"Sites hébergés",
+      "sites":[
+        {"nom":"Kazhnuz Space", "url":"https://kazhnuz.space/", "emoji":"🏡"},
+        {"nom":"Quarante Douze", "url":"https://quarante-douze.net/", "emoji":"👾"},
+        {"nom":"Withelias", "url":"https://withelias.kobold.cafe/", "emoji":"🖌️"},
+        {"nom":"Distant Flare", "url":"https://distantflare.kobold.cafe/", "emoji":"💬"},
+        {"nom":"Fanstuff Garden", "url":"https://fanstuff.garden/", "emoji":"🌳"}
+      ]
+    },
+    {
+      "nom":"Sites amis",
+      "sites":[
+        {"nom":"Planète-Sonic", "url":"https://planete-sonic.com/", "emoji":"🦔"},
+        {"nom":"Radio PSo", "url":"https://radio.planete-sonic.com/", "emoji":"🎵"},
+        {"nom":"Sonic Mag 2", "url":"https://sm2.planete-sonic.com/", "emoji":"💬"},
+        {"nom":"Woltar", "url":"https://woltar.com/", "emoji":"🐱"}
+      ]
+    },
+    {
+      "nom":"Favoris Retroweb",
+      "sites":[
+        {"nom":"Portail Ytoo!", "url":"https://ytoo.org/", "emoji":"🚪"},
+        {"nom":"Neocities", "url":"https://neocities.org/", "emoji":"🐱"},
+        {"nom":"Nekoweb", "url":"https://nekoweb.org/", "emoji":"🐱"},
+        {"nom":"Marginalia Search", "url":"https://search.marginalia.nu/", "emoji":"🔍"}
+      ]
+    },
+    {
+      "nom":"Jeux du jour",
+      "sites":[
+        {"nom":"Wordle FR", "url":"https://wordle.louan.me/", "emoji":"✏️"},
+        {"nom":"Cé/pédantix", "url":"https://cemantix.certitudes.org/", "emoji":"✏️"},
+        {"nom":"Travle", "url":"https://travle.earth/", "emoji":"🌍"},
+        {"nom":"Nerdle", "url":"https://nerdlegame.com/", "emoji":"➕"},
+        {"nom":"Sonic Heardle", "url":"https://sonic-heardle.glitch.me/", "emoji":"🦔"}
+      ]
+    },
+    {
+      "nom":"Jeux vidéo",
+      "sites":[
+        {"nom":"Itch.io", "url":"https://itch.io/", "emoji":"🎮"},
+        {"nom":"Gamejolt", "url":"https://gamejolt.com/", "emoji":"🎮"},
+        {"nom":"Pico-8", "url":"https://www.lexaloffle.com/pico-8.php", "emoji":"🎮"},
+        {"nom":"ROMHacking.net", "url":"https://www.romhacking.net/", "emoji":"🎮"}
+      ]
+    },
+    {
+      "nom":"Arts créatifs",
+      "sites":[
+        {"nom":"Bandcamp", "url":"https://bandcamp.com/", "emoji":"🎵"},
+        {"nom":"Webtoon", "url":"https://webtoon.com/", "emoji":"🖼️"},
+        {"nom":"Wattpad", "url":"https://www.wattpad.com/", "emoji":"🖊️"}
+      ]
+    },
+    {
+      "nom":"Gamedev",
+      "sites":[
+        {"nom":"Godot", "url":"https://godotengine.org/", "emoji":"🎮"},
+        {"nom":"Love2D", "url":"https://love2d.org/", "emoji":"🎮"},
+        {"nom":"OpenGameArt", "url":"https://opengameart.org/", "emoji":"🖼️"},
+        {"nom":"Webidev", "url":"https://webidev.com/", "emoji":"🖥️"}
+      ]
+    },
+    {
+      "nom":"Trucs funs",
+      "sites":[
+        {"nom":"98.js", "url":"https://98.js.org/", "emoji":"🖥️"},
+        {"nom":"Blåhaj being human", "url":"https://blahaj.xyz/", "emoji":"🎮"},
+        {"nom":"Userinyerface", "url":"https://userinyerface.com/game.html", "emoji":"🎮"},
+        {"nom":"Webneko", "url":"https://webneko.net/", "emoji":"🐈"},
+        {"nom":"The useless web", "url":"https://theuselessweb.com/", "emoji":"🖥️"}
+      ]
+    },
+    {
+      "nom":"Tutoriels",
+      "sites":[
+        {"nom":"Docs accessibilités", "url":"https://quarante-douze.net/liens-et-guides-sur-laccessibilite/", "emoji":"📒"},
+        {"nom":"Docs webdev", "url":"https://quarante-douze.net/liens-et-guides-pour-le-dev-web/", "emoji":"📒"},
+        {"nom":"Resources éducatives", "url":"https://quarante-douze.net/resources-utiles-pour-lenseignement", "emoji":"📒"},
+        {"nom":"Guide Linux", "url":"https://quarante-douze.net/guide-linux", "emoji": "📒"}
+      ]
+    }
+  ]
+}

_data/metadata.js

@@ -0,0 +1,11 @@
+module.exports = {
+	title: "Kobold Start",
+	url: "https://start.kobold.cafe/",
+	language: "fr",
+	description: "Un petit portail internet tout bête",
+	author: {
+		name: "Kazhnuz",
+		email: "kazhnuz@kobold.cafe",
+		url: "https://kazhnuz.space/"
+	}
+}

_includes/layouts/parent.njk

@@ -0,0 +1,60 @@
+<!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 }}">
+		<link rel="icon" type="image/x-icon" href="/favicon.png">
+
+		{#- 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>
+
+		<style>
+			:root {
+				--color-accent: {{ config.accentColor }};
+			}
+		</style>
+
+	</head>
+	<body>
+  <main>
+    <h1>{{ metadata.title }}</h1>
+    <form method="GET" action="https://duckduckgo.com/">
+      <input name="q" title="Recherchez sur DuckDuckGo…" placeholder="Recherchez sur DuckDuckGo…" />
+    </form>
+    
+    <div class="featured">
+			{%- for site in config.featuredSites -%}
+      	<a href="{{ site.url }}" rel="noopener"><span class="emoji" aria-hidden=true>{{site.emoji}}</span> {{ site.nom }}</a>
+			{%- endfor -%}
+    </div>
+    
+    <div class="cols">
+			{%- for siteBlock in config.siteBlocks -%}
+      	<div class="linklist">
+					<h2><i class="fa fa-comments-o"></i> {{ siteBlock.nom }}</h2>
+					<ul>
+						{%- for site in siteBlock.sites -%}
+						<li><a href="{{ site.url }}" rel="noopener"><span class="emoji" aria-hidden=true>{{site.emoji}}</span> {{ site.nom }}</a></li>
+						{%- endfor -%}
+					</ul>
+				</div>
+			{%- endfor -%}
+    </div>
+    
+    <div class="moreLink">
+			<a href="{{ config.moreLink.url }}" rel="noopener"><span class="emoji" aria-hidden=true>{{config.moreLink.emoji}}</span> {{ config.moreLink.nom }}</a>
+    </div>
+  </main>
+	<div class="mascotte">
+		<div>
+			{% image "../public/img/mascotte.png", config.mascotte.alt %}
+			<div class="mascotte-message">{{ config.mascotte.message }}</div>
+		<div>
+	</div>
+</body>
+</html>

content/index.md

@@ -0,0 +1,3 @@
+---
+layout: layouts/parent.njk
+---

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,144 @@
+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 { 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(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: "/",
+	};
+};

index.html

@@ -1,81 +0,0 @@
-<!doctype html>
-
-<html lang="fr">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <title>Embarcadère</title>
-  <meta name="description" content="Une page d'accueil simple en HTML5, affichant quelques favoris">
-  <meta name="author" content="Kazhnuz">
-
-  <meta property="og:title" content="Embarcadère">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://kazhnuz.space">
-  <meta property="og:description" content="Une page d'accueil simple en HTML5, affichant quelques favoris">
-
-  <link rel="stylesheet" href="./styles.css">
-  <link rel="stylesheet" href="./dep/fork-awesome/css/fork-awesome.min.css">
-</head>
-
-<body>
-  <main>
-    <h1>Bonjour</h1>
-    <form method="GET" action="https://duckduckgo.com/">
-      <input name="q" title="Recherchez sur DuckDuckGo…" placeholder="Recherchez sur DuckDuckGo…" />
-    </form>
-    
-    <div class="featured">
-      <a href="#" rel="noopener"> <i class="fa fa-fw fa-globe"></i> Site favori 1 </a>
-      <a href="#" rel="noopener"> <i class="fa fa-fw fa-globe"></i> Site favori 2 </a>
-      <a href="#" rel="noopener"> <i class="fa fa-fw fa-globe"></i> Site favori 3 </a>
-    </div>
-    
-    <div class="cols">
-      <div class="linklist">
-        <h2><i class="fa fa-comments-o"></i> Social</h2>
-        <ul>
-          <li><a href="https://mastodon.social" rel="noopener"><i class="fa fa-fw fa-mastodon"></i> Mastodon</a></li>
-          <li><a href="https://pixelfed.fr" rel="noopener"><i class="fa fa-fw fa-pixelfed"></i> Pixelfed</a></li>
-          <li><a href="https://tumblr.com" rel="noopener"><i class="fa fa-fw fa-tumblr"></i> Tumblr</a></li>
-        </ul>
-      </div>
-      
-      <div class="linklist">
-        <h2><i class="fa fa-file-text"></i> Sites</h2>
-        <ul>
-          <li><a href="https://kazhnuz.space" rel="noopener"><i class="fa fa-fw fa-star"></i> kazhnuz.space</a></li>
-          <li><a href="https://quarante-douze.net" rel="noopener"><i class="fa fa-fw fa-gear"></i> Quarante-Douze</a></li>
-        </ul>
-      </div>
-      
-      <div class="linklist">
-        <h2><i class="fa fa-heart"></i> Favs</h2>
-        <ul>
-          <li><a href="https://neocities.org" rel="noopener"><i class="fa fa-fw fa-heart"></i> Neocities</a></li>
-          <li><a href="https://webidev.com" rel="noopener"><i class="fa fa-fw fa-heart"></i> Webidev</a></li>
-        </ul>
-      </div>
-      
-      <div class="linklist">
-        <h2><i class="fa fa-paint-brush"></i> Arts/Créa</h2>
-        <ul>
-          <li><a href="https://bandcamp.com" rel="noopener"><i class="fa fa-fw fa-music"></i> Bandcamp</a></li>
-          <li><a href="https://webtoon.com" rel="noopener"><i class="fa fa-fw fa-image"></i> Webtoon</a></li>
-          <li><a href="https://www.patreon.com/home" rel="noopener"><i class="fa fa-fw fa-patreon"></i> Patreon</a></li>
-        </ul>
-      </div>
-      
-      <div class="linklist">
-        <h2><i class="fa fa-question"></i> Tutos</h2>
-        <ul>
-          <li><a href="https://quarante-douze.net/liens-et-guides-sur-laccessibilite/" rel="noopener"><i class="fa fa-fw fa-universal-access"></i> Docs a11y</a></li>
-          <li><a href="https://quarante-douze.net/liens-et-guides-pour-le-dev-web/" rel="noopener"><i class="fa fa-fw fa-html5"></i> Docs web</a></li>
-          <li><a href="https://love2d.org/wiki/Main_Page" rel="noopener"><i class="fa fa-fw fa-gamepad"></i> Docs love2D</a></li>
-          <li><a href="https://cheatography.com/bouchnouk/cheat-sheets/commandes-de-base-linux/" rel="noopener"><i class="fa fa-fw fa-linux"></i> Commands linux</a></li>
-        </ul>
-      </div>
-    </div>
-  </main>
-</body>
-</html>

netlify.toml

@@ -0,0 +1,24 @@
+[build]
+	publish = "_site"
+	command = "npm run build"
+
+[[plugins]]
+
+	# Opt-in to the Netlify Lighthouse plugin (choose one):
+
+	# 1. Go to your site on https://app.netlify.com and navigate to the Integrations tab, search for the `Lighthouse` plugin
+	# 2. Or via `npm install -D @netlify/plugin-lighthouse`
+
+	# Read more: https://github.com/netlify/netlify-plugin-lighthouse
+
+	package = "@netlify/plugin-lighthouse"
+
+	# optional, fails build when a category is below a threshold
+	[plugins.inputs.thresholds]
+		performance = 1.0
+		accessibility = 1.0
+		best-practices = 1.0
+		seo = 1.0
+
+	[plugins.inputs]
+		output_path = "reports/lighthouse/index.html"

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

@@ -1,7 +1,7 @@
 :root {
-  --color-background: rgba(255,255,255,0.8);
+  --color-background: rgba(255,255,255,0.9);
   --color-hover: rgba(0,0,0,0.1);
-  --color-accent: rgb(216, 0, 180);
+  --color-accent: blue;
 
   --color-heading: #FFF;
   --color-text: #333;
@@ -23,7 +23,8 @@ body {
   color: var(--color-text);
 
   /* Bacground by Ashim DSilva */
-  background-image: url("./background.jpg");
+  background-image: url("./img/background.jpg");
+  background-size: cover;
   
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -110,9 +111,15 @@ main input:hover, main input:focus-visible {
 /** Featured Links handling **/
 
 .featured {
+  margin-top: 1rem;
   margin-bottom:1rem;
 }
 
+.moreLink {
+  margin-top: 1.5rem;
+}
+
+.moreLink a,
 .featured a {
   display:inline-block;
   padding: 0.33rem 1.33rem;
@@ -120,14 +127,15 @@ main input:hover, main input:focus-visible {
   border-radius:9999px;
   background-color: var(--color-accent);
   color:white;
-  box-shadow:0px 2px 1px rgba(0,0,0,0.5);
+  box-shadow:0px 2px 1px rgba(0,0,0,0.3);
-  opacity:0.8;
   margin-bottom:1rem;
   backdrop-filter: blur(6px);
+  transition: transform 0.05s linear;
 }
 
+.moreLink a:hover,
 .featured a:hover {
-  opacity: 1;
+  transform: scale(1.1);
 }
 
 /** Columns Links handling **/
@@ -183,3 +191,41 @@ main input:hover, main input:focus-visible {
 .linklist a:hover {
   background-color:var(--color-hover);
 }
+
+.emoji {
+  padding-right: 0.45rem;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
+}
+
+.mascotte {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+}
+
+.mascotte > div {
+  position: relative;
+}
+
+.mascotte img {
+  width: 160px;
+  height: auto;
+  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.6));
+  margin: 20px;
+}
+
+.mascotte:hover .mascotte-message {
+  opacity: 1;
+}
+
+.mascotte-message {
+  background-color:rgba(0,0,0,0.7);
+  backdrop-filter: blur(6px);
+  color:white;
+  position:absolute;
+  bottom: 32px;
+  padding: 3px;
+  border-radius: 6px;
+  opacity:0;
+  transition: opacity 0.1s;
+}