You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* docs: update astro-paper theme config docs
* docs: update adding-new-post blog post
* docs: remove outdated posts and update featured posts
* fix: update broken image link in astro-paper-4 blog
* docs: add a blog post for astro-paper-v5
* docs: update README for AstroPaper v5
* fix: update blog post formatting
Copy file name to clipboardExpand all lines: README.md
+32-42Lines changed: 32 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,7 @@
9
9
10
10
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).
11
11
12
-
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.
13
-
14
-
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.
12
+
Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
15
13
16
14
## 🔥 Features
17
15
@@ -46,55 +44,52 @@ Inside of AstroPaper, you'll see the following folders and files:
46
44
/
47
45
├── public/
48
46
│ ├── assets/
49
-
│ │ └── logo.svg
50
-
│ │ └── logo.png
47
+
| ├── pagefind/ # auto-generated when build
51
48
│ └── favicon.svg
52
49
│ └── astropaper-og.jpg
53
-
│ └── robots.txt
50
+
│ └── favicon.svg
54
51
│ └── toggle-theme.js
55
52
├── src/
56
53
│ ├── assets/
57
-
│ │ └── socialIcons.ts
54
+
│ │ └── icons/
55
+
│ │ └── images/
58
56
│ ├── components/
59
-
│ ├── content/
60
-
│ │ | blog/
61
-
│ │ | └── some-blog-posts.md
62
-
│ │ └── config.ts
57
+
│ ├── data/
58
+
│ │ └── blog/
59
+
│ │ └── some-blog-posts.md
63
60
│ ├── layouts/
64
61
│ └── pages/
65
62
│ └── styles/
66
63
│ └── utils/
67
64
│ └── config.ts
68
-
│ └── types.ts
69
-
└── package.json
65
+
│ └── constants.ts
66
+
│ └── content.config.ts
67
+
└── astro.config.ts
70
68
```
71
69
72
70
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
71
74
72
Any static assets, like images, can be placed in the `public/` directory.
75
73
76
-
All blog posts are stored in `src/content/blog` directory.
74
+
All blog posts are stored in `src/data/blog` directory.
77
75
78
76
## 📖 Documentation
79
77
80
78
Documentation can be read in two formats\__markdown_ & _blog post_.
- 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/)
description: "AstroPaper v5: keep the clean look, updates under the hood."
10
+
---
11
+
12
+
At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood.
### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455)
21
+
22
+
AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it.
23
+
24
+
### Tailwind v4
25
+
26
+
AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The `tailwind.config.js` file has been removed, and now all the configuration is located within the `src/styles/global.css` file. Typography-related styles have been extracted and moved to `src/styles/typography.css`.
27
+
28
+
Due to the new behavior in TailwindCSS v4, styles inside `<style>` blocks within components have been removed and replaced with inline Tailwind classes.
29
+
30
+
Additionally, the color palette across the UI has been updated. The new palette now consists of only five colors:
31
+
32
+
```css
33
+
:root,
34
+
html[data-theme="light"] {
35
+
--background: #fdfdfd;
36
+
--foreground: #282728;
37
+
--accent: #006cac;
38
+
--muted: #e6e6e6;
39
+
--border: #ece9e9;
40
+
}
41
+
42
+
html[data-theme="dark"] {
43
+
--background: #212737;
44
+
--foreground: #eaedf3;
45
+
--accent: #ff6b01;
46
+
--muted: #343f60bf;
47
+
--border: #ab4b08;
48
+
}
49
+
```
50
+
51
+
### Remove React + Fuse.js in favor of Pagefind search
52
+
53
+
In previous versions, React.js and Fuse.js were used for search functionality and OG image generation. In AstroPaper v5, React.js has been removed and replaced with [Pagefind](https://pagefind.app/), a static site search tool.
54
+
55
+
The search experience is almost identical to previous versions, but now all contents, not just titles and descriptions, are indexed and searchable, thanks to Pagefind.
56
+
57
+
The idea of using Pagefind in dev mode was inspired by [this blog post](https://chrispennington.blog/blog/pagefind-static-search-for-astro-sites/).
58
+
59
+
### Updated import alias
60
+
61
+
The import alias has been updated from `@directory` to `@/directory`, which means you now have to import like this:
62
+
63
+
```astro
64
+
---
65
+
import { slugifyStr } from "@/utils/slugify";
66
+
import IconHash from "@/assets/icons/IconHash.svg";
67
+
---
68
+
```
69
+
70
+
### Move to `pnpm`
71
+
72
+
AstroPaper has switched from `npm` to `pnpm`, which offers faster and more efficient package management.
73
+
74
+
### Replace icons/svg with Astro's Svg Component
75
+
76
+
AstroPaper v5 replaces inline SVGs with Astro’s experimental [SVG Component](https://docs.astro.build/en/reference/experimental-flags/svg/). This update reduces the need for predefined SVG code in the `socialIcons` object, making the codebase cleaner and more maintainable.
77
+
78
+
### Separate Constants and Config
79
+
80
+
The project structure has been reorganized. The `src/config.ts` file now only contains the `SITE` object, which holds the main configuration for the project. All constants, such as `LOCALE`, `SOCIALS`, and `SHARE_LINKS`, have been moved to the `src/constants.ts` file.
81
+
82
+
## Other notable changes
83
+
84
+
- The blog posts directory has been updated from `src/content/blog/` to `src/data/blog/`.
85
+
- Conllection definitions file (`src/content/config.ts`) is now replaced with `src/content.config.ts`.
86
+
- Various dependencies have been upgraded for improved performance and security.
87
+
- Removed `IBM Plex Mono` font and switched to the default system mono font.
88
+
- The `Go back` button logic has been updated. Now, instead of triggering the browser's history API, AstroPaper v5 uses the browser session to temporarily store the back URL. If no back URL exists in the session, it will redirect to the homepage.
89
+
- There are some minor styles and layout changes as well.
90
+
91
+
## Outtro
92
+
93
+
AstroPaper v5 brings many changes, but the core experience remains the same. Enjoy a smoother, more efficient blogging platform while keeping the clean and minimal design that AstroPaper is known for!
94
+
95
+
Feel free to explore the changes and share your thoughts. As always, thank you for your support!
96
+
97
+
If you enjoy this theme, please consider starring the repo. You can also support me via GitHub Sponsors or you can buy me a coffee if you'd like. However, of course, these actions are entirely optional and not required.
0 commit comments