Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/infinity-ooo/astro-theme-mia
A minimalist, powerful astro theme with integrated rough-notation for engaging, informative content.
https://github.com/infinity-ooo/astro-theme-mia
astro blog hexo-theme hugo-theme mdx rough-notation theme typescript
Last synced: 3 months ago
JSON representation
A minimalist, powerful astro theme with integrated rough-notation for engaging, informative content.
- Host: GitHub
- URL: https://github.com/infinity-ooo/astro-theme-mia
- Owner: infinity-ooo
- License: mit
- Created: 2024-05-22T06:16:12.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-31T03:41:58.000Z (7 months ago)
- Last Synced: 2024-09-28T05:41:06.876Z (3 months ago)
- Topics: astro, blog, hexo-theme, hugo-theme, mdx, rough-notation, theme, typescript
- Language: Astro
- Homepage: https://astro-theme-mia.pages.dev
- Size: 873 KB
- Stars: 80
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mia - Astro & Tailwindcss & MDX Theme
[English](README.md) | [中文](README_zh.md) | [Demo](https://astro-theme-mia.pages.dev/)
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.
### Get Started
Install the dependencies:
```bash
npm install
```
Run and visit http://localhost:4321.
```bash
npn run dev
```
Build the App:
```bash
npm run build
```
You will then see the `dist` folder generated for publishing, which you can preview locally with the following command:
```bash
npm run preview
```
### Using Rough Notation
Mia is based on the [Rough Notation](https://roughnotation.com/) library. You can use `` component in your MDX content, such as:
```mdx
In Swift, the `Codable` protocol is a type alias for the `Encodable` and `Decodable` protocols:
```
And following is the type of this component:
```tsx
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
- @astrojs/mdx: https://docs.astro.build/en/guides/markdown-content/
- @astrojs/rss: https://docs.astro.build/en/guides/rss/
- @astrojs/sitemap: https://docs.astro.build/en/guides/integrations-guide/sitemap/
- @astrojs/tailwind: https://docs.astro.build/en/guides/integrations-guide/tailwind/
- rough-notation: https://roughnotation.com/
### License
- [MIT](https://github.com/infinity-ooo/astro-theme-mia/blob/main/LICENSE)