|
1 | | -# AstroPaper 📄 |
2 | | - |
3 | | - |
4 | | - |
5 | | - |
6 | | -[](https://conventionalcommits.org) |
7 | | -[](http://commitizen.github.io/cz-cli/) |
8 | | - |
9 | | -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). |
10 | | - |
11 | | -This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured. |
12 | | - |
13 | | -This theme is self-documented \_ which means articles/posts in this theme can also be considered as documentations. Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info. |
14 | | - |
15 | | -## 🔥 Features |
16 | | - |
17 | | -- [x] type-safe markdown |
18 | | -- [x] super fast performance |
19 | | -- [x] accessible (Keyboard/VoiceOver) |
20 | | -- [x] responsive (mobile ~ desktops) |
21 | | -- [x] SEO-friendly |
22 | | -- [x] light & dark mode |
23 | | -- [x] fuzzy search |
24 | | -- [x] draft posts & pagination |
25 | | -- [x] sitemap & rss feed |
26 | | -- [x] followed best practices |
27 | | -- [x] highly customizable |
28 | | -- [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/)) |
29 | | - |
30 | | -_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._ |
31 | | - |
32 | | -## ✅ Lighthouse Score |
33 | | - |
34 | | -<p align="center"> |
35 | | - <a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fastro-paper.pages.dev%2F&form_factor=desktop"> |
36 | | - <img width="710" alt="AstroPaper Lighthouse Score" src="AstroPaper-lighthouse-score.svg"> |
37 | | - <a> |
38 | | -</p> |
39 | | - |
40 | | -## 🚀 Project Structure |
41 | | - |
42 | | -Inside of AstroPaper, you'll see the following folders and files: |
43 | | - |
44 | | -```bash |
45 | | -/ |
46 | | -├── public/ |
47 | | -│ ├── assets/ |
48 | | -│ │ └── logo.svg |
49 | | -│ │ └── logo.png |
50 | | -│ └── favicon.svg |
51 | | -│ └── astropaper-og.jpg |
52 | | -│ └── robots.txt |
53 | | -│ └── toggle-theme.js |
54 | | -├── src/ |
55 | | -│ ├── assets/ |
56 | | -│ │ └── socialIcons.ts |
57 | | -│ ├── components/ |
58 | | -│ ├── content/ |
59 | | -│ │ | blog/ |
60 | | -│ │ | └── some-blog-posts.md |
61 | | -│ │ └── _schemas.ts |
62 | | -│ │ └── config.ts |
63 | | -│ ├── layouts/ |
64 | | -│ └── pages/ |
65 | | -│ └── styles/ |
66 | | -│ └── utils/ |
67 | | -│ └── config.ts |
68 | | -│ └── types.ts |
69 | | -└── package.json |
70 | | -``` |
71 | | - |
72 | | -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. |
73 | | - |
74 | | -Any static assets, like images, can be placed in the `public/` directory. |
75 | | - |
76 | | -All blog posts are stored in `src/content/blog` directory. |
77 | | - |
78 | | -## 📖 Documentation |
79 | | - |
80 | | -Documentation can be read in two formats\_ _markdown_ & _blog post_. |
81 | | - |
82 | | -- Configuration - [markdown](src/content/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/) |
83 | | -- Add Posts - [markdown](src/content/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/) |
84 | | -- 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/) |
85 | | -- Predefined Color Schemes - [markdown](src/content/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/) |
86 | | - |
87 | | -> 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/) |
88 | | -
|
89 | | -## 💻 Tech Stack |
90 | | - |
91 | | -**Main Framework** - [Astro](https://astro.build/) |
92 | | -**Type Checking** - [TypeScript](https://www.typescriptlang.org/) |
93 | | -**Component Framework** - [ReactJS](https://reactjs.org/) |
94 | | -**Styling** - [TailwindCSS](https://tailwindcss.com/) |
95 | | -**UI/UX** - [Figma](https://figma.com) |
96 | | -**Fuzzy Search** - [FuseJS](https://fusejs.io/) |
97 | | -**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/) |
98 | | -**Code Formatting** - [Prettier](https://prettier.io/) |
99 | | -**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) |
100 | | -**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/) |
101 | | -**Linting** - [ESLint](https://eslint.org) |
102 | | - |
103 | | -## 👨🏻💻 Running Locally |
104 | | - |
105 | | -The easiest way to run this project locally is to run the following command in your desired directory. |
106 | | - |
107 | | -```bash |
108 | | -# npm 6.x |
109 | | -npm create astro@latest --template satnaing/astro-paper |
110 | | - |
111 | | -# npm 7+, extra double-dash is needed: |
112 | | -npm create astro@latest -- --template satnaing/astro-paper |
113 | | - |
114 | | -# yarn |
115 | | -yarn create astro --template satnaing/astro-paper |
116 | | -``` |
117 | | - |
118 | | -## Google Site Verification (optional) |
119 | | - |
120 | | -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 `<head>` section. |
121 | | - |
122 | | -```bash |
123 | | -# in your environment variable file (.env) |
124 | | -PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value |
125 | | -``` |
126 | | - |
127 | | -## 🧞 Commands |
128 | | - |
129 | | -All commands are run from the root of the project, from a terminal: |
130 | | - |
131 | | -| Command | Action | |
132 | | -| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------- | |
133 | | -| `npm install` | Installs dependencies | |
134 | | -| `npm run dev` | Starts local dev server at `localhost:3000` | |
135 | | -| `npm run build` | Build your production site to `./dist/` | |
136 | | -| `npm run preview` | Preview your build locally, before deploying | |
137 | | -| `npm run format:check` | Check code format with Prettier | |
138 | | -| `npm run format` | Format codes with Prettier | |
139 | | -| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). | |
140 | | -| `npm run cz` | Commit code changes with commitizen | |
141 | | -| `npm run lint` | Lint with ESLint | |
142 | | - |
143 | | -## ✨ Feedback & Suggestions |
144 | | - |
145 | | -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. |
146 | | - |
147 | | -## 📜 License |
148 | | - |
149 | | -Licensed under the MIT License, Copyright © 2023 |
150 | | - |
151 | | ---- |
152 | | - |
153 | | -Made with 🤍 by [Sat Naing](https://satnaing.dev) 👨🏻💻 |
| 1 | +# blog.wrongsyntax.dev |
0 commit comments