/astro-theme-mia

A minimalist, powerful astro theme with integrated rough-notation for engaging, informative content.

Primary LanguageAstroMIT LicenseMIT

Mia - Astro & Tailwindcss & MDX Theme

English | 中文 | Demo

Mia is designed to be minimalist yet powerful, integrating the capabilities of Astro, MDX, and Rough Notation. Whether you're a developer, writer, or just someone who loves clean and efficient design, this theme is perfect for you.

Mia Theme Preview

Get Started

Install the dependencies:

npm install

Run and visit http://localhost:4321.

npn run dev

Build the App:

npm run build

You will then see the dist folder generated for publishing, which you can preview locally with the following command:

npm run preview

Using Rough Notation

Mia is based on the Rough Notation library. You can use <Notation /> component in your MDX content, such as:

In Swift, the `Codable` protocol is a type alias for the <Notation type="box" color="blue">`Encodable` and `Decodable`</Notation> protocols:

And following is the type of this component:

type Props = {
  type?: "underline" | "circle" | "crossed-off" | "highlight" | "strike-through" | "bracket";
  color?: string;
  strokeWidth?: number;
};

Theme Configuration

Update the src/config.ts file to configure the theme:

  • SITE_FAVICON: the favicon of the site
  • SITE_LOGO: the logo of the site
  • SITE_TITLE: the title of the site
  • SITE_DESCRIPTION: the description of the site
  • MENUS: the menus of the site
  • FOOTER_CONTENT: the content of the footer
  • GOOGLE_GTAG: the Google Tag Manager ID

Theme Integrations

License