feat: port to eleventy

Pour le moment, le portage n'a aucun effet
This commit is contained in:
Kazhnuz 2024-05-24 17:12:23 +02:00
parent a95d6e6650
commit 277d2e003e
29 changed files with 541 additions and 19 deletions

32
.drone.yml Normal file
View file

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

25
.gitignore vendored Normal file
View file

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

11
_data/metadata.js Normal file
View file

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

View file

@ -0,0 +1,36 @@
---
layout: layouts/parent.njk
---
<div id="core">
<main id="skip">
<div>
{{ content | safe }}
</div>
</main>
</div>
<aside id="more-info">
{%- if parent -%}
<div class="parent">
{%- for post in collections.all -%}
{%- if post.data.title == parent -%}<a href="{{ post.url }}"> ← {{ post.data.title }}</a>{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
<div class="card">
<h2>Sommaire</h2>
{{ content | toc | safe }}
</div>
{%- for tag in models -%}
<div class="card">
<h2>{{ tag }}</h2>
<ul>
{%- for post in collections[tag] | sort(false, true, "data.order") -%}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</aside>

View file

@ -0,0 +1,36 @@
---
layout: layouts/parent.njk
---
<div id="core">
<main id="skip">
<div>
{{ content | safe }}
</div>
</main>
</div>
<aside id="more-info">
{%- if parent -%}
<div class="parent">
{%- for post in collections.all -%}
{%- if post.data.title == parent -%}<a href="{{ post.url }}">{{ post.data.title }}</a>{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
<div class="card">
<h2>Sommaire</h2>
{{ content | toc | safe }}
</div>
{%- for tag in models -%}
<div class="card">
<h2>{{ tag }}</h2>
<ul>
{%- for post in collections[tag]-%}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</aside>

View file

@ -0,0 +1,21 @@
<!doctype html>
<html lang="{{ metadata.language }}">
<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>

View file

@ -0,0 +1,26 @@
---
layout: layouts/parent.njk
---
<main id="skip">
<div>
{{ content | safe }}
</div>
</main>
<aside id="more-info">
<div class="card">
<h2>Sommaire</h2>
{{ content | toc | safe }}
</div>
{%- for tag in models -%}
<div class="card">
<h2>{{ tag }}</h2>
<ul>
{%- for post in collections[tag] -%}
<li><a href="#">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</aside>

View file

@ -1,26 +1,22 @@
<!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">
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{#- Uncomment this if youd like folks to know that you used Eleventy to build your site! #}
<meta name="generator" content="{{ eleventy.generator }}">
<title>Embarcadère</title>
<meta name="description" content="Une page d'accueil simple en HTML5, affichant quelques favoris">
<meta name="author" content="Kazhnuz">
{%- css %}{% include "public/css/index.css" %}{% endcss %}
<style>{% getBundle "css" %}</style>
<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>
</head>
<body>
<main>
<h1>Bonjour</h1>
<h1>{{ metadata.title }}</h1>
<form method="GET" action="https://duckduckgo.com/">
<input name="q" title="Recherchez sur DuckDuckGo…" placeholder="Recherchez sur DuckDuckGo…" />
</form>

View file

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

9
_includes/postslist.njk Normal file
View file

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

3
content/index.md Normal file
View file

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

50
eleventy.config.drafts.js Normal file
View file

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

34
eleventy.config.images.js Normal file
View file

@ -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 were using addPlugin.
});
// TODO loading=eager and fetchpriority=high
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
return eleventyImage.generateHTML(metadata, imageAttributes);
});
};

144
eleventy.config.js Normal file
View file

@ -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: "/",
};
};

24
netlify.toml Normal file
View file

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

47
package.json Normal file
View file

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

View file

@ -23,7 +23,7 @@ body {
color: var(--color-text);
/* Bacground by Ashim DSilva */
background-image: url("./background.jpg");
background-image: url("./img/background.jpg");
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

View file

Before

Width:  |  Height:  |  Size: 547 KiB

After

Width:  |  Height:  |  Size: 547 KiB

View file

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB