This week I took some time to improve my astro skills.
Why Astro
With Astro you get a super fast framework for building content driven websites in a component based approach.
It lets you build component with astro itself, or use other frameworks like React or Svelte for that. On the content side of things you can write in html, markdown or in my case mdx, which is markdown with javascript inside.
I have built a website with astro before and it was great to get something working really fast. But I did not really know what I was doing, so this time I focussed more on the basic concepts.
Everything is a component
What I noticed is that every file in astro can be seen as a component.
It follows a similar structure:
---
const {title = 'My title', body} = Astro.props;
---
<div class='teaser'>
<h1>{title}</h1>
<p>{body}</p>
</div>
<style>
.teaser {
color: pink;
}
</style>
<script>
document.addEventListener('onclick', function () {
console.log('You clicked the page')
})
</script>In the first part you write javascript which gets evaluated once and is used when the page gets built. It is great for passing props to the component.
The html part is what will be rendered on the page. And the style tag is for all styles inside the component. It is scoped by default, which is really great.
Last, the script tag is for stuff that should be done by the client in a continuous way,
Using Global Styles
While it’s great to have scoped styles in your components, it is beneficial to have styles that are globally available. A common thing is to have custom properties that are used throughout the website, like colors and text sizes.
With Astro you just import a css file in a page and you have access to that styles.
Working with Layouts
A good place to import your global styles is a layout. This is conceptually just a component that includes some basic things that make up a website, like the html and body tags. You then use a slot to insert your page content in there.
---
import '../styles/global.css'
---
<html>
...
</html>
<body>
<slot />
</body>Using mdx for content pages
A common way to build content pages is markdown. Which let’s you create text with a semantic structure by writing things like # Headline 1 and ## Heading 2 to indicate what you want to be rendered.
While this is a simple and powerful approach, it lacks of the capability to include dynamic content, and more important - to use components inside.
This is where mdx comes in. It is like markdown, but let’s you write javascript inside, which also gives you the ability to use components in there.
Conclusion
That’s my little collection of things I have learned about astro so far. I have to say it is a very nice tool that is beginner friendly and lets you build complex, content driven websites that make use of components very fast and in an approachable way.
Other things I did this week
Animations
Drawing
That’s it for this week. Hope you liked it.