Skip to content
CMPSC 302: Web Design

Introduction to Astro

astro is a framework that allows us to remove some of the difficulties of writing a functional, accessible HTML site. We use this framework in our course to speed up our learning and provide exposure to modern web design practices and technologies.

For more on installing astro and supporting tooling, see the astro template available in this course’s Github organization.

Learning Objectives

Section titled “Learning Objectives”
  1. Apply HTML, CSS, Markdown, and basic Javascript to develop well-structured, responsive World Wide Web Consortium (W3C) standards-compliant web sites.
  2. Evaluate and implement web accessibility measures consistent with the Web Content Accessibility Guidelines (WCAG) version 2 specification.
  3. Design front-end user experiences using accepted web design patterns, methods, and information structures.
  4. Identify and use strategies of successful visual rhetoric for the web.
  5. Compare and select web technologies such as static site generators or frameworks as appropriate candidates for building web sites. Course Resources

Text

Section titled “Text”
The Coding Workbook, “Getting Started with HTML”

Introduction to Astro

Section titled “”
astrojs rocket A logo

Astro uses four primary file types to construct static websites. These are:

  • md (Markdown)
  • mdx (Extensible Markdown)
  • astro (Astro component files)
  • ts (Typescript component files)

For our purposes, we’ll largely work with mdx files, an example of which looks like our example of HTML from the previous lesson:

---
// Frontmatter
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

The mdx preamble

Section titled “The mdx preamble”
---
// Frontmatter
---

This section, the preamble, allows developers to ingest and pass data between files. This allows:

  • use of limited Typescript (a strongly-typed version of Javascript) to pass values
  • creation of partials, template pieces that work together to make reusable components
  • increased ability to maintain pages that share similar elements

To start our design, we will concentrate on .astro files, mainly working in HTML.

File typeMarkdown supportedHTML supported
.astroNoYes
.mdYesYes, but not recommended
.mdxYesYes

.astro files

Section titled “.astro files”

These constitute the main files for components. In this case, we’re interested in:

  • reusable sections
  • creating maintainable layouts
  • HTML-powered semantic structure
  • implementing custom elements with full control over page structure

.mdx files

Section titled “.mdx files”

We use mdx files for pure content. In this case, we’re interested in:

  • ease of maintaining content
  • overall maintainability, especially for those not interested in diving into HTML/elements
  • retaining some power over/use of HTML elements where necessarily
  • allowing others to use our layouts as themes

Components

Section titled “Components”

Either .astro or .mdx files can implement components, the heart of the astro build platform. Consider again our main index page for our current template site:

<!Doctype html>
<html lang="en">
  <!-- This is common to all pages, but maybe the title isn't -->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <!-- TODO: Add a nav? -->


    <!-- main body content might be a reusable component in this layout -->
        <main>
            <h1>Astro</h1>
        </main>


    <!-- TODO: Add a footer? -->
  </body>
</html>

Implementing components allows us to learn a little bit more about our file structure and gain some insight into how astro works. Here, we’re going to add a few components and a layout.

/
├── public/
├── src/
│   └── pages/
│   |   └── index.astro
│   └── layouts/
│       └── BaseLayout.astro
│   └── components/
│       └── Footer.astro
│       └── Header.astro
│       └── Nav.astro

The pages folder constitutes the routes that our site offers, and right now it has a single index file, which responds at /, the lowest level of the URL hierarchy of our site. As we add different components, we will change how that file is structured, though not much about its design.

To follow along with changes made, head to dluman.github.io to check out how the files are coming together.

Mixing Markdown and HTML

Section titled “Mixing Markdown and HTML”

This course uses astro to implement our webpages. This means that we will use both Markdown and HTML to create pages: mostly in terms of headings, lists, and paragraphs. More specific HTML formatting that goes beyond simple document construction will rely on writing HTML directly in our files.

The following table lists Markdown tags that their HTML equivalents:

Markdown TagHTML Tag
# - ######<h1>-<h6>
*<ul>, <li>
1.…<ol>, <li>
Markdown table<table>
![]()<img />
[]()<a>
><blockquote>
**...**<strong>...</strong>
_..._<em>...</em>
---<hr />
Backticks<pre>
Code fence<code>