From 1a01e8bd817fed0acd5d555990323434247b1992 Mon Sep 17 00:00:00 2001 From: Christophe HENRY Date: Tue, 9 Mar 2021 11:26:31 +0100 Subject: [PATCH] Manages the styles. WIP. --- htmgem.css => css/htmgem.css | 0 css/simple.css | 21 +++++++++ index.gmi | 24 +++++++++- index.php | 78 +++++++++++++++++++++++-------- tests/tutogemtext.gmi | 89 ++++++++++++++++++++++++++++++++++++ 5 files changed, 191 insertions(+), 21 deletions(-) rename htmgem.css => css/htmgem.css (100%) create mode 100644 css/simple.css create mode 100644 tests/tutogemtext.gmi diff --git a/htmgem.css b/css/htmgem.css similarity index 100% rename from htmgem.css rename to css/htmgem.css diff --git a/css/simple.css b/css/simple.css new file mode 100644 index 0000000..7d838c1 --- /dev/null +++ b/css/simple.css @@ -0,0 +1,21 @@ +body { + max-width: 1024px; + margin: auto; + margin-top: 0.5em; +} + +p, h1, h2, h3 { + margin: 0 0 0.3rem; + padding: 0; +} + +blockquote { + border-left: 3px solid #444; + margin: 1rem -1rem 1rem calc(-1rem - 3px); + padding: 1rem; +} + +pre { + padding: 1rem; + overflow-x: auto; +} diff --git a/index.gmi b/index.gmi index 93f3876..c0356fc 100644 --- a/index.gmi +++ b/index.gmi @@ -30,8 +30,28 @@ Il est supposé que HtmGem est installé à la racine du site dans un répertoir 🢂 Enfin, pour vérifier que le fichier //index.gmi// est automatiquement appelé quand le fichier //**.gmi**// n’est pas indiqué : => / Lien vers la racine du site +———————————————————— ———————————————————— + +# Configuration avancée avec les styles + +Par défaut, le style est incorporé dans chaque page récupérée par le navigateur web. Le même style est utilisé pour toutes les pages, //htmgem/css/htmgem.css//, sauf lorsqu’un fichier ayant le même nom que la page mais avec l’extension **.css** existe. Dans ce cas, il est utilisé. + +Lorsque l’option css est activé dans la configuration (voir //rewrite// plus haut) d’autres comportements sont possibles : +* &style=source : le code source de la page est envoyée au navigateur, voir ci-après… +* &style=htmgem : utilise le style par défaut, mais en tant que fichier externe +* &style=none : la page HTML est envoyée sans style +* &style= : le fichier htmgem/css/.css est utilisé en tant que style externe +* &style=/ : le fichier indiqué (chemin absolu) est utilisé en tant que style externe + +## Réécriture d’URL pour afficher le code source + +Pour obtenir le source avec un lien du type +=> index.gmi.source +Il faut ajouter la ligne suivante pour la réécriture d’URL : +> rewrite ^(.+\.gmi)\.source$ /htmgem/?url=$1&style=source; + # Quand tout marche… -Parmi les fichiers distribués, seuls sont utiles : +Parmi les fichiers et répertoires distribués, seuls sont utiles : * **htmgem/index.php** : Il se charge de traduire le gemtext en HTML -* **htmgem/htmgem.css** : S’il manque, l’affichage sera dépourvu de style — littéralement. +* **htmgem/css/htmgem.css : S’il manque, l’affichage sera dépourvu de style — littéralement. Les autres peuvent être supprimés (y compris ce présent fichier) bien qu’ils ne présentent aucun danger. Ils restent nécessaires au développement du projet et son disponible sur le site de HtmGem. diff --git a/index.php b/index.php index d4f13fc..9d81086 100644 --- a/index.php +++ b/index.php @@ -12,9 +12,14 @@ define("DASHES" ."⸻" # U+2E3B Three-Em Dash (Three times larger than a single char) ); -$url = @$_REQUEST["url"]; +$style = @$_REQUEST['style']; +/* The url argument is always absolute compared to the document root + * The leading slash is removed. so url=/foo/bar and url=foo/bar ar the same. + */ +$url = @$_REQUEST["url"]; + ######################################## Installation page if (empty($url)) { if (!file_exists("index.gmi")) { @@ -28,7 +33,7 @@ if (empty($url)) { Installation de HtmGem @@ -39,33 +44,34 @@ if (empty($url)) { } ######################################## /Installation page -# Removes the trailling slash, to be sure there's not any. -$GMI_DIR = rtrim($_SERVER['DOCUMENT_ROOT'], "/"); -$filePath = $GMI_DIR."/".$url; +# Removes the headling and trailling slashes, to be sure there's not any. +$filePath = rtrim($_SERVER['DOCUMENT_ROOT'], "/")."/".ltrim($url, "/"); $fileContents = @file_get_contents($filePath); ######################################## 404 page if (empty($fileContents)) { + error_log("HtmGem: 404 $url $filePath"); http_response_code(404); ?> $url rééssayer ? -=> / index +=> $url 🔄 + +=> / EOF; echo translateGemToHtml($text404); echo "\n"; @@ -278,25 +284,59 @@ function translateGemToHtml($fileContents) { mb_ereg("#\s*([^\n]+)\n", $fileContents, $matches); $page_title = @$matches[1]; -# -echo << then embbed the default style, and stops. +* if &style= then use htmgem/word.css +* if &style=/… then use the … as as stylesheet. +**/ + +if ("source" == $style) { + echo $fileContents; +} else { + $parts = pathinfo($filePath); + $localCss = $parts["filename"].".css"; + $localCssFilePath = $parts["dirname"]."/".$localCss; + if (file_exists($localCssFilePath)) { + # Warning, using htmhem.php?url=… will make $localCss not found + # as the path is relative to htmgem.php and not / ! + $cssContent = ""; + } else { + if (empty($style)) { + $cssContent = + "\n"; + } else { + if ("none" == $style) { + $cssContent = ""; + } else { + if ("/" == $style[0]) + $href = $style; + else + $href = "/htmgem/css/$style.css"; + $cssContent = ""; + } + } + } + echo << $page_title - +$cssContent EOL; -echo "\n".translateGemToHtml($fileContents); -echo "\n\n"; + echo "\n".translateGemToHtml($fileContents); + echo "\n\n"; +} + + ob_end_flush(); ?> diff --git a/tests/tutogemtext.gmi b/tests/tutogemtext.gmi new file mode 100644 index 0000000..2d9985d --- /dev/null +++ b/tests/tutogemtext.gmi @@ -0,0 +1,89 @@ +Gemini se découpe en son protocole (comme HTTP) et son language, GemText. Ici, je vais approfondir ce qu’est le langage GemText. Son principe est que c’est le programme de l’utilisateur (le navigateur web, pour HTTP) qui décide de l‘affichage. La police de caractère, la taille, le fond d‘écran, tout. À l’exception du texte et de quelques autres détails qui suivent. + +Si vous utilisez un programme qui n’interprète pas tous les styles de lignes, certaines vous sembleront dupliquées… + +La ligne que vous venez de lire existe sur une ligne physique, que le programme que vous utilisez a dû découper en plusieurs lignes logiques afin que cela tienne sur votre écran. Entre cette présente ligne de texte et celle d’avant, il y a une ligne vide pour marquer le changement de paragraphe. +Ici, j’ai simplement passé à la ligne. L’espacement devrait être moindre. + +Il y a tout de même quelques types spéciaux de ligne. + +On commence par le titre de niveau 1. Il est d’abord écrit ci-après tel que je le vois, puis sur la ligne d’après il est rendu normalement par votre programme : + +​# Comment fonctionne GemText ? +# Comment fonctionne GemText ? + +Je viens d’écrire « # Comment fonctionne GemText » deux fois. Une fois sans qu’il soit interprété, où vous le voyez tel que je le vois. Et une deuxième fois où votre programme peut l’afficher différemment. + +​# Titre de niveau 1 +# Titre de niveau 1 + +​## Titre de niveau 2 +## Titre de niveau 2 + +​### Titre de niveau 3 +### Titre de niveau 3 + +# Les citations + +Quand on veut citer un texte, on écrit avec le caractère > en début de ligne. D’abord affichée comme je l’ai écrit puis comme le programme l’affiche normalement : + +​> Citation de texte. La ligne peut être aussi longue que voulue, c’est votre programme qui doit découper la ligne pour l’afficher. Une seule ligne physique peut être longue, mais il n’y a pas besoin de placer de retour à la ligne. +> Citation de texte. La ligne peut être aussi longue que voulue, c’est votre programme qui doit découper la ligne pour l’afficher. Une seule ligne physique peut être longue, mais il n’y a pas besoin de placer de retour à la ligne. + +# Les blocs préformatés + +Les blocs préformatés sont des lignes encadrées par un ``` sur une ligne avant le bloc et un ``` après le bloc. Les lignes contenant ``` ne sont pas affichées : +​``` +Ceci est une ligne préformatée. Quand la ligne est longue, elle n’est pas découpée. Le programme doit présenter un ascenseur horizontal pour permettre de tout voir. +​``` +``` +Ceci est une ligne préformatée. Quand la ligne est longue, elle n’est pas découpée. Le programme doit présenter un ascenseur horizontal pour permettre de tout voir. +``` + +# Les listes non-ordonnées + +​* Les listes non-ordonnées sont des lignes commençant par * les unes après les autres. +​* Elles servent à énumérer. +​* Par contre, GemText ne reconnaît pas les listes numérotées. +* Les listes non-ordonnées sont des lignes commençant par * les unes après les autres. +* Elles servent à énumérer. +* Par contre, GemText ne reconnaît pas les listes numérotées. + +# Les liens + +Il ne peut exister qu’un lien par ligne. Et la ligne est dédiée à ça ! Voici par exemple un lien vers le site centralisant pour le moment les informations sur Gemini : +​=> gemini://gemini.circumlunar.space/docs/specification.gmi Spécifications de Gemini +=> gemini://gemini.circumlunar.space/docs/specification.gmi Spécifications de Gemini + +Voici un autre lien, directement visible parce qu’il n’a pas de description : +​=> https://gemini.circumlunar.space/docs/specification.gmi +=> https://gemini.circumlunar.space/docs/specification.gmi + +# Ce que j’ai mis en plus… + +HtmGem suit les préconisations de Gemini, sauf pour quelques ajouts… Attention, le texte formaté ne s’affiche — à cette heure — que via HtmGem. Vous n’en voyez que les caractères déclenchant le formatage. Mais le texte reste néanmoins lisible. + +^ Quand on veut signifier que le texte est en **gras** on y met des astérisques autour. De même pour les mots __soulignés__, ceux écrits en //italique// ou même quand on les ~~barre~~. +Mais j’estime que le format GemText est alors pas assez **expressif** et qu’il se prive de capacités utiles qui ne sont vraiment pas dures à //concevoir//. Idéalement, on tendrait vers l‘édition de livres électroniques. + +Alors voici ce que j’y ajoute : +* Par défaut, le texte mis en forme s’applique – sur les lignes de texte, listes et citations. +* Pour désactiver la mise en forme du texte, on peut soit commencer la ligne par ^, soit faire un bloc non formaté avec ^^^ : + +^ Avec un ^ au début de cette ligne le texte apparaît ~~sans~~ la mise en forme. + +# HtmGem + +HtmGem est un programme écrit en Php permettant d’accéder à un serveur web rendant les pages Gemini. Il traduit chaque page Gemini en Html. +=> https://git.sr.ht/~sbgodin/htmgem Code source de HtmGem +=> https://gmi.sbgodin.fr Ma page personnelle qui utilise HtmGem +=> gemini://gmi.sbgodin.fr Ma page personnelle en passant nativement par un programme interprétant Gemini + + +### License de cette page +Cette page est sous licence libre **CC BY-SA 2.0 FR**. +=> https://creativecommons.org/licenses/by-sa/2.0/fr/ Texte de la licence CC BY-SA 2.0 FR +=> gemini://gmi.sbgodin.fr/ gemini://gmi.sbgodin.fr/ ⸻ Christophe HENRY + +### Navigation +=> ..