Test
Draft
•2 minute 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 references1, you name it.
Even en-dashes (–), em-dashes (—), smart ‘single-’ and “double-quotes”, as well as triple dots…
All things that LLMs tend to overuse.
With Astro v7’s new default Sätteri Markdown processor, we also get the option for superscript and subscript, along with some other things. Neat!
Media
This is an image, obviously. You can click (or tap) it to open an unfinished fullscreen viewer.
Shown above is the audio player. This caption may need to be moved down a bit, though…
And here we have the video player. By the way, you can fullscreen the video to show the same audio visualizer as the audio player.
Alerts
This isn’t actually an alert. It’s just a
Small text example, but my formatter is trolling<blockquote>. It is styled pretty much the same though, so it still counts.
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 code2:
---
// 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>