diff --git a/.gitignore b/.gitignore
index 5e2b1f9..81d1da9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,8 @@ node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+.pnpm-store
+.hist
pnpm-debug.log*
# environment variables
diff --git a/src/data/blog/adding-new-post.md b/src/data/blog/adding-new-post.md
deleted file mode 100644
index 24aea57..0000000
--- a/src/data/blog/adding-new-post.md
+++ /dev/null
@@ -1,249 +0,0 @@
----
-author: Sat Naing
-pubDatetime: 2022-09-23T15:22:00Z
-modDatetime: 2025-06-13T16:52:45.934Z
-title: Adding new posts in AstroPaper theme
-slug: adding-new-posts-in-astropaper-theme
-featured: true
-draft: false
-tags:
- - docs
-description:
- Some rules & recommendations for creating or adding new posts using AstroPaperr
- theme.
----
-
-Here are some rules/recommendations, tips & ticks for creating new posts in AstroPaper blog theme.
-
-
-
-
- Photo by Pixabay
-
-
-
-## Table of contents
-
-## Creating a Blog Post
-
-To write a new blog post, create a markdown file inside the `src/data/blog/` directory.
-
-> Prior to AstroPaper v5.1.0, all blog posts had to be in `src/data/blog/`, meaning you couldn't organize them into subdirectories.
-
-Starting from AstroPaper v5.1.0, you can now organize blog posts into subdirectories, making it easier to manage your content.
-
-For example, if you want to group posts under `2025`, you can place them in `src/data/blog/2025/`. This also affects the post URL, so `src/data/blog/2025/example-post.md` will be available at `/posts/2025/example-post`.
-
-If you don’t want subdirectories to affect the post URL, just prefix the folder name with an underscore `_`.
-
-```bash
-# Example: blog post structure and URLs
-src/data/blog/very-first-post.md -> mysite.com/posts/very-first-post
-src/data/blog/2025/example-post.md -> mysite.com/posts/2025/example-post
-src/data/blog/_2026/another-post.md -> mysite.com/posts/another-post
-src/data/blog/docs/_legacy/how-to.md -> mysite.com/posts/docs/how-to
-src/data/blog/Example Dir/Dummy Post.md -> mysite.com/posts/example-dir/dummy-post
-```
-
-> 💡 Tip: You can override a blog post’s slug in the frontmatter as well. See the next section for more details.
-
-If the subdirectory URL doesn’t appear in the build output, remove node_modules, reinstall packages, and then rebuild.
-
-## Frontmatter
-
-Frontmatter is the main place to store some important information about the blog post (article). Frontmatter lies at the top of the article and is written in YAML format. Read more about frontmatter and its usage in [astro documentation](https://docs.astro.build/en/guides/markdown-content/).
-
-Here is the list of frontmatter property for each post.
-
-| Property | Description | Remark |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
-| **_title_** | Title of the post. (h1) | required\* |
-| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* |
-| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* |
-| **_modDatetime_** | Modified datetime in ISO 8601 format. (only add this property when a blog post is modified) | optional |
-| **_author_** | Author of the post. | default = SITE.author |
-| **_slug_** | Slug for the post. This field is optional. | default = slugified file name |
-| **_featured_** | Whether or not display this post in featured section of home page | default = false |
-| **_draft_** | Mark this post 'unpublished'. | default = false |
-| **_tags_** | Related keywords for this post. Written in array yaml format. | default = others |
-| **_ogImage_** | OG image of the post. Useful for social media sharing and SEO. This can be a remote URL or an image path relative to current folder. | default = `SITE.ogImage` or generated OG image |
-| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source. | default = `Astro.site` + `Astro.url.pathname` |
-| **_hideEditPost_** | Hide editPost button under blog title. This applies only to the current blog post. | default = false |
-| **_timezone_** | Specify a timezone in IANA format for the current blog post. This will override the `SITE.timezone` config for the current blog post. | default = `SITE.timezone` |
-
-> Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
-
-Only `title`, `description` and `pubDatetime` fields in frontmatter must be specified.
-
-Title and description (excerpt) are important for search engine optimization (SEO) and thus AstroPaper encourages to include these in blog posts.
-
-`slug` is the unique identifier of the url. Thus, `slug` must be unique and different from other posts. The whitespace of `slug` should to be separated with `-` or `_` but `-` is recommended. Slug is automatically generated using the blog post file name. However, you can define your `slug` as a frontmatter in your blog post.
-
-For example, if the blog file name is `adding-new-post.md` and you don't specify the slug in your frontmatter, Astro will automatically create a slug for the blog post using the file name. Thus, the slug will be `adding-new-post`. But if you specify the `slug` in the frontmatter, this will override the default slug. You can read more about this in [Astro Docs](https://docs.astro.build/en/guides/content-collections/#defining-custom-slugs).
-
-If you omit `tags` in a blog post (in other words, if no tag is specified), the default tag `others` will be used as a tag for that post. You can set the default tag in the `content.config.ts` file.
-
-```ts file="src/content.config.ts"
-export const blogSchema = z.object({
- // ...
- draft: z.boolean().optional(),
- // [!code highlight:1]
- tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want
- // ...
-});
-```
-
-### Sample Frontmatter
-
-Here is the sample frontmatter for a post.
-
-```yaml file="src/data/blog/sample-post.md"
----
-title: The title of the post
-author: your name
-pubDatetime: 2022-09-21T05:17:19Z
-slug: the-title-of-the-post
-featured: true
-draft: false
-tags:
- - some
- - example
- - tags
-ogImage: ../../assets/images/example.png # src/assets/images/example.png
-# ogImage: "https://example.org/remote-image.png" # remote URL
-description: This is the example description of the example post.
-canonicalURL: https://example.org/my-article-was-already-posted-here
----
-```
-
-## Adding table of contents
-
-By default, a post (article) does not include any table of contents (toc). To include toc, you have to specify it in a specific way.
-
-Write `Table of contents` in h2 format (## in markdown) and place it where you want it to be appeared on the post.
-
-For instance, if you want to place your table of contents just under the intro paragraph (like I usually do), you can do that in the following way.
-
-
-```md
----
-# frontmatter
----
-
-Here are some recommendations, tips & ticks for creating new posts in AstroPaper blog theme.
-
-
-## Table of contents
-
-
-```
-
-
-## Headings
-
-There's one thing to note about headings. The AstroPaper blog posts use title (title in the frontmatter) as the main heading of the post. Therefore, the rest of the heading in the post should be using h2 \~ h6.
-
-This rule is not mandatory, but highly recommended for visual, accessibility and SEO purposes.
-
-## Syntax Highlighting
-
-AstroPaper uses [Shiki](https://shiki.style/) as the default syntax highlighting. Starting from AstroPaper v5.4, [@shikijs/transformers](https://shiki.style/packages/transformers) is used to enhance better fenced code blocks. If you don't want to use it, you can simply remove it like this
-
-```bash
-pnpm remove @shikijs/transformers
-```
-
-```js file="astro.config.ts"
-// ...
-// [!code --:5]
-import {
- transformerNotationDiff,
- transformerNotationHighlight,
- transformerNotationWordHighlight,
-} from "@shikijs/transformers";
-
-export default defineConfig({
- // ...
- markdown: {
- remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
- shikiConfig: {
- // For more themes, visit https://shiki.style/themes
- themes: { light: "min-light", dark: "night-owl" },
- defaultColor: false,
- wrap: false,
- transformers: [
- transformerFileName(),
- // [!code --:3]
- transformerNotationHighlight(),
- transformerNotationWordHighlight(),
- transformerNotationDiff({ matchAlgorithm: "v3" }),
- ],
- },
- },
- // ...
-}
-```
-
-## Storing Images for Blog Content
-
-Here are two methods for storing images and displaying them inside a markdown file.
-
-> Note! If it's a requirement to style optimized images in markdown you should [use MDX](https://docs.astro.build/en/guides/images/#images-in-mdx-files).
-
-### Inside `src/assets/` directory (recommended)
-
-You can store images inside `src/assets/` directory. These images will be automatically optimized by Astro through [Image Service API](https://docs.astro.build/en/reference/image-service-reference/).
-
-You can use relative path or alias path (`@/assets/`) to serve these images.
-
-Example: Suppose you want to display `example.jpg` whose path is `/src/assets/images/example.jpg`.
-
-```md
-
-
-
-
-
-
-
-
-
-```
-
-> Technically, you can store images inside any directory under `src`. In here, `src/assets` is just a recommendation.
-
-### Inside `public` directory
-
-You can store images inside the `public` directory. Keep in mind that images stored in the `public` directory remain untouched by Astro, meaning they will be unoptimized and you need to handle image optimization by yourself.
-
-For these images, you should use an absolute path; and these images can be displayed using [markdown annotation](https://www.markdownguide.org/basic-syntax/#images-1) or [HTML img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).
-
-Example: Assume `example.jpg` is located at `/public/assets/images/example.jpg`.
-
-```md
-
-
-
-
-
-```
-
-## Bonus
-
-### Image compression
-
-When you put images in the blog post (especially for images under `public` directory), it is recommended that the image is compressed. This will affect the overall performance of the website.
-
-My recommendation for image compression sites.
-
-- [TinyPng](https://tinypng.com/)
-- [TinyJPG](https://tinyjpg.com/)
-
-### OG Image
-
-The default OG image will be placed if a post does not specify the OG image. Though not required, OG image related to the post should be specify in the frontmatter. The recommended size for OG image is **_1200 X 640_** px.
-
-> Since AstroPaper v1.4.0, OG images will be generated automatically if not specified. Check out [the announcement](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/).
diff --git a/src/data/blog/customizing-astropaper-theme-color-schemes.md b/src/data/blog/customizing-astropaper-theme-color-schemes.md
deleted file mode 100644
index 74e1530..0000000
--- a/src/data/blog/customizing-astropaper-theme-color-schemes.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-author: Sat Naing
-pubDatetime: 2022-09-25T15:20:35Z
-modDatetime: 2026-01-09T15:00:15.170Z
-title: Customizing AstroPaper theme color schemes
-featured: false
-draft: false
-tags:
- - color-schemes
- - docs
-description:
- How you can enable/disable light & dark mode; and customize color schemes
- of AstroPaper theme.
----
-
-This post will explain how you can enable/disable light & dark mode for the website. Moreover, you'll learn how you can customize color schemes of the entire website.
-
-## Table of contents
-
-## Enable/disable light & dark mode
-
-AstroPaper theme will include light and dark mode by default. In other words, there will be two color schemes\_ one for light mode and another for dark mode. This default behavior can be disabled in `SITE` configuration object.
-
-```js file="src/config.ts"
-export const SITE = {
- website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
- author: "Sat Naing",
- profile: "https://satnaing.dev/",
- desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
- title: "AstroPaper",
- ogImage: "astropaper-og.jpg",
- lightAndDarkMode: true, // [!code highlight]
- postPerIndex: 4,
- postPerPage: 4,
- scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
- showArchives: true,
- showBackButton: true, // show back button in post detail
- editPost: {
- enabled: true,
- text: "Suggest Changes",
- url: "https://github.com/satnaing/astro-paper/edit/main/",
- },
- dynamicOgImage: true,
- lang: "en", // html lang code. Set this empty and default will be "en"
- timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-} as const;
-```
-
-To disable `light & dark mode` set `SITE.lightAndDarkMode` to `false`.
-
-## Choose initial color scheme
-
-By default, if we disable `SITE.lightAndDarkMode`, we will only get system's prefers-color-scheme.
-
-Thus, to choose an initial color scheme instead of prefers-color-scheme, we have to set color scheme in the `initialColorScheme` variable inside `theme.ts`.
-
-```ts file="src/scripts/theme.ts"
-// Initial color scheme
-// Can be "light", "dark", or empty string for system's prefers-color-scheme
-const initialColorScheme = ""; // "light" | "dark" // [!code hl]
-
-function getPreferTheme(): string {
- // get theme data from local storage (user's explicit choice)
- const currentTheme = localStorage.getItem("theme");
- if (currentTheme) return currentTheme;
-
- // return initial color scheme if it is set (site default)
- if (initialColorScheme) return initialColorScheme;
-
- // return user device's prefer color scheme (system fallback)
- return window.matchMedia("(prefers-color-scheme: dark)").matches
- ? "dark"
- : "light";
-}
-
-// ...
-```
-
-The **initialColorScheme** variable can hold two values\_ `"light"`, `"dark"`. You can leave the empty string (default) if you don't want to specify an initial color scheme.
-
-- `""` - system's prefers-color-scheme. (default)
-- `"light"` - use light mode as initial color scheme.
-- `"dark"` - use dark mode as initial color scheme.
-
-
-Why initialColorScheme is not inside config.ts?
-To avoid color flickering on page reload, we have to place the theme initialization JavaScript code as early as possible when the page loads. The theme script is split into two parts: a minimal inline script in the `` that sets the theme immediately, and the full script that loads asynchronously. This approach prevents FOUC (Flash of Unstyled Content) while maintaining optimal performance.
-
-
-## Customize color schemes
-
-Both light & dark color schemes of AstroPaper theme can be customized in the `global.css` file.
-
-```css file="src/styles/global.css"
-@import "tailwindcss";
-@import "./typography.css";
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-: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;
-}
-/* ... */
-```
-
-In the AstroPaper theme, the `:root` and `html[data-theme="light"]` selectors define the light color scheme, while `html[data-theme="dark"]` defines the dark color scheme.
-
-To customize your own color scheme, specify your light colors inside `:root, html[data-theme="light"]`, and your dark colors inside `html[data-theme="dark"]`.
-
-Here is the detail explanation of color properties.
-
-| Color Property | Definition & Usage |
-| -------------- | ------------------------------------------------------------- |
-| `--background` | Primary color of the website. Usually the main background. |
-| `--foreground` | Secondary color of the website. Usually the text color. |
-| `--accent` | Accent color of the website. Link color, hover color etc. |
-| `--muted` | Card and scrollbar background color for hover state etc. |
-| `--border` | Border color. Used for border utilities and visual separation |
-
-Here is an example of changing the light color scheme.
-
-```css file="src/styles/global.css"
-/* ... */
-:root,
-html[data-theme="light"] {
- --background: #f6eee1;
- --foreground: #012c56;
- --accent: #e14a39;
- --muted: #efd8b0;
- --border: #dc9891;
-}
-/* ... */
-```
-
-> Check out some [predefined color schemes](https://astro-paper.pages.dev/posts/predefined-color-schemes/) AstroPaper has already crafted for you.
diff --git a/src/data/blog/dynamic-og-images.md b/src/data/blog/dynamic-og-images.md
deleted file mode 100644
index e61a803..0000000
--- a/src/data/blog/dynamic-og-images.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-author: Sat Naing
-pubDatetime: 2022-12-28T04:59:04.866Z
-modDatetime: 2025-03-12T13:39:20.763Z
-title: Dynamic OG image generation in AstroPaper blog posts
-slug: dynamic-og-image-generation-in-astropaper-blog-posts
-featured: false
-draft: false
-tags:
- - docs
- - release
-description: New feature in AstroPaper v1.4.0, introducing dynamic OG image generation for blog posts.
----
-
-New feature in AstroPaper v1.4.0, introducing dynamic OG image generation for blog posts.
-
-## Table of contents
-
-## Intro
-
-OG images (aka Social Images) play an important role in social media engagements. In case you don't know what OG image means, it is an image displayed whenever we share our website URL on social media such as Facebook, Discord etc.
-
-> The Social Image used for Twitter is technically not called OG image. However, in this post, I'll be using the term OG image for all types of Social Images.
-
-## Default/Static OG image (the old way)
-
-AstroPaper already provided a way to add an OG image to a blog post. The author can specify the OG image in the frontmatter `ogImage`. Even when the author doesn't define the OG image in the frontmatter, the default OG image will be used as a fallback (in this case `public/astropaper-og.jpg`). But the problem is that the default OG image is static, which means every blog post that does not include an OG image in the frontmatter will always use the same default OG image despite each post title/content being different from others.
-
-## Dynamic OG Image
-
-Generating a dynamic OG image for each post allows the author to avoid specifying an OG image for every single blog post. Besides, this will prevent the fallback OG image from being identical to all blog posts.
-
-In AstroPaper v1.4.0, Vercel's [Satori](https://github.com/vercel/satori) package is used for dynamic OG image generation.
-
-Dynamic OG images will be generated at build time for blog posts that
-
-- don't include OG image in the frontmatter
-- are not marked as draft.
-
-## Anatomy of AstroPaper dynamic OG image
-
-Dynamic OG image of AstroPaper includes _the blog post title_, _author name_ and _site title_. Author name and site title will be retrieved via `SITE.author` and `SITE.title` of **"src/config.ts"** file. The title is generated from the blog post frontmatter `title`.
-
-
-### Issue Non-Latin Characters
-
-Titles with non-latin characters won't display properly out of the box. To resolve this, we have to replace `fontsConfig` inside `loadGoogleFont.ts` with your preferred font.
-
-```ts file=src/utils/loadGoogleFont.ts
-async function loadGoogleFonts(
- text: string
-): Promise<
- Array<{ name: string; data: ArrayBuffer; weight: number; style: string }>
-> {
- const fontsConfig = [
- {
- name: "Noto Sans JP",
- font: "Noto+Sans+JP",
- weight: 400,
- style: "normal",
- },
- {
- name: "Noto Sans JP",
- font: "Noto+Sans+JP:wght@700",
- weight: 700,
- style: "normal",
- },
- { name: "Noto Sans", font: "Noto+Sans", weight: 400, style: "normal" },
- {
- name: "Noto Sans",
- font: "Noto+Sans:wght@700",
- weight: 700,
- style: "normal",
- },
- ];
- // ...
-}
-```
-
-> Check out [this PR](https://github.com/satnaing/astro-paper/pull/318) for more info.
-
-## Trade-off
-
-While this is a nice feature to have, there's a trade-off. Each OG image takes roughly one second to generate. This might not be noticeable at first, but as the number of blog posts grows, you might want to disable this feature. Since every OG image takes time to generate, having many of them will increase the build time linearly.
-
-For example: If one OG image takes one second to generate, then 60 images will take around one minute, and 600 images will take approximately 10 minutes. This can significantly impact build times as your content scales.
-
-Related issue: [#428](https://github.com/satnaing/astro-paper/issues/428)
-
-## Limitations
-
-At the time of writing this, [Satori](https://github.com/vercel/satori) is fairly new and has not reached major release yet. So, there are still some limitations to this dynamic OG image feature.
-
-- Besides, RTL languages are not supported yet.
-- [Using emoji](https://github.com/vercel/satori#emojis) in the title might be a little bit tricky.
diff --git a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md b/src/data/blog/how-to-add-latex-equations-in-blog-posts.md
deleted file mode 100644
index 90c3941..0000000
--- a/src/data/blog/how-to-add-latex-equations-in-blog-posts.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-author: Alberto Perdomo
-pubDatetime: 2024-09-08T20:58:52.737Z
-modDatetime: 2025-03-22T09:25:46.734Z
-title: How to add LaTeX Equations in Astro blog posts
-tags:
- - docs
-description: Learn how to add LaTeX equations in Astro blog posts using Markdown, KaTeX, and remark/rehype plugins.
----
-
-This document demonstrates how to use LaTeX equations in your Markdown files for AstroPaper. LaTeX is a powerful typesetting system often used for mathematical and scientific documents.
-
-
-
-
- Photo by Vitaly Gariev
-
-
-
-## Table of contents
-
-## Instructions
-
-In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.
-
-1. Install the necessary remark and rehype plugins by running:
-
- ```bash
- pnpm install rehype-katex remark-math katex
- ```
-
-2. Update the Astro configuration to use the these plugins:
-
- ```ts file=astro.config.ts
- // ...
- import remarkMath from "remark-math";
- import rehypeKatex from "rehype-katex";
-
- export default defineConfig({
- // ...
- markdown: {
- remarkPlugins: [
- remarkMath, // [!code ++]
- remarkToc,
- [remarkCollapse, { test: "Table of contents" }],
- ],
- rehypePlugins: [rehypeKatex], // [!code ++]
- shikiConfig: {
- // For more themes, visit https://shiki.style/themes
- themes: { light: "min-light", dark: "night-owl" },
- wrap: false,
- },
- },
- // ...
- });
- ```
-
-3. Import KaTeX CSS in the main layout file
-
- ```astro file=src/layouts/Layout.astro
- ---
- import { SITE } from "@config";
-
- // astro code
- ---
-
-
-
-
-
-
-
-
-
-
-
- ```
-
-4. As the last step, add a text-color for `katex` in `typography.css`.
-
- ```css file=src/styles/typography.css
- @plugin "@tailwindcss/typography";
-
- @layer base {
- /* other classes */
-
- /* Katex text color */
- /* [!code highlight:3] */
- .prose .katex-display {
- @apply text-foreground;
- }
-
- /* ===== Code Blocks & Syntax Highlighting ===== */
- /* other classes */
- }
- ```
-
-And _voilà_, this setup allows you to write LaTeX equations in your Markdown files, which will be rendered properly when the site is built. Once you do it, the rest of the document will appear rendered correctly.
-
----
-
-## Inline Equations
-
-Inline equations are written between single dollar signs `$...$`. Here are some examples:
-
-1. The famous mass-energy equivalence formula: `$E = mc^2$`
-2. The quadratic formula: `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$`
-3. Euler's identity: `$e^{i\pi} + 1 = 0$`
-
----
-
-## Block Equations
-
-For more complex equations or when you want the equation to be displayed on its own line, use double dollar signs `$$...$$`:
-
-The Gaussian integral:
-
-```bash
-$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$
-```
-
-The definition of the Riemann zeta function:
-
-```bash
-$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$
-```
-
-Maxwell's equations in differential form:
-
-```bash
-$$
-\begin{aligned}
-\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
-\nabla \cdot \mathbf{B} &= 0 \\
-\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
-\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
-\end{aligned}
-$$
-```
-
----
-
-## Using Mathematical Symbols
-
-LaTeX provides a wide range of mathematical symbols:
-
-- Greek letters: `$\alpha$`, `$\beta$`, `$\gamma$`, `$\delta$`, `$\epsilon$`, `$\pi$`
-- Operators: `$\sum$`, `$\prod$`, `$\int$`, `$\partial$`, `$\nabla$`
-- Relations: `$\leq$`, `$\geq$`, `$\approx$`, `$\sim$`, `$\propto$`
-- Logical symbols: `$\forall$`, `$\exists$`, `$\neg$`, `$\wedge$`, `$\vee$`
diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md
deleted file mode 100644
index 9739fa3..0000000
--- a/src/data/blog/how-to-configure-astropaper-theme.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-author: Sat Naing
-pubDatetime: 2022-09-23T04:58:53Z
-modDatetime: 2026-01-10T13:04:53.851Z
-title: How to configure AstroPaper theme
-slug: how-to-configure-astropaper-theme
-featured: true
-draft: false
-tags:
- - configuration
- - docs
-description: How you can make AstroPaper theme absolutely yours.
----
-
-AstroPaper is a highly customizable Astro blog theme. With AstroPaper, you can customize everything according to your personal taste. This article will explain how you can make some customizations easily in the config file.
-
-## Table of contents
-
-## Configuring SITE
-
-The important configurations resides in `src/config.ts` file. Within that file, you'll see the `SITE` object where you can specify your website's main configurations.
-
-During development, it's okay to leave `SITE.website` empty. But in production mode, you should specify your deployed url in `SITE.website` option since this will be used for canonical URL, social card URL etc.. which are important for SEO.
-
-```js file=src/config.ts
-export const SITE = {
- website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
- author: "Sat Naing",
- profile: "https://satnaing.dev/",
- desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
- title: "AstroPaper",
- ogImage: "astropaper-og.jpg",
- lightAndDarkMode: true,
- postPerIndex: 4,
- postPerPage: 4,
- scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
- showArchives: true,
- showBackButton: true, // show back button in post detail
- editPost: {
- enabled: true,
- text: "Suggest Changes",
- url: "https://github.com/satnaing/astro-paper/edit/main/",
- },
- dynamicOgImage: true, // enable automatic dynamic og-image generation
- dir: "ltr", // "rtl" | "auto"
- lang: "en", // html lang code. Set this empty and default will be "en"
- timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-} as const;
-```
-
-Here are SITE configuration options
-
-| Options | Description |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `website` | Your deployed website URL |
-| `author` | Your name |
-| `profile` | Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don't have any. |
-| `desc` | Your site description. Useful for SEO and social media sharing. |
-| `title` | Your site name |
-| `ogImage` | Your default OG image for the site. Useful for social media sharing. OG images can be an external image URL or they can be placed under `/public` directory. |
-| `lightAndDarkMode` | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default. |
-| `postPerIndex` | The number of posts to be displayed at the home page under `Recent` section. |
-| `postPerPage` | You can specify how many posts will be displayed in each posts page. (eg: if you set `SITE.postPerPage` to 3, each page will only show 3 posts per page) |
-| `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin. |
-| `showArchives` | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default. |
-| `showBackButton` | Determines whether to display the `Go back` button in each blog post. |
-| `editPost` | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by setting `SITE.editPost.enabled` to `false`. |
-| `dynamicOgImage` | This option controls whether to [generate dynamic og-image](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/) if no `ogImage` is specified in the blog post frontmatter. If you have many blog posts, you might want to disable this feature. See the [trade-off](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off) for more details. |
-| `dir` | Specifies the text direction of the entire blog. Used as [HTML dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) in ``. Supported values: `ltr` \| `rtl` \| `auto` |
-| `lang` | Used as HTML ISO Language code in ``. Default is `en`. |
-| `timezone` | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences. |
-
-## Update layout width
-
-The default `max-width` for the entire blog is `768px` (`max-w-3xl`). If you'd like to change it, you can easily update the `max-w-app` utility in your `global.css`. For instance:
-
-```css file=src/styles/global.css
-@utility max-w-app {
- /* [!code --:1] */
- @apply max-w-3xl;
- /* [!code ++:1] */
- @apply max-w-4xl xl:max-w-5xl;
-}
-```
-
-You can explore more `max-width` values in the [Tailwind CSS docs](https://tailwindcss.com/docs/max-width).
-
-## Configuring logo or title
-
-Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.
-
-
-
-There are 3 options you can do:
-
-### Option 1: SITE title text
-
-This is the easiest option. You just have to update `SITE.title` in `src/config.ts` file.
-
-### Option 2: Astro's SVG component
-
-You might want to use this option if you want to use an SVG logo.
-
-- First add an SVG inside `src/assets` directory. (eg: `src/assets/dummy-logo.svg`)
-- Then import that SVG inside `Header.astro`
-
- ```astro file=src/components/Header.astro
- ---
- // ...
- import DummyLogo from "@/assets/dummy-logo.svg";
- ---
- ```
-
-- Finally, replace `{SITE.title}` with imported logo.
-
- ```html
-
-
-
-
- ```
-
-The best part of this approach is that you can customize your SVG styles as needed. In the example above, you can see how the SVG logo color can be inverted in dark mode.
-
-### Option 3: Astro's Image component
-
-If your logo is an image but not SVG, you can use Astro's Image component.
-
-- Add your logo inside `src/assets` directory. (eg: `src/assets/dummy-logo.png`)
-- Import `Image` and your logo in `Header.astro`
-
- ```astro file=src/components/Header.astro
- ---
- // ...
- import { Image } from "astro:assets";
- import dummyLogo from "@/assets/dummy-logo.png";
- ---
- ```
-
-- Then, replace `{SITE.title}` with imported logo.
-
-
- ```html
-
-
-
-
- ```
-
-With this approach, you can still adjust your image's appearance using CSS classes. However, this might not always fit what you want. If you need to display different logo images based on light or dark mode, check how light/dark icons are handled inside the `Header.astro` component.
-
-## Configuring social links
-
-
-
-You can configure social links in `SOCIALS` object inside `constants.ts`.
-
-```ts file=src/constants.ts
-export const SOCIALS = [
- {
- name: "GitHub",
- href: "https://github.com/satnaing/astro-paper",
- linkTitle: ` ${SITE.title} on GitHub`,
- icon: IconGitHub,
- },
- {
- name: "X",
- href: "https://x.com/username",
- linkTitle: `${SITE.title} on X`,
- icon: IconBrandX,
- },
- {
- name: "LinkedIn",
- href: "https://www.linkedin.com/in/username/",
- linkTitle: `${SITE.title} on LinkedIn`,
- icon: IconLinkedin,
- },
- {
- name: "Mail",
- href: "mailto:yourmail@gmail.com",
- linkTitle: `Send an email to ${SITE.title}`,
- icon: IconMail,
- },
-] as const;
-```
-
-## Configuring share links
-
-You can configure share links in `SHARE_LINKS` object inside `src/constants.ts`.
-
-
-
-## Configuring fonts
-
-AstroPaper uses Astro's [experimental fonts API](https://docs.astro.build/en/reference/experimental-flags/fonts/) with [Google Sans Code](https://fonts.google.com/specimen/Google+Sans+Code) as the default font. This provides consistent typography across all platforms with automatic font optimizations including preloading and caching.
-
-### Using the default font
-
-The font is automatically configured in `astro.config.ts` and loaded in `Layout.astro`. No additional configuration is needed to use the default Google Sans Code font.
-
-### Customizing the font
-
-To use a different font, you need to update three places:
-
-1. **Update the font configuration in `astro.config.ts`:**
-
-```ts file=astro.config.ts
-import { defineConfig, fontProviders } from "astro/config";
-
-export default defineConfig({
- // ...
- experimental: {
- fonts: [
- {
- name: "Your Font Name", // [!code highlight]
- cssVariable: "--font-your-font", // [!code highlight]
- provider: fontProviders.google(),
- fallbacks: ["monospace"],
- weights: [300, 400, 500, 600, 700],
- styles: ["normal", "italic"],
- },
- ],
- },
-});
-```
-
-1. **Update the Font component in `Layout.astro`:**
-
-```astro file=src/layouts/Layout.astro
----
-import { Font } from "astro:assets";
-// ...
----
-
-
-
- // [!code highlight:4]
-
-
-
-```
-
-1. **Update the CSS variable mapping in `global.css`:**
-
-```css file=src/styles/global.css
-@theme inline {
- --font-app: var(--font-your-font); /* [!code highlight] */
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-accent: var(--accent);
- --color-muted: var(--muted);
- --color-border: var(--border);
-}
-```
-
-The `--font-app` variable is used throughout the theme via the `font-app` Tailwind utility class, so updating this single variable will apply your custom font everywhere.
-
-> **Note**: Make sure the font name matches exactly as it appears on [Google Fonts](https://fonts.google.com). For other font providers or local fonts, refer to the [Astro Experimental Fonts API documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/).
-
-## Conclusion
-
-This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read [this article](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/). Thanks for reading.✌🏻
diff --git a/src/data/blog/how-to-integrate-giscus-comments.md b/src/data/blog/how-to-integrate-giscus-comments.md
deleted file mode 100644
index b998ab5..0000000
--- a/src/data/blog/how-to-integrate-giscus-comments.md
+++ /dev/null
@@ -1,206 +0,0 @@
----
-author: FjellOverflow
-pubDatetime: 2024-07-25T11:11:53Z
-modDatetime: 2025-03-12T12:28:53Z
-title: How to integrate Giscus comments into AstroPaper
-slug: how-to-integrate-giscus-comments
-featured: false
-draft: false
-tags:
- - astro
- - blog
- - docs
-description: Comment function on a static blog hosted on GitHub Pages with Giscus.
----
-
-Hosting a thin static blog on a platform like [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) has numerous advantages, but also takes away some interactivity. Fortunately, [Giscus](https://giscus.app/) exists and offers a way to embed user comments on static sites.
-
-## Table of contents
-
-## How _Giscus_ works
-
-[Giscus uses the GitHub API](https://github.com/giscus/giscus?tab=readme-ov-file#how-it-works) to read and store comments made by _GitHub_ users in the `Discussions` associated with a repository.
-
-Embed the _Giscus_ client-side script bundle on your site, configure it with the correct repository URL, and users can view and write comments (when logged into _GitHub_).
-
-The approach is serverless, as the comments are stored on _GitHub_ and dynamically loaded from there on client side, hence perfect for a static blog, like _AstroPaper_.
-
-## Setting up _Giscus_
-
-_Giscus_ can be set up easily on [giscus.app](https://giscus.app/), but I will outline the process shortly still.
-
-### Prerequisites
-
-Prerequisites to get _Giscus_ working are
-
-- the repository is [public](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#making-a-repository-public)
-- the [Giscus app](https://github.com/apps/giscus) is installed
-- the [Discussions](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository) feature is turned on for your repository
-
-If any of these conditions cannot be fulfilled for any reason, unfortunately, _Giscus_ cannot be integrated.
-
-### Configuring _Giscus_
-
-Next, configuring _Giscus_ is necessary. In most cases, the preselected defaults are suitable, and you should only modify them if you have a specific reason and know what you are doing. Don't worry too much about making the wrong choices; you can always adjust the configuration later on.
-
-However you need to
-
-- select the right language for the UI
-- specify the _GitHub_ repository you want to connect, typically the repository containing your statically hosted _AstroPaper_ blog on _GitHub Pages_
-- create and set an `Announcement` type discussion on _GitHub_ if you want to ensure nobody can create random comments directly on _GitHub_
-- define the color scheme
-
-After configuring the settings, _Giscus_ provides you with a generated `
-```
-
-Simply add that to the source code of the site. Most likely, if you're using _AstroPaper_ and want to enable comments on posts, navigate to `PostDetails.astro` and paste it into the desired location where you want the comments to appear, perhaps underneath the `Share this post on:` buttons.
-
-```astro file=src/layouts/PostDetails.astro
-
-
-
-
-
-
-
-
-
-```
-
-And it's done! You have successfully integrated comments in _AstroPaper_!
-
-## React component with light/dark theme
-
-The embedded script tag in the layout is quite static, with the _Giscus_ configuration, including `theme`, hardcoded into the layout. Given that _AstroPaper_ features a light/dark theme toggle, it would be nice for the comments to seamlessly transition between light and dark themes along with the rest of the site. To achieve this, a more sophisticated approach to embedding _Giscus_ is required.
-
-Firstly, we are going to install the [React component](https://www.npmjs.com/package/@giscus/react) for _Giscus_:
-
-```bash
-npm i @giscus/react && npx astro add react
-```
-
-Then we create a new `Comments.tsx` React component in `src/components`:
-
-```tsx file=src/components/Comments.tsx
-import Giscus, { type Theme } from "@giscus/react";
-import { GISCUS } from "@/constants";
-import { useEffect, useState } from "react";
-
-interface CommentsProps {
- lightTheme?: Theme;
- darkTheme?: Theme;
-}
-
-export default function Comments({
- lightTheme = "light",
- darkTheme = "dark",
-}: CommentsProps) {
- const [theme, setTheme] = useState(() => {
- const currentTheme = localStorage.getItem("theme");
- const browserTheme = window.matchMedia("(prefers-color-scheme: dark)")
- .matches
- ? "dark"
- : "light";
-
- return currentTheme || browserTheme;
- });
-
- useEffect(() => {
- const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
- const handleChange = ({ matches }: MediaQueryListEvent) => {
- setTheme(matches ? "dark" : "light");
- };
-
- mediaQuery.addEventListener("change", handleChange);
-
- return () => mediaQuery.removeEventListener("change", handleChange);
- }, []);
-
- useEffect(() => {
- const themeButton = document.querySelector("#theme-btn");
- const handleClick = () => {
- setTheme(prevTheme => (prevTheme === "dark" ? "light" : "dark"));
- };
-
- themeButton?.addEventListener("click", handleClick);
-
- return () => themeButton?.removeEventListener("click", handleClick);
- }, []);
-
- return (
-
-
-
- );
-}
-```
-
-This _React_ component not only wraps the native _Giscus_ component, but also introduces additional props, namely `lightTheme` and `darkTheme`. Leveraging two event listeners, the _Giscus_ comments will align with the site's theme, dynamically switching between dark and light themes whenever the site or browser theme is changed.
-
-We also need to define the `GISCUS` config, for which the optimal location is in `constants.ts`:
-
-```ts file=src/constants.ts
-import type { GiscusProps } from "@giscus/react";
-
-...
-
-export const GISCUS: GiscusProps = {
- repo: "[ENTER REPO HERE]",
- repoId: "[ENTER REPO ID HERE]",
- category: "[ENTER CATEGORY NAME HERE]",
- categoryId: "[ENTER CATEGORY ID HERE]",
- mapping: "pathname",
- reactionsEnabled: "0",
- emitMetadata: "0",
- inputPosition: "bottom",
- lang: "en",
- loading: "lazy",
-};
-```
-
-Note that specifying a `theme` here will override the `lightTheme` and `darkTheme` props, resulting in a static theme setting, similar to the previous approach of embedding _Giscus_ with the `
- 
-
-```
-
-> Technically, you can store images inside any directory under `src`. In here, `src/assets` is just a recommendation.
-
-### Inside `public` directory
-
-You can store images inside the `public` directory. Keep in mind that images stored in the `public` directory remain untouched by Astro, meaning they will be unoptimized and you need to handle image optimization by yourself.
-
-For these images, you should use an absolute path; and these images can be displayed using [markdown annotation](https://www.markdownguide.org/basic-syntax/#images-1) or [HTML img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).
-
-Example: Assume `example.jpg` is located at `/public/assets/images/example.jpg`.
-
-```md
-
-
-
-
-
-```
-
-## Bonus
-
-### Image compression
-
-When you put images in the blog post (especially for images under `public` directory), it is recommended that the image is compressed. This will affect the overall performance of the website.
-
-My recommendation for image compression sites.
-
-- [TinyPng](https://tinypng.com/)
-- [TinyJPG](https://tinyjpg.com/)
-
-### OG Image
-
-The default OG image will be placed if a post does not specify the OG image. Though not required, OG image related to the post should be specify in the frontmatter. The recommended size for OG image is **_1200 X 640_** px.
-
-> Since AstroPaper v1.4.0, OG images will be generated automatically if not specified. Check out [the announcement](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/).
diff --git a/src/data/blog/customizing-astropaper-theme-color-schemes.md b/src/data/blog/customizing-astropaper-theme-color-schemes.md
deleted file mode 100644
index 74e1530..0000000
--- a/src/data/blog/customizing-astropaper-theme-color-schemes.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-author: Sat Naing
-pubDatetime: 2022-09-25T15:20:35Z
-modDatetime: 2026-01-09T15:00:15.170Z
-title: Customizing AstroPaper theme color schemes
-featured: false
-draft: false
-tags:
- - color-schemes
- - docs
-description:
- How you can enable/disable light & dark mode; and customize color schemes
- of AstroPaper theme.
----
-
-This post will explain how you can enable/disable light & dark mode for the website. Moreover, you'll learn how you can customize color schemes of the entire website.
-
-## Table of contents
-
-## Enable/disable light & dark mode
-
-AstroPaper theme will include light and dark mode by default. In other words, there will be two color schemes\_ one for light mode and another for dark mode. This default behavior can be disabled in `SITE` configuration object.
-
-```js file="src/config.ts"
-export const SITE = {
- website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
- author: "Sat Naing",
- profile: "https://satnaing.dev/",
- desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
- title: "AstroPaper",
- ogImage: "astropaper-og.jpg",
- lightAndDarkMode: true, // [!code highlight]
- postPerIndex: 4,
- postPerPage: 4,
- scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
- showArchives: true,
- showBackButton: true, // show back button in post detail
- editPost: {
- enabled: true,
- text: "Suggest Changes",
- url: "https://github.com/satnaing/astro-paper/edit/main/",
- },
- dynamicOgImage: true,
- lang: "en", // html lang code. Set this empty and default will be "en"
- timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-} as const;
-```
-
-To disable `light & dark mode` set `SITE.lightAndDarkMode` to `false`.
-
-## Choose initial color scheme
-
-By default, if we disable `SITE.lightAndDarkMode`, we will only get system's prefers-color-scheme.
-
-Thus, to choose an initial color scheme instead of prefers-color-scheme, we have to set color scheme in the `initialColorScheme` variable inside `theme.ts`.
-
-```ts file="src/scripts/theme.ts"
-// Initial color scheme
-// Can be "light", "dark", or empty string for system's prefers-color-scheme
-const initialColorScheme = ""; // "light" | "dark" // [!code hl]
-
-function getPreferTheme(): string {
- // get theme data from local storage (user's explicit choice)
- const currentTheme = localStorage.getItem("theme");
- if (currentTheme) return currentTheme;
-
- // return initial color scheme if it is set (site default)
- if (initialColorScheme) return initialColorScheme;
-
- // return user device's prefer color scheme (system fallback)
- return window.matchMedia("(prefers-color-scheme: dark)").matches
- ? "dark"
- : "light";
-}
-
-// ...
-```
-
-The **initialColorScheme** variable can hold two values\_ `"light"`, `"dark"`. You can leave the empty string (default) if you don't want to specify an initial color scheme.
-
-- `""` - system's prefers-color-scheme. (default)
-- `"light"` - use light mode as initial color scheme.
-- `"dark"` - use dark mode as initial color scheme.
-
-
-