Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brenner8023/astro-paper
https://github.com/brenner8023/astro-paper
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/brenner8023/astro-paper
- Owner: brenner8023
- License: mit
- Created: 2023-07-21T14:55:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-30T14:16:20.000Z (over 1 year ago)
- Last Synced: 2024-04-29T02:46:35.797Z (7 months ago)
- Language: Astro
- Homepage: https://vue666.vercel.app
- Size: 1.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AstroPaper ๐
[](https://conventionalcommits.org)
[](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
## ๐ 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) ๐จ๐ปโ๐ป
