### Start Local Development Server
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Use this command to start the local development server for the project.
```bash
pnpm dev
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Run this command in the project root to install all necessary dependencies.
```bash
pnpm install
```
--------------------------------
### Install Remark and Rehype Plugins
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Install the necessary remark and rehype plugins for LaTeX support in Astro.
```bash
pnpm install rehype-katex remark-math katex
```
--------------------------------
### Custom Light Color Scheme Example
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/customizing-astropaper-theme-color-schemes.mdx
An example of how to modify the CSS variables within the `:root, [data-theme="light"]` selector in `src/styles/theme.css` to customize the light color scheme.
```css
/* ... */
:root,
[data-theme="light"] {
--background: #f6eee1;
--foreground: #012c56;
--accent: #e14a39;
--accent-foreground: #ffffff;
--muted: #efd8b0;
--muted-foreground: #6b7280;
--border: #dc9891;
}
/* ...
```
--------------------------------
### Install Giscus React Component and Astro React Integration
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-integrate-giscus-comments.md
Install the necessary packages for Giscus React component and Astro's React integration.
```bash
npm i @giscus/react && npx astro add react
```
--------------------------------
### Updated Astro Import Alias Example
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-5.md
Demonstrates the new import alias format '@/' used in AstroPaper v5 for importing utilities and assets.
```astro
---
import { slugifyStr } from "@/utils/slugify";
import IconHash from "@/assets/icons/IconHash.svg";
---
```
--------------------------------
### Sample Blog Post Frontmatter
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Example frontmatter for an AstroPaper blog post, demonstrating required and optional properties like title, author, publication date, tags, and description.
```yaml
---
title: The title of the post
author: your name
pubDatetime: 2022-09-21T05:17:19Z
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
---
```
--------------------------------
### Install npm-check-updates Globally
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Install the npm-check-updates package globally to manage dependency updates. This is a prerequisite for using the ncu commands.
```bash
npm install -g npm-check-updates
```
--------------------------------
### Render Block LaTeX Equations (Maxwell's Equations)
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use double dollar signs and the \begin{aligned} environment for multi-line block LaTeX equations. Example: Maxwell's equations.
```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(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t})
\end{aligned}
$$
```
--------------------------------
### Render Block LaTeX Equation (Gaussian Integral)
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use double dollar signs to display LaTeX equations on their own line. Example: the Gaussian integral.
```bash
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$
```
--------------------------------
### Configure Shiki Syntax Highlighting in Astro
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Configure Shiki syntax highlighting in astro.config.ts, including themes and transformers. This example shows how to remove specific transformers.
```typescript
// ...
// [!code --:5]
import {
transformerNotationDiff,
transformerNotationHighlight,
transformerNotationWordHighlight,
} from "@shikijs/transformers";
export default defineConfig({
// ...
markdown: {
remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
shikiConfig: {
themes: { light: "min-light", dark: "night-owl" },
defaultColor: false,
wrap: false,
transformers: [
transformerFileName(),
// [!code --:3]
transformerNotationHighlight(),
transformerNotationWordHighlight(),
transformerNotationDiff({ matchAlgorithm: "v3" }),
],
},
},
// ...
});
```
--------------------------------
### Default tailwind.config.js
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/examples/tailwind-typography.md
Shows the default configuration for a tailwind.config.js file. This is a basic setup before custom theme extensions or plugins are applied.
```javascript
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
```
--------------------------------
### Render Inline LaTeX Equation (Quadratic Formula)
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use single dollar signs to embed inline LaTeX equations. Example: the quadratic formula.
```markdown
The quadratic formula: `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$`
```
--------------------------------
### Render Block LaTeX Equation (Riemann Zeta Function)
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use double dollar signs to display LaTeX equations on their own line. Example: the definition of the Riemann zeta function.
```bash
$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$
```
--------------------------------
### Render Inline LaTeX Equation (Euler's Identity)
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use single dollar signs to embed inline LaTeX equations. Example: Euler's identity.
```markdown
Euler's identity: `$e^{i\pi} + 1 = 0$`
```
--------------------------------
### Giscus Configuration Constants
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-integrate-giscus-comments.md
Define the Giscus configuration object in a constants file. This includes repository details, category, mapping, and other display options. Ensure all placeholder values are replaced with your specific Giscus setup.
```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",
};
```
--------------------------------
### Update Layout Width CSS
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Modify the `max-w-app` CSS utility in `src/styles/global.css` to change the maximum width of the blog layout. This example shows how to expand it from `max-w-3xl` to `max-w-4xl` with an extra large screen breakpoint at `xl:max-w-5xl`.
```css
@utility max-w-app {
/* [!code --:1] */
@apply max-w-3xl;
/* [!code ++:1] */
@apply max-w-4xl xl:max-w-5xl;
}
```
--------------------------------
### Render Inline LaTeX Equation
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Use single dollar signs to embed inline LaTeX equations within Markdown text. Example: E=mc^2.
```markdown
The famous mass-energy equivalence formula: `$E = mc^2$`
```
--------------------------------
### Preview Local Build
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Use this command to preview your built site locally before deployment.
```bash
pnpm preview
```
--------------------------------
### Build the Site
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
This command type-checks, builds the site, and runs Pagefind indexing.
```bash
pnpm build
```
--------------------------------
### Check for All Dependency Updates
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Run this command to see all available updates for your project's dependencies. It helps in identifying what can be updated.
```bash
ncu
```
--------------------------------
### Import KaTeX CSS in Layout
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Import the KaTeX CSS file into the main layout file (Layout.astro) to enable proper rendering of LaTeX equations.
```astro
---
import { SITE } from "@config";
// astro code
---
```
--------------------------------
### Project Structure Overview
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
This bash snippet outlines the directory structure of the AstroPaper project. Key directories include public for static assets and src for source code, components, content, and configurations.
```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
```
--------------------------------
### Post File Paths and Corresponding URLs
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Illustrates how different file paths within the src/content/posts/ directory translate into accessible URLs on your website. Directories prefixed with an underscore are excluded from routing.
```bash
# Example: post file paths and their URLs
src/content/posts/very-first-post.md -> mysite.com/posts/very-first-post
src/content/posts/2025/example-post.md -> mysite.com/posts/2025/example-post
src/content/posts/_2026/another-post.md -> mysite.com/posts/another-post
src/content/posts/docs/_legacy/how-to.md -> mysite.com/posts/docs/how-to
src/content/posts/Example Dir/Dummy Post.md -> mysite.com/posts/example-dir/dummy-post
```
--------------------------------
### Define AstroPaper Configuration
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Configure site metadata, pagination, features, social links, and share links in a single file. Use defineAstroPaperConfig for IntelliSense.
```typescript
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=" }],
});
```
--------------------------------
### Configure Share Links in astro-paper.config.ts
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Set up share links for posts by specifying a name (matching an SVG icon) and a base URL. The post URL will be appended to this base URL.
```typescript
export default defineAstroPaperConfig({
// ...
shareLinks: [
{ name: "whatsapp", url: "https://wa.me/?text=" },
{ name: "facebook", url: "https://www.facebook.com/sharer.php?u=" },
{ name: "x", url: "https://x.com/intent/post?url=" },
{ name: "telegram", url: "https://t.me/share/url?url=" },
{ name: "mail", url: "mailto:?subject=See%20this%20post&body=" },
],
});
```
--------------------------------
### Google Site Verification Environment Variable
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Fallback method for setting Google Site Verification using the `PUBLIC_GOOGLE_SITE_VERIFICATION` environment variable in a `.env` file.
```bash
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value
```
--------------------------------
### Replace Site Title with SVG Logo in Astro
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Replace the site title text with an imported SVG logo component within an Astro HTML template. This example shows how to render the SVG logo and apply styling for dark mode.
```html
```
--------------------------------
### Astro Content Slug Configuration
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-4.md
Configure the 'slug' field in your blog post frontmatter. If omitted, the filename will be used. An empty string is not allowed.
```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
---
```
--------------------------------
### Store and Reference Images in src/assets/
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Store images in the src/assets/ directory for automatic optimization by Astro. Use relative or alias paths to reference them in Markdown.
```markdown


