chore: 🤖 In content/* New blog post stub for rewrite

content/blog/2020/09/porting-all-my-content.md

@@ -2,7 +2,7 @@
 title: Porting all my content into a static-site
 locale: en-CA
 created: 2020-09-10
-updated: 2020-09-10
+updated: 2024-01-25
 status: publish
 revising: false
 categories:
@@ -11,20 +11,44 @@ tags:
   - vuejs
   - nuxt
   - on-front-page
+  - migration
+  - static-site
+keywords:
+  - wordpress migration
+  - static site generator
+  - nuxt content
+  - vue.js
+  - taxonomy
+description:
+  A technical journey of migrating a WordPress site to a modern static site
+  built with Nuxt and Vue.js, including custom taxonomy handling and bilingual
+  support.
+coverImage:
+  src: ~/assets/content/blog/2024/11/renoirboulanger-com-taxonomy-article.png
+  text: Taxonomy system demonstration on the new site
+  alt:
+    Screenshot demonstrating how the taxonomy module works on a blog post with
+    tags and categories
+excerpt:
+  After a decade, I'm rebuilding my personal site using modern front-end
+  technologies. This project combines Vue.js, Nuxt, and custom tooling to
+  migrate from WordPress to a static site, while improving content organization
+  through a bilingual taxonomy system.
 ---
 
-
 <rb-notice-box variant="info" class="my-5">
   <strong slot="header">Actually...</strong>
 
 I started working on it a little bit before
-<abbr title="Shortened from Coronavirus disease 2019">COVID-19</abbr>
-pandemic and only would work on it 4 years later, around the end of my Full-Time Parenting period.
+<abbr title="Shortened from Coronavirus disease 2019">COVID-19</abbr> pandemic
+and only would work on it 4 years later, around the end of my Full-Time
+Parenting period that ended in <time datetime="2024-09">September 2024</time>.
 
-</rb-notice-box>
+The conversion work will be covered in another article.
 
+</rb-notice-box>
 
-It’s been more than ten years that I haven't touched my site and I want to
+It's been more than ten years that I haven't touched my site and I want to
 make-use of my skills working with Vue.js and modern Front End of the last years
 back to my own profit.
 
@@ -33,26 +57,37 @@ back to my own profit.
 So this is going to be a complete port of all my previous content, talk slides,
 experiments, posts, Twitter feed, examples, code bits all in a static site.
 
-It's still work in progress, at the moment `https://renoirb.github.io/site/` is
-the live version of my site that'll replace what’s at
-`https://renoirboulanger.com` running with WordPress.
+## Current Status
 
-I should piggy-back using my own public packages such as my [Monorepo related
-content][monorepo-related-alpha], [my "_Particles_" monorepo
-project][monorepo-particles], along with archiving my thousands of web browser
-tabs by leveraging my [Archivator][archivator] ([_archivator_ package on
-NPM][archivator-npmjs]).
+The site is currently live at
+<rb-content-edit type="del" date="2024-10-24"><code>https://renoirb.github.io/site/</code>
+and will eventually replace the WordPress installation at
+<span slot="comment">It took 4 years before I could finish!</span>
+</rb-content-edit> `https://renoirboulanger.com`.
 
-This is just something I've jotted down quickly so that It explains what's this
-for.
+### Integration with Existing Projects
 
-Keep in touch!
+I'm planning to leverage several of my public packages:
 
-## Features
+- [Monorepo related content][monorepo-related-alpha]
+- [My "Particles" monorepo project][monorepo-particles]
+- [Archivator][archivator] ([available on NPM][archivator-npmjs]) for managing
+  my thousands of browser bookmarks
+
+[monorepo-related-alpha]:
+  https://github.com/renoirb/experiments-201908-rush-typescript-just-bili-monorepo
+  'TypeScript monorepo using Rush.js, with a few packages, some depending on each other, and tests'
+[monorepo-particles]: https://gitlab.com/renoirb/renoirb-particles/
+[archivator]: http://www.archivator.site/ 'Archivator project'
+[archivator-repo]: https://github.com/renoirb/archivator/tree/v3.x-dev
+[archivator-npmjs]: https://www.npmjs.com/package/archivator
 
-### Code blocks
+## New Features
 
-At last, a way to display code that I'm happy with, it'll look like this
+### Enhanced Code Display
+
+The new site includes improved code block presentation with syntax highlighting
+and multiple formats:
 
 <code-group>
   <code-block label="application/json" active>
@@ -89,12 +124,58 @@ Hello!
   </code-block>
 </code-group>
 
-[monorepo-related-alpha]:
-  https://github.com/renoirb/experiments-201908-rush-typescript-just-bili-monorepo
-  'TypeScript monorepo using Rush.js, with a few packages, some depending on each other, and tests'
-[monorepo-particles]:
-  https://gitlab.com/renoirb/renoirb-particles/
-  'Renoir’s particles'
-[archivator]: http://www.archivator.site/ 'Archivator project'
-[archivator-repo]: https://github.com/renoirb/archivator/tree/v3.x-dev
-[archivator-npmjs]: https://www.npmjs.com/package/archivator
+### Custom Taxonomy System
+
+One of the key improvements is the custom taxonomy system that supports:
+
+- Bilingual tag and category labels
+- Hierarchical organization
+- Rich descriptions for better content discovery
+
+## Screenshots
+
+<div style="overflow:hidden;clear:both;" class="thumbnails gallery flex flex-row flex-wrap">
+
+<app-image src="~/assets/content/blog/2020/site-design-2020-index.png" alt="Homepage design of the new static site showing the main navigation and content layout" figcaption="New homepage design">
+</app-image>
+
+<app-image src="~/assets/content/blog/2020/site-design-2020-search.jpg" alt="Search interface of the new site demonstrating content discovery features" figcaption="Enhanced search functionality">
+</app-image>
+
+<app-image src="~/assets/content/blog/2020/site-design-2020-inner.jpg" alt="Article page layout showing typography and content presentation" figcaption="Article page design">
+</app-image>
+
+<app-image src="~/assets/content/blog/2024/11/renoirboulanger-com-taxonomy-article.png" alt="Screenshot demonstrating how the taxonomy module works on a blog post: two explanatory bubbles show that the module handles two types of taxonomies in the Markdown front matter - 'tags' which allow multiple values per article (shown here: 'favourites', 'best-practices', 'integration', etc.) and 'category' which is limited to one value per article (shown here: 'portfolio')." figcaption="Taxonomy System Overview">
+
+On the page top, we can see grey pills. They are the links to the taxonomy that
+populates the index pages at [/blog/tag](/blog/tag) and
+[/blog/category](/blog/category)
+
+</app-image>
+
+<app-image src="~/assets/content/blog/2024/11/renoirboulanger-com-taxonomy-tags.png" alt="Screenshot showing the taxonomy system's bilingual support: on the left, the rendered blog tag page shows links including 'Bonne pratiques', while on the right, the corresponding fr.yaml configuration file demonstrates how tags are defined with a key (e.g. 'best-practices'), display text ('Bonne pratiques'), and description in French. A red arrow highlights how the raw YAML definition connects to the rendered tag link on the website." figcaption="Bilingual Taxonomy Configuration">
+
+This is the list of all tags.
+
+Here is an example of the YAML definition to display more polished labels and
+descriptions for a tag. In the example shown, it tells that the French
+translation for the tag [/blog/tag/best-practices](/blog/tag/best-practices) be
+written as "Bonne pratique".
+
+Notice that, the language is currently only shown in french as there should
+eventually be a way for the visitor to chose the language they're most
+comfortable with. Probably detect from the browser, since it's there too. It's
+planned in [ticket #77](https://github.com/renoirb/site/issues/77).
+
+</app-image>
+
+<app-image src="~/assets/content/blog/2024/11/renoirboulanger-com-taxonomy-tag-index.png" alt="Tag index page showing articles tagged with 'Bonne pratiques', demonstrating the taxonomy system in action" figcaption="Tag Index Page">
+
+This is the list of all articles with the tag
+["<span lang="fr">Bonne pratiques</span>"](/blog/tag/best-practices)
+
+We see the same YAML definition shown in the other screen shot.
+
+</app-image>
+
+</div>

content/blog/2024/10/refonte-majeure-de-mon-site-web.md

@@ -0,0 +1,125 @@
+---
+title: >-
+  J’ai refait et migré tout mon site web
+locale: fr-CA
+created: 2024-10-26
+updated: 2024-10-26
+status: draft
+categories:
+  - projects
+tags:
+  - vuejs
+  - nuxt
+  - migration
+  - wordpress
+  - static-site
+keywords:
+  - migration wordpress
+  - site statique
+  - nuxt content
+  - taxonomie bilingue
+  - tailwind css
+description:
+  Récit technique de la migration d'un site WordPress vers une solution moderne
+  basée sur Nuxt et Vue.js, incluant un système de taxonomie bilingue et une
+  gestion de contenu optimisée pour les développeurs.
+excerpt: >-
+  Cela faisait plusieurs années que je n'avais rien publié, principalement parce
+  que je n'avais pas d'endroit adapté pour partager mon code et éditer mes
+  textes avec la même fluidité que lorsque je programme. Dans cet article, je
+  vous présente les fonctionnalités que j'ai mises en place, ainsi que le
+  travail de migration que j'ai accompli pour retrouver un espace de travail
+  optimal.
+---
+
+## Un projet de longue haleine
+
+En 2020, j'[avais commencé la refonte de mon site
+web][own-website-migration-2020]. Le projet était déjà bien avancé avec environ
+80% du travail complété, incluant :
+
+- Une ré-implémentation complète du système de taxonomie (étiquettes,
+  catégories)
+- L'intégration de [Tailwind CSS][tailwind1-homepage], qui commençait alors à
+  gagner en popularité
+- Une base solide pour une architecture moderne
+
+Puis la pandémie de <abbr title="Coronavirus disease 2019">COVID-19</abbr> est
+arrivée, me forçant à mettre le projet en pause pour me concentrer sur mon
+emploi. En 2022, un heureux événement est venu bouleverser mes priorités : je
+suis devenu père. Après avoir bénéficié du
+[Régime Québécois d'Assurance Parentale](https://www.rqap.gouv.qc.ca/fr) avec
+mon épouse, j'ai choisi de devenir père à temps plein.
+
+Ce n'est qu'à l'automne 2024, lorsque mon enfant a commencé la garderie, que
+j'ai pu reprendre ce projet qui ne m'avait jamais vraiment quitté l'esprit.
+
+## Le défi de la migration
+
+Les derniers 20% du projet représentaient un défi majeur : la migration du
+contenu. Pour faciliter ce processus, j'ai développé et publié un outil
+spécialisé : [process-wordpress-xml][process-wordpress-xml], qui permet
+d'extraire le contenu des sauvegardes WordPress au format XML.
+
+### Processus de migration automatisé
+
+Le processus de migration comprend plusieurs étapes :
+
+1. Export du contenu WordPress en format XML
+2. Traitement automatisé avec `process-wordpress-xml` pour :
+   - Extraire les articles et pages
+   - Préserver les métadonnées
+   - Convertir le contenu en Markdown
+3. Organisation des fichiers dans la nouvelle structure
+4. Validation et nettoyage du contenu converti
+
+<rb-notice-box variant="info" class="my-5">
+<strong slot="header">Pourquoi un nouvel outil ?</strong>
+
+J'ai choisi de développer mon propre outil de migration car je voulais un
+contrôle total sur le processus de conversion, notamment pour :
+
+- Gérer correctement les contenus bilingues
+- Adapter la structure des fichiers à mon architecture Nuxt
+- Faciliter la réutilisation pour d'autres projets similaires
+
+</rb-notice-box>
+
+[process-wordpress-xml]:
+  https://github.com/renoirb/process-wordpress-xml
+  'Extract WordPress Contents by processing WordPress XML backup'
+
+### Système de taxonomie amélioré
+
+L'un des aspects les plus intéressants de cette migration a été la mise en place
+d'un système de taxonomie flexible et bilingue qui permet :
+
+- La gestion des tags et catégories via des fichiers YAML
+- Des libellés personnalisés en français et en anglais
+- Une structure claire pour la navigation et la découverte du contenu
+
+<rb-notice-box variant="info" class="my-5">
+<strong slot="header">À propos de la taxonomie</strong>
+
+Le nouveau système permet de définir des étiquettes (tags) avec des descriptions
+riches en plusieurs langues, tout en maintenant des URLs cohérentes et des
+libellés adaptés à chaque langue.
+
+</rb-notice-box>
+
+## Prochaines étapes
+
+Bien que le site soit maintenant fonctionnel, plusieurs améliorations sont
+prévues :
+
+- Finalisation de l'interface bilingue
+- Migration des images et ressources médias restantes
+- Optimisation des performances
+- Amélioration de l'expérience de développement
+
+[own-website-migration-2020]:
+  /blog/2020/09/porting-all-my-content
+  'Porting all my content into a static-site'
+[tailwind1-homepage]:
+  https://v1.tailwindcss.com/
+  'A utility-first CSS framework for rapidly building custom designs.'