v1.0

✅ Mise à niveau (tl;dr)

Si vous avez besoin d'aide pour la mise à niveau, vous pouvez rejoindre le serveur Discord et poster dans le canal 🔼・upgrade ou me DM sur Bluesky avec un lien vers votre projet. Je ferai de mon mieux pour répondre aux questions / envoyer des PR pour aider dans le processus.

🌀 Migrer vers Tailwind v4

🚦 Niveau d'impact: Important

Qu'est-ce qui a changé

shadcn-docs-nuxt utilise désormais Tailwind v4, qui est une mise à jour majeure du framework CSS Tailwind. Vous devrez mettre à jour votre tailwind.css (suivez les étapes de migration ci-dessous). En dehors de cela, cette mise à jour devrait être transparente pour la plupart des utilisateurs, mais il y a quelques changements majeurs dont vous devez être conscient :

• Si vous utilisez Tailwind dans vos composants personnalisés, vous devrez peut-être mettre à jour votre code pour utiliser les nouvelles classes utilitaires. (Consultez le guide de mise à niveau de Tailwind v4 pour une liste complète des changements.)

Étapes de migration

Mettez à jour le fichier tailwind.css situé dans assets/css/tailwind.css avec le contenu suivant :

@import 'tailwindcss';

@config '../../tailwind.config.js';
/* Si vous utilisez shadcn-docs-nuxt dans un monorepo, modifiez le nombre de .. pour correspondre au répertoire node_modules */
@source '../../node_modules/shadcn-docs-nuxt';

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
    @apply -ml-[50px] -mt-1;
    content: counter(step);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border:214.3 31.8% 91.4%;
    --input:214.3 31.8% 91.4%;
    --ring:221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background:222.2 84% 4.9%;
    --foreground:210 40% 98%;

    --card:222.2 84% 4.9%;
    --card-foreground:210 40% 98%;

    --popover:222.2 84% 4.9%;
    --popover-foreground:210 40% 98%;

    --primary:217.2 91.2% 59.8%;
    --primary-foreground:222.2 47.4% 11.2%;

    --secondary:217.2 32.6% 17.5%;
    --secondary-foreground:210 40% 98%;

    --muted:217.2 32.6% 17.5%;
    --muted-foreground:215 20.2% 65.1%;

    --accent:217.2 32.6% 17.5%;
    --accent-foreground:210 40% 98%;

    --destructive:0 62.8% 30.6%;
    --destructive-foreground:210 40% 98%;

    --border:217.2 32.6% 17.5%;
    --input:217.2 32.6% 17.5%;
    --ring:224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

🌎 Prise en charge de l'i18n

🚦 Niveau d'impact: Moyen

Qu'est-ce qui a changé

shadcn-docs-nuxt prend désormais en charge l'i18n dès le départ, y compris les fonctionnalités suivantes :

• Traduction du contenu: Vous pouvez désormais traduire votre contenu en utilisant la structure de fichiers. Vous pouvez créer un dossier pour chaque langue dans le dossier content, et le contenu sera automatiquement traduit en fonction de la langue.
• Traduction de l'interface utilisateur: L'interface utilisateur est désormais entièrement traduisible, y compris tous les composants et toutes les pages.
• Sélecteur de langue: Le sélecteur de langue est désormais entièrement fonctionnel et vous permet de basculer facilement entre les langues.
• Génération automatique de liens: Les liens dans le contenu redirigent automatiquement vers la bonne langue. Vous n'avez pas besoin de spécifier la langue dans les liens. Par exemple, si vous avez un lien vers /getting-started, il redirigera automatiquement vers /fr/getting-started si la langue actuelle est fr.

Guide d'utilisation

Étapes de migration

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: ['shadcn-docs-nuxt'],
  i18n: {     defaultLocale: 'en',     locales: [       {         code: 'en',         name: 'English',         language: 'en-US',       },     ],   },   compatibilityDate: '2024-07-06',
});

Définissez defaultLocale et locales dans la propriété i18n sur votre langue préférée. Ceci est utilisé pour la langue de l'interface utilisateur. Même si vous n'utilisez pas l'i18n dans votre application, vous devez quand même définir la langue de l'interface utilisateur ici.

Les langues d'interface utilisateur actuellement prises en charge sont :

• en (English)
• fr (Français)
• zh-CN (简体中文)
• zh-TW (繁體中文)
• ja (日本語)
• km (ភាសាខ្មែរ)
• ru (Русский)
• ko (한국어)
• hi (हिन्दी)
• bn (বাংলা)

🧱 Nouvelles fonctionnalités des blocs de code

Transformateurs

console.log('hewwo'); console.log('hello'); console.log('goodbye');

console.log('No errors or warnings');
console.error('Error'); console.warn('Warning'); 

console.log('Not focused');
console.log('Focused'); console.log('Not focused');

Réduction du code

const parsedMeta = computed(() => {
  const split = meta?.split(' ') ?? [];
  const params = new Map<string, string | undefined>();

  for (const param of split) {
    const [key, val] = param.split('=');
    params.set(key, val);
  }

  return params;
});

🔠 Polices personnalisées

Vous pouvez désormais personnaliser votre police dans le fichier tailwind.config.js. shadcn-docs-nuxt utilise @nuxt/fonts en arrière-plan, vous pouvez donc utiliser la police de votre choix.

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Geist'],
        mono: ['Geist Mono'],
      },
    },
  },
};

💅 Changements de style

• Nouveau style d'alerte
• Nouveau style du bouton de copie de code

🩹 Correctifs

• Placement du viewport du menu de navigation (#23)
• Taille de la page 404 (095135b)
• Graisse de la police de l'aside (29ab698)
• Ajouter legacy: true à useClipboard (7c56084)
• Supprimer les transpiles (108fb35)