Architecture

Notion to Astro

Overview

Astro can load markdown files into HTML and CSS. The current plan is to convert the Notion notes into Markdown first, then use an Astro Layout to display it on the page.

An Astro Layout is a reusable UI structure that provides common shared UI elements such as headers, navigation bars, and footers. They will be stored in src/layouts.

How does the Markdown get formatted into the layout?

At the top of the Markdown file, we can state which layout we'll use at the top of the page (between the dashed fences). This top part of the page is called the frontmatter. For example:

---
layout: ../layouts/BaseLayout.astro
title: "Hello, World!"
author: "Chris Valenzuela"
date: "09 Aug 2022"
---
All frontmatter properties are available as props to an Astro layout component.

The `layout` property is the only special one provided by Astro.

You can use it in both Markdown and MDX files located within `src/pages/`.