hello astro

bonjour-astro

Hello Astro est un thème de démarrage polyvalent Astro complet écrit en Typescript et TailwindCSS. Il prend en charge les pages et les articles de blog basés sur Markdown et MDX.

Hello Astro peut être utilisé pour tout ou partie des éléments suivants :

• site d'entreprise/marketing
• bloguer
• site de documentation
• site de portfolio prenant en charge les galeries de photos

Utilise les intégrations suivantes :

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/plan du site
• @astrojs/rss
• @astrojs/tailwind
• @astrojs/alpinejs
• astro-icône
• astro-seo
• astro-robots-txt

De plus, les illustrations SVG et PNG proviennent d'Undraw

Ce projet a initialement commencé comme un simple portage de hello-gatsby-starter, mais contient désormais plus de fonctionnalités (modes clair/sombre, pages de catégories, recherche, diagrammes, mathématiques et plus encore !)

Caractéristiques

• Blog complet avec frontmatter (titre, description, auteur, date, image, tags)
• Hautes performances, faible surcharge avec un minimum de Javascript (AlpineJS)
• Recherche en texte intégral basée sur le client des pages de blog via lunrjs (index de recherche chargé uniquement lors du premier appel de recherche sur une page)
• Page d'index et pages individuelles pour les auteurs, les catégories et les balises, y compris la pagination
• Prise en charge du flux RSS, du plan du site et du fichier robots.txt
• Conception SVG (unDraw, Hero Patterns, Iconify)
• Prise en charge de la coloration syntaxique du code
• Prise en charge complète du référencement, y compris Open Graph, Twitter Cards et Schema.org via JSON-LD
• Prise en charge complète des modes d'interface utilisateur clair et sombre, ainsi que des préférences système suivantes, conformément à la recommandation TailwindCSS
• Page d'erreur 404 personnalisée
• Afficher les équations mathématiques à l'aide de KaTeX via remarque-math/rehype-katex (entre $ ... $ ou $$ ... $$ )
• Afficher les diagrammes Mermaid, Markmap, PlantUML (créés sous forme de bloc de code avec le langage mermaid , markmap et plantuml )
• Afficher la carte aux coordonnées géographiques et au niveau de zoom à l'aide du composant Map (il faut également inclure extra: ['map'] est le premier élément pour charger les ressources CSS/JS pour la page)
• Calcule et affiche le temps de lecture des articles de blog
• Actifs CSS/JS des bibliothèques externes chargés uniquement en cas de besoin, par page et par package - pas de surcharge inutile
• Galerie de photos et lightbox utilisant PhotoSwipe (y compris affichage des balises EXIF)
• Composant carrousel utilisant Swiper
• Pages de documentation (sur le modèle d'Astro Docs Starter mais utilisant Tailwind)

Forfaits externes

Le démarrage utilise les packages externes suivants :

• Astro
• Manuscrit
• TailwindCSS et TailwindUI
• Iconifier
• Modèles de héros
• unDraw pour les illustrations
• MDX et démarque
• Schema.org et JSON pour relier les données, type vérifié à l'aide de schema-dts
• Open Graph utilisé par Facebook
• Cartes Twitter
• AlpineJS
• Recherche locale en texte intégral à l'aide de Lunr
• Équations mathématiques utilisant KaTeX via remarque-math et rehype-katex
• Diagrammes utilisant Mermaid, Markmap et PlantUML
• Ouvrir un plan de rue à l'aide de Leaflet
• temps de lecture
• Balayage de photos
• exif
• Glisseur
• Remarque Emoji

Il suit l'architecture JAMstack en créant automatiquement une version statique à partir du référentiel Git. La démo est déployée sur les pages Github.

Structure du projet

Dans ce démarreur, vous verrez les dossiers et fichiers suivants :

 /
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

Astro recherche les fichiers .astro , .md ou .mdx dans le répertoire src/pages/ . Chaque page est exposée sous forme d'itinéraire en fonction de son nom de fichier.

src/components/ est l'endroit où nous mettons tous les composants Astro et de même src/layouts/ pour les mises en page.

Les images peuvent être placées dans src/assets/ .

Le contenu du blog et de la documentation est créé sous forme de collections de fichiers Markdown ou MDX dans src/content .

Tous les actifs statiques, par exemple. images, peuvent être placées dans le répertoire public/ .

? Commandes

Toutes les commandes sont exécutées depuis la racine du projet, depuis un terminal :

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

Historique des versions

• 1.0.0 : version initiale
• 1.0.1 : Déplacement des images sociales vers src, traitement coverImage amélioré
• 1.0.2 : Mettre à niveau les packages vers la dernière version
• 1.1.0 : Mise à jour vers astro v2.x, fonctionne désormais avec les nœuds 18 et 19
• 2.0.0 : Nouvelle version supportant les collections Astro ! Il a également été précisé qu'il s'agit d'un thème polyvalent. La recherche peut désormais inclure à la fois les pages Markdown et MDX !
• 2.0.1 : captures d'écran mises à jour et page de destination améliorée.
• 2.1.0 : mise à jour avec les derniers packages, liens de développement corrigés, fonctionnalités rétroportées du blog personnel, y compris les liens Suivant/Précédent, prise en charge de la galerie de photos dans Markdown et contrôle de pagination amélioré.
• 2.2.0 : Correction d'erreurs de charpie, carte, lightbox et carrousel réimplémentés pour utiliser les packages de dépliants, photoswipe et swiper au lieu de s'appuyer sur un CDN externe.
• 2.2.1 : Mise à jour vers astro 2.0.10, problème de chargement des immobilisations avec la base
• 2.3.0 : mise en page supprimée du contenu du blog et de la documentation
• 2.4.0 : @astrojs/images prend désormais en charge svg donc pas besoin de manipulation particulière
• 2.4.1 : Utiliser le frontmatter rendu pour les articles de blog et de documentation, corrige le problème avec les diagrammes qui ne sont pas rendus.
• 2.4.2 : Packages mis à jour
• 3.0.0 : Mise à jour majeure :
  • Utilisez la nouvelle prise en charge des actifs optimisés Astro
  • nouveau logo Astro
  • filtrage optimisé des post-brouillons
  • galerie nettoyée
  • correction des erreurs de référencement
  • erreurs de charpie nettoyées
  • auteurs et catégories migrés vers des collections et utilisation de l'intégrité référentielle basée sur Astro 2.5.0
  • liens sociaux convertis en une collection de données (nécessite Astro > 2.5.0)
  • favicon mis à jour et métadonnées d'en-tête
  • améliorer la recherche pour inclure de la documentation
• 3.1.0 : Mise à jour de l'amélioration :
  • Gestionnaire de paquets migré de Yarn vers Pnpm
  • Base de référence pour maillons de tête
  • Ajout d'eslint et plus joli avec des plugins
  • Correction d'une erreur d'attributs d'image dans le composant SEO
  • tsconfig mis à jour pour correspondre à astro strict
  • Mettre à jour le lien CSS Katex
  • Correction de l'auteur n'apparaissant pas dans la carte du blog
  • Ajout de la prise en charge de Markdoc
• 3.1.1 : Mise à jour mineure :
  • Chargement paresseux des images
  • Prise en charge des emoji Github via remarque-emoji
• 3.1.2 : Corrections mineures :
  • Rechercher les catégories nulles
  • Page de contact légèrement améliorée
  • Traitement suivant/précédent amélioré
  • Forfaits mis à jour
  • Réduire la taille du bouton de recherche pour s'adapter à la largeur minimale
  • Option d'image modifiée pour les pages de contenu d'objet à couverture d'objet
  • Site.webmanifest corrigé
• 3.1.3 : Corrections mineures :
  • Mise à niveau vers @astrojs/markdoc 0.4.x et la dernière version d'astro
  • Correction de la déclaration des accessoires dans [slug].astro
  • exemple de fichier Markdoc désactivé en raison de ce problème : withastro/astro#7520
• 3.1.4 : Amélioration mineure :
  • Traitement d'image unifié pour SVG et bitmaps
  • ViewTransitions activées
• 3.1.5 : Améliorations mineures :
  • Mettre à niveau vers la dernière version des packages
  • Correction d'une erreur mineure de vérification astrologique
• 3.2.0 : Amélioration majeure :
  • Mis à jour vers Astro 3.x
  • Mettre en œuvre une politique de sécurité du contenu permissive
• 3.2.1 : Amélioration mineure :
  • Packages mis à jour, erreurs de vérification astro résolues
• 3.2.2 : Améliorations mineures :
  • Forfaits mis à jour
  • Correction du type de retour json.ts pour la recherche
• 3.2.3 : Entretien :
  • Correction de la sirène v9 ne fonctionnant plus en mettant à niveau vers la dernière version de la sirène
  • Forfaits de mise à niveau
• 3.2.4 : Améliorations mineures :
  • Mise à niveau vers Astro 4.x
• 3.2.5 : Améliorations mineures :
  • Forfaits de mise à niveau
  • Supprimer sirène.initialize()
• 3.2.6 : Entretien :
  • Désactivez ViewTransition car cela ne fonctionne pas avec Mermaid
• 3.3.0 : Entretien :
  • Mise à niveau vers les derniers packages et astro-icon 1.x
• 3.3.1 : Entretien :
  • Mise à niveau vers les derniers packages et correction des erreurs de vérification astrologique
• 3.3.2 : Entretien :
  • Mis à niveau vers les derniers packages
  • Correction de la recherche ne fonctionnant pas en raison d'une vérification alpine plus stricte
  • Migré vers astro standard tsconfig.json
  • Correction des erreurs de vérification astrologique
• 3.4.0 : Modifications mineures :
  • Forfaits mis à jour
  • Héroïques remplacés par la v2
  • Amélioration des index RSS et de recherche pour inclure le nom de l'auteur et son adresse e-mail
  • Faire en sorte que BlogHero accepte la publication comme accessoire plutôt que comme avant-plan
  • Déplacement des pages Markdown vers la collection de contenu
  • Type de Frontmatter éliminé
• 4.0.0 : Changements majeurs :
  • Forfaits mis à jour
  • Suppression de @types/photoswipe et photoswipe tsconfig
  • Déplacé vers le schéma RSS
  • Fonction getPosts()
  • balises de schéma
  • liens de la barre latérale générés automatiquement
  • amélioration des métadonnées RSS et de recherche