Skip to content

Latest commit

 

History

History
119 lines (72 loc) · 2.78 KB

README.md

File metadata and controls

119 lines (72 loc) · 2.78 KB
Raw

Astro for Rank Beginners

The purpose

This repository is desiged for a daylong workshop on Astro. It's called "Astro for Rank Beginners" because it basically assumes that you know very little about how Astro works. Each step in the repository is a building block on the previous step, an each step covers a specific aspect of Astro.

At the end, a student should have a basic idea how Astro sites are built.

How the repository works

This repository is designed as a tutorial about Astro. Each step -- and there are currently 20 -- is branched from the previous one and builds on what is there. So, for example, Step 3 illustrates the use of the <slot> element, and then Step 4 branches from Step 3 and uses everything in the previous Steps while adding new code.

Some things to note

  • Since a change in one step will need to be included in all subsequent steps, there is a file in each branch called mergebranches.sh that migrates code from step to step.

Introduction

  • Review the structure of an empty Astro application
    • Discuss purpose and structure of each file that was created

Step 1

  • Show page-based routing
    • Be sure to point out directories are paths

Step 2

  • Basic component structure
  • Basic use of props
    • Explain destructuring

Step 3

  • Components using the <slot> tag

Step 4

  • Integrating a layout
  • Build a menu
    • Show how components can be embedded in components

Step 5

*Adding styles to components and the site

Step 6

  • Display markdown content as a page

Step 7

  • Add a blog section via content collections

Step 8

  • Add a blog post summary page

Step 9

  • Add a Sitemap integtration
    • npm install @astrojs/sitemap

Step 10

  • Adding logging middleware

Step 11

  • Adding View Transitions

Step 12

  • Add a basic contact form
  • Use Astro Actions to gather form data
  • Use node adapter
    • npx astro add node

Step 13

  • Write contact information to AstroDB
    • npx astro add db

Step 14

  • Astro Client Islands
  • Add newsletter signup component to bottom of all blogs
  • Integrate React
    • npx astro add react

Step 15

  • Add quotes from a Quote API
  • Run express-quotes-api project
    • https://github.com/NickHodges/express-quotes-api
  • Choose random quote and build page for each quote via dynamic routing

Step 16

  • Add a server island
    • It's an avatar that delay loads
      • It doesn't hold up the page
      • It renders on the server, despite being "customized"

Step 17

  • Integrate MDX into application
    • npx astro add mdx
    • Use client:visible

Step 18

  • Show the Astro <Image> tag
    • Note how it converts and sizes images for efficiency

Step 19

  • Use pagination with the blog
    • Add 15 more posts, page them 4 at a time