Nous sommes ravis d’annoncer la sortie de Point Rouge v3, doté de nouvelles fonctionnalités, améliorations et corrections de bugs pour améliorer votre expérience de développement Web. Passons en revue les points forts de cette version :
Table des matières
Fonctionnalités et modifications
Intégration Astro v3
Point Rouge prend désormais entièrement en charge Astrov3, offrant des performances et une vitesse de rendu améliorées.
De plus, nous avons ajouté la prise en charge d’Astro API ViewTransitions, vous permettant de créer des transitions captivantes et dynamiques entre les vues.
Dans la « Section récente », seules les publications non présentées seront affichées pour éviter les duplications et une meilleure prise en charge de l’API ViewTransitions.
Mettre à jour la logique de génération d’images OG
Nous avons mis à jour la logique de génération automatique d’images OG, la rendant encore plus fiable et efficace. En outre, il prend désormais en charge les caractères spéciaux dans les titres des publications, garantissant ainsi des aperçus précis, flexibles et accrocheurs des réseaux sociaux.
SITE.ogImage est désormais facultatif. Si ce n’est pas spécifié, Point Rouge générera automatiquement une image OG en utilisant SITE.title, SITE.desc et SITE.website
Balise méta du thème
La balise méta theme-color a été ajoutée pour s’adapter dynamiquement aux changements de thème, garantissant ainsi une expérience utilisateur transparente.
Remarquez la différence en haut
Changement de thème Point Rouge v2
Changement de thème Point Rouge v3
Autres changements
Plugin Astro plus joli
Astro Prettier Plugin est installé prêt à l’emploi afin de garder le projet bien rangé et organisé.
Modifications mineures du style
Le problème d’encapsulage des blocs de code sur une seule ligne a été résolu, ce qui donne à vos extraits de code un aspect impeccable.
Mettez à jour le CSS du style de navigation pour permettre l’ajout de plus de liens de navigation à la navigation.
Mise à niveau vers Point Rouge v3
Cette section s’adresse uniquement aux personnes qui souhaitent migrer une ancienne version de Point Rouge vers la v3.
Cette section vous aidera à migrer de Point Rouge v2 vers Point Rouge v3.
Avant de lire le reste de la section, vous souhaiterez peut-être également vérifier cet article pour mettre à niveau les dépendances et Point Rouge.
Option 1 : nouveau redémarrage (recommandé)
Dans cette version, de nombreux changements ont été apportés : remplacement des anciennes API Astro par des API plus récentes, corrections de bugs, nouvelles fonctionnalités, etc. Ainsi, si vous êtes quelqu’un qui n’a pas beaucoup fait de personnalisation, vous devriez suivre cette approche.
Étape 1 : Conservez tous vos fichiers mis à jour
Il est important de conserver tous les fichiers déjà mis à jour. Ces fichiers incluent
/src/config.ts(je n’ai pas touché dans la v3)/src/styles/base.css(changements mineurs dans la v3 ; mentionnés ci-dessous)/src/assets/(je n’ai pas touché dans la v3)/public/assets/(je n’ai pas touché dans la v3)/content/blog/(c’est le répertoire de contenu de votre blog 🤷🏻♂️)- Toutes les autres personnalisations que vous avez effectuées.
/* file: /src/styles/base.css */
@layer base {
/* Other Codes */
::-webkit-scrollbar-thumb:hover {
@apply bg-skin-card-muted;
}
/* Old code
code {
white-space: pre;
overflow: scroll;
}
*/
/* New code */
code,
blockquote {
word-wrap: break-word;
}
pre > code {
white-space: pre;
}
}
@layer components {
/* other codes */
}Étape 1 : Remplacez tout le reste par Point Rouge v3
Dans cette étape, remplacez tout_ sauf les fichiers/répertoires ci-dessus (plus vos fichiers/répertoires personnalisés)_ par Point Rouge v3.
Étape 3 : mises à jour du schéma
Gardez à l’esprit que /src/content/_schemas.ts a été remplacé par /src/content/config.ts.
D’ailleurs il n’y a plus BlogFrontmatter type exporté depuis /src/content/config.ts.
Par conséquent, tous les BlogFrontmatter le type à l’intérieur des fichiers doit être mis à jour avec CollectionEntry<"blog">["data"].
Par exemple : src/components/Card.tsx
// Point Rouge v2
import type { BlogFrontmatter } from "@content/_schemas";
export interface Props {
href?: string;
frontmatter: BlogFrontmatter;
secHeading?: boolean;
}// Point Rouge v3
import type { CollectionEntry } from "astro:content";
export interface Props {
href?: string;
frontmatter: CollectionEntry<"blog">["data"];
secHeading?: boolean;
}Option 2 : mettre à niveau à l’aide de Git
Cette approche n’est pas recommandée pour la plupart des utilisateurs. Vous devriez faire “l’option 1” si vous le pouvez. Ne faites cela que si vous savez comment résoudre les conflits de fusion et si vous savez ce que vous faites.
En fait, j’ai déjà écrit un article de blog sur cette affaire et vous pouvez le consulter ici.
Sortie
Prêt à explorer les nouvelles fonctionnalités et améliorations passionnantes de Point Rouge v3 ? Commencer en utilisant Point Rouge maintenant.
Pour d’autres corrections de bogues et mises à jour d’intégration, consultez le notes de version pour en savoir plus.
Si vous rencontrez des bugs ou rencontrez des difficultés pendant le processus de mise à niveau, n’hésitez pas à ouvrir un problème ou à démarrer une discussion sur GitHub.