Article 1: Sell People on Astro

Astro is awesome and it's useful to you, person who:

has made a few HTML and CSS pages and is feeling like the chore of keeping everything updated is sucking out the initial joy

knows there's more to web development than making a few pages, but doesn't know how to achieve it

As your AMBITION grows, Astro will grow with you

REMIND PEOPLE THEY DONT NEED TO LEARN ALL ABOUT HTML AND CSS TO LEARN ASTRO

Actually just get straight up started with Astro, Ms Boba says it will be fine and you should trust Ms Boba...sometimes

At the end of this article you will

Want to join the "Friends of Houston" club

Be excited about everything you can build as you become more and more confident in your Astro skills

Feel confident you can learn Astro and you can achieve all your webdev dreams

Also you can add the Friends of Houston badge to your collection and AREN'T THEY ADORABLE

Series: Learn Astro by Porting your Site to it

Prerequisite:

Article on how to install NVM

Run commands on Terminal

A website you want to move

If you don't have a site yet and are starting from scratch, the Astro site tutorial will give you the basics

With time, we'll have our own starters that will get you 80% of the way

You don't need to lose all your hard work when you move to Astro!

We'll show you how to progressively get more of its benefits, so you can migrate at your own pace

For us: Consider making checklists at the end of articles, people loved those in the Astro tutorials

Article 1: Dipping Your Toes

You can dump all your HTML files as they are into Astro

Instructions (to test):

Drop all your site into src/pages

Drop all your images into public/

Follow the same folder structure you had

in your original site

Drop all your JavaScript into public/

Follow the same folder structure you had in your original site

TODO: Check the Astro inline JS fuckywucky

People will have both JS files and random tags snuck in (TODO: check if they're processed in .html files.

You're done

Build your site and see the magic...which looks like what you had before

Common issues

e.g. What's up with my JS

Article 2: Showing you the Power with Components

Turn at least ONE page into .astro

Maybe find some guinea pigs to try this with so you know how badly it goes

If you're having issues you can also make a new page to start

Find one common repeated element, like a navigation or a sidebar or a header

Remake it with a .astro file in components/

Explain HTML + CSS separation

Extra topics:

CSS scoping (might want to tell people to use is:global if they run into issues)

Check what happens if JS targeting by Nav class

We don't need props at this stage

Put your new component in your new .astro page

Frontmatter of pages

Importing stuff

If you get a CSS fucky wucky here's what's happening and how to fix it

but if you don't wanna bother right now, just is:global the shit out of it

Take-home exercise:

Make more Astro pages

Put the component in all of them

If you start wondering how to change small stuff across pages, go to the next article

Make more components

Article 3: The power of Props

You can use Props to change the value

Take your Navbar and add a page="" to it

Do not use TypeScript no matter how much Ms Boba tries to rationalize doing it

"Everyone loves TypeScript so when people don't love it immediately they think they're the problem"

If no one stops Ms Boba from making a toggle, Ms Boba will make a toggle

Here's what you can do with Props in your component

Print the value of the prop on the page

You're currently on page {Astro.props.page}

Change the CSS of an element based on a Prop

For reference: Look at this page for styling tricks https://docs.astro.build/en/guides/styling/#combining-classes-with-classlist

Add the prop as a class list

Add a class if the prop is present or equal to some value

page === current

Add an element to the page according to the value of a Prop

{prop && <...>} & {!prop && <...>}

Info box: Change which element to add to the page according to the value of a prop

{prop ? <...> : <...>}

Stretch, ??? not sure where/when but ms boba keeps seeing people get stuck here ??

{prop.map(() => <></>}

Other tricks like .filter

Extra article later about "dealing with repeated element"? people yearn for the galleries

Article 4: Lay it out with a Layout

Components are cool but you might want to get even more ambitious by making the whole page repeatable

Luckily you can use the Astro.slot or something to put the content of your component somewhere within it

You can use this both for layouts or to do things like "reusable boxes"

Choose which one you want to try and do it

Article 5: Where to go from here?

Some pointers on where to go from here which we won't write because we're broke

Installing things (look at npm guides)

IF WE HAD SOME HTML/CSS RESOURCES go to this list and learn something else cause Astro can do it all

Actually, you can buy our HTML/CSS guides

Use markdown in your pages

Apply Remark/Rehype plugins (hint hint we have a bunch)

Use content layer to make your own blog

Find a good article

Load fics with our AO3 Content Loader

Add a gallery to your site

Find out if someone wrote about it or bribe a fannish person

Buy our git guide so you're not afraid to fuck up your beautiful site

Use starlight to make your own wiki

Stretch Article:

Here's how TypeScript would save you a lot of pain in your components