Présentation

oText, c’est le programme « maison » que j’utilise pour publier des articles sur ce blog.

Depuis longtemps, il s’agit d’un peu plus qu’un simple moteur de blog, puisqu’il me permet également de partager mes liens « au fil du web », d’envoyer des fichiers sur mon serveur, de suivre mes flux RSS, d’avoir un moyen de prise de notes (façon Google Keep), de gérer un agenda, et plus…

… le tout sous une même interface de gestion, ce qui était le but visé depuis le début.

Ça ressemble un peu à NextCloud, dit comme ça, mais NextCloud est beaucoup plus complet, avec application mobile, gestion Caldav, CardDav, sondages, formulaires, modules…

Mon outil, en contrepartie du nombre restreint de fonctions, est plus léger (seulement 1,3 Mo, contre 375 Mo pour NextCloud). Il suffit néanmoins si vous voulez simplement un petit script web dans le navigateur. Et c’est mon cas.

Ça fait longtemps que je n’en ai pas parlé ici, mais je considère que cette version est relativement aboutie.
Les principales nouveautés concernent un thème admin peaufiné avec un choix clair ou sombre (on peut forcer l’un ou l’autre, ou alors laisser le navigateur choisir en fonction des préférences du système). Le thème public — refait lui aussi — s’adapte par défaut aux paramètres du navigateur de l’internaute.

Comme toujours, l’accent est mis à la fois sur l’UX/UI en material-design, et respect des standards du Web et la légèreté (l’interface en JS reste très rapide), et sur la présence des options les plus utiles sans tout le superflu présent sur d’autres programmes du genre.

Astuce : vu le poids du script (1 Mo), vous pouvez l’installer et l’utiliser comme un lecteur RSS seul, ou pour l’agenda ou les notes seules… bref, en profiter même si vous n’avez pas besoin d’un blog, mais que vous cherchez quelque chose de léger pour une application précise.

Téléchargement

Fichier 7z : otext.7z

Taille : 408 968 octets
Sha1 : 086971ab48a0c5b401778752140c314e75b8e98a

Installation

1. dézippez le fichier dans un dossier « ./blog »
2. envoyez ce dossier sur votre serveur
3. rendez-vous dans le dossier ./blog sur votre site
4. suivez les quelques étapes d’installation (création d’un pseudo, d’un mot de passe, etc.)

Captures d’écran

Voir sur le folio.
La capture d’en-tête donne déjà une idée.

Dépendances

Côté serveur :

• PHP 5.7+
• minimum 1.5 Mb d’espace disque (plus de données = plus d’espace disque requis)

Modules PHP :

• pdo
• pdo-sqlite
• php-curl
• php-gd
• php-xml
• php-zip
• php-mbstring

(PDO : pour la base de données ; cURL : pour les flux RSS et pour récupérer les titres des liens ; GD : pour le traitement des images uploadées ; XML : pour le parsage des flux RSS ; ZIP : pour la fonction d’export de les données dans une archive ; MBString : pour un support Unicode étendu)

Côté client :

• un navigateur récent (testé avec succès sous Firefox et Vivaldi, desktop et mobile).
• JavaScript (local) doit être activé (il n’y a aucune dépendance tierce)
• Les cookies doivent être autorisés (uniquement des cookies fonctionnels).

Défauts et fonctions absentes

• Je n’ai pas spécifiquement fait attention à l’accessibilité (navigation au clavier, etc.), même si ça ne doit dans l’ensemble pas être pire qu’ailleurs.
• Pas de markdown dans l’éditeur de texte (ça reste du BBCode, ou bien du HTML pour les articles).
• MySQL n’est plus supporté.

Des bugs ? Des suggestions ?

Non.

J’ai codé tout ça avant tout pour moi et je le mets en ligne à qui le veut, tel quel, dans l’espoir qu’il puisse être jugé utile à d’autres.

Considérez que ce script a simplement le mérite d’exister et d’être à disposition. Il n’y a pas de support ni de maintenance publique du script. Je n’ai pas le temps (ni l’envie) pour gérer le projet ou de façon plus active.

Si vous voulez une fonction spécifique, je vous conseille de la coder vous-même ou de trouver quelqu’un d’autre que moi pour le faire.

Soutien ?

Si c’est ce que vous voulez, y a un bouton Paypal en bas de cette page.

Autre chose ?

Non.

J’avais déjà fait un article sur ça il y a longtemps, mais là aussi il semble qu’elle ne soit plus au goût du jour.

Après moult tests et quelques surprises, je mets ici quelques snippets de code, pour mémo, surtout pour moi.

Notes :

• Dans ce qui suit, si vous voyez un example.com, il faut remplacer ça par votre site à vous ;
• Ceci est adapté à mon site, mes préférences en termes d’URL.
• Vérifiez que votre serveur supporte les redirections et le fichier .htaccess.

