Les fichiers pour la démo faite devant ppp - retour accueil
git clone git://bebou.netlib.re/prez-ppp
Log | Files | Refs | README |
commit 59afbae2c08b4e4467bf6c05701e330ed1fed905 Auterice: Arthur Pons <arthur.pons@unistra.fr> Date: Wed, 11 Sep 2024 17:56:40 +0200 Premier commit Diffstat:
| A | .gitignore | | | 2 | ++ |
| A | README | | | 1 | + |
| A | contents/favicon.png | | | 0 | |
| A | contents/index.sh | | | 21 | +++++++++++++++++++++ |
| A | contents/style.css | | | 193 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | layouts/html | | | 20 | ++++++++++++++++++++ |
| A | makefile | | | 79 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | page | | | 72 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | prez.slides | | | 78 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
9 files changed, 466 insertions(+), 0 deletions(-)
diff --git a/.gitignore b/.gitignore @@ -0,0 +1,2 @@ +public +*.swp diff --git a/README b/README @@ -0,0 +1 @@ +Sources pour la présentation de PPP diff --git a/contents/favicon.png b/contents/favicon.png Binary files differ. diff --git a/contents/index.sh b/contents/index.sh @@ -0,0 +1,21 @@ +#! /usr/bin/env ./page +title: Un exemple de page +author: katzele +description: Un exemple de page Francium démontrant une partie des fonctionnalités +section: main + +# Un exemple de page dans Francium + +Cette page est un exemple simple de ce que l'on peut faire avec Francium + +Ici c'est du markdown : + + * des listes + * bidule + * chouette + +## Des sous-titres + +etc etc + +endsection diff --git a/contents/style.css b/contents/style.css @@ -0,0 +1,193 @@ +:root { + + /* Fonts */ + --font-system: Arial, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + /* + @TODO font base 18px + ** Typo scale base 16px + * Ratio = Quinte (1.5) + */ + --ratio: 1.5; + --space-xs: calc(var(--space-base) / var(--ratio)); /* 7.111px */ + --space-sm: calc(var(--space-base) / 1.5); /* 10.667px */ + --space-base: 1rem; /* 16px */ + --space-lg: calc(var(--space-base) * var(--ratio)); /* 24px */ + --space-xl: calc(var(--space-lg) * var(--ratio)); /* 36px */ + --space-2xl: calc(var(--space-xl) * var(--ratio)); /* 54px */ + --space-3xl: calc(var(--space-2xl) * var(--ratio)); /* 81px */ + --space-4xl: calc(var(--space-3xl) * var(--ratio)); /* 121.5px */ + + /* COLORS */ + --black: #2f383e; + --white: #fefffe; + --grey: #edead5; + --green: #68715E; + --yellow: #fdf6e3; + --blue: #2F7598; +} + +html { + -webkit-font-smoothing: antialiased; + --moz-osx-font-smoothing: grayscale; + scroll-behavior: smooth; + font-size: 100%; /* 16 pixels par défaut en moyenne */ +} + +body { + padding: 0 0.5rem; + min-height: 100vh; + font-family: var(--font-system); /* Utilisation d'une font système */ + font-weight: 400; + line-height: 1.56; + text-rendering: optimizeSpeed; + background-color: var(--yellow); +} + +body > * { max-width: 820px; } + +@media screen and (min-width: 90em) { + body > * { max-width: 940px; } +} + +/*TYPO*/ + +a { color: var(--blue); } +a:hover { color: var(--green); } + +/*TITLES*/ + +h1, h2, h3, h4, h5 { + position: relative; + font-weight: bold; +} + +h1, h2, h3 { + padding: 0 0.75rem; + background-color: var(--grey); + max-width: max-content; +} + +h1, .h1-like { + font-size: var(--space-2xl, 3.375rem); + line-height: 1.44; +} + +h2, .h2-like { + font-size: var(--space-xl, 2.25rem); + line-height: 1.54; + letter-spacing: 0.13px; +} + +h3, .h3-like { + font-size: var(--space-lg, 1.5rem); + line-height: 1.3333; + letter-spacing: 0.1px; +} + +/*Selection*/ + +::selection { + color: var(--yellow); + background-color: var(--green); +} + +/*A11y*/ + +a.skip-main { + left:-999px; + position:absolute; + top:auto; + width:1px; + height:1px; + overflow:hidden; + z-index:-999; +} + +a.skip-main:focus, a.skip-main:active { + color: var(--white); + background-color: var(--black); + left: auto; + top: auto; + width: 100%; + max-width: 100%; + height: auto; + overflow:auto; + padding:3px; + border-radius: 10px; + border:2px solid var(--blue); + text-align:center; + font-size:1.2em; + z-index:999; +} + +/*TABLE*/ + +tbody tr:nth-child(even), th { + background-color: var(--grey); +} + +/*HEADER*/ + +header { + padding-left: 1rem; + color: var(--blue); +} + +.logo { + font-size: var(--space-2xl); + font-weight: bold; + line-height: 0; +} + +nav ul { + padding: 0; + list-style: none; +} + +nav ul li a { + font-size: var(--space-lg); + font-weight: bold; +} + +/*BODY*/ + +/*@TODO un pattern + interaction design -> univers Katzele*/ + +blockquote { + border-left: solid 4px var(--grey); + padding-left: 28px; + color: var(--black); +} + +/*PRE*/ + +pre { + padding: 1rem 2rem; + width: max-content; + max-width: 100%; + tab-size: 2; + white-space: pre-wrap; + background: var(--black); + color: var(--white); +} + +/*LAYOUTS*/ + +body, +.container { padding: 1rem } + +@media screen and (min-width: 60em) { + body, + .container { padding: 1rem var(--space-2xl); } +} + +/*Link Blank */ +.blank[target="_blank"]:after { + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); + display: inline-block; + width: 0.5rem; + margin: 0 3px 0 5px; +} + +/*LIMITE à 200 lignes*/ diff --git a/layouts/html b/layouts/html @@ -0,0 +1,20 @@ +layout() { +<<@@ cat +<!DOCTYPE html> +<html> +<head> + <title>${title?La page dont le chemin s'affiche au dessus nécessite un titre}</title> + ${STYLE:+<link rel="stylesheet" href=\"$STYLE\" />} + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <meta name="description" content="$description" /> + <meta name="author" content="$author" /> +</head> +<body> + <main> + $(show main) + </main> +</body> +</html> +@@ +} diff --git a/makefile b/makefile @@ -0,0 +1,79 @@ +# Si une erreur survient dans l'exécution d'une règle alors le fichier concerné +# est supprimé +.DELETE_ON_ERROR: + +############################################################# +# On liste les fichiers avec lesquels on veut faire des trucs +############################################################# + +# On créé des variables contenant la liste des fichiers qui nous intéressent +# Dans sources les sh à transformer en html +# Dans annexes le reste des fichiers +sources != find contents -type f -name '*.sh' +annexes != find contents -type f -not -name '*.sh' + +######################### +# Construction des cibles +######################### + +# On construit les chemins des fichiers à produire correspondant +# aux fichiers listés dans sources et annexes +# On appelle les chemins créés ainsi des "cibles" +# On le fait à l'aide de la fonction patsubst invoquée via la +# syntaxe des "substitution references" (voir +# https://www.gnu.org/software/make/manual/html_node/Text-Functions.html#index-patsubst-1) +# Ex: Pour pageshtml on prend tous les chemins de fichiers récupérés dans sources puis +# contents/ devient public/ et .sh devient .html +# Le fichier source "contents/truc/bidule.sh" donnera donc la page html +# "public/truc/bidule.html" +# Même mécanique pour les fichiers annexes +pageshtml = ${sources:contents/%.sh=public/%.html} +annexescibles = ${annexes:contents/%=public/%} +# Les "substitution references" semblent ne pas fonctionner avec gmake <3.8 +# ce qui force les personnes sur macos à installer une version plus récente +# de gmake +# Il faudrait tester l'appel direct à patsubst +# TODO + +######## +# Règles +######## + +# Syntaxe générale d'une règle : +# cible : liste dépendances ; commandes +# ou +# cible : liste dépendances +# commandes + +# On créer une "fausse" règle (phony en anglais) all pour qu'exécuter make sans +# argument construise tout le site. +# cette règle se nomme "all" mais elle pourrait s'appeler "toto". +all: exec ${pageshtml} ${annexescibles} + +# Une autre "fausse" règle pour nettoyer le dossier public. Faire `make clean` +# pour l'appeler. +clean:; rm -r public/* + +# Une troisième fausse règle pour rendre exécutable toutes les sources .sh +exec:; chmod +x ${sources} + +# Règles pour générer les fichiers + +# Ce que % match dans la cible sera substitué à la place de % dans les +# dépendances. +# $< = première dépendance +# $@ = cible + +# Règle pour la génération des pages html +public/%.html : contents/%.sh page layouts/html + mkdir -p $(shell dirname $@); $< > $@ + +# Pour les autres fichiers +public/% : contents/% + mkdir -p $(shell dirname $@); cp $< $@ + +# Pour que make sache que all clean et exec sont officiellement de +# fausses règles. Lui permet d'ignorer l'existence de fichiers nommés +# all clean ou exec s'il en existe. +# Voir: https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html +.PHONY: all clean exec diff --git a/page b/page @@ -0,0 +1,72 @@ +#! /usr/bin/env dash + +# Chemin absolu du fichier css +# du point de vue du serveur web +# (et non pas dans le système de fichier +# du dépôt git) +STYLE=/style.css + +# Création du dossier temporaire dans lequel +# les fichiers contenant l'html des sections +tmpdir=$(mktemp -d) +trap "rm -rf $tmpdir" EXIT + +# Fonction pour enregistrer du contenu dans une section + +save() cat >> "$tmpdir/$1" + +# L'alias pour ouvrir une section +# Ouvre un heredoc avec pour délimiteur +# "endsection" et commande "save" + +alias section:='<<\endsection save' + +# Décommentez l'une des fonctions qui suit +# ou créez la votre en fonction du +# format que vous souhaitez +show() lowdown "$tmpdir/$1" +#show() asciidoc "$tmpdir/$1" +#show() cat "$tmpdir/$1" + +############################### +# FIN DE PREMIÈRE CONFIGURATION +############################### + +# alias pour le DSL +# Se retrouvent à l'écriture des articles +# dans l'entête type : +# title: "titre de mon article" +alias title:="title" +# La fonction appelé par l'alias +# Ici permet simplement d'instancier +# une variable contenant la valeur du titre +title() title="$*" + +alias author:="author" +author() author="$*" + +alias description:="description" +description() description="$*" + + +# On charge la fonction déclarée dans layouts/html +# C'est le layout +. layouts/html + +# Je comprends pas bien ce que cette ligne fait +# Demander à Marc +# A priori elle teste si un argument a été donné +# à page et sinon elle fait `set -` +# Or dans le manuel de dash je ne trouve pas +# ce que ça fait +# En attendant on laisse +[ "$1" ] || set - + +# On exécute le code dans la page sh +# C'est maintenant que toutes les variables vont s'instancier +# et l'html être généré +. "$@" + +# On appelle la fonction layout de layouts/html +# pour afficher la page +layout diff --git a/prez.slides b/prez.slides @@ -0,0 +1,78 @@ + + francium + + Yet another static website generator + but weird +› Little scenario + +You record demos at a PPP event +You have a bunch of audio files with metadata +You want to publish them quickly on the internet with a halfway decent page + +› Here comes francium + +Just hard enough so you can't (reasonably) do it by hand +Just easy enough for a simple software + +› Demo ! + +tree contents + +metadata audio file + +xfce4-terminal -x lynx public/index.html + +firefox "public/index.html" + + + +› What's special about francium ? + + * small (~30 lines of shell) + +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) + * makes use of Unix's core tools and philosophy (shell, basic unix commands, makefile) +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) + * makes use of Unix's core tools and philosophy (shell, basic unix commands, makefile) + * extensible anywhere in the stack using any tool accessible on the command line +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) + * makes use of Unix's core tools and philosophy (shell, basic unix commands, makefile) + * extensible anywhere in the stack using any tool accessible on the command line + * works with every markup language in the world +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) + * makes use of Unix's core tools and philosophy (shell, basic unix commands, makefile) + * extensible anywhere in the stack using any tool accessible on the command line + * works with every markup language in the world + * made by people eager to share and help +› What's special about francium ? + + * small (~30 lines of shell) + * only requires a POSIX environnement (works on Linux, *BSD, MacOS) + * makes use of Unix's core tools and philosophy (shell, basic unix commands, makefile) + * extensible anywhere in the stack using any tool accessible on the command line + * works with every markup language in the world + * made by people eager to share and help + * a good opportunity to become familiar with Unix + +› A tour of the code + +page +layouts/html + +wc -l page layouts/html