Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brenner8023/astro-paper


https://github.com/brenner8023/astro-paper

Last synced: 6 days ago
JSON representation

Awesome Lists containing this project

README

        

# AstroPaper ๐Ÿ“„

![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![GitHub](https://img.shields.io/github/license/satnaing/astro-paper?color=%232F3741&style=for-the-badge)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white&style=for-the-badge)](https://conventionalcommits.org)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=for-the-badge)](http://commitizen.github.io/cz-cli/)

AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog).

## ่‡ชๅฎšไน‰ๅŠŸ่ƒฝๆ‰ฉๅฑ•

- ๅฎž็Žฐๅคๅˆถ็ฒ˜่ดดๅ›พ็‰‡๏ผŒๅนถไฟๅญ˜ๅœจๆœฌๅœฐ๏ผŒ่‡ชๅŠจ็”Ÿๆˆ markdown ็š„ๅ›พ็‰‡้“พๆŽฅ

## ๐Ÿ”ฅ Features

- [x] type-safe markdown
- [x] super fast performance
- [x] accessible (Keyboard/VoiceOver)
- [x] responsive (mobile ~ desktops)
- [x] SEO-friendly
- [x] light & dark mode
- [x] fuzzy search
- [x] draft posts & pagination
- [x] sitemap & rss feed
- [x] followed best practices
- [x] highly customizable
- [x] dynamic OG image generation for blog posts [#15](https://github.com/satnaing/astro-paper/pull/15) ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/))

_Note: I've tested screen-reader accessibility of AstroPaper using **VoiceOver** on Mac and **TalkBack** on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well._

## โœ… Lighthouse Score



AstroPaper Lighthouse Score

## ๐Ÿš€ Project Structure

Inside of AstroPaper, you'll see the following folders and files:

```bash
/
โ”œโ”€โ”€ public/
โ”‚ โ”œโ”€โ”€ assets/
โ”‚ โ”‚ โ””โ”€โ”€ logo.svg
โ”‚ โ”‚ โ””โ”€โ”€ logo.png
โ”‚ โ””โ”€โ”€ favicon.svg
โ”‚ โ””โ”€โ”€ astropaper-og.jpg
โ”‚ โ””โ”€โ”€ robots.txt
โ”‚ โ””โ”€โ”€ toggle-theme.js
โ”œโ”€โ”€ src/
โ”‚ โ”œโ”€โ”€ assets/
โ”‚ โ”‚ โ””โ”€โ”€ socialIcons.ts
โ”‚ โ”œโ”€โ”€ components/
โ”‚ โ”œโ”€โ”€ content/
โ”‚ โ”‚ | blog/
โ”‚ โ”‚ | โ””โ”€โ”€ some-blog-posts.md
โ”‚ โ”‚ โ””โ”€โ”€ _schemas.ts
โ”‚ โ”‚ โ””โ”€โ”€ config.ts
โ”‚ โ”œโ”€โ”€ layouts/
โ”‚ โ””โ”€โ”€ pages/
โ”‚ โ””โ”€โ”€ styles/
โ”‚ โ””โ”€โ”€ utils/
โ”‚ โ””โ”€โ”€ config.ts
โ”‚ โ””โ”€โ”€ types.ts
โ””โ”€โ”€ package.json
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the `public/` directory.

All blog posts are stored in `src/content/blog` directory.

## ๐Ÿ“– Documentation

Documentation can be read in two formats\_ _markdown_ & _blog post_.

- Configuration - [markdown](src/content/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
- Add Posts - [markdown](src/content/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
- Customize Color Schemes - [markdown](src/content/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
- Predefined Color Schemes - [markdown](src/content/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)

> For AstroPaper v1, check out [this branch](https://github.com/satnaing/astro-paper/tree/astro-paper-v1) and this [live URL](https://astro-paper-v1.astro-paper.pages.dev/)

## ๐Ÿ’ป Tech Stack

**Main Framework** - [Astro](https://astro.build/)
**Type Checking** - [TypeScript](https://www.typescriptlang.org/)
**Component Framework** - [ReactJS](https://reactjs.org/)
**Styling** - [TailwindCSS](https://tailwindcss.com/)
**UI/UX** - [Figma](https://figma.com)
**Fuzzy Search** - [FuseJS](https://fusejs.io/)
**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/)
**Code Formatting** - [Prettier](https://prettier.io/)
**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/)
**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/)
**Linting** - [ESLint](https://eslint.org)

## ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Running Locally

The easiest way to run this project locally is to run the following command in your desired directory.

```bash
# npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper
```

## Google Site Verification (optional)

You can easily add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html `` section.

```bash
# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value
```

## ๐Ÿงž Commands

All commands are run from the root of the project, from a terminal:

| Command | Action |
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run format:check` | Check code format with Prettier |
| `npm run format` | Format codes with Prettier |
| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
| `npm run cz` | Commit code changes with commitizen |
| `npm run lint` | Lint with ESLint |

## โœจ Feedback & Suggestions

If you have any suggestions/feedback, you can contact me via [my email](mailto:[email protected]). Alternatively, feel free to open an issue if you find bugs or want to request new features.

## ๐Ÿ“œ License

Licensed under the MIT License, Copyright ยฉ 2023

---

Made with ๐Ÿค by [Sat Naing](https://satnaing.dev) ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป