Manages the styles. WIP.
This commit is contained in:
parent
11ced8627b
commit
1a01e8bd81
|
|
@ -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;
|
||||
}
|
||||
24
index.gmi
24
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=<autre nom> : le fichier htmgem/css/<autre nom>.css est utilisé en tant que style externe
|
||||
* &style=/<path> : 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.
|
||||
|
|
|
|||
78
index.php
78
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)) {
|
|||
<title>Installation de HtmGem</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style>
|
||||
<?php include("htmgem.css"); ?>
|
||||
<?php include("css/htmgem.css"); ?>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -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); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style>
|
||||
<?php include("htmgem.css"); ?>
|
||||
<?php include("css/htmgem.css"); ?>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
$text404 = <<<EOF
|
||||
# Page non trouvée
|
||||
# ⚠ Page non trouvée
|
||||
|
||||
**$url**
|
||||
|
||||
=> $url rééssayer ?
|
||||
=> / index
|
||||
=> $url 🔄
|
||||
|
||||
=> /
|
||||
EOF;
|
||||
echo translateGemToHtml($text404);
|
||||
echo "</body>\n</html>";
|
||||
|
|
@ -278,25 +284,59 @@ function translateGemToHtml($fileContents) {
|
|||
mb_ereg("#\s*([^\n]+)\n", $fileContents, $matches);
|
||||
$page_title = @$matches[1];
|
||||
|
||||
# <!-- link type="text/css" rel="StyleSheet" href="/htmgem.css" -->
|
||||
echo <<<EOL
|
||||
###################################### CSS Management
|
||||
/**
|
||||
* if &style=source displays the source directly and stops.
|
||||
* if there's a filename.css besides filename.gmi, use the css and stops.
|
||||
* if &style=<NOTHING> then embbed the default style, and stops.
|
||||
* if &style=<word not beginngin by slash> 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 = "<link type='text/css' rel='StyleSheet' href='$localCss'>";
|
||||
} else {
|
||||
if (empty($style)) {
|
||||
$cssContent =
|
||||
"<style>\n"
|
||||
.@file_get_contents("css/htmgem.css")
|
||||
."</style>\n";
|
||||
} else {
|
||||
if ("none" == $style) {
|
||||
$cssContent = "";
|
||||
} else {
|
||||
if ("/" == $style[0])
|
||||
$href = $style;
|
||||
else
|
||||
$href = "/htmgem/css/$style.css";
|
||||
$cssContent = "<link type='text/css' rel='StyleSheet' href='$href'>";
|
||||
}
|
||||
}
|
||||
}
|
||||
echo <<<EOL
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>$page_title</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style>
|
||||
|
||||
EOL;
|
||||
include("htmgem.css");
|
||||
echo <<<EOL
|
||||
</style>
|
||||
$cssContent
|
||||
</head>
|
||||
<body>
|
||||
EOL;
|
||||
|
||||
echo "\n".translateGemToHtml($fileContents);
|
||||
echo "</body>\n</html>\n";
|
||||
echo "\n".translateGemToHtml($fileContents);
|
||||
echo "</body>\n</html>\n";
|
||||
}
|
||||
|
||||
|
||||
ob_end_flush();
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
=> ..
|
||||
Loading…
Reference in New Issue