Week 2 - Astro.js

1/26

2-1 Astro.js + Starlight

Homework (before class)

• ✅ Complete DevLog 1-3 and post link on Moodle.
• Start (if you have not already completed) the Git Milestones
• Read 📚 / Watch 🎬 the Astro Starlight article up to “Tutorial”
• Watch 🎬 Heydon Pickering Why is everything binary?

In-class

1. Instructor: Introduce Astro Starlight and benefits (e.g. markdown accessibility, and modules and components, which make code D.R.Y.)
2. Class: Complete DevLog in-class/at home.

DevLog 2-1

Create an Astro Starlight DevLog site

Follow the Astro Starlight tutorial to create a JAMstack website with Astro.js. You will use this site to post DevLog entries to record your work throughout the semester.

1. Fork an Astro Starlight site and update project structure.
2. Publish Astro Starlight using Github Actions ✏️ LINK_TO_YOUR_REPO
3. Add custom CSS to your theme
4. Import and use an Astro component
5. Continue customizing your site using the Starlight Docs and ✏️ explain what you did.
6. Add content into: devlog-1-3.mdx (the DevLog from the previous week)
7. Add this file and devlog-2-1.mdx for today, and add content.
8. Watch 🎬 Heydon Pickering Why is everything binary?. Post a reading response in the 2-1 DevLog per information in the Assignments.
9. Write a reflection explaining what you did learned in this DevLog. Link to sources.
10. Publish it and turn it in by posting the direct link to this DevLog on Moodle

2-2 Astro.js

Homework (before class)

• ✅ Complete DevLog 2-1 and post link on Moodle.

In-class

1. Instructor: Introduce Astro.js Build a Blog Tutorial and show examples
2. Class: Start DevLog 2-3, continue in-class/at home.

Netlify Credits Expire Fast

Netlify Credits can expire quickly if you publish a lot of builds. My advice is to push to the Netlify cloud only when you are ready.

Steps to View Netlify Credits:

1. Log in to your Netlify account and select your team.
2. Navigate to Usage & billing > Credit balance.
3. Review the Credit balance section to see your remaining monthly allotment.
4. Review the Credit usage breakdown for details on how specific features are consuming credits.

2-3 Astro.js

Homework

• ✅ Complete (at least) steps 1-5 from DevLog 2-3

In-class

1. Instructor: Discuss Tailwind and Astro themes
2. Class: Complete DevLog in-class/at home.

DevLog 2-3

Create an Astro blog site

Follow Astro’s Build a Blog tutorial to create a modular website using component-based design. Compare your finished blog site to the tutorial example as needed. Copy and paste then complete the following objectives in in your DevLog (Instructions).

×

DevLog Instructions

1. Go to omundy/dig345-radical-software and copy / paste the markdown code from this week's DevLog into your own. Copy only the list of items, don't copy any components.
2. Follow the instructions. Think of them as things you should be able to do after completing them.
3. Add content where ✏️ prompted.
4. When finished, commit your work and push. Post the link in the appropriate Moodle assignment.

1. Create a new Astro site and publish it on Netlify¹. Write the formatted command ✏️ here using backticks so you remember it.
2. Create pages (.astro files) and blog posts (.md files) using frontmatter and file-based routing².
3. Use Astro components (also .astro files!) to reuse common code across your website³.
4. Create reusable layout components using <slot /> and Astro.props to inject child content⁴.
5. Create layout components for markdown files. Share anything that was difficult so far ✏️ here.
6. Display a dynamically generated list of posts on your Blog page⁵.
7. Use Dynamic page routing with getStaticPaths() to specify and store static routes during build, and pass each page its own props.
8. Install Astro Preact integration. Use a client: directive for hydration on a UI framework component⁶. 🔥 Challenge: Already have experience with a UI library? Try to integrate that one instead! For example, I used Svelte.
9. Modify your site design and content as if you were transitioning to Astro.js from an existing Wordpress site/blog. Duplicate the design, content, structure from the other site (not entirely, mind you, since this is just a mockup). Publish your blog site and put the url ✏️ here.
10. Copy and paste these instructions into devlog-2-3.mdx in your own DevLog. Publish it. Then turn it in by posting a direct link to the page on Moodle.