Les fichiers pour la démo faite devant ppp - retour accueil
git clone git://bebou.netlib.re/prez-ppp
Log | Files | Refs | README |
commit 577fbbb7c6fb2f58a1f8727d63792dc7e163f522 parent 59afbae2c08b4e4467bf6c05701e330ed1fed905 Auterice: Arthur Pons <arthur.pons@unistra.fr> Date: Thu, 12 Sep 2024 19:01:42 +0200 Construction du site pour la démo Diffstat:
| M | contents/index.sh | | | 22 | +++++++++------------- |
| M | contents/style.css | | | 557 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------- |
| A | layouts/audio | | | 11 | +++++++++++ |
| M | layouts/html | | | 6 | +++++- |
| M | makefile | | | 76 | +++++++++++++++------------------------------------------------------------- |
| A | maketsv | | | 13 | +++++++++++++ |
| M | page | | | 56 | +++++++++++++------------------------------------------- |
7 files changed, 494 insertions(+), 247 deletions(-)
diff --git a/contents/index.sh b/contents/index.sh @@ -1,21 +1,17 @@ #! /usr/bin/env ./page -title: Un exemple de page +title: Demo for ppp author: katzele -description: Un exemple de page Francium démontrant une partie des fonctionnalités +description: This is a demo page for a francium presentation for ppp section: main -# Un exemple de page dans Francium +Recordings for the latest ppp event held at AZDAZD -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 +endsection -etc etc +find bdd -name '*.tsv' | xargs cat | + sort -u | sort -t ' ' -nk4 | + tsv2anything ./layouts/audio | + save main -endsection diff --git a/contents/style.css b/contents/style.css @@ -1,193 +1,492 @@ -: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; +/* Global variables. */ +:root, +::backdrop { + /* Set sans-serif & mono fonts */ + --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, + "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, + "Helvetica Neue", sans-serif; + --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + --standard-border-radius: 5px; + + /* Default (light) theme */ + --bg: #fff; + --accent-bg: #f5f7ff; + --text: #212121; + --text-light: #585858; + --border: #898EA4; + --accent: #0d47a1; + --accent-hover: #1266e2; + --accent-text: var(--bg); + --code: #d81b60; + --preformatted: #444; + --marked: #ffdd33; + --disabled: #efefef; +} + +/* Dark theme */ +@media (prefers-color-scheme: dark) { + :root, + ::backdrop { + color-scheme: dark; + --bg: #212121; + --accent-bg: #2b2b2b; + --text: #dcdcdc; + --text-light: #ababab; + --accent: #ffb300; + --accent-hover: #ffe099; + --accent-text: var(--bg); + --code: #f06292; + --preformatted: #ccc; + --disabled: #111; + } + /* Add a bit of transparency so light media isn't so glaring in dark mode */ + img, + video { + opacity: 0.8; + } +} + +/* Reset box-sizing */ +*, *::before, *::after { + box-sizing: border-box; } html { - -webkit-font-smoothing: antialiased; - --moz-osx-font-smoothing: grayscale; + /* Set the font globally */ + font-family: var(--sans-font); scroll-behavior: smooth; - font-size: 100%; /* 16 pixels par défaut en moyenne */ } +/* Make the body a nice central block */ 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); + color: var(--text); + background-color: var(--bg); + font-size: 1.15rem; + line-height: 1.5; + display: grid; + grid-template-columns: 1fr min(50rem, 90%) 1fr; + margin: 0; } -body > * { max-width: 820px; } +body > * { + grid-column: 2; +} -@media screen and (min-width: 90em) { - body > * { max-width: 940px; } +/* Make the header bg full width, but the content inline with body */ +body > header { + background-color: var(--accent-bg); + border-bottom: 1px solid var(--border); + text-align: center; + /*padding: 0 0.5rem 2rem 0.5rem;*/ + grid-column: 1 / -1; } -/*TYPO*/ +body > header > *:only-child { + /*margin-block-start: 2rem;*/ +} -a { color: var(--blue); } -a:hover { color: var(--green); } +body > header h1 { + max-width: 1200px; + margin: 1rem auto; +} -/*TITLES*/ +body > header p { + max-width: 40rem; + margin: 1rem auto; +} -h1, h2, h3, h4, h5 { - position: relative; - font-weight: bold; +/* Add a little padding to ensure spacing is correct between content and header > nav */ +main { + padding-top: 1.5rem; +} + +footer { + margin-top: 4rem; + padding: 2rem 1rem 1.5rem 1rem; + color: var(--text-light); + font-size: 0.9rem; + text-align: center; + border-top: 1px solid var(--border); +} + +/* Format headers */ +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2.6rem; + margin-top: 3rem; +} + +h3 { + font-size: 2rem; + margin-top: 3rem; +} + +h4 { + font-size: 1.44rem; +} + +h5 { + font-size: 1.15rem; +} + +h6 { + font-size: 0.96rem; +} + +p { + margin: 1.5rem 0; } -h1, h2, h3 { - padding: 0 0.75rem; - background-color: var(--grey); - max-width: max-content; +/* Prevent long strings from overflowing container */ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; } -h1, .h1-like { - font-size: var(--space-2xl, 3.375rem); - line-height: 1.44; +/* Fix line height when title wraps */ +h1, +h2, +h3 { + line-height: 1.1; } -h2, .h2-like { - font-size: var(--space-xl, 2.25rem); - line-height: 1.54; - letter-spacing: 0.13px; +/* Reduce header size on mobile */ +@media only screen and (max-width: 720px) { + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2.1rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.25rem; + } +} + +/* Format links & buttons */ +a, +a:visited { + color: var(--accent); +} + +a:hover { + text-decoration: none; +} + +/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */ +abbr[title] { + cursor: help; + text-decoration-line: underline; + text-decoration-style: dotted; +} + +/* Format navigation */ +header > nav { + font-size: 1.2rem; + line-height: 2; + /*padding: 1rem 0 0 0;*/ +} + +/* Use flexbox to allow items to wrap, as needed */ +header > nav ul, +header > nav ol { + align-content: space-around; + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + list-style-type: none; + margin: 0; + padding: 0; } -h3, .h3-like { - font-size: var(--space-lg, 1.5rem); - line-height: 1.3333; - letter-spacing: 0.1px; +/* List items are inline elements, make them behave more like blocks */ +header > nav ul li, +header > nav ol li { + display: inline-block; } -/*Selection*/ +header > nav a, +header > nav a:visited { + /*margin: 0 0.5rem 1rem 0.5rem;*/ + /*border-left: 1px solid var(--border); + border-right: 1px solid var(--border);*/ + /*border-radius: var(--standard-border-radius);*/ + color: var(--text); + display: inline-block; + padding: 0.7rem 2.5rem; + text-decoration: none; +} -::selection { - color: var(--yellow); - background-color: var(--green); +header > nav a:hover, +header > nav a.current, +header > nav a[aria-current="page"] { + /*border-color: var(--accent);*/ + color: var(--accent); + cursor: pointer; } -/*A11y*/ +/* Reduce nav side on mobile */ +@media only screen and (max-width: 720px) { + header > nav a { + border: none; + padding: 0; + text-decoration: underline; + line-height: 1; + } +} -a.skip-main { - left:-999px; - position:absolute; - top:auto; - width:1px; - height:1px; - overflow:hidden; - z-index:-999; +/* Consolidate box styling */ +aside, details, pre, progress { + background-color: var(--accent-bg); + border: 1px solid var(--border); + border-radius: var(--standard-border-radius); + margin-bottom: 1rem; } -a.skip-main:focus, a.skip-main:active { - color: var(--white); - background-color: var(--black); - left: auto; - top: auto; +aside { + font-size: 1rem; + width: 30%; + padding: 0 15px; + margin-inline-start: 15px; + float: right; +} +*[dir="rtl"] aside { + float: left; +} + +/* Make aside full-width on mobile */ +@media only screen and (max-width: 720px) { + aside { 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; + float: none; + margin-inline-start: 0; + } +} + +article, fieldset, dialog { + border: 1px solid var(--border); + padding: 1rem; + border-radius: var(--standard-border-radius); + margin-bottom: 1rem; +} + +article h2:first-child, +section h2:first-child { + margin-top: 1rem; } -/*TABLE*/ +section { + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + padding: 2rem 1rem; + margin: 3rem 0; +} -tbody tr:nth-child(even), th { - background-color: var(--grey); +/* Don't double separators when chaining sections */ +section + section, +sectionmd:first-child { + border-top: 0; + padding-top: 0; } -/*HEADER*/ +section:last-child { + border-bottom: 0; + padding-bottom: 0; +} -header { - padding-left: 1rem; - color: var(--blue); +details { + padding: 0.7rem 1rem; } -.logo { - font-size: var(--space-2xl); +summary { + cursor: pointer; font-weight: bold; - line-height: 0; + padding: 0.7rem 1rem; + margin: -0.7rem -1rem; + word-break: break-all; } -nav ul { - padding: 0; - list-style: none; +details[open] > summary + * { + margin-top: 0; +} + +details[open] > summary { + margin-bottom: 0.5rem; +} + +details[open] > :last-child { + margin-bottom: 0; +} + +/* Format tables */ +table { + border-collapse: collapse; + margin: 1.5rem 0; +} + +figure > table { + width: max-content; +} + +td, +th { + border: 1px solid var(--border); + text-align: start; + padding: 0.5rem; } -nav ul li a { - font-size: var(--space-lg); +th { + background-color: var(--accent-bg); font-weight: bold; } -/*BODY*/ +tr:nth-child(even) { + /* Set every other cell slightly darker. Improves readability. */ + background-color: var(--accent-bg); +} + +table caption { + font-weight: bold; + margin-bottom: 0.5rem; +} + +/* Misc body elements */ +hr { + border: none; + height: 1px; + background: var(--border); + margin: 1rem auto; +} + +mark { + padding: 2px 5px; + border-radius: var(--standard-border-radius); + background-color: var(--marked); + color: black; +} + +mark a { + color: #0d47a1; +} + +img, +video { + max-width: 100%; + height: auto; + border-radius: var(--standard-border-radius); +} + +figure { + margin: 0; + display: block; + overflow-x: auto; +} -/*@TODO un pattern + interaction design -> univers Katzele*/ +figure > img, +figure > picture > img { + display: block; + margin-inline: auto; +} + +figcaption { + text-align: center; + font-size: 0.9rem; + color: var(--text-light); + margin-block: 1rem; +} blockquote { - border-left: solid 4px var(--grey); - padding-left: 28px; - color: var(--black); + margin-inline-start: 2rem; + margin-inline-end: 0; + margin-block: 2rem; + padding: 0.4rem 0.8rem; + border-inline-start: 0.35rem solid var(--accent); + color: var(--text-light); + font-style: italic; } -/*PRE*/ +cite { + font-size: 0.9rem; + color: var(--text-light); + font-style: normal; +} + +dt { + color: var(--text-light); +} + +/* Use mono font for code elements */ +code, +pre, +pre span, +kbd, +samp { + font-family: var(--mono-font); + color: var(--code); +} + +kbd { + color: var(--preformatted); + border: 1px solid var(--preformatted); + border-bottom: 3px solid var(--preformatted); + border-radius: var(--standard-border-radius); + padding: 0.1rem 0.4rem; +} pre { - padding: 1rem 2rem; - width: max-content; + padding: 1rem 1.4rem; max-width: 100%; - tab-size: 2; - white-space: pre-wrap; - background: var(--black); - color: var(--white); + overflow: auto; + color: var(--preformatted); } -/*LAYOUTS*/ +/* Fix embedded code within pre */ +pre code { + color: var(--preformatted); + background: none; + margin: 0; + padding: 0; +} -body, -.container { padding: 1rem } +dialog { + max-width: 40rem; + margin: auto; +} -@media screen and (min-width: 60em) { - body, - .container { padding: 1rem var(--space-2xl); } +dialog::backdrop { + background-color: var(--bg); + opacity: 0.8; } -/*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; +@media only screen and (max-width: 720px) { + dialog { + max-width: 100%; + margin: auto 1em; + } +} + +/* Superscript & Subscript */ +/* Prevent scripts from affecting line-height. */ +sup, sub { + vertical-align: baseline; + position: relative; +} + +sup { + top: -0.4em; +} + +sub { + top: 0.3em; } -/*LIMITE à 200 lignes*/ diff --git a/layouts/audio b/layouts/audio @@ -0,0 +1,11 @@ +<<. cat +$(date --date "@$date" +"%A %d à %H:%M") +<br> +<b>$title</b> - ${duration%%???} +$([ -n "$description" ] && +echo "<br><em>${description:-}</em><br>") +<audio preload=none controls src="${path##contents}"></audio> +<br> +<a href="${path##contents}" target=blank> Télécharger </a> - ${size}o +<hr> +. diff --git a/layouts/html b/layouts/html @@ -1,7 +1,7 @@ layout() { <<@@ cat <!DOCTYPE html> -<html> +<html lang="fr"> <head> <title>${title?La page dont le chemin s'affiche au dessus nécessite un titre}</title> ${STYLE:+<link rel="stylesheet" href=\"$STYLE\" />} @@ -9,7 +9,11 @@ layout() { <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="description" content="$description" /> <meta name="author" content="$author" /> + <link rel="icon" href="/favicon.png" /> </head> +<header> +<h1>$title</h1> +</header> <body> <main> $(show main) diff --git a/makefile b/makefile @@ -1,79 +1,33 @@ -# 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 -############################################################# +audio != find contents -type f -name '*.mp3' +sources != find contents -type f -name '*.sh' +annexes != find contents -type f -not -name '*.sh' -# 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 +bdds = ${audio:contents/%.mp3=bdd/%.tsv} -# 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} +all: exec ${pageshtml} ${annexescibles} ${bdds} -# Une autre "fausse" règle pour nettoyer le dossier public. Faire `make clean` -# pour l'appeler. -clean:; rm -r public/* +clean:; rm -r public/* bdd/* -# 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 +test : all + @echo http://localhost:1412 + busybox httpd -p 1412 -h public +stop : + ps -aux | grep 'busybox httpd .*-p.*1412' | grep -v 'grep' | awk '{print $$2}' | xargs kill -# Ce que % match dans la cible sera substitué à la place de % dans les -# dépendances. -# $< = première dépendance -# $@ = cible +bdd/%.tsv : contents/%.mp3 maketsv + @mkdir -p $(shell dirname $@) + ./maketsv $< > $@ -# Règle pour la génération des pages html -public/%.html : contents/%.sh page layouts/html +public/%.html : contents/%.sh page layouts/html ${bdds} layouts/audio 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/maketsv b/maketsv @@ -0,0 +1,13 @@ +#! /bin/sh + +echo "path title description date duration size" +for file in $(find contents -name "$(basename $1)");do + eval $(ffprobe -hide_banner "$file" 2>&1 | + grep -E "(title|TIT3|TRDA|Duration)" | + sed -E "s/, start:.*//;s/ *: +/=\"/g;s/$/\"/" + ) + size=$(du -h "$file" | cut -f1) + echo "$file $title $TIT3 $TRDA $Duration $size" +done + + diff --git a/page b/page @@ -1,45 +1,30 @@ #! /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 +tsv2anything() { + tee $tmpdir/all | head -n1 | + tr ' ' '\n' > $tmpdir/vars + tail -n+2 $tmpdir/all | + while read line;do + eval $(echo "$line" | tr ' ' '\n' | + paste -d '=' $tmpdir/vars - | + sed -E 's/"/\\\"/g' | + sed -E 's/=/&"/;s/$/"/') + . "$1" + done +} 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 -############################### +show() lowdown --html-no-escapehtml --html-no-skiphtml "$tmpdir/$1" -# 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" @@ -48,25 +33,10 @@ 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