mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +08:00
Delete src/content/posts/_releases directory
This commit is contained in:
GitHub
Binary file not shown.
|
Before Width: | Height: | Size: 821 KiB |
@@ -1,91 +0,0 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2023-01-30T15:57:52.737Z
|
||||
title: AstroPaper 2.0
|
||||
slug: astro-paper-2
|
||||
featured: false
|
||||
ogImage: https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png
|
||||
tags:
|
||||
- release
|
||||
description: AstroPaper with the enhancements of Astro v2. Type-safe markdown contents, bug fixes and better dev experience etc.
|
||||
---
|
||||
|
||||
Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. AstroPaper takes advantage of those cool features, especially Content Collections API.
|
||||
|
||||
<!--  -->
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Features & Changes
|
||||
|
||||
### Type-safe Frontmatters and Redefined Blog Schema
|
||||
|
||||
Frontmatter of AstroPaper 2.0 markdown contents are now type-safe thanks to Astro’s Content Collections. Blog schema is defined inside the `src/content/_schemas.ts` file.
|
||||
|
||||
### New Home for Blog contents
|
||||
|
||||
All the blog posts were moved from `src/contents` to `src/content/blog` directory.
|
||||
|
||||
### New Fetch API
|
||||
|
||||
Contents are now fetched with `getCollection` function. No relative path to the content needs to be specified anymore.
|
||||
|
||||
```ts
|
||||
// old content fetching method
|
||||
- const postImportResult = import.meta.glob<MarkdownInstance<Frontmatter>>(
|
||||
"../contents/**/**/*.md",);
|
||||
|
||||
// new content fetching method
|
||||
+ const postImportResult = await getCollection("blog");
|
||||
```
|
||||
|
||||
### Modified Search Logic for better Search Result
|
||||
|
||||
In the older version of AstroPaper, when someone search some article, the search criteria keys that will be searched are `title`, `description` and `headings` (heading means all the headings h1 ~ h6 of the blog post). In AstroPaper v2, only `title` and `description` will be searched as the user types.
|
||||
|
||||
### Renamed Frontmatter Properties
|
||||
|
||||
The following frontmatter properties are renamed.
|
||||
|
||||
| Old Names | New Names |
|
||||
| --------- | ----------- |
|
||||
| datetime | pubDatetime |
|
||||
| slug | postSlug |
|
||||
|
||||
### Default Tag for blog post
|
||||
|
||||
If a blog post doesn't have any tag (in other words, frontmatter property `tags` is not specified), the default tag `others` will be used for that blog post. But you can set the default tag in the `/src/content/_schemas.ts` file.
|
||||
|
||||
```ts
|
||||
// src/contents/_schemas.ts
|
||||
export const blogSchema = z.object({
|
||||
// ---
|
||||
// replace "others" with whatever you want
|
||||
tags: z.array(z.string()).default(["others"]),
|
||||
ogImage: z.string().optional(),
|
||||
description: z.string(),
|
||||
});
|
||||
```
|
||||
|
||||
### New Predefined Dark Color Scheme
|
||||
|
||||
AstroPaper v2 has a new dark color scheme (high contrast & low contrast) which is based on Astro's dark logo. Check out [this link](https://astro-paper.pages.dev/posts/predefined-color-schemes#astro-dark) for more info.
|
||||
|
||||
|
||||
|
||||
### Automatic Class Sorting
|
||||
|
||||
AstroPaper 2.0 includes automatic class sorting with [TailwindCSS Prettier plugin](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)
|
||||
|
||||
### Updated Docs & README
|
||||
|
||||
All the [#docs](https://astro-paper.pages.dev/tags/docs/) blog posts and [README](https://github.com/satnaing/astro-paper#readme) are updated for this AstroPaper v2.
|
||||
|
||||
## Bug Fixes
|
||||
|
||||
- fix broken tags in the Blog Post page
|
||||
- in a tag page, the last part of the breadcrumb is now updated to lower-case for consistency
|
||||
- exclude draft posts in a tag page
|
||||
- fix 'onChange value not updating issue' after a page reload
|
||||
@@ -1,173 +0,0 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2023-09-25T10:25:54.547Z
|
||||
title: AstroPaper 3.0
|
||||
slug: astro-paper-v3
|
||||
featured: false
|
||||
ogImage: https://github.com/satnaing/astro-paper/assets/53733092/1ef0cf03-8137-4d67-ac81-84a032119e3a
|
||||
tags:
|
||||
- release
|
||||
description: "AstroPaper Version 3: Elevating Your Web Experience with Astro v3 and Seamless View Transitions"
|
||||
---
|
||||
|
||||
We're excited to announce the release of AstroPaper v3, packed with new features, enhancements, and bug fixes to elevate your web development experience. Let's dive into the highlights of this release:
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Features & Changes
|
||||
|
||||
### Astro v3 Integration
|
||||
|
||||
<video autoplay loop="loop" muted="muted" plays-inline="true">
|
||||
<source src="https://github.com/satnaing/astro-paper/assets/53733092/18fdb604-1ca3-41a0-8372-1367759091ff" type="video/mp4">
|
||||
<!-- <source src="/assets/docs/astro-paper-v3-view-transitions-demo.mp4" type="video/mp4"> -->
|
||||
</video>
|
||||
|
||||
AstroPaper now fully supports [Astro v3](https://astro.build/blog/astro-3/), offering improved performance and rendering speed.
|
||||
|
||||
Besides, we've added support for Astro's [ViewTransitions API](https://docs.astro.build/en/guides/view-transitions/), allowing you to create captivating and dynamic transitions between views.
|
||||
|
||||
In the "Recent Section", only non-featured posts will be displayed to avoid duplications and better support for ViewTransitions API.
|
||||
|
||||
### Update OG Image Generation Logic
|
||||
|
||||
|
||||
|
||||
We've updated the logic for automatic OG image generation, making it even more reliable and efficient. Besides, it now supports special characters in post titles, ensuring accurate, flexible and eye-catching social media previews.
|
||||
|
||||
`SITE.ogImage` is now optional. If it is not specified, AstroPaper will automatically generate an OG image using `SITE.title`, `SITE.desc` and `SITE.website`
|
||||
|
||||
### Theme meta tag
|
||||
|
||||
The theme-color meta tag has been added to dynamically adapt to theme switches, ensuring a seamless user experience.
|
||||
|
||||
> Notice the difference at the top
|
||||
|
||||
**_AstroPaper v2 theme switch_**
|
||||
|
||||
<video autoplay loop="loop" muted="muted" plays-inline="true">
|
||||
<source src="https://github.com/satnaing/astro-paper/assets/53733092/3ab5a1e8-1891-4264-a5bb-0ded69143c1a" type="video/mp4">
|
||||
</video>
|
||||
|
||||
**_AstroPaper v3 theme switch_**
|
||||
|
||||
<video autoplay loop="loop" muted="muted" plays-inline="true">
|
||||
<source src="https://github.com/satnaing/astro-paper/assets/53733092/8ac9deb8-d1f8-4029-86bd-6aa0def380b4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
## Other Changes
|
||||
|
||||
### Astro Prettier Plugin
|
||||
|
||||
Astro Prettier Plugin is installed out-of-the-box in order to keep the project tidy and organized.
|
||||
|
||||
### Minor Style Changes
|
||||
|
||||
The single-line code block wrapping issue has been solved, making your code snippets look pristine.
|
||||
|
||||
Update nav style CSS to allow adding more nav links to the navigation.
|
||||
|
||||
## Upgrade to AstroPaper v3
|
||||
|
||||
> This section is only for those who want to upgrade AstroPaper v3 from the older versions.
|
||||
|
||||
This section will help you migrate from AstroPaper v2 to AstroPaper v3.
|
||||
|
||||
Before reading the rest of the section, you might also want to check [this article](https://astro-paper.pages.dev/posts/how-to-update-dependencies/) for upgrading dependencies and AstroPaper.
|
||||
|
||||
## Option 1: Fresh Restart (recommended)
|
||||
|
||||
In this release, a lot of changes have been made\_ replacing old Astro APIs with newer APIs, bug fixes, new features etc. Thus, if you are someone who didn't make customization very much, you should follow this approach.
|
||||
|
||||
**_Step 1: Keep all your updated files_**
|
||||
|
||||
It's important to keep all the files which have been already updated. These files include
|
||||
|
||||
- `/src/config.ts` (didn't touch in v3)
|
||||
- `/src/styles/base.css` (minor changes in v3; mentioned below)
|
||||
- `/src/assets/` (didn't touch in v3)
|
||||
- `/public/assets/` (didn't touch in v3)
|
||||
- `/content/blog/` (it's your blog content directory 🤷🏻♂️)
|
||||
- Any other customizations you've made.
|
||||
|
||||
```css
|
||||
/* file: /src/styles/base.css */
|
||||
@layer base {
|
||||
/* Other Codes */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-skin-card-muted;
|
||||
}
|
||||
|
||||
/* Old code
|
||||
code {
|
||||
white-space: pre;
|
||||
overflow: scroll;
|
||||
}
|
||||
*/
|
||||
|
||||
/* New code */
|
||||
code,
|
||||
blockquote {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
pre > code {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* other codes */
|
||||
}
|
||||
```
|
||||
|
||||
**_Step 1: Replace everything else with AstroPaper v3_**
|
||||
|
||||
In this step, replace everything\_ except above files/directories (plus your customized files/directories)\_ with AstroPaper v3.
|
||||
|
||||
**_Step 3: Schema Updates_**
|
||||
|
||||
Keep in mind that `/src/content/_schemas.ts` has been replaced with `/src/content/config.ts`.
|
||||
|
||||
Besides, there is no longer `BlogFrontmatter` type exported from `/src/content/config.ts`.
|
||||
|
||||
Therefore, all the `BlogFrontmatter` type inside files need to be updated with `CollectionEntry<"blog">["data"]`.
|
||||
|
||||
For example: `src/components/Card.tsx`
|
||||
|
||||
```ts
|
||||
// AstroPaper v2
|
||||
import type { BlogFrontmatter } from "@content/_schemas";
|
||||
|
||||
export interface Props {
|
||||
href?: string;
|
||||
frontmatter: BlogFrontmatter;
|
||||
secHeading?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
// AstroPaper v3
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export interface Props {
|
||||
href?: string;
|
||||
frontmatter: CollectionEntry<"blog">["data"];
|
||||
secHeading?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
## Option 2: Upgrade using Git
|
||||
|
||||
This approach is not recommended for most users. You should do the "Option 1" if you can. Only do this if you know how to resolve merge conflicts and you know what you're doing.
|
||||
|
||||
Actually, I've already written a blog post for this case and you can check out [here](https://astro-paper.pages.dev/posts/how-to-update-dependencies/#updating-astropaper-using-git).
|
||||
|
||||
## Outro
|
||||
|
||||
Ready to explore the exciting new features and improvements in AstroPaper v3? Start [using AstroPaper](https://github.com/satnaing/astro-paper) now.
|
||||
|
||||
For other bug fixes and integration updates, check out the [release notes](https://github.com/satnaing/astro-paper/releases/tag/v3.0.0) to learn more.
|
||||
|
||||
If you encounter any bugs or face difficulties during the upgrade process, please feel free to open an issue or start a discussion on [GitHub](https://github.com/satnaing/astro-paper).
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2024-01-04T09:30:41.816Z
|
||||
title: AstroPaper 4.0
|
||||
slug: "astro-paper-v4"
|
||||
featured: false
|
||||
ogImage: ../../../assets/images/AstroPaper-v4.png
|
||||
tags:
|
||||
- release
|
||||
description: "AstroPaper v4: ensuring a smoother and more feature-rich blogging experience."
|
||||
---
|
||||
|
||||
Hello everyone! Wishing you a happy New Year 🎉 and all the best for 2024! We're excited to announce the release of AstroPaper v4, a significant update that introduces a range of new features, improvements, and bug fixes to elevate your blogging experience. A big thank you to all the contributors for their valuable input and efforts in making version 4 possible!
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Major Changes
|
||||
|
||||
### Upgrade to Astro v4 [#202](https://github.com/satnaing/astro-paper/pull/202)
|
||||
|
||||
AstroPaper now leverages the power and capabilities of Astro v4. However, it’s a subtle upgrade and won’t break most Astro users.
|
||||
|
||||
|
||||
|
||||
### Replace `postSlug` with Astro Content `slug` [#197](https://github.com/satnaing/astro-paper/pull/197)
|
||||
|
||||
The `postSlug` in the blog content schema is no longer available in AstroPaper v4. Initially Astro doesn't have a `slug` mechanism and thus we have to figure it out on our own. Since Astro v3, it supports content collection and slug features. Now, we believe it's time to adopt Astro's out-of-the-box `slug` feature.
|
||||
|
||||
**_file: src/content/blog/astro-paper-4.md_**
|
||||
|
||||
```bash
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2024-01-01T04:35:33.428Z
|
||||
title: AstroPaper 4.0
|
||||
slug: "astro-paper-v4" # if slug is not specified, it will be 'astro-paper-4' (file name).
|
||||
# slug: "" ❌ cannot be an empty string
|
||||
---
|
||||
```
|
||||
|
||||
The behavior of the `slug` is slightly different now. In the previous versions of AstroPaper, if the `postSlug` is not specified in a blog post (markdown file), the title of that blog post would be slugified and used as the `slug`. However, in AstroPaper v4, if the `slug` field is not specified, the markdown file name will be used as the `slug`. One thing to keep in mind is that the `slug` field can be omitted, but it cannot be an empty string (slug: "" ❌).
|
||||
|
||||
If you're upgrading AstroPaper from v3 to v4, make sure to replace `postSlug` in your `src/content/blog/*.md` files with `slug`.
|
||||
|
||||
## New Features
|
||||
|
||||
### Add code-snippets for content creation [#206](https://github.com/satnaing/astro-paper/pull/206)
|
||||
|
||||
AstroPaper now includes VSCode snippets for new blog posts, eliminating the need for manual copy/pasting of the frontmatter and content structure (table of contents, heading, excerpt, etc.).
|
||||
|
||||
Read more about VSCode Snippets [here](https://code.visualstudio.com/docs/editor/userdefinedsnippets#:~:text=In%20Visual%20Studio%20Code%2C%20snippets,Snippet%20in%20the%20Command%20Palette).
|
||||
|
||||
<video autoplay muted="muted" controls plays-inline="true" class="border border-skin-line">
|
||||
<source src="https://github.com/satnaing/astro-paper/assets/53733092/136f1903-bade-40a2-b6bb-285a3c726350" type="video/mp4">
|
||||
</video>
|
||||
|
||||
### Add Modified Datetime in Blog Posts [#195](https://github.com/satnaing/astro-paper/pull/195)
|
||||
|
||||
Keep readers informed about the latest updates by displaying the modified datetime in blog posts. This not only instills user trust in the freshness of the articles but also contributes to improved SEO for the blog.
|
||||
|
||||
|
||||
|
||||
You can add a `modDatetime` to your blog post if you've made modifications. Now, the sorting behavior of the posts is slightly different. All posts are sorted by both `pubDatetime` and `modDatetime`. If a post has both a `pubDatetime` and `modDatetime`, its sorting position will be determined by the `modDatetime`. If not, only `pubDatetime` will be considered to determine the post's sorting order.
|
||||
|
||||
### Implement Back-to-Top Button [#188](https://github.com/satnaing/astro-paper/pull/188)
|
||||
|
||||
Enhance user navigation on your blog detail post with the newly implemented back-to-top button.
|
||||
|
||||
|
||||
|
||||
### Add Pagination in Tag Posts [#201](https://github.com/satnaing/astro-paper/pull/201)
|
||||
|
||||
Improve content organization and navigation with the addition of pagination in tag posts, making it easier for users to explore related content. This ensures that if a tag has many posts, readers won't be overwhelmed by all the tag-related posts.
|
||||
|
||||
<video autoplay loop="loop" muted="muted" plays-inline="true" class="border border-skin-line">
|
||||
<source src="https://github.com/satnaing/astro-paper/assets/53733092/9bad87f5-dcf5-4b79-b67a-d6c7244cd616" type="video/mp4">
|
||||
</video>
|
||||
|
||||
### Dynamically Generate robots.txt [#130](https://github.com/satnaing/astro-paper/pull/130)
|
||||
|
||||
AstroPaper v4 now dynamically generates the robots.txt file, giving you more control over search engine indexing and web crawling. Besides, sitemap URL will also be added inside `robot.txt` file.
|
||||
|
||||
### Add Docker-Compose File [#174](https://github.com/satnaing/astro-paper/pull/174)
|
||||
|
||||
Managing your AstroPaper environment is now easier than ever with the addition of a Docker-Compose file, simplifying deployment and configuration.
|
||||
|
||||
## Refactoring & Bug Fixes
|
||||
|
||||
### Replace Slugified Title with Unslugified Tag Name [#198](https://github.com/satnaing/astro-paper/pull/198)
|
||||
|
||||
To improve clarity, user experience and SEO, titles (`Tag: some-tag`) in tag page are no longer slugified (`Tag: Some Tag`).
|
||||
|
||||
|
||||
|
||||
### Implement 100svh for Min-Height ([79d569d](https://github.com/satnaing/astro-paper/commit/79d569d053036f2113519f41b0d257523d035b76))
|
||||
|
||||
We've updated the min-height on the body to use 100svh, offering a better UX for mobile users.
|
||||
|
||||
### Update Site URL as Single Source of Truth [#143](https://github.com/satnaing/astro-paper/pull/143)
|
||||
|
||||
The site URL is now a single source of truth, streamlining configuration and avoiding inconsistencies. Read more at this [PR](https://github.com/satnaing/astro-paper/pull/143) and its related issue(s).
|
||||
|
||||
### Solve Invisible Text Code Block Issue in Light Mode [#163](https://github.com/satnaing/astro-paper/pull/163)
|
||||
|
||||
We've fixed the invisible text code block issue in light mode.
|
||||
|
||||
### Decode Unicode Tag Characters in Breadcrumb [#175](https://github.com/satnaing/astro-paper/pull/175)
|
||||
|
||||
The last part of Tag in the breadcrumb is now decoded, making non-English Unicode characters display better.
|
||||
|
||||
### Update LOCALE Config to Cover Overall Locales ([cd02b04](https://github.com/satnaing/astro-paper/commit/cd02b047d2b5e3b4a2940c0ff30568cdebcec0b8))
|
||||
|
||||
The LOCALE configuration has been updated to cover a broader range of locales, catering to a more diverse audience.
|
||||
|
||||
## Outtro
|
||||
|
||||
We believe these updates will significantly elevate your AstroPaper experience. Thank you to everyone who contributed, solved issues, and gave stars to AstroPaper. We look forward to seeing the amazing content you create with AstroPaper v4!
|
||||
|
||||
Happy Blogging!
|
||||
|
||||
[Sat Naing](https://satnaing.dev) <br/>
|
||||
Creator of AstroPaper
|
||||
@@ -1,101 +0,0 @@
|
||||
---
|
||||
pubDatetime: 2025-03-08T08:18:19.693Z
|
||||
title: AstroPaper 5.0
|
||||
slug: astro-paper-v5
|
||||
featured: false
|
||||
ogImage: ../../../assets/images/AstroPaper-v5.png
|
||||
tags:
|
||||
- release
|
||||
description: "AstroPaper v5: keep the clean look, updates under the hood."
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Major Changes
|
||||
|
||||
### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455)
|
||||
|
||||
AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it.
|
||||
|
||||
### Tailwind v4
|
||||
|
||||
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`.
|
||||
|
||||
Due to the new behavior in TailwindCSS v4, styles inside `<style>` blocks within components have been removed and replaced with inline Tailwind classes.
|
||||
|
||||
Additionally, the color palette across the UI has been updated. The new palette now consists of only five colors:
|
||||
|
||||
```css
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--background: #fdfdfd;
|
||||
--foreground: #282728;
|
||||
--accent: #006cac;
|
||||
--muted: #e6e6e6;
|
||||
--border: #ece9e9;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #ff6b01;
|
||||
--muted: #343f60bf;
|
||||
--border: #ab4b08;
|
||||
}
|
||||
```
|
||||
|
||||
### Remove React + Fuse.js in favor of Pagefind search
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
The idea of using Pagefind in dev mode was inspired by [this blog post](https://chrispennington.blog/blog/pagefind-static-search-for-astro-sites/).
|
||||
|
||||
### Updated import alias
|
||||
|
||||
The import alias has been updated from `@directory` to `@/directory`, which means you now have to import like this:
|
||||
|
||||
```astro
|
||||
---
|
||||
import { slugifyStr } from "@/utils/slugify";
|
||||
import IconHash from "@/assets/icons/IconHash.svg";
|
||||
---
|
||||
```
|
||||
|
||||
### Move to `pnpm`
|
||||
|
||||
AstroPaper has switched from `npm` to `pnpm`, which offers faster and more efficient package management.
|
||||
|
||||
### Replace icons/svg with Astro's Svg Component
|
||||
|
||||
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.
|
||||
|
||||
### Separate Constants and Config
|
||||
|
||||
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.
|
||||
|
||||
## Other notable changes
|
||||
|
||||
- The blog posts directory has been updated from `src/content/blog/` to `src/data/blog/`.
|
||||
- Collection definitions file (`src/content/config.ts`) is now replaced with `src/content.config.ts`.
|
||||
- Various dependencies have been upgraded for improved performance and security.
|
||||
- Removed `IBM Plex Mono` font and switched to the default system mono font.
|
||||
- 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.
|
||||
- There are some minor styles and layout changes as well.
|
||||
|
||||
## Outtro
|
||||
|
||||
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!
|
||||
|
||||
Feel free to explore the changes and share your thoughts. As always, thank you for your support!
|
||||
|
||||
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.
|
||||
|
||||
Enjoy!
|
||||
|
||||
[Sat Naing](https://satnaing.dev/)
|
||||
@@ -1,199 +0,0 @@
|
||||
---
|
||||
pubDatetime: 2026-05-17T07:15:45.792Z
|
||||
title: AstroPaper 6.0
|
||||
slug: astro-paper-v6
|
||||
featured: true
|
||||
ogImage: assets/AstroPaper-v6.png
|
||||
tags:
|
||||
- release
|
||||
description: "AstroPaper v6: a from-scratch rewrite on Astro v6, Tailwind v4, and a new config system."
|
||||
---
|
||||
|
||||
AstroPaper v6 is a complete rewrite built on Astro v6, Tailwind CSS v4, and TypeScript v6. This release replaces the legacy `SITE` / `constants.ts` configuration with a single unified config file and introduces several structural improvements across the codebase.
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Major Changes
|
||||
|
||||
### Upgrade to Astro v6
|
||||
|
||||
AstroPaper now ships with Astro v6.3, which includes:
|
||||
|
||||
- **Stable Content Layer API** — `glob()` loader replaces the old `type: "content"` collection pattern.
|
||||
- **Stable Fonts API** — `experimental.fonts` has graduated to a top-level `fonts` key in `astro.config.ts`.
|
||||
- **TypeScript v6** — full support for the latest TypeScript compiler.
|
||||
|
||||
### New unified config system
|
||||
|
||||
The flat `SITE` object in `src/config.ts` and the separate `constants.ts` file have been replaced by a single `astro-paper.config.ts` at the project root. Use `defineAstroPaperConfig()` for full IntelliSense:
|
||||
|
||||
```ts file="astro-paper.config.ts"
|
||||
import { defineAstroPaperConfig } from "./src/types/config";
|
||||
|
||||
export default defineAstroPaperConfig({
|
||||
site: {
|
||||
url: "https://your-site.com/",
|
||||
title: "AstroPaper",
|
||||
description: "…",
|
||||
author: "Your Name",
|
||||
lang: "en",
|
||||
timezone: "UTC",
|
||||
googleVerification: "your-verification-value",
|
||||
},
|
||||
posts: {
|
||||
perPage: 4,
|
||||
perIndex: 4,
|
||||
scheduledPostMargin: 15 * 60 * 1000, // ms
|
||||
},
|
||||
features: {
|
||||
lightAndDarkMode: true,
|
||||
dynamicOgImage: true,
|
||||
showArchives: true,
|
||||
showBackButton: true,
|
||||
editPost: { enabled: true, url: "https://github.com/…/edit/main/" },
|
||||
search: "pagefind",
|
||||
},
|
||||
socials: [{ name: "github", url: "https://github.com/…" }],
|
||||
shareLinks: [{ name: "x", url: "https://x.com/intent/post?url=" }],
|
||||
});
|
||||
```
|
||||
|
||||
All options — site metadata, pagination, feature flags, social links, and share links — now live in one file.
|
||||
|
||||
### Stable Fonts API
|
||||
|
||||
Font configuration has graduated from `experimental.fonts` to a top-level `fonts` key in `astro.config.ts`, matching Astro v6's stable API:
|
||||
|
||||
```ts file="astro.config.ts"
|
||||
export default defineConfig({
|
||||
fonts: [
|
||||
{
|
||||
name: "Google Sans Code",
|
||||
cssVariable: "--font-google-sans-code",
|
||||
provider: fontProviders.google(),
|
||||
weights: [300, 400, 500, 600, 700],
|
||||
styles: ["normal", "italic"],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### MDX support
|
||||
|
||||
`@astrojs/mdx` is now included. Posts can use the `.mdx` extension to embed components, use JSX expressions, and import from other files. The content loader pattern `**/[^_]*.{md,mdx}` picks up both formats automatically.
|
||||
|
||||
### Content collection restructure
|
||||
|
||||
Blog posts have moved from `src/data/blog/` to `src/content/posts/`, aligning with Astro conventions. A new `pages` collection at `src/content/pages/` covers standalone pages (About, etc.). The `posts` collection uses Astro's `glob()` loader — `defineCollection` with `type: "content"` is no longer used:
|
||||
|
||||
```ts file="src/content.config.ts"
|
||||
const posts = defineCollection({
|
||||
loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/posts" }),
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
author: z.string(),
|
||||
pubDatetime: z.date(),
|
||||
title: z.string(),
|
||||
tags: z.array(z.string()).default(["others"]),
|
||||
description: z.string(),
|
||||
// …
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
### Design token system
|
||||
|
||||
The 5-token color palette from v5 has grown to 7 tokens in `src/styles/theme.css`. Tokens are defined as CSS custom properties and registered to Tailwind v4 via `@theme inline`:
|
||||
|
||||
```css file="src/styles/theme.css"
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--background: #fdfdfd;
|
||||
--foreground: #282728;
|
||||
--accent: #006cac;
|
||||
--accent-foreground: #ffffff;
|
||||
--muted: #e6e6e6;
|
||||
--muted-foreground: #6b7280;
|
||||
--border: #ece9e9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #ff6b01;
|
||||
--accent-foreground: #ffffff;
|
||||
--muted: #343f60;
|
||||
--muted-foreground: #afb9ca;
|
||||
--border: #ab4b08;
|
||||
}
|
||||
```
|
||||
|
||||
`theme.css` is a separate file imported by `global.css`. The two new tokens are `--accent-foreground` and `--muted-foreground`.
|
||||
|
||||
### i18n string extraction
|
||||
|
||||
All UI strings are extracted to `src/i18n/lang/en.ts` with the `UIStrings` interface. Adding a new language requires only a new file in `src/i18n/lang/`:
|
||||
|
||||
```ts file="src/i18n/lang/en.ts"
|
||||
export default {
|
||||
nav: { home: "Home", posts: "Posts" /* … */ },
|
||||
post: { publishedAt: "Published at" /* … */ },
|
||||
/* … */
|
||||
} satisfies UIStrings;
|
||||
```
|
||||
|
||||
The `tplStr()` helper handles parameterized strings so translators can reorder tokens freely.
|
||||
|
||||
### Base path and subdirectory deploy support
|
||||
|
||||
All internal links go through `getRelativeLocaleUrl()` and the `withBase.ts` helpers (`stripLocale`, `stripBase`, `getAssetPath`). Deploying to a subdirectory (e.g. `/astro-paper`) works without manual link updates.
|
||||
|
||||
### Google Site Verification via config
|
||||
|
||||
The preferred way to set Google Site Verification is `site.googleVerification` in `astro-paper.config.ts`:
|
||||
|
||||
```ts file="astro-paper.config.ts"
|
||||
export default defineAstroPaperConfig({
|
||||
site: {
|
||||
// …
|
||||
googleVerification: "your-google-site-verification-value",
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
The `PUBLIC_GOOGLE_SITE_VERIFICATION` environment variable is still supported as a fallback for cases where you prefer not to commit the value to the config file.
|
||||
|
||||
```bash file=".env"
|
||||
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value
|
||||
```
|
||||
|
||||
When both are set, `site.googleVerification` takes precedence.
|
||||
|
||||
## Other Notable Changes
|
||||
|
||||
- Updated and renamed helper/util functions.
|
||||
- Adjacent post navigation (prev/next) is now computed once in `getStaticPaths` and passed as props — the component no longer fetches all posts per page.
|
||||
- `_components/` scoping: post-specific components live under `pages/posts/[...slug]/_components/` and do not pollute the global `src/components/` directory.
|
||||
- `PostLayout.astro` handles structured data and SEO only — post page logic lives in the page file itself.
|
||||
|
||||
## Summary
|
||||
|
||||
AstroPaper v6 retains its minimal, clean look while rebuilding the internals around Astro v6's new primitives. The config system is simpler, the codebase is easier to navigate, and the theme ships ready for i18n and subdirectory deployments out of the box.
|
||||
|
||||
## See also
|
||||
|
||||
- [Predefined Color Schemes](/posts/predefined-color-schemes/)
|
||||
- [How to configure AstroPaper theme](/posts/how-to-configure-astropaper-theme/)
|
||||
- [Adding new posts in AstroPaper](/posts/adding-new-posts-in-astropaper-theme)
|
||||
Reference in New Issue
Block a user