Pour la plateforme de blog Bloggrify, une des features qui me semblaient nécessaires pour vraiment être une plateforme de blog, c'est le mécanisme de thèmes. Il n'y a pas une plateforme de blog qui existe sans ça.

Si les gens aiment Wordpress, ou Ghost, c'est parce qu'il y a des tas de thèmes (et de plugins) à disposition pour leur permettre de faire leur propre blog. Chaque template a ses propres configurations qui leur permet de le rendre unique.

Et si je veux proposer une expérience similaire, je me dois d'avoir ce mécanisme.

L'usage de layers nuxt

Nuxt a deux mécanismes très intéressants d'extension, les modules, et les layers.

Honnêtement la différence entre les deux est assez fine. Et si vous, vous connaissez la différence, eh bien, il y a une personne sur Stack Overflow qui attend toujours la réponse :)

Je sais utiliser les deux, mais je ne saurais pas quel serait le critère de choix pour l'un ou l'autre. Pour un thème, j'ai trouvé ça assez naturel d'utiliser le mécanisme de layers. Mais ça relève plus de l'intuition qu'autre chose. Et puis aussi parce que je ne voulais pas me casser les pieds à publier mon code sur npm :)

Mon but, c'est que ce soit aussi simple que ça d'installer un thème dans nuxt.config.ts

export default defineNuxtConfig({
    ...
    extends: [
        "github:hlassiege/bloggr#main",   // extends the bloggr engine
        "github:hlassiege/bloggr-epoxia#main", // extends the theme for epoxia 
    ],
...
})

Et de l'activer dans app.config.ts

export default defineAppConfig({
    theme: "epoxia",
})

C'est exactement comme ça que ça fonctionne.

Pour comprendre un peu dans les grandes lignes ce qu'est un layer sur nuxt. Disons que c'est comme si votre projet avait un ensemble de fichiers qui était ajouté au votre de façon transparente.

Cette ligne :

    extends: [
        "github:hlassiege/bloggr-mistral#main", // extends the theme for mistral
    ],

signifie que c'est comme si vous aviez le contenu des répertoires du repository bloggrify-mistral inclus dans votre projet. Tous les components, et layouts sont automatiquement disponible. Vous pouvez également préciser si vous souhaitez une version particulière, car ce thème peut être compatible pour une version de bloggr spécifique. Donc, vous pourriez écrire :

    extends: [
        "github:hlassiege/bloggr-mistral#1.0.0", // extends the theme for mistral
    ],

Limitation(s)

A ce jour, j'ai pour l'instant une limitation. Bien que ce soit super pratique, les répertoires assets et public ne sont pas concernés par le mécanisme d'extension. Donc, il est impossible d'avoir des assets, images ou fonts par défaut.

Je pense qu'il est possible de s'en sortir en mélangeant module et layers et en mettant un module dans le layer qui force à ajouter quelques fichiers.
Mais je n'ai pas encore testé.

Comment faire un thème privé ?

Je ne vous cache pas que, j'ai une idée derrière tout cela. Bloggrify marche bien, je l'utilise pour mon blog anglais et mon blog français.

Je trouve que proposer Bloggrify en open source fait sens et je n'imagine pas faire autrement. D'autant qu'il est construit à 95% sur Nuxt et nuxt-content. Par contre, je me dis que proposer des thèmes payants pour Bloggrify pourrait être intéressant.
C'est exactement le même principe que de prendre des thèmes payants sur Wordpress et Ghost.

J'ai donc proposé un thème gratuit, qui s'appelle Mistral.
Et j'ai développé ensuite un thème payant : Epoxia.

Ils sont tous les deux visibles sur la galerie de thèmes sur le site.

En plus je trouve ça amusant de m'entraîner à faire de l'intégration web et je pense en proposer d'autres.

Pour l'instant, pour ne rien vous cacher, le résultat est de 0 vente ^^ Mais bon... Je suis encore à cheval entre side product pour le fun et produit donc, ce n'est pas grave.

Pour vous partager mes questionnements, par contre, je reste un peu mitigé sur la méthode de distribution d'Epoxia.

Ajouter mistral, c'est aussi simple que ça :

export default defineNuxtConfig({
    ...
    extends: [
        "github:hlassiege/bloggr#main",   // extends the bloggr engine
        "github:hlassiege/bloggr-mistral#main", // extends the theme for mistral
    ],
...
})

Ajouter Epoxia peut marcher de la même façon, mais c'est un repo privé. Donc, je dois donner un token git à mettre en variable d'environnement pour vous permettre d'utiliser la même syntaxe. C'est ce que je fais pour mes deux blogs. Un peu galère si je veux fournir un token par personne.

Ou alors, c'est que je fais pour l'instant, je prends le zip du repo et je l'uploade sur Buymeacoffee mais c'est vraiment pas pratique et le thème n'est jamais à jour.

J'avoue que j'hésite. J'ai vu d'autres exemples sur le net :

• le repo reste ouvert. Ça repose sur la probité des gens de respecter la license.
• le code est mis sur npm et on peut l'inclure, mais il faut une clé d'activation pour générer le site statique (c'est l'approche de nuxt-ui-pro).

Dans les deux cas, le code étant publique, c'est comme s'il était open source. Mais, ça semble marcher. Il doit y avoir des personnes qui profitent du système, mais ça semble acceptable.

Je n'ai pas encore tranché cette question. Et ça reste un faux problème tant que personne ne prend ce template de toute façon.

Et si ça vous intéresse, le traffic actuel sur blogg est d'environ 200 visiteurs uniques par semaine, dont plus de la moitié visite également les deux sites de démos.

Current traffic - analytics dashboard

a+