Matthieu
477fa72553
Les <code> imbriqués dans un <pre> héritaient de prose-code:bg-m-bg (fond clair) sans réinitialiser la couleur, rendant le texte illisible sur le fond sombre du bloc. Ajout des overrides [&_pre_code] (fond transparent, padding nul, couleur héritée) en mode lecture seule et édition, alignés sur MarkdownPreviewModal côté Lesstime.
Malio UI Layer (Nuxt)
Layer Nuxt partageable pour centraliser des composants UI et les réutiliser dans plusieurs projets.
Le layer est à la racine du repo.
Le dossier .playground/ sert à tester localement les composants du layer.
Commandes utiles
Installation
npm install
Développement local (playground)
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
npm run dev:prepare
Lancer le playground :
npm run dev
Qualité
Lancer le linter :
npm run lint
Build / preview
Build de production du playground :
npm run build
Génération statique du playground :
npm run generate
Prévisualiser le build :
npm run preview
Livraison / publication du layer (CI)
La publication est automatique via .gitea/workflows/release.yml sur push main / master.
Le job CI :
- Installe les dépendances
- Lance
npm run dev:prepare - Lance
npm run lint - Lance
semantic-release(version automatique + publish sur Gitea Packages)
Les versions sont calculées via Conventional Commits :
fix: ...-> patch (1.0.0->1.0.1)feat: ...-> minor (1.0.0->1.1.0)feat!: ...ouBREAKING CHANGE:-> major (1.0.0->2.0.0)
Secrets requis dans le repo Gitea :
NPM_TOKEN: token avec droits publish packageRELEASE_TOKEN: token avec droits write repo (tags/releases)
Commande locale utile avant push :
npm pack --dry-run
Tester un composant dans le playground
Le playground étend déjà le layer via .playground/nuxt.config.ts.
Exemple rapide :
- Créer un composant dans le layer
Fichierapp/components/malio/Badge.vue
<template>
<span class="inline-flex rounded-full bg-gray-900 px-2 py-1 text-xs text-white">
{{ label }}
</span>
</template>
<script setup lang="ts">
withDefaults(defineProps<{ label?: string }>(), {
label: 'Badge',
})
</script>
- L’utiliser dans le playground
Fichier.playground/pages/index.vue
<template>
<div class="p-6 space-y-4">
<MalioBadge label="Nouveau composant" />
</div>
</template>
- Lancer le playground
npm run dev
Utiliser ce layer dans un autre projet Nuxt
1) Configurer le .npmrc du projet consommateur
Option simple :
@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
Puis :
export NPM_TOKEN=TON_TOKEN_GITEA
2) Installer le package
npm install @malio/layer-ui
3) Étendre le layer
Dans nuxt.config.ts du projet consommateur :
export default defineNuxtConfig({
extends: ['@malio/layer-ui'],
})