diff --git a/README.md b/README.md index 05851c3..76467aa 100644 --- a/README.md +++ b/README.md @@ -1,166 +1,2 @@ -# AstroPaper ๐Ÿ“„ - -![AstroPaper](public/default-og.jpg) -[![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)](https://www.figma.com/community/file/1356898632249991861) -![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). - -Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info. - -## ๐Ÿ”ฅ 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] static search ([Pagefind](https://pagefind.app/)) -- [x] draft posts & pagination -- [x] sitemap & rss feed -- [x] MDX support -- [x] collapsible table of contents -- [x] followed best practices -- [x] highly customizable -- [x] dynamic OG image generation for blog posts ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)) -- [x] i18n ready - -_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/ -โ”‚ โ”œโ”€โ”€ pagefind/ # auto-generated on build -โ”‚ โ”œโ”€โ”€ favicon.svg -โ”‚ โ””โ”€โ”€ default-og.jpg -โ”œโ”€โ”€ src/ -โ”‚ โ”œโ”€โ”€ assets/ -โ”‚ โ”‚ โ”œโ”€โ”€ icons/ -โ”‚ โ”‚ โ””โ”€โ”€ images/ -โ”‚ โ”œโ”€โ”€ components/ -โ”‚ โ”œโ”€โ”€ content/ -โ”‚ โ”‚ โ”œโ”€โ”€ pages/ -โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ about.md -โ”‚ โ”‚ โ””โ”€โ”€ posts/ -โ”‚ โ”‚ โ””โ”€โ”€ some-blog-posts.md -โ”‚ โ”œโ”€โ”€ i18n/ -โ”‚ โ”œโ”€โ”€ layouts/ -โ”‚ โ”œโ”€โ”€ pages/ -โ”‚ โ”œโ”€โ”€ scripts/ -โ”‚ โ”œโ”€โ”€ styles/ -โ”‚ โ”œโ”€โ”€ types/ -โ”‚ โ”œโ”€โ”€ utils/ -โ”‚ โ”œโ”€โ”€ config.ts -โ”‚ โ””โ”€โ”€ content.config.ts -โ”œโ”€โ”€ astro-paper.config.ts # user-defined configurations -โ””โ”€โ”€ astro.config.ts -``` - -All blog posts are stored in the `src/content/posts/` directory. You can organise posts into subdirectories โ€” the subdirectory name becomes part of the post URL. - -## ๐Ÿ“– Documentation - -Documentation can be read in two formats\_ _markdown_ & _blog post_. - -- Configuration - [markdown](src/content/posts/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/) -- Add Posts - [markdown](src/content/posts/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/) -- Customize Color Schemes - [markdown](src/content/posts/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/posts/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/) - -## ๐Ÿ’ป Tech Stack - -**Main Framework** - [Astro](https://astro.build/) -**Type Checking** - [TypeScript](https://www.typescriptlang.org/) -**Styling** - [TailwindCSS](https://tailwindcss.com/) -**UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861) -**Static Search** - [Pagefind](https://pagefind.app/) -**Icons** - [Tablers](https://tabler-icons.io/) -**Code Formatting** - [Prettier](https://prettier.io/) -**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) -**Linting** - [ESLint](https://eslint.org) -**Dynamic OG images** - [Satori](https://github.com/vercel/satori) + [Sharp](https://sharp.pixelplumbing.com/) + [Astro Fonts](https://docs.astro.build/en/guides/fonts/) - -## ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Running Locally - -You can start using this project locally by running the following command in your desired directory: - -```bash -# pnpm -pnpm create astro@latest --template satnaing/astro-paper - -# npm -npm create astro@latest -- --template satnaing/astro-paper - -# yarn -yarn create astro --template satnaing/astro-paper - -# bun -bun create astro@latest -- --template satnaing/astro-paper -``` - -Then start the project by running the following commands: - -```bash -# install dependencies if you haven't done so in the previous step. -pnpm install - -# start running the project -pnpm dev -``` - -## Google Site Verification (optional) - -You can add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) by setting `site.googleVerification` in `astro-paper.config.ts`: - -```ts file="astro-paper.config.ts" -export default defineAstroPaperConfig({ - site: { - // ... - googleVerification: "your-google-site-verification-value", - }, - // ... -}); -``` - -> See [this discussion](https://github.com/satnaing/astro-paper/discussions/334#discussioncomment-10139247) for adding AstroPaper to the Google Search Console. - -## ๐Ÿงž Commands - -All commands are run from the root of the project, from a terminal: - -| Command | Action | -| :--------------- | :------------------------------------------------------------------------------------------------------------------------------- | -| `pnpm install` | Installs dependencies | -| `pnpm dev` | Starts local dev server at `localhost:4321` | -| `pnpm build` | Type-checks, builds the site, runs Pagefind indexing, and copies the index to `public/pagefind/` | -| `pnpm preview` | Preview your build locally, before deploying | -| `pnpm sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). | -| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` | - -## โœจ Feedback & Suggestions - -If you have any suggestions/feedback, you can contact me via [my email](mailto:satnaingdev+astropaper@gmail.com). Alternatively, feel free to open an issue if you find bugs or want to request new features. - -## ๐Ÿ“œ License - -Licensed under the MIT License, Copyright ยฉ 2026 - ---- - -Made with ๐Ÿค by [Sat Naing](https://satnaing.dev) ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors). +## ๐Ÿ’ป ๆœฌๅšๅฎข็”ฑQihanNXไฝฟ็”จAstroๆž„ๅปบ +#ๅฃฐๆ˜Ž๏ผš็”ฑไธป้ข˜Paper้ญ”ๆ”น่€Œๆฅ