Notes 2 :
Selon votre fichier et les règles qui s’y trouvent déjà, il peut être nécessaire d’y ajouter (une fois) les instructions suivantes :

RewriteEngine on

RewriteBase /

Je ne les fais pas figurer partout ci-dessous.

Forcer la redirection HTTPS

Les navigateurs le font tout seuls parfois, mais il vaut mieux l’ajouter :

## Force HTTPS
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301]

Supprimer le « www », au début du nom du site

Certains préfèrent le conserver, d’autres non. Dans tous les cas, il est préférable d’avoir un choix et de forcer la redirection de l’une des URL vers l’autre. C’est plus propre et c’est aussi mieux pour le référencement d’avoir une seule URL pour chaque ressource :

## Removes www.
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [R=301]

Supprimer les slashes redondants

J’ai mis du temps à trouver un code qui fonctionne quelle que soit la position des doubles-slashs. Généralement les forums en proposaient plusieurs selon que le slash soit au début, à la fin ou au milieu de l’URL.

## Removes multiple consecutive slashes anywhere in URL
RewriteCond %{THE_REQUEST} \s[^?]*//
RewriteRule ^.*$ /$0 [R=301,NE]

Maintenant, les urls suivantes :

• exemple.com///dossier/fichier ;
• exemple.com/dossier///fichier ;
• exemple.com/dossier/// ;
• exemple.com////dossier///fichier

Sont toutes réécrites en :

• exemple.com/dossier/fichier

ÉDIT : les slashes multiples doivent être remplacées uniquement dans l’arborescence. S’il y a « ?paramètre=foo///bar », cela peut être légitime et ne n’est pas notre problème : ils doivent rester. C’est pour ça qu’on ne cible que les slashes multiples entre le premier espace dans %{THE REQUEST} et le premier « ? » dans l’URL.

Supprimer le code derrière le chemin d’un script

## Rewrite ^*.php/*$ to *.php$ (removes anything after a "*.php/")
RewriteCond %{REQUEST_URI} ^(.*)\.php/(.*)$
RewriteRule . %1.php [R=301]

Celui-là est plus compliqué.
Quand on appelle un fichier fichier.php, on en exécute le contenu. Si l’on l’appelle avec un paramètre fichier.php?parametre, c’est toujours le même fichier qui est exécuté, mais maintenant l’exécution tient compte de la valeur du paramètre.

Dans le cas suivant par contre, il y a possibilité de problèmes : fichier.php/.
Le fichier est appelé (et donc exécuté), mais il est traité comme un dossier (car il est suivi d’un slash et non d’un point d’interrogation), et avec lui la notion de profondeur de l’arborescence, etc.
C’est un problème assez sévère et je préfère l’éviter.

J’y vais donc assez lourdement : quand je vois un fichier .php qui est directement suivi d’un slash, on vire tout ce qui suit le slash, incluant ce dernier.

Les urls suivantes :

• exemple.com/fichier.php ;
• exemple.com/fichier.php/ ;
• exemple.com/fichier.php/blabla/autreblabla ;

Sont toutes réécrites en :

• exemple.com/fichier.php

Notez que ça ne visera que le script exécuté. Rien n’empêche en effet d’avoir la chaîne « .php » suivi d’un slash dans un paramètre d’un autre fichier php (celui exécuté).
Cette URL ne sera pas modifiée, par exemple : exemple.com/fichier.php?parametre=fichier.php/bla/bla

Supprimer le « index.php » à la fin des URL

## Rewrites "/index.php" to "/"
RewriteCond %{REQUEST_URI} ^(.*)/index\.php$ [NC]
RewriteRule . %1/ [R=301,L]

Quand on affiche un dossier sur un site, comme example.com/folder/, le « index.php » ou « index.html » qu’il contient est implicitement affiché. C’est la page par défaut. Le demander de façon explicite est donc généralement inutile.

Afin d’éviter d’avoir des URL redondantes, je préfère ne conserver que les URL sans le « index.php ». Les éventuels paramètres, eux, sont maintenus.

Pour résumer

Avec tout ça, toutes les URL suivantes :

• http://lehollandaisvolant.net/tuto/ (https)
• http://www.lehollandaisvolant.net/tuto/ (https ; www)
• https://lehollandaisvolant.net/tuto/ (url OK)
• https://lehollandaisvolant.net//tuto/ (double slash après le TLD)
• https://lehollandaisvolant.net/tuto/// (double slash à la fin)
• https://lehollandaisvolant.net/tuto/index.php (index.php)
• https://lehollandaisvolant.net/tuto/index.php/ (index.php + slash)
• https://lehollandaisvolant.net/tuto/index.php/folder/ (index.php + slash + faux-dossier)
• http://www.lehollandaisvolant.net//////tuto/index.php//dossier/sousdossier/foo/ (tout ce qui précède)

Renvoient toutes sur :

• https://lehollandaisvolant.net/tuto/

Petite note sur les cascades de fichers .htaccess

On peut mettre un fichier .htaccess dans chaque dossier et leurs sous-dossiers si l’on veut, et les directives seront appliquées à tous les fichiers inclus dans le dossier, y compris leurs sous-dossiers.

Par contre, mettre un RewriteEngine on dans un des sous-dossiers pourra avoir pour effet d’annuler les directives des fichiers situées dans les dossiers parents. C’était le cas chez moi récement, même si je n’ai pas souvenir d’un tel comportement lors de la mise en place de ces fichiers.
Il est possible que ça vienne de la configuration du serveur.

Il y a quelques années, j’avais fait un article pour expliquer comment mettre la barre de signets verticalement dans Vivaldi. Cette méthode n’est plus d’actualité et était de toute façon remise à zéro lors des mises à jour du navigateur.

La nouvelle méthode est elle persistante, et même si elle semble similaire, elle utilise des options qui n’étaient pas là dans Vivaldi avant.

Activer les modifs CSS de l’interface

Pour commencer, il faut activer 2-3 trucs dans les options du navigateur, y compris des options expérimentales.

Premièrement, activez les mods CSS. Pour ça, allez sur l’adresse vivaldi://experiments/ puis cochez la case « Allow for using CSS modifications ». Relancez le navigateur.

Rendez-vous ensuite dans les paramètres, et cherchez « CSS ». Vous devez alors voir apparaître une option qui permet de spécifier un dossier :

Mettez-y un dossier de votre choix. Je vous conseille de choisir un sous dossier nommé « userChrome » dans le dossier de profil de Vivaldi. Sous GNU/Linux, le dossier de profil se trouve dans ~/.config/vivaldi/.

Ce dossier « userChrome » va contenir des fichiers CSS contenant le code CSS correspondant aux modifs de l’interface du navigateur.

Activer la barre de signets

Ensuite, dans les paramètres, toujours, assurez-vous que la barre de signets soit en haut, que les signets soient affichés sous formes d’icônes seulement :

Utiliser du CSS pour mettre cette barre verticalement sur la droite

Ce que mon code CSS va faire maintenant, c’est :

• pivoter la barre 90° dans le sens horaire (la barre se trouve alors à gauche et les icônes sur le côté)
• déplacer cette barre (sur la gauche) vers l’autre côté, à droite
• faire pivoter les icônes de −90° pour les remettre dans le bon sens.
• faire en sorte que la barre n’empiète pas sur la fenêtre principale du navigateur (la partie où s’affichent les pages)

Le code en question :

/* Bookmarkbar : turning it on the side, placing it on the right */
#app #browser #main .bookmark-bar {
	transform: rotate(90deg) scale(1, 1)!important;
	transform-origin: 0% 0%!important;
	position: relative!important;
	left: 100%;
	height: 34px;
}

/* flip back the individual icons */
#app #browser #main .bookmark-bar button {
	transform: rotate(-90deg)!important;
}

/* gives margins to the main frame */
#app #browser #main .inner {
	margin-right: 35px!important; /* gives place to the new bars position */
	margin-top: -35px!important; /* claims the place from its old position */
}

Ce code est à placer dans un fichier CSS dans le dossier créé précédemment. Donnez-lui le nom que vous voulez ; par exemple « vertical-bookmarks.css ».

Enregistrez ce fichier, puis redémarrez Vivaldi, et la barre devrait être vertical, à droite :

Quelques notes

Ceci est testé avec Vivaldi 3.7.2218.58 (Stable channel) (64 bits) sous Linux Mint 20.
Le code CSS utilisé est le même que celui de mon astuce d’il y a quelques années.

Vivaldi le dit bien : l’option pour le CSS peut, un jour, être modifié ou retiré. Dans ce cas, ce mod ne fonctionnera plus : la barre de signets sera alors de nouveau en haut, horizontalement. Ça ne sera pas grave (aucune perte de données), mais il faudra alors trouver autre chose.

À l’époque d’Opera, il était possible de mettre la barre de signets verticalement d’une simple option dans les réglages. On peut espérer que cette option revienne un jour dans Vivaldi. En attendant, ce bricolage permet de dépanner.

Toute l’interface de Vivaldi est accessible en CSS. Pour en explorer les éléments, il faut lancer Vivaldi dans un mode spécial, avec la commande vivaldi --debug-packed-apps --silent-debugger-extension-api, et ensuite utiliser les outils de développeurs pour l’explorer et moder ça.