astro frontend masters

Il s'agit d'un dépôt compagnon pour le cours Astro sur Frontend Masters.

Installation

La branche start de ce référentiel contient des ressources supplémentaires et est utilisée comme point de départ pour le cours :

Nous vous recommandons d'utiliser la version 18 de Node pour ce cours.

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

Que construisons-nous ?

Site pour petite entreprise qui utilise plusieurs des flux de travail courants que de nombreux (la plupart ?) sites Web finissent par suivre.

• Page de destination marketing
  • Images de héros
    • Gestion des images
  • Cartes
    • Produits en vedette
  • Capture de newsletter
• Boutique
  • Disposition avancée (imbriquée)
  • État partagé
    • Chariot solide
    • Boutons d'article React (ajouter au panier)
    • Des nano-magasins pour partager l'état
• Blogue
  • Collections de contenu
    • Réduction
  • Itinéraires dynamiques
  • Flux RSS
• À propos
  • Page de démarque
• 404 pages

Quelles fonctionnalités voulons-nous couvrir ?

• Initialisation d'un nouveau site Astro
• Développement local
• Pages
  • Types de fichiers pris en charge
    • Astro
    • Réduction
    • HTML
  • Routage de base
  • Links
  • Pages 404 personnalisées
• Composants Astro
  • Frontière
  • Machines à sous
• Mises en page
  • Dispositions de base
  • Dispositions avancées
• Récupération de données
  • Utilisation fetch dans Astro et d'autres composants
  • Chargement des données API
  • Chargement depuis un CMS sans tête
• Stylisme
  • Style dans les composants Astro
    • Styles étendus
    • Styles globaux
  • Goodies Astro pour CSS
    • class:list
    • define:vars
  • Importer des feuilles de style
    • locale
    • paquets npm
  • Dans les cadres :
    • Modules CSS
• Itinéraires dynamiques
  • Lorsque vous souhaitez afficher les pages une fois au moment de la construction
• Pagination
• Collections de contenu
  • Installation et configuration de base
    • Définir un schéma
    • Limaces personnalisées
  • Utiliser des collections pour créer des pages
    • Pages de liste
    • Pages d'entrée complètes
• Points de terminaison
  • RSS
  • Apis
    • Statique
• Mode RSS
  • Routage dynamique
  • Lorsque vous souhaitez afficher des pages à chaque requête
  • Points de terminaison de l'API
• Gestion des images
  • Le répertoire assets
• Composants JS hydratants
  • client:* directives
  • Utiliser plusieurs frameworks
  • Partager l'état entre les îles
  • Partage d'état entre les frameworks