Add tutos and metatags
Tim Izzo tim@5ika.ch
Fri, 19 Apr 2024 16:05:17 +0200
14 files changed,
288 insertions(+),
92 deletions(-)
jump to
M
assets/css/style.css
→
assets/css/style.css
@@ -1,102 +1,114 @@
:root { - --color-primary: #4f46e5; - --color-bg: #f1f5f9; - --text-secondary: #374151; - } - - body { - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace, serif; - background-color: var(--color-bg); - } - - main { - max-width: 40rem; - margin: 0 auto; - padding: 2rem 0; - } - - blockquote { + --color-primary: #4f46e5; + --color-bg: #f1f5f9; + --text-secondary: #374151; +} + +body { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace, serif; + background-color: var(--color-bg); +} + +main { + max-width: 40rem; + margin: 0 auto; + padding: 2rem 0; +} + +blockquote { + margin: 0; + color: var(--text-secondary); +} + +a { + color: var(--color-primary); + text-decoration: none; +} + +a:hover { + color: #818cf8; + text-decoration: underline; +} + +h1 { + font-size: 1.5rem; + line-height: 2rem; +} + +h2 { + font-size: 1.25rem; + line-height: 1.75rem; + margin-bottom: 1rem; +} + +p { + margin: 1.5rem 0; + line-height: 1.5; +} + +ul { + line-height: 1.3; +} + +pre:has(code) { + padding: 0.5rem 0.75rem; + border-radius: 4px; +} + +:not(pre) > code { + font-size: 0.9rem; + color: var(--text-secondary); + background-color: rgb(221, 221, 221); + padding: 0 0.25rem; + border-radius: 4px; +} + +.links-list { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.links-list > a { + display: block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.activity-grid { + display: grid; + grid-template-columns: 1fr 4fr; + column-gap: 1rem; + row-gap: 1rem; + + > h4 { margin: 0; - color: var(--text-secondary); } - - a { - color: var(--color-primary); - text-decoration: none; - } - - a:hover { - color: #818cf8; - text-decoration: underline; - } - - h1 { - font-size: 1.5rem; - line-height: 2rem; - } - - h2 { - font-size: 1.25rem; - line-height: 1.75rem; - margin-bottom: 1rem; - } - - p { - margin: 1.5rem 0; - line-height: 1.5; - } - - ul { - line-height: 1.3; +} + +@media only screen and (max-width: 600px) { + main { + padding: 0 0.5rem; } .links-list { display: grid; - grid-template-columns: 1fr 1fr 1fr; - } - - .links-list > a { - display: block; - padding-top: 0.5rem; - padding-bottom: 0.5rem; + grid-template-columns: 1fr 1fr; } .activity-grid { - display: grid; - grid-template-columns: 1fr 4fr; - column-gap: 1rem; - row-gap: 1rem; + grid-template-columns: 1fr; + } +} - > h4 { - margin: 0; - } +@media (prefers-color-scheme: dark) { + :root { + --color-primary: #818cf8; + --color-bg: #18181b; + --text-secondary: #9ca3af; } - - @media only screen and (max-width: 600px) { - main { - padding: 0 0.5rem; - } - .links-list { - display: grid; - grid-template-columns: 1fr 1fr; - } - - .activity-grid { - grid-template-columns: 1fr; - } + body { + color: white; } - - @media (prefers-color-scheme: dark) { - :root { - --color-primary: #818cf8; - --color-bg: #18181b; - --text-secondary: #9ca3af; - } - - body { - color: white; - } - } - +}
A
content/tutos/_index.md
@@ -0,0 +1,6 @@
+Dans mes explorations, il arrive régulièrement que je documente +les actions que je fais afin de retrouver cette connaissance pour +un usage futur. + +Vous pouvez retrouver ici les tutos que je mets à disposition pour +le futur moi ou toutes personnes qui pourraient en avoir besoin.
A
content/tutos/utiliser-chiffrement-gpg.md
@@ -0,0 +1,53 @@
+--- +Title: Échanger des messages confidentiels avec GPG +Date: 2024-04-19 +--- + +Sur la [page d'accueil](/), je mets à disposition ma clé PGP publique +afin de permettre aux gens de m'envoyer des messages chiffrés que seul +moi pourrait déchiffrer. + +Ce tuto explique comment utiliser le programme [GPG](https://gnupg.org/) +pour chiffrer un message avec ma clé publique. +GPG est un programme universellement accessible (sur toutes les plateformes) +permettant de générer des clés de chiffrement, de les stocker et de +chiffrer/déchiffrer des messages avec. + +## Importer la clé publique du destinataire + +Dans un premier temps, vous avez besoin de récupérer [ma clé PGP publique](http://localhost:1313/tim@5ika.ch.pub) +sur votre ordinateur puis de l'importer dans GPG avec la commande suivant: + +```bash +gpg --import tim@5ika.ch.pub +``` + +Vous pouvez ensuite constater les clés PGP disponibles sur votre système +avec la commande suivante: + +```bash +gpg --list-keys +``` + +Vous devriez voir apparaître au moins une ligne indiquant que vous avez +une clé correspondant à l'UID `tim@5ika.ch`. + +## Chiffrer un message + +Placez votre message dans un fichier de texte, par exemple `message-secret.txt` +et chiffré le avec la commande suivante: + +```bash +gpg --recipient tim@5ika.ch --encrypt message-secret.txt +``` + +Par sécurité, comme vous avez récupéré la clé publique en téléchargeant un +fichier depuis un site Web, `gpg` vous affiche un message d'alerte +et vous invite à confirmer votre action en entrant `y` puis `Enter`. + +Après ces étapes, vous obtenez un fichier `message-secret.txt.gpg` +qui contient votre message chiffré avec la clé publique. +Vous pouvez ainsi m'envoyer ce fichier par le canal que vous voulez. + +Seule la personne qui détient la clé privée correspondant à la clé +publique utilisée peut déchiffrer le message.
A
content/tutos/vim.md
@@ -0,0 +1,74 @@
+--- +Title: Utiliser Vim et Vimwiki +Date: 2024-04-19 +--- + +## Cheatsheet + +### Créer une nouvelle page à partir d'un lien + +1. Créer un lien avec `[[Nom de la page]]` +2. Placer le curseur sur le lien et appuyer sur `Enter` + +Une nouvelle page Markdown est créée avec le nom du lien dans le dossier Wiki. + +### Checker une tâche + +1. Place le curseur sur la tâche +2. Appuyer sur CTRL+Space + +> Si le curseur est un élément de liste, l'action ajoute une checkbox. + +## Shortcuts + +### Copier/Coller + +- `yy`: Copie la ligne actuelle +- `dd`: Supprime la ligne actuelle +- `du`: Supprime à partir du curseur jusqu'à la fin du mot +- `cc`: Supprime la ligne actuelle et passe en mode *insertion* +- `p`: Colle une sélection +- `D`: Supprime à partir du curseur jusqu'à la fin de la ligne +- `C`: Supprime à partir du curseur jusq'à la fin de la ligne et passe en mode + *insertion* +- `J`: Merge la ligne actuelle et la suivante + +### Déplacement + +- `w`: Va au prochain mot +- `b`: Va au précédent mot +- `e`: Va à la fin du mot +- `0`: Va au début de la ligne +- `$`: Va à la fin de la ligne +- `gg`: Va à la première ligne du fichier +- `G`: Va à la dernière ligne du fichier +- `H`: Va en haut de la fenêtre (High) +- `M`: Va au milieu de la fenêtre (Middle) +- `L`: Va en bas de la fenêtre (Low) +- `zz`: Place la ligne actuelle au milieu de la fenêtre +- `Shift+↑`: Déplace la ligne actuelle vers le haut (commande custom) +- `Shift+↓`: Déplace la ligne actuelle vers le bas (commande custom) + +### Opérations + +- `u`: Annule l'action précédente +- `Ctrl+r`: Refait l'action annulée +- `>>`: Ajoute une tabulation au début de la ligne +- `<<`: Enlève une tabulation au début de la ligne +- `N>>`: Ajoute une tabulation au N lignes suivantes +- `N<<`: Enlève une tabulation au N lignes suivantes +- `x`: Supprime le caractère au niveau du curseur +- `~`: Switch la casse pour le caractère au niveau du curseur +- `rX`: Remplace le caractère au niveau du curseur par 'X' + +### Recherche + +- `:/term`: Va à la première occurence de 'term' +- `n`: Va à la prochaine occurence de 'term' +- `N`: Va à la précédente occurence de 'term' +- `*`: Va à la prochaine occurence du mot au niveau du curseur + +## Ressources + +- [Vimwiki](https://vimwiki.github.io/) +- [Guide Working with vim](https://mkaz.blog/working-with-vim/)
M
layouts/_default/list.html
→
layouts/_default/list.html
@@ -11,8 +11,11 @@ <ul>
<!-- Ranges through content/posts/*.md --> {{ range .Pages }} <li> - <a href="{{ .RelPermalink }}" - >{{ .Date | time.Format "02.01.2006" }} - {{ .LinkTitle }}</a + <a href="{{ .RelPermalink }}"> + {{ if .Date }} + {{ .Date | time.Format "02.01.2006" }} - + {{ end }} + {{ .LinkTitle }}</a > </li> {{ end }}
M
layouts/_default/single.html
→
layouts/_default/single.html
@@ -1,1 +1,4 @@
-{{ define "main" }} {{ .Content }} {{ end }} +{{ define "main" }} +<h1>{{ .Title }}</h1> +{{ .Content }} +{{ end }}
M
layouts/shortcodes/activity.html
→
layouts/shortcodes/activity.html
@@ -7,6 +7,13 @@ <a href="{{ .RelPermalink }}">{{ .LinkTitle }} ({{ .Date | time.Format "02.01.06" }})</a>
{{end}} </div> + <h4>Dernier tuto</h4> + <div> + {{ range first 1 (where site.RegularPages "Section" "tutos") }} + <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> + {{end}} + </div> + <h4>Lecture en cours</h4> <div> {{ $outbox := getJSON "https://bookwyrm.social/user/5ika/outbox?page=1" }}
M
layouts/shortcodes/links.html
→
layouts/shortcodes/links.html
@@ -2,8 +2,9 @@ <nav class="links-list">
<a href="/posts">📝 Blog</a> <a href="./about">👋 Plus d’info</a> <a href="./now">⬇️ Maintenant</a> + <a href="./tutos">📒 Tutos</a> + <a href="./inspirations">🧠 Inspirations</a> <a href="https://bookwyrm.social/user/5ika" target="_blank">📘 Lectures</a> - <a href="./inspirations">🧠 Inspirations</a> <a href="/tim@5ika.ch.pub">🔑 Clé PGP</a> <a href="https://tooting.ch/@5ika" target="_blank" rel="me">🐘 Mastodon</a> <a href="mailto:tim@5ika.ch" target="_blank">✉️ Email</a>
A
layouts/tutos/list.html
@@ -0,0 +1,15 @@
+{{ define "main" }} +<main> + <p>{{ .Content }}</p> + <ul> + <!-- Ranges through content/posts/*.md --> + {{ range .Pages }} + <li> + <a href="{{ .RelPermalink }}"> + {{ .LinkTitle }}</a + > + </li> + {{ end }} + </ul> +</main> +{{ end }}
A
layouts/tutos/single.html
@@ -0,0 +1,13 @@
+{{ define "main" }} + <h1>{{ .Title }}</h1> + {{ .Content }} + <hr/> + <p> + <i> + Ce tuto vous est utile ? Vous avez vu une coquille ou vous avez une suggestion d'amélioration ? + <br/> + Dites-le moi sur <a href='https://tooting.ch/@5ika' target="_blank">Mastodon</a> + ou <a href='mailto:tim@5ika.ch'>par email</a> car je n'ai pas d'autre moyen de le savoir :-) + </i> + </p> +{{ end }}