```
--------------------------------
### Store and Reference Images in public/
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Store images in the public/ directory for direct use without optimization. Reference them using absolute paths in Markdown or HTML img tags.
```markdown

```
--------------------------------
### Configure Google Site Verification
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Set the `site.googleVerification` property in `astro-paper.config.ts` to add your Google Site Verification tag.
```typescript
export default defineAstroPaperConfig({
site: {
// ...
googleVerification: "your-google-site-verification-value",
},
// ...
});
```
--------------------------------
### Define Default Tag for Blog Posts
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-2.md
Shows how to set a default tag for blog posts in `src/content/_schemas.ts`. If a post lacks a `tags` frontmatter property, the specified default will be applied.
```typescript
// 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(),
});
```
--------------------------------
### Update Minor Dependencies Interactively
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Interactively update minor dependencies. This allows you to review and select which minor version updates to apply, often bringing new features.
```bash
ncu -i --target minor
```
--------------------------------
### Run Astro CLI Commands
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Execute various Astro CLI commands such as `astro add` or `astro check`.
```bash
pnpm astro ...
```
--------------------------------
### Configure Fonts with Astro v6 Stable API
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Set up font configurations using the top-level 'fonts' key in astro.config.ts, leveraging Astro's stable Fonts API.
```typescript
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"],
},
],
});
```
--------------------------------
### Check for Remaining Dependency Updates
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Run this command after updating patch and minor versions to check for any remaining updates, including major versions. It will prompt for interactive updates.
```bash
ncu -i
```
--------------------------------
### Configure Astro for LaTeX Support
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Update the Astro configuration file (astro.config.ts) to include remark-math and rehype-katex plugins for rendering LaTeX equations.
```typescript
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,
},
},
// ...
});
```
--------------------------------
### Import Image and Logo in Header.astro
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Import the Image component from astro:assets and your logo image. This is used when your logo is an image file (not SVG).
```astro
---
// ...
import { Image } from "astro:assets";
import dummyLogo from "@/assets/dummy-logo.png";
---
```
--------------------------------
### Update Content Fetching Method
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-2.md
Compares the old method of fetching content using glob imports with the new method using `getCollection` from Astro's Content Collections API.
```typescript
// old content fetching method
- const postImportResult = import.meta.glob>(
"../contents/**/**/*.md",
);
// new content fetching method
+ const postImportResult = await getCollection("blog");
```
--------------------------------
### Extracting Frontmatter and Draft Status
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/setting-dates-via-git-hooks.md
This snippet demonstrates how to extract the frontmatter content and the 'draft' status from a markdown file using shell commands like cat, awk, and echo.
```shell
filecontent=$(cat "$file")
frontmatter=$(echo "$filecontent" | awk -v RS='---' 'NR==2{print}')
draft=$(echo "$frontmatter" | awk '/^draft: /{print $2}')
```
--------------------------------
### Checkout to a New Branch for Updates
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Create a new branch to isolate the update process. This is a safety measure to prevent direct modification of your main branch.
```bash
git checkout -b build/update-astro-paper
```
--------------------------------
### UI Strings for Internationalization
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Defines UI strings for the default English language. Add new language files to `src/i18n/lang/` to support other languages.
```typescript
export default {
nav: { home: "Home", posts: "Posts" /* … */ },
post: { publishedAt: "Published at" /* … */ },
/* … */
} satisfies UIStrings;
```
--------------------------------
### Default Tags Configuration
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
Configure the default tag for blog posts in AstroPaper by modifying the `src/content.config.ts` file. This ensures a fallback tag if none are explicitly provided.
```typescript
import { defineCollection, z } from "astro:content";
const postsCollection = defineCollection({
type: "content",
schema: ({ image }) =>
z.object({
// ... other schema properties
tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want
// ... other schema properties
}),
});
export const collections = {
posts: postsCollection,
};
```
--------------------------------
### Style KaTeX Equations
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-add-latex-equations-in-blog-posts.md
Add custom CSS to the typography.css file to set the text color for KaTeX display equations, ensuring they match the site's theme.
```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 */
}
```
--------------------------------
### Updating pubDatetime for New Files with Git
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/setting-dates-via-git-hooks.md
This script identifies newly added markdown files, updates their 'pubDatetime' in the frontmatter to the current UTC time, and stages the changes for commit.
```shell
# New files, add/update the pubDatetime
git diff --cached --name-status | egrep -i "^(A).*".md$" | while read a b; do
cat $b | sed "/---.*/,/---.*/s/^pubDatetime:.*$/pubDatetime: $(date -u "+%Y-%m-%dT%H:%M:%SZ")/"> tmp
mv tmp $b
git add $b
done
```
--------------------------------
### Update Patch Dependencies Interactively
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Use this command to interactively update only patch-level dependencies. This is a safe way to update minor bug fixes without major changes.
```bash
ncu -i --target patch
```
--------------------------------
### Configure Social Links in astro-paper.config.ts
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Define social media links by providing a name (matching an SVG icon) and the corresponding URL. Add new icons to src/assets/icons/socials/.
```typescript
export default defineAstroPaperConfig({
// ...
socials: [
{ name: "github", url: "https://github.com/satnaing/astro-paper" },
{ name: "x", url: "https://x.com/username" },
{ name: "linkedin", url: "https://www.linkedin.com/in/username/" },
{ name: "mail", url: "mailto:yourmail@gmail.com" },
],
});
```
--------------------------------
### AstroPaper Theme Configuration
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Central configuration file for the AstroPaper theme. Use `defineAstroPaperConfig` for IntelliSense support. This file manages site metadata, post settings, feature flags, social links, and share link configurations.
```typescript
import { defineAstroPaperConfig } from "./src/types/config";
export default defineAstroPaperConfig({
site: {
url: "https://your-site.com/", // replace with your deployed URL
title: "AstroPaper",
description: "A minimal, responsive and SEO-friendly Astro blog theme.",
author: "Sat Naing",
profile: "https://satnaing.dev",
ogImage: "default-og.jpg",
lang: "en",
timezone: "Asia/Bangkok",
dir: "ltr",
},
posts: {
perPage: 4,
perIndex: 4,
scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
},
features: {
lightAndDarkMode: true,
dynamicOgImage: true,
showArchives: true,
showBackButton: true,
editPost: {
enabled: true,
url: "https://github.com/satnaing/astro-paper/edit/main/",
},
search: "pagefind",
},
socials: [
{ name: "github", url: "https://github.com/satnaing/astro-paper" },
{ name: "x", url: "https://x.com/username" },
{ name: "linkedin", url: "https://www.linkedin.com/in/username/" },
{ name: "mail", url: "mailto:yourmail@gmail.com" },
],
shareLinks: [
{ name: "whatsapp", url: "https://wa.me/?text=" },
{ name: "facebook", url: "https://www.facebook.com/sharer.php?u=" },
{ name: "x", url: "https://x.com/intent/post?url=" },
{ name: "telegram", url: "https://t.me/share/url?url=" },
{ name: "mail", url: "mailto:?subject=See%20this%20post&body=" },
],
});
```
--------------------------------
### Basic Article Structure with Prose Class
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/examples/tailwind-typography.md
Apply the 'prose' class to any block of HTML content to enable beautiful, well-formatted document styling. This is useful for content originating from rich-text editors or markdown files.
```html
Garlic bread with cheese: What the science tells us
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
```
--------------------------------
### Sync Astro TypeScript Types
Source: https://github.com/satnaing/astro-paper.git/blob/main/README.md
Generates TypeScript types for all Astro modules. Learn more at the Astro documentation.
```bash
pnpm sync
```
--------------------------------
### Pull Changes from AstroPaper Repository
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Fetch and merge the latest changes from the main branch of the astro-paper remote into your current branch.
```bash
git pull astro-paper main
```
--------------------------------
### Configure Fonts for Dynamic OG Images
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/dynamic-og-images.md
Configure Google Fonts in astro.config.ts to ensure non-Latin characters display correctly in dynamic OG images. Ensure both regular (400) and bold (700) weights are included.
```typescript
import { defineConfig, fontProviders } from "astro/config";
export default defineConfig({
fonts: [
{
// Example: Japanese coverage (pick what you need for your audience)
name: "Noto Sans JP",
cssVariable: "--font-google-sans-code",
provider: fontProviders.google(),
fallbacks: ["monospace"],
weights: [400, 700],
styles: ["normal", "italic"],
formats: ["woff", "ttf"],
},
],
});
```
--------------------------------
### Integrate Comments Component into Astro Layout
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-integrate-giscus-comments.md
Replace the static script tag in your Astro layout with the new React Comments component. Ensure the `client:only="react"` directive is used to load the component on the client side.
```jsx
// [!code ++:1]
import Comments from "@/components/Comments";
// [!code ++:1]
```
--------------------------------
### Replace Title with Image Logo in Header.astro
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Replace the site title with the imported logo image component. This allows for image-based logos in the header.
```html
```
--------------------------------
### Add AstroPaper as a Git Remote
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Before pulling updates, add the official AstroPaper repository as a remote to your project. This allows you to fetch changes from the template.
```bash
git remote add astro-paper https://github.com/satnaing/astro-paper.git
```
--------------------------------
### Default Light and Dark Color Schemes
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/customizing-astropaper-theme-color-schemes.mdx
Defines the default CSS variables for both light and dark color schemes in `src/styles/theme.css`. Customize these variables to change the site's appearance.
```css
/* Light theme values */
:root,
[data-theme="light"] {
--background: #fdfdfd;
--foreground: #282728;
--accent: #006cac;
--accent-foreground: #ffffff;
--muted: #e6e6e6;
--muted-foreground: #6b7280;
--border: #ece9e9;
}
/* Dark theme values */
[data-theme="dark"] {
--background: #212737;
--foreground: #eaedf3;
--accent: #ff6b01;
--accent-foreground: #ffffff;
--muted: #343f60;
--muted-foreground: #afb9ca;
--border: #ab4b08;
}
```
--------------------------------
### Astro Integration of Giscus Script
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-integrate-giscus-comments.md
This Astro code snippet shows where to place the Giscus script tag within the PostDetails.astro file to enable comments on blog posts.
```astro
```
--------------------------------
### Giscus React Component for Dynamic Theming
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-integrate-giscus-comments.md
A React component that wraps the Giscus component and dynamically switches themes based on user preferences or site theme changes. It uses local storage and media queries to determine the initial theme and listens for changes.
```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 (
);
}
```
--------------------------------
### Paper Light Color Scheme
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
Default AstroPaper light theme. Apply this scheme to set light mode colors.
```css
:root,
[data-theme="light"] {
--background: #fdfdfd;
--foreground: #282728;
--accent: #006cac;
--accent-foreground: #ffffff;
--muted: #e6e6e6;
--muted-foreground: #6b7280;
--border: #ece9e9;
}
```
--------------------------------
### Remove Shiki Transformers
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
If you do not wish to use Shiki transformers for enhanced fenced code blocks, you can remove them using pnpm.
```bash
pnpm remove @shikijs/transformers
```
--------------------------------
### AstroPaper Design Tokens
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Define CSS custom properties for the color palette in src/styles/theme.css, registering them with Tailwind v4 via @theme inline.
```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;
}
```
--------------------------------
### Kha-Yan Light Color Scheme
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
A purple-focused light scheme with a warm background. Use this for a distinct light theme.
```css
:root,
[data-theme="light"] {
--background: #fefaec;
--foreground: #120e01;
--accent: #6e10cf;
--accent-foreground: #fefaec;
--muted: #dcdcdc;
--muted-foreground: #6b7280;
--border: #cdc4d6;
}
```
--------------------------------
### Import SVG Logo in Astro Component
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-configure-astropaper-theme.mdx
Import an SVG file from the `src/assets/` directory into your Astro component. This allows you to use the SVG as a logo.
```astro
---
// ...
import DummyLogo from "@/assets/dummy-logo.svg";
---
```
--------------------------------
### Jadeite Light Color Scheme
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
A teal-accented light scheme with a neutral background. Suitable for a clean, modern look.
```css
:root,
[data-theme="light"] {
--background: #f6fcf7;
--foreground: #060b07;
--accent: #027c6d;
--accent-foreground: #ffffff;
--muted: #c9e4e2;
--muted-foreground: #6b7280;
--border: #d4e1df;
}
```
--------------------------------
### Update Patch Dependencies Automatically
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
This command automatically updates all patch-level dependencies without prompting. Use with caution if you prefer manual review.
```bash
ncu -u --target patch
```
--------------------------------
### Define Content Collection Schema
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-6.md
Define the schema for the 'posts' collection using Astro's glob loader and Zod for validation. This replaces the older defineCollection with type: 'content'.
```typescript
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(),
// …
}),
});
```
--------------------------------
### Add Table of Contents to a Post
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/adding-new-post.mdx
To include a table of contents in a post, add '## Table of contents' in Markdown where you want it to appear.
```markdown
---
# frontmatter
---
Here are some recommendations, tips & tricks for creating new posts in AstroPaper blog theme.
## Table of contents
```
--------------------------------
### Pyit Tine Htaung Light Color Scheme
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
A red and gold accent scheme with warm tones. Use this for a vibrant, energetic light theme.
```css
:root,
[data-theme="light"] {
--background: #fffaf6;
--foreground: #060503;
--accent: #aa0215;
--accent-foreground: #ffcf75;
--muted: #ffdc98;
--muted-foreground: #54515b;
--border: #ffdc98;
}
```
--------------------------------
### Nila Light Color Scheme
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
A light purple scheme with cool blue undertones. Ideal for a serene light interface.
```css
:root,
[data-theme="light"] {
--background: #f6f6fb;
--foreground: #0c0c19;
--accent: #6760b4;
--accent-foreground: #f3f3f3;
--muted: #dddcea;
--muted-foreground: #54515b;
--border: #d8d6ec;
}
```
--------------------------------
### Enable/Disable Light and Dark Mode
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/customizing-astropaper-theme-color-schemes.mdx
Control the light and dark mode feature by setting `features.lightAndDarkMode` in `astro-paper.config.ts`. When disabled, the site defaults to the light color scheme.
```typescript
export default defineAstroPaperConfig({
// ...
features: {
lightAndDarkMode: true, // [!code highlight]
// ...
},
});
```
--------------------------------
### Pull with Unrelated Histories Allowed
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/how-to-update-dependencies.md
Use this command if you encounter the 'fatal: refusing to merge unrelated histories' error. It allows merging histories that do not share a common ancestor.
```bash
git pull astro-paper main --allow-unrelated-histories
```
--------------------------------
### Espresso Color Scheme CSS
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_color-schemes/predefined-color-schemes.mdx
Applies the Espresso color scheme for dark mode. Ideal for a brown-focused warm dark theme.
```css
[data-theme="dark"] {
--background: #2f2f2f;
--foreground: #ebe5e1;
--accent: #ee781e;
--accent-foreground: #1a1a1a;
--muted: #4f4b44;
--muted-foreground: #ddbfa7;
--border: #6f5648;
}
```
--------------------------------
### Update BlogFrontmatter Type in Card.tsx
Source: https://github.com/satnaing/astro-paper.git/blob/main/src/content/posts/_releases/astro-paper-3.md
This shows the necessary type update in `src/components/Card.tsx` to align with AstroPaper v3's schema changes. The `BlogFrontmatter` type is replaced with `CollectionEntry<"blog">["data"]`.
```typescript
// AstroPaper v2
import type { BlogFrontmatter } from "@content/_schemas";
export interface Props {
href?: string;
frontmatter: BlogFrontmatter;
secHeading?: boolean;
}
```
```typescript
// AstroPaper v3
import type { CollectionEntry } from "astro:content";
export interface Props {
href?: string;
frontmatter: CollectionEntry<"blog">["data"];
secHeading?: boolean;
}
```