site-catium

Un site pour la promotion de catium - retour accueil

git clone git://bebou.netlib.re/site-catium
Log | Files | Refs | README | 

commit ca44edd885d4f30a71c2bd7fef4eda0a70d415b6
Auterice: Arthur Pons <arthur.pons@unistra.fr>
Date:   Sat, 14 Sep 2024 12:15:11 +0200

Premier commit

Diffstat:

AREADME | 6++++++


Abin/maketsv | 6++++++


Abin/updatescreens | 13+++++++++++++


Acontents/index.sh | 20++++++++++++++++++++


Acontents/style.css | 308+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


Adb/galerie | 48++++++++++++++++++++++++++++++++++++++++++++++++


Alayouts/galerie | 9+++++++++


Alayouts/html | 40++++++++++++++++++++++++++++++++++++++++


Alayouts/listearticles | 6++++++


Amakefile | 36++++++++++++++++++++++++++++++++++++


Apage | 60++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


11 files changed, 552 insertions(+), 0 deletions(-)

diff --git a/README b/README
@@ -0,0 +1,6 @@
+Site pour la promotion de francium
+
+Pour construire le site faire :
+
+make updatescreens
+make
diff --git a/bin/maketsv b/bin/maketsv
@@ -0,0 +1,6 @@
+#! /bin/sh
+
+echo "lien	titre	description	clone	code	screenshot"
+< db/galerie grep -v %% |
+	paste - - - - - -
+
diff --git a/bin/updatescreens b/bin/updatescreens
@@ -0,0 +1,13 @@
+#! /bin/sh
+
+mkdir -p contents/screenshots
+
+< db/galerie grep "^http" |
+	grep -v git |
+	xargs -n1 sh -c 'chromium --headless=new --timeout=5000 --hide-scrollbars --screenshot $1;mv screenshot.png contents/screenshots/$(basename $1).png' --
+
+find contents/screenshots/ -type f -not -name '*.webp' |
+	xargs -n1 sh -c 'convert $1 -resize 75% ${1%%png}webp' --
+
+rm contents/screenshots/*.png
+
diff --git a/contents/index.sh b/contents/index.sh
@@ -0,0 +1,20 @@
+#! /usr/bin/env ./page
+title: Francium
+author: Arthur Pons
+description: "Francium est un générateur de site statique mettant l'accent sur la simplicité, l'interopérabilité et la portabilité"
+
+section: main
+
+## Philosophie
+
+## Se lancer
+
+## Galerie
+
+endsection
+
+cat db/galerie.tsv |
+	tsv2anything ./layouts/galerie |
+	save main
+
+
diff --git a/contents/style.css b/contents/style.css
@@ -0,0 +1,308 @@
+/*
+Cette CSS a été écrite initialement pae Derek Salmon (Pikselkraft) pour Katzele
+Puis adaptée par Guillaume Porte en 2024 pour Estrades
+
+- https://www.pikselkraft.com/
+- http://katzele.netlib.re/
+- https://estrades.huma-num.fr/
+*/
+
+
+: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: #444444;
+    --lightgrey: #999999;
+    --verylightgrey: #fefefe;
+    --green: #68715E;
+    --yellow: #fffeee;
+    --blue: #2F7598;
+    --red: #cc0000;
+}
+
+html, body{
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+html {
+  -webkit-font-smoothing: antialiased; 
+  --moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+  font-size: 100%; /* 16 pixels par défaut en moyenne */
+}
+
+body {
+  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: 800px; }
+
+body, .container { padding: 1rem }
+
+#wrapper{
+    min-height:100%;
+    width:800px;
+    position:relative;
+    margin: auto;
+}
+
+#wrapper img{
+  max-width:100%;
+  display: block;
+  margin: auto;
+  margin-bottom: 3rem;
+}
+
+@media screen and (max-width: 800px) {
+  body > * {
+    max-width: 940px;
+  }
+ 
+  body, .container {
+    padding: 1rem var(--space-2xl);
+  }
+
+  #wrapper{
+    width:350px;
+  }
+}
+
+/*TYPO*/
+
+a { color: var(--red); }
+a:hover { color: var(--grey); }
+
+/*TITLES*/
+
+h1, h2, h3, h4, h5 {
+  position: relative;
+  font-weight: bold;
+}
+
+h1, h2, h3 {
+  padding: 0;
+  margin: ;
+  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);
+}
+
+/*TABLE*/
+
+tbody tr:nth-child(even), th {
+  background-color: var(--grey);
+}
+
+
+/*BODY*/
+
+/*HEADER*/
+
+header { 
+  position:fixed;
+  top:0;
+  left:0;
+  right:0;
+  z-index:1000;
+  height:50px;
+  padding: 1rem 0;
+  width: 800px;
+  margin: 0 auto;
+  border-bottom:1px solid var(--lightgrey);
+  background-color: var(--yellow);
+}
+
+#logo {
+  font-size: var(--space-2xl);
+  font-weight: bold;
+  line-height: 0;
+  display: inline-block;
+}
+
+#logo img{
+  width:var(--space-2xl)
+}
+
+nav#menu{
+  display: inline-block;
+  position: fixed;
+  top: 28px;
+  margin-left:var(--space-lg)
+}
+
+nav#menu ul { 
+  padding: 0;
+  margin: 0;
+  list-style: none; 
+}
+
+nav#menu ul li{
+  display: inline-block;
+  margin-right: var(--space-base);
+}
+
+nav#menu ul li a { 
+  font-size: var(--space-base);
+  color: var(--grey);
+  font-weight: bold;
+  text-decoration:none;
+}
+
+nav#menu ul li a:hover { 
+  font-size: var(--space-base);
+  color: var(--lightgrey);
+  font-weight: bold;
+  text-decoration:none;
+}
+
+
+@media screen and (max-width: 800px) {
+  header { 
+    width: 350px;
+    height:60px;
+  }
+  #logo img{
+    width:var(--space-3xl);
+  }
+  nav#menu{
+    min-width: 350px;
+    top: var(--space-xs);
+  }
+  nav#menu ul{
+    min-width: 350px;
+  }
+  nav#menu ul li{
+    width:30%;
+  }
+}
+
+
+/* MAIN */
+main{
+  padding-top: 100px;
+  padding-bottom: 300px;
+}
+
+
+/* FOOTER */
+
+
+footer{
+   border-top:1px solid var(--lightgrey);
+   position:absolute;
+   bottom:0;
+   padding: var(--space-lg);
+   text-align: center;
+   width:100%;
+   font-size: 90%;
+}
+
+/*@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);
+}
+
+/*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;
+}
+
+/* Blog */
+
+#pageBlog > ul > li{
+  border-bottom : 1px dotted var(--lightgrey);
+  margin-bottom: 0;
+  list-style: none;
+  padding: var(--space-lg);
+}
+
+#pageBlog > ul > li > a{
+  font-weight: bold;
+}
+
+#pageBlog > ul > li > p{
+  margin-top: 0;
+  margin-bottom: var(--space-xs);
+}
+
+/* Mentions légales */
+
+
+#mentions-legales img{
+  height: var(--space-2xl);
+  margin-left:0;
+  margin-right:0;
+  display: inline-block;
+  text-align: center;
+}
+
+#mentions-legales img:not(:last-child){
+  margin-right:var(--space-2xl);
+}
diff --git a/db/galerie b/db/galerie
@@ -0,0 +1,48 @@
+http://katzele.netlib.re
+Le site du collectif Katzele
+Premier site construit et publié avec francium, il intègre une version rudimentaire des boucles pour l'affichage des articles. Si vous voulez voir comment le générateur a commencé c'est par ici !
+git clone git://katzele.netlib.re/katzele.netlib.re
+
+/screenshots/katzele.netlib.re.webp
+%%
+http://semis.bebou.netlib.re
+Le site d'Elsa Van Kote
+Structure de blog assez classique. Site plutôt simple pour prendre en main francium.
+
+
+/screenshots/semis.bebou.netlib.re.webp
+%%
+http://arthur.bebou.netlib.re
+Le site d'Arthur Pons
+A pour particularité de publier chaque page sous plusieurs formats (html,sh,roff,term,md...). Les liens dans le markdown sont réécrit de manière à pouvoir "naviguer" en markdown. La majeur partie des modifications apportées pour faire cela sont dans le script page.
+git clone git://bebou.netlib.re/arthur.bebou
+http://git.bebou.netlib.re/arthur.bebou/log.html
+/screenshots/arthur.bebou.netlib.re.webp
+%%
+https://adele.help
+Le site d'Adele, un réseau de support à la recherche en Alsace
+Gestion rudimentaire du bilinguisme. Toutes les pages ont une version frnaçaise et anglaise, possibilité de passer d'une langue à l'autre. Premier site à tester l'édition du code par des personnes ayant peu d'expérience technique via l'éditeur de code web de gitlab. Test concluant. Est hébergé via la service pages de l'instance gitlab.
+git clone https://gitlab.in2p3.fr/adele/site-web.git
+https://gitlab.in2p3.fr/adele/site-web
+/screenshots/adele.help.webp
+%%
+http://185.155.93.110/
+Le site du projet "Des traces au Brezouard" ou "Neige"
+Site relativement complexe. Composé d'une partie "vitrine" similaire au site adele.help, d'une partie entièrement générée depuis [un dépôt git frère](https://git.unistra.fr/ohge/brezouard-donnees) et un formulaire + cgi pour soumettre des données. Nécessite d'être installé sur un serveur avec l'autre dépôt git. Une combinaison de hooks gits et de synchros gitlab maintient le système synchronisé. Travail en cours, ni finalisé ni testé en condition réelle. Intègre une carte leaflet et des graphs gnuplot.
+git clone https://git.unistra.fr/ohge/brezouard-web
+https://git.unistra.fr/ohge/brezouard-web
+/screenshots/185.155.93.110.webp
+%%
+https://estrades.huma-num.fr
+Le site de la plateforme Estrades
+Site ayant pour particularité d'intégrer une partie blog hébergé 
+azdazd
+azda
+/screenshots/estrades.huma-num.fr.webp
+%%
+https://gitlab.huma-num.fr/estrades/presentations
+Des slides de présentation du projet estrades
+Petit hack de francium pour générer des slides en html. Un peu de JS pour passer d'une slide à l'autre avec les flèches. Très ingénieux.
+git clone https://gitlab.huma-num.fr/estrades/presentations
+https://gitlab.huma-num.fr/estrades/presentations
+/screenshots/estrades-presentations.webp
diff --git a/layouts/galerie b/layouts/galerie
@@ -0,0 +1,9 @@
+<<. cat
+![screenshot de $lien]($screenshot)
+**[$titre]($lien)**  
+Télécharger le code : $([ -n "$clone" ] && echo "\`$clone\`")  
+Voir le code : $code  
+
+$description
+- - -
+.
diff --git a/layouts/html b/layouts/html
@@ -0,0 +1,40 @@
+layout() <<@@ cat
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<title>${title?La page dont le chemin s'affiche au dessus nécessite un titre}</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<link rel="stylesheet" href="/style.css"/>
+	<meta name="description" content="$description">
+	<meta name="author" content="Francium" />
+	<link rel="icon" href="/favicon.png" />
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content="Francium" />
+	<meta property="og:description" content="" />
+	<meta property="og:url" content="http://francium.bebou.netlib.re" />
+	<meta property="og:image" content="" />
+</head>
+<body>
+	<div id="wrapper">
+		<header>
+			<div id="logo">
+				<img alt="logo" src="/logo.png"/>
+			</div>
+			<nav id="menu" aria-label="menu principal">
+				<ul>
+				$(makenav)
+				</ul>
+			</nav>
+		</header>
+		<main id="page">
+		$(show main)
+		</main>
+		<footer>
+			Ce site est généré avec francium<br>
+			Code : <a href="http://git.bebou.netlib.re/site-francium/log.html">http://git.bebou.netlib.re/site-francium</a><br>
+			Contact : arthur.pons@unistra.fr
+		</footer>
+	</div>
+</body>
+</html>
diff --git a/layouts/listearticles b/layouts/listearticles
@@ -0,0 +1,6 @@
+<<@@ cat
+**[$titre]($lien)** - $date - par *$auteurice*  
+
+$description  
+- - -  
+@@
diff --git a/makefile b/makefile
@@ -0,0 +1,36 @@
+.DELETE_ON_ERROR:
+
+sources      != find contents -type f -name '*.sh'
+annexfiles   != find contents -type f -not -name '*.sh'
+layouts      != find layouts  -type f
+
+pages         = ${sources:contents/%.sh=public/%.html}
+annexrules    = ${annexfiles:contents/%=public/%}
+
+all: exec db/galerie.tsv ${pages} ${annexrules}
+
+test:;
+	busybox httpd -p 1312 -h public
+	@ echo "http://localhost:1312"
+stop:; ps -aux | grep 'busybox httpd .*-p.*1312' | grep -v 'grep' | awk '{print $$2}' | xargs -r kill
+
+clean:; rm -r public/*
+
+exec:; chmod +x ${sources}
+
+updatescreens:; bin/updatescreens
+
+db/galerie.tsv: bin/maketsv db/galerie
+	@mkdir -p $(shell dirname $@)
+	./$< > $@
+
+public/index.html  : contents/index.sh page ${layouts} db/galerie.tsv
+	@mkdir -p $(shell dirname $@)
+	$< > $@
+
+public/%.html  : contents/%.sh page ${layouts}
+	@mkdir -p $(shell dirname $@)
+	$< > $@
+public/%       : contents/%
+	@mkdir -p $(shell dirname $@)
+	cp $< $@
diff --git a/page b/page
@@ -0,0 +1,60 @@
+#! /usr/bin/env dash
+
+STYLE=/style.css
+
+tmpd=$(mktemp -d)
+trap "rm -rf $tmpd" EXIT
+
+save() cat >> "$tmpd/$1"
+
+gallerie() {
+	echo "<section id='photos'>"
+	cat |
+		sed -E 's/[^ ]+/& &/' |
+		xargs printf "<a href='%s' target=blank><img src='%s' alt='%s'></a>\n"
+	echo "</section>\n"
+}
+
+alias section:='<<\endsection save'
+alias sectionhtml:='<<\endsection save'
+alias gallerie:='<<\endgallerie gallerie | save'
+
+alias title:="title"
+title() title="$*"
+
+alias author:="author"
+author() author="$*"
+
+alias description:="description"
+description() description="$*"
+
+alias publication:=":"
+
+show() lowdown $tmpd/$1
+
+tsv2anything() {
+	tee $tmpd/all | head -n1 |
+		tr '	' '\n' > $tmpd/vars
+	tail -n+2 $tmpd/all |
+	while read line;do
+		eval $(echo "$line" | tr '	' '\n' |
+			   	   paste -d '=' $tmpd/vars - |
+				   sed -E 's/"/\\\"/g' |
+				   sed -E 's/=/&"/;s/$/"/')
+		. "$1"
+	done
+}
+
+makenav() {
+	grep '^##' contents/index.sh | sed -E "s/^## //" > $tmpd/A
+	< $tmpd/A tr -d "éà·'ùçè" |
+		tr ' [A-Z]' '-[a-z]' |
+		paste -d'\n' - $tmpd/A |
+		xargs -d'\n' printf '<li><a href="/#%s">%s</a></li>\n'
+}
+
+. layouts/html
+
+. "$1"
+
+layout