Test

Draft

•

2 min read

This is an example post to ensure the blog and its styling is all up to snuff. It only shows up in the development server, as well as on the beta version of the website. If you find an issue here, report it on GitHub.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Italicized, bold, both at once, strikethrough, footnote references¹, you name it.

Media

Alerts

This isn’t actually an alert. It’s just a <blockquote>. It is styled pretty much the same though, so it still counts.

Small text example, but my formatter is trolling

Hey!

Useful information that users should know, even when skimming content.
Small text example

Fun fact!

Helpful advice for doing things better or more easily.
Small text example

Heads up!

Key information users need to know to achieve their goal.
Small text example

Warning!

Urgent info that needs immediate user attention to avoid problems.
Small text example

Watch out!

Advises about risks or negative outcomes of certain actions.
Small text example

Code

Anyway, here’s a little bit of random code²:

---
// Quite meta, to be honest.

import Icon from "../components/Icon.astro";

interface Props {
	icon?: string;
}

const { icon } = Astro.props;
---

<span>
	{icon && <Icon name={icon} />}
	<slot />
</span>

<style>
	span {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
	}

	[data-icon] {
		font-size: 1.25rem;
	}
</style>

<script>
	console.log("Hello, Astro!");
</script>