Il n'y a pas très longtemps (en toute relativité), j'avais publié une "Réflexion sur les bases de connaissances" que personne n'a lu, ce que je peux comprendre.
En résumé, je prends des notes de trucs. Des idées, des liens à lire qui vont trainer là pour toujours et que je vais jamais lire.
Pas mal de documentation aussi. Quand je me lance dans l'apprentissage de quelque chose, je démarre une note dessus.
J'ai aussi des recettes de cuisine, des adresses de plombier, ...
Je prends aussi des notes sur du vrai papier dans un carnet (sûrement acheté chez Action). Par exemple des articles de ce présent blog ont démarré de la sorte, alors que des gens me regardaient de travers gribouiller un condensant vraissemblablement illisible de mots dans une salle d'attente d'hôpital.
"Timmy ne regarde pas le monsieur qui fait semblant d'écrire comme dans The Shining, il est sûrement là pour recevoir des médicaments pour ses troubles obsessionnels". Ben ouais madame, désolé.
Tout ça n'explique pas pourquoi j'utilise DokuWiki et pourquoi le titre de cet article a le potentiel SEO d'une photo de rat mort tout habillé sur un site porno.
Disons pour pas trop me répéter (ma spécialité) que j'ai choisi DokuWiki parce que:
- Sa source de données est un bon vieux banc de fichiers texte, aucune base de données n'est nécessaire;
- Je peux facilement éditer et consulter tout depuis mon téléphone ou n'importe quel ordinateur (j'en utilise plusieurs (trop)) pourvu qu'il y ait un accès aux Internets — Rien ne doit être installé, pas d'app, faut juste un navigateur.
Le principal inconvénient étant la nécessité d'avoir un serveur quelque part avec du PHP dessus et des backups.
L'autre inconvénient est le sujet de cet article.
C'est moche
Bon je suis un peu méchant. On peut pas vraiment dire que je sois un meilleur artiste capable de créer un thème sobre et joli pour un Wiki.
Le thème de base est fonctionnel mais très basique, on peut le voir sur leur site par exemple:
Déjà, il n'y a pas de thème sombre. Sur Wikipedia non plus d'ailleurs (à moins d'être connecté et d'aller creuser dans les options, je crois), le style de texte est très BORING et l'éditeur est un bon vieux textarea, que je vais garder parce que je suis un peu OLD SCHOOL mais on peut de nos jours créer de bien plus beaux éditeurs, notamment avec l'attribut contenteditable.
Ce sera pour une prochaine fois.
Etape 0: Avoir la célérité de ZEUS
C'est sans rapport avec l'apparence mais c'est rapide et ça change un peu la vie pour ceusse qui utilisent DokuWiki tous les jours comme moi (on est au moins quatre dans le monde).
Saviez-vous que DokuWiki avait des raccourcis clavier?
On en est pas au mode vim mais ça accélère pas mal les choses je trouve. Ces raccourcis sont activés par une combinaison de touches qui peut potentiellement varier selon le navigateur.
Pour Firefox et Chrome, c'est Alt+Shift. Ce qui signifie que:
- Alt+Shift+e — Ouvre la page courante en édition
- Alt+Shift+s — Enregistre la page en cours d'édition
- Alt+Shift+f — Met le focus sur le champ de recherche
Le deuxième en particulier m'épargne bon nombre de clicks foireux sur preview au lieu du minuscule bouton save avec son vieux style de bouton par défaut moche.
Etape 1: Ajouter un template
Les templates pour Doku ne sont pas très nombreux et dieu seul sait si quelqu'un les tient à jour.
Je vais utiliser celui qui est un peu tout le temps recommandé, qui a l'air actif, et permet de changer entre sombre et clair (un prérequis pour moi pour les deux fois par an où je geek en extérieur) et de surcroît d'avoir une détection automatique du mode en place sur votre navigateur (j'en parlais dans un autre article).
Il s'agit de MindTheDark.
Vous pouvez l'installer automatiquement depuis le panneau d'administration etl a page des extensions:
Cliquez sur "Install" et voilà, vous avez le template. Pour l'activer, ça se passe sur la page des options du panneau d'administration:
Le bouton pour enregistrer les options est tout en bas.
Une section d'options spécifiques au template devrait apparaître tout en bas de la page d'options (en fait elle est peut-être toujours là même si le template n'est pas actif):
Je coche bien entendu la détection automatique, le lien pour changer de sombre à clair et vice-versa (qui fait foirer toute la barre d'état mais spa grave) et place le thème par défaut en sombre.
Changement des polices de caractère
Le jeu de polices par défaut n'est pas à son avantage tant sous Linux que Windows (c'est pas trop mal sur Android).
Pour changer tout ça on va devoir éditer les CSS. Chouette.
Nous avons plusieurs moyens d'appliquer des modifications CSS. A mon sens, la plus "portable" vient d'une fonctionnalité de DokuWiki: les styles utilisateur.
Il s'agit de créer un fichier nommé userstyle.css (ou userstyle.less si vous êtes ce genre de personnes) dans le répertoire conf de DokuWiki.
Oui c'est bizarre, c'est le seul fichier CSS au milieu des fichiers de config. Ne posons pas trop de questions.
Ce fichier ne s'applique que pour les écrans. C'est-à-dire qu'en mode "impression" il est ignoré et c'est une bonne chose pour les trois personnes qui impriment encore des trucs (et qui ont probablement un fax chez eux).
J'utilise à peu près la même famille de police pour le texte en général à part que:
- Je pose "Ubuntu" en premier pour mes machines Linux, j'aime bien cette police pour le texte et la doc;
- "Segoe UI" existe de base sous Windows et elle est plutôt chouette. Je sais pas pourquoi j'ai laissé "Lucida Sans" dans la liste mais bon;
- "Fira Code" est là pour certaines machines Linux qui n'ont pas les polices "Ubuntu" - J'y installe toujours Fire Code, j'en parlais ici.
A propos de Fira Code: c'est une police à ligatures, c'est à dire que certaines suites de caractères sont transformées en un caractère spécial combiné. Par exemple "->" devient une flèche mais il y a tout un tas d'autres symboles moins connus comme "www" et les gens n'en sont pas toujours fans.
Pour l'instant j'utilise d'ailleurs CaskaydiaCove un peu partout (la Nerd Font) mais ça c'est une autre histoire.
body {
font-family: Ubuntu,"Segoe UI","Fira Code","Lucida Sans",sans-serif;
}
.dokuwiki textarea.edit, pre {
font-family: Consolas,"Fira Code","Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
}La seconde famille de police concerne les extraits de code et l'éditeur et reste plus ou moins dans sa valeur par défaut sauf que j'ai mis "Fira Code" en deuxième.
Sous Windows c'est Consolas qui devrait prendre le dessus et ça présente pas mal.
La page prend toute la largeur
Je sais pas pourquoi le template MindTheDark configure la "page" sur toute la largeur, ce qui est pas top pour la lecture quand j'ai mon navigateur en plein écran.
Le template de base a une limite de largeur. Il s'agit d'en appliquer une et s'assurer que la page est bien centrée:
#dokuwiki__site > .site {
margin-right: auto;
margin-left: auto;
max-width: 930px;
}La largeur est totalement arbitraire, à vous de choisir ce que vous voulez. Sur mobile on est en dessous de cette largeur max et donc la page prend d'office toute la largeur disponible.
Sur grands écrans: menu pas centré et police trop petite
Quand vous êtes connectés il y a un menu qui apparaît tout au dessus et il est pas centré.
Ce truc est en positionnement absolu, c'est vraiment pas pratique à positionner; la bonne nouvelle c'est que tout va bien sur mobile.
Pour que mes modifications n'affectent que les "grands écrans", j'utilise un media query actif à partir de 800px, avec un hack infâme de centrage à base de translation et une augmentation de taille de la police en général parce que je suis vieux.
@media (min-width: 800px) {
body {
font-size: 1.1rem;
}
#dokuwiki__usertools {
left: 50%;
right: initial;
transform: translateX(-50%);
width: initial;
min-width: 800px;
}
}
Bon le résultat est pas incroyable mais c'est mieux qu'avant.
L'éditeur est trop petit
Je traine la même installation de DokuWiki depuis de nombreuses années, elle a été maintes fois mise à jour sans se croutter complètement (j'ai cependant un nombre étrangement élevés de plugins qui portent le même nom mais je fais semblant de pas les voir).
Je me sens un peu bête d'avoir trainé ce "problème" depuis tout ce temps sans connaître sa solution.
L'éditeur est trop petit sur un grand écran (même sur un téléphone moderne il est un peu trop petit).
Je me préparais à modifier ça avec du CSS sauf que la taille du textarea est fixée en "inline" par du JavaScript:
Et en fait, je me sens vraiment extrêmement bête parce que, vous savez, ces boutons bizarres en bas de la page avec des flèches:
Ben ça sert à redimensionner l'éditeur... Et la préférence est sauvegardée dans votre session voire dans un fichier texte quelque part sur le serveur (spa très clair) si vous êtes un utilisateur connecté.
Bon... Ben voilà. Problème résolu (que j'ai trainé pendant 15 ans).
J'ai aussi découvert qu'on pouvait avoir de la coloration syntaxique de base dans DokuWiki depuis je-sais-plus-quelle-version. Tous mes extraits de code sont en bon vieux gris terne. Bon.
Mon fichier userstyle.css
Voici toutes les modifs regroupées:
#dokuwiki__site>.site {
margin-right: auto;
margin-left: auto;
max-width: 930px;
}
.dokuwiki textarea.edit,
pre {
font-family: Consolas, "Fira Code", "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
}
body {
font-family: Ubuntu, "Segoe UI", "Fira Code", "Lucida Sans", sans-serif;
}
@media (min-width: 800px) {
body {
font-size: 1.1rem;
}
#dokuwiki__usertools {
left: 50%;
right: initial;
transform: translateX(-50%);
width: initial;
min-width: 800px;
}
}Ce qui donne ceci chez moi au final, sur Ubuntu:
Rien de très FIFOU mais c'est sobre et un peu moderne.
Notons aussi tant qu'on y est qu'il y a un petit éditeur de couleurs du template dans les options de DokuWiki:
Parfait pour une bonne farce au propriétaire du wiki qui consiste à tout mettre en rose Fluo.
Commentaires
Il faut JavaScript activé pour écrire des commentaires ici
#1
#2