goulven clech.dev

Mon blog personnel, réalisé avec Astro, TypeScript & Tailwind CSS. En direct sur goulven-clech.dev, hébergé par Vercel.

Le code source est fourni sous licence 0BSD, l'attribution est appréciée mais pas obligatoire. Le contenu textuel du blog est fourni dans le cadre de l'acte CC BY 4.0, l'attribution est requise. Mais dans les deux cas, vous êtes libre d’utiliser, copier, modifier et/ou distribuer à toute fin, commerciale ou personnelle.

Certaines entrées peuvent citer du texte, des images ou des ressources provenant de sources externes : leurs licences d'origine s'appliquent, et j'indique les auteurs s'ils sont connus.

Caractéristiques notables

En son cœur, ce projet ressemble à n'importe quel blog réalisé avec Astro, vous pouvez commencer par lire mon article "Lancer un blog avec Astro". Mais, petit à petit, j'ai ajouté quelques fonctionnalités originales qui pourraient vous intéresser, voici les principales :

• Barre de recherche : réalisée uniquement avec Astro et Web Components, filtre les entrées de blog en fonction des entrées de l'utilisateur.

• Table des matières : à l'aide d'Astro et MDX, générez une table des matières basée sur les titres. Avec des listes imbriquées.

• Blocs Open Library et Google Maps : affiche joliment les résultats de l'API dans les entrées de blog.

• Mode sombre : basculez entre les couleurs claires, sombres et système. Utilisez le stockage local pour conserver le choix de l'utilisateur.

• Service d'images personnalisées : récupérées sur le blog d'Erika, gagnez en performances et affichez un espace réservé lors du chargement de l'image.

Structure du projet

 /
├── src/
│   ├── content/ -> Sub repository
│   ├── assets/
│   │   └── base.css
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── env.d.ts
│   └── [...utils].ts
├── public/
│   └── Iosevka-Regular.woff2
├── [... config files]
├── README.md
└── package.json

pages/ contient chaque page de ce blog sous forme de fichiers .astro .

layouts/ et components/ contiennent tous les composants Web sous forme de fichiers `.astro``.

Commandes

Commande	Action
pnpm install	Installe les dépendances
pnpm run dev	Démarre le serveur de développement local sur localhost:3000
pnpm run build	Construisez votre site de production sur ./dist/
pnpm run preview	Prévisualisez votre build localement, avant de le déployer
pnpm run astro ...	Exécutez des commandes CLI comme astro add , astro check
pnpm run astro --help	Obtenez de l'aide pour utiliser l'Astro CLI

Toutes les commandes doivent être exécutées depuis la racine du projet, depuis un terminal. Au lieu de PNPM, vous pouvez également utiliser NPM ou Yarn.