Astro

Astro is a frontend framework for content-driven websites. Astro primarily supports content written in Markdown. Additional metadata about the content is provided in YAML front matter. The philosophy of Astro is opting in for JavaScript only when it’s needed. Astro in its most simple setup is a static site generator like Hugo or Jekyll. Without JavaScript, Astro only generates HTML and CSS files.

The most popular method to create a new Astro project is with npm:

npm create astro@latest

The scripts object inside the package.json file shows how to run, build and preview the Astro project.

Project structure

Directory	Function
`src/pages/`	All the pages of the website
`src/layouts/`	Astro templates
`src/content/`	Content collections (like blogs or articles)
`src/components/`	Reusable frontend components
`src/styles/`	Local CSS files
`public/`	Static assets (favicons, images and fonts)
`dist/`	Compiled Astro project

Footnotes

Astro converts footnotes written in Markdown to HTML links displayed in a superscript. The references for footnotes have classes that are prefixed with user-content-fn. The actual footnotes are listed at the end of the generated HTML file under a level 2 heading named ‘Footnotes’. The classes for the footnotes themselves are prefixed with user-content-fnref. This allows for custom styling of both the footnotes and their references:

/* Only target footnote reference */
a[href^="user-content-fn"]:not(href^="user-content-fnref") {
    text-decoration: underline;
}