### Install LaTeX dependencies
Source: https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts
Install the required remark and rehype plugins for KaTeX support.
```bash
pnpm install rehype-katex remark-math katex
```
--------------------------------
### Example git diff output
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Sample output showing a file that has been added to the staging area.
```text
A src/content/blog/setting-dates-via-git-hooks.md
```
--------------------------------
### Example: Changing Light Color Scheme
Source: https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes
An example demonstrating how to modify the light color scheme by updating the CSS variables within the `:root, html[data-theme="light"]` block in `global.css`. This allows for quick visual changes to the website's light theme.
```css
/* ... */
:root,
html[data-theme="light"] {
--background: #f6eee1;
--foreground: #012c56;
--accent: #e14a39;
--muted: #efd8b0;
--border: #dc9891;
}
/* ... */
```
--------------------------------
### Install Giscus React dependencies
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
Install the required Giscus React package and add React support to the Astro project.
```bash
npm i @giscus/react && npx astro add react
```
--------------------------------
### Sample Blog Post Frontmatter
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
An example of frontmatter for a blog post in AstroPaper. It includes common properties like title, author, publication date, slug, tags, and description.
```yaml
---
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
---
```
--------------------------------
### Import modules using the updated alias
Source: https://astro-paper.pages.dev/posts/astro-paper-v5
Example of using the new @/ import alias syntax in Astro components.
```javascript
---
import { slugifyStr } from "@/utils/slugify";
import IconHash from "@/assets/icons/IconHash.svg";
---
```
--------------------------------
### Check for All Remaining Dependency Updates
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
This command checks for any remaining updates, including major versions, and prompts for interactive installation. Be cautious with major updates as they may introduce breaking changes.
```bash
ncu -iCopy
```
--------------------------------
### Blog Post Structure and URL Examples
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
Illustrates how the file path of a markdown blog post determines its URL. Subdirectories typically form part of the URL, but can be excluded by prefixing them with an underscore.
```markdown
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
```
--------------------------------
### Install npm-check-updates Globally
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Install the npm-check-updates package globally to use its commands. This is a prerequisite for managing dependency updates.
```bash
npm install -g npm-check-updatesCopy
```
--------------------------------
### Update Minor Dependencies Interactively
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Checks for minor dependency updates and allows you to select which ones to install. Review release notes for potential breaking changes.
```bash
ncu -i --target minorCopy
```
--------------------------------
### Integrating Giscus in PostDetails.astro
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
Example of placing the Giscus script tag within the Astro component layout for post details.
```astro
```
--------------------------------
### Adding Table of Contents in Markdown
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
This example demonstrates how to include a table of contents in an AstroPaper blog post by adding '## Table of contents' in markdown. Place this heading where you want the TOC to appear.
```markdown
---
# frontmatter
---
Here are some recommendations, tips & ticks for creating new posts in AstroPaper blog theme.
## Table of contents
```
--------------------------------
### Import KaTeX CSS in Layout
Source: https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts
Add the KaTeX stylesheet to the main layout file to ensure proper rendering.
```astro
---
import { SITE } from "@config";
// astro code
---
```
--------------------------------
### Check for Updatable Dependencies
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Run this command to see a list of all dependencies that have available updates. It helps in assessing the scope of updates needed.
```bash
ncuCopy
```
--------------------------------
### Configure Default Blog Tags
Source: https://astro-paper.pages.dev/posts/astro-paper-2
Defines the default tag for blog posts within the blog schema configuration file.
```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(),
});
```
--------------------------------
### Create Update Branch
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Initializes a new branch to safely perform the template update.
```bash
git checkout -b build/update-astro-paper
```
--------------------------------
### Markdown and HTML Image Syntax with public/
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
Store images in the public/ directory for direct access. These images are unoptimized. Use absolute paths in markdown or HTML `` tags. Astro does not optimize these images.
```markdown

Copy
```
--------------------------------
### Configure Shiki Syntax Highlighting in Astro
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
Configure Shiki syntax highlighting in your Astro project by importing necessary transformers and defining themes in the astro.config.ts file. Ensure themes are correctly specified.
```typescript
// ...
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(),
transformerNotationHighlight(),
transformerNotationWordHighlight(),
transformerNotationDiff({ matchAlgorithm: "v3" }),
],
},
},
// ...
}astro.config.tsCopy
```
--------------------------------
### Configure Astro for LaTeX
Source: https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts
Update the astro.config.ts file to include remark-math and rehype-katex plugins.
```typescript
// ...
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
export default defineConfig({
// ...
markdown: {
remarkPlugins: [
remarkMath,
remarkToc,
[remarkCollapse, { test: "Table of contents" }],
],
rehypePlugins: [rehypeKatex],
shikiConfig: {
// For more themes, visit https://shiki.style/themes
themes: { light: "min-light", dark: "night-owl" },
wrap: false,
},
},
// ...
});
```
--------------------------------
### Update Content Fetching Method
Source: https://astro-paper.pages.dev/posts/astro-paper-2
Replaces the legacy import.meta.glob method with the new getCollection API for fetching blog posts.
```typescript
// old content fetching method
- const postImportResult = import.meta.glob>(
"../contents/**/**/*.md",);
// new content fetching method
+ const postImportResult = await getCollection("blog");
```
--------------------------------
### Markdown Image Syntax with src/assets/
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
Store images in the src/assets/ directory for automatic optimization by Astro. Use relative or alias paths in markdown for these images. Using `` tags or Astro's Image component directly with these paths will not work.
```markdown


```
--------------------------------
### Configure SITE settings in src/config.ts
Source: https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes
Modify the SITE object to toggle light and dark mode support by setting lightAndDarkMode to true or false.
```typescript
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,
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;
```
--------------------------------
### Import Image component and logo in Header.astro
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Import the Astro Image component and a standard image file for use as a logo.
```astro
---
// ...
import { Image } from "astro:assets";
import dummyLogo from "@/assets/dummy-logo.png";
---
```
--------------------------------
### Define light color schemes
Source: https://astro-paper.pages.dev/posts/predefined-color-schemes
Use the :root and html[data-theme="light"] selectors to apply custom light mode colors.
```css
:root,
html[data-theme="light"] {
--background: #f6eee1;
--foreground: #012c56;
--accent: #e14a39;
--muted: #efd8b0;
--border: #dc9891;
}
```
```css
:root,
html[data-theme="light"] {
--background: #f2f5ec;
--foreground: #353538;
--accent: #1158d1;
--muted: #bbc789;
--border: #7cadff;
}
```
```css
:root,
html[data-theme="light"] {
--background: #fafcfc;
--foreground: #222e36;
--accent: #d3006a;
--muted: #f1bad4;
--border: #e3a9c6;
}
```
--------------------------------
### Configure SITE object in src/config.ts
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Defines the main website settings including metadata, SEO options, and feature toggles. Ensure the website URL is set correctly for production environments.
```typescript
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;
```
--------------------------------
### Update layout width in global.css
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Modifies the site's maximum width by updating the max-w-app utility in the global stylesheet.
```css
@utility max-w-app {
@apply max-w-3xl;
@apply max-w-4xl xl:max-w-5xl;
}
```
--------------------------------
### Integrate Comments component into Astro layout
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
Import and render the Comments component in the PostDetails layout using the client:only directive.
```astro
import Comments from "@/components/Comments";
```
--------------------------------
### Define Blog Schema with Default Tags
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
This code snippet shows how to define the blog schema using Zod, specifically how to set a default value for the 'tags' property. This ensures that if no tags are provided, 'others' will be used.
```typescript
export const blogSchema = z.object({
// ...
draft: z.boolean().optional(),
tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want
// ...
});
```
--------------------------------
### Update Patch Dependencies Interactively
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
This command checks for patch updates and prompts you to confirm each update individually. Use this for safe, incremental updates.
```bash
ncu -i --target patchCopy
```
--------------------------------
### Render Block Equations
Source: https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts
Use double dollar signs to display complex equations on their own lines.
```markdown
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$
```
```markdown
$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$
```
```markdown
$$
\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}
$$
```
--------------------------------
### Define Blog Post Frontmatter with Slug
Source: https://astro-paper.pages.dev/posts/astro-paper-v4
Use the slug field in the frontmatter to define the URL path for a blog post. If omitted, the filename is used as the default slug.
```markdown
---
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
---
```
--------------------------------
### Add AstroPaper Remote
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Registers the official AstroPaper repository as a remote source for your project.
```bash
git remote add astro-paper https://github.com/satnaing/astro-paper.git
```
--------------------------------
### Configure social links in constants.ts
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Define the social media platforms and their respective links and icons.
```typescript
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;
```
--------------------------------
### Configure Tailwind CSS
Source: https://astro-paper.pages.dev/posts/examples/tailwind-typography
Default configuration file for Tailwind CSS projects.
```javascript
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
```
--------------------------------
### Set initial color scheme in src/scripts/theme.ts
Source: https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes
Define the initialColorScheme variable to force a specific theme or fallback to system preferences.
```typescript
// Initial color scheme
// Can be "light", "dark", or empty string for system's prefers-color-scheme
const initialColorScheme = ""; // "light" | "dark"
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";
}
```
--------------------------------
### Pull Updates
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
Fetches and merges changes from the AstroPaper main branch.
```bash
git pull astro-paper main
```
```bash
git pull astro-paper main --allow-unrelated-histories
```
--------------------------------
### Render SVG logo in Header.astro
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Replace the site title text with the imported SVG component.
```astro
```
--------------------------------
### Update BlogFrontmatter schema reference
Source: https://astro-paper.pages.dev/posts/astro-paper-v3
Shows the transition from the deprecated BlogFrontmatter type to the standard CollectionEntry type in component props.
```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;
}
```
--------------------------------
### Define Light and Dark Color Schemes in CSS
Source: https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes
Customize the light and dark color schemes by defining CSS variables within the `:root`, `html[data-theme="light"]`, and `html[data-theme="dark"]` selectors in `global.css`. This sets the primary, secondary, accent, muted, and border colors for different themes.
```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;
}
/* ... */
```
--------------------------------
### Update All Patch Dependencies
Source: https://astro-paper.pages.dev/posts/how-to-update-dependencies
This command automatically updates all patch-level dependencies without prompting. Use with caution if you prefer manual review.
```bash
ncu -u --target patchCopy
```
--------------------------------
### Import SVG logo in Header.astro
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Import an SVG file from the assets directory to be used as a logo component.
```astro
---
// ...
import DummyLogo from "@/assets/dummy-logo.svg";
---
```
--------------------------------
### Style LaTeX with Tailwind
Source: https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts
Add text-color styling for KaTeX elements in typography.css.
```css
@plugin "@tailwindcss/typography";
@layer base {
/* other classes */
/* Katex text color */
.prose .katex-display {
@apply text-foreground;
}
/* ===== Code Blocks & Syntax Highlighting ===== */
/* other classes */
}
```
--------------------------------
### Configure custom font in astro.config.ts
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Register a new font provider and configuration within the experimental fonts settings.
```typescript
import { defineConfig, fontProviders } from "astro/config";
export default defineConfig({
// ...
experimental: {
fonts: [
{
name: "Your Font Name",
cssVariable: "--font-your-font",
provider: fontProviders.google(),
fallbacks: ["monospace"],
weights: [300, 400, 500, 600, 700],
styles: ["normal", "italic"],
},
],
},
});
```
--------------------------------
### Extract Draft Status from Frontmatter
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Uses cat and awk to isolate the frontmatter block and extract the value of the draft key.
```bash
filecontent=$(cat "$file")
frontmatter=$(echo "$filecontent" | awk -v RS='---' 'NR==2{print}')
draft=$(echo "$frontmatter" | awk '/^draft: /{print $2}')
```
--------------------------------
### Update CSS for code block wrapping
Source: https://astro-paper.pages.dev/posts/astro-paper-v3
Adjusts base styles in /src/styles/base.css to ensure proper word wrapping for code and blockquotes.
```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 */
}
```
--------------------------------
### Map CSS variable in global.css
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Update the theme configuration to map the custom font variable to the application font utility.
```css
@theme inline {
--font-app: var(--font-your-font);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-accent: var(--accent);
--color-muted: var(--muted);
--color-border: var(--border);
}
```
--------------------------------
### Define dark color schemes
Source: https://astro-paper.pages.dev/posts/predefined-color-schemes
Use the html[data-theme="dark"] selector to apply custom dark mode colors.
```css
html[data-theme="dark"] {
--background: #2f3741;
--foreground: #e6e6e6;
--accent: #1ad9d9;
--muted: #596b81;
--border: #3b4655;
}
```
```css
html[data-theme="dark"] {
--background: #21233d;
--foreground: #f4f7f5;
--accent: #ff5256;
--muted: #4a4e86;
--border: #b12f32;
}
```
```css
html[data-theme="dark"] {
--background: #353640;
--foreground: #e9edf1;
--accent: #ff78c8;
--muted: #715566;
--border: #86436b;
}
```
```css
html[data-theme="dark"] {
--background: #212737;
--foreground: #eaedf3;
--accent: #ff6b01;
--muted: #8a3302;
--border: #ab4b08;
}
```
```css
html[data-theme="dark"] {
--background: #212737; /* lower contrast background */
--foreground: #eaedf3;
--accent: #ff6b01;
--muted: #8a3302;
--border: #ab4b08;
}
```
```css
html[data-theme="dark"] {
--background: #212737;
--foreground: #eaedf3;
--accent: #eb3fd3;
--muted: #7d4f7c;
--border: #642451;
}
```
```css
html[data-theme="dark"] {
--background: #000123;
--accent: #617bff;
--foreground: #eaedf3;
--muted: #0c0e4f;
--border: #303f8a;
}
```
--------------------------------
### Remove Shiki Transformers
Source: https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme
If you don't want to use @shikijs/transformers for enhanced fenced code blocks, you can remove it using this command.
```bash
pnpm remove @shikijs/transformersCopy
```
--------------------------------
### Update Publication Date for New Files
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Identifies newly added Markdown files via git diff and updates their pubDatetime field using sed.
```bash
# 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
```
--------------------------------
### Render Image logo in Header.astro
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Use the Image component to display a non-SVG logo.
```astro
```
--------------------------------
### Configure Nullable modDatetime in Schema
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Updates the Astro collection schema to allow modDatetime to be optional and nullable.
```typescript
const blog = defineCollection({
type: "content",
schema: ({ image }) =>
z.object({
author: z.string().default(SITE.author),
pubDatetime: z.date(),
modDatetime: z.date().optional(),
modDatetime: z.date().optional().nullable(),
title: z.string(),
featured: z.boolean().optional(),
draft: z.boolean().optional(),
tags: z.array(z.string()).default(["others"]),
ogImage: image().or(z.string()).optional(),
description: z.string(),
canonicalURL: z.string().optional(),
readingTime: z.string().optional(),
}),
});
```
--------------------------------
### Create theme-aware Comments component
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
A React component that listens for system and UI theme changes to update the Giscus theme dynamically.
```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 (
);
}
```
--------------------------------
### Define CSS color variables for Tailwind v4
Source: https://astro-paper.pages.dev/posts/astro-paper-v5
CSS variables for light and dark themes defined in the global stylesheet.
```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;
}
```
--------------------------------
### Configure fonts for dynamic OG images
Source: https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts
Modify the fontsConfig array in src/utils/loadGoogleFont.ts to support non-Latin characters in generated OG images.
```typescript
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",
},
];
// ...
}
```
--------------------------------
### Define Giscus configuration constants
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
Define the Giscus configuration object in constants.ts. Note that setting a theme property here will override dynamic theme switching.
```typescript
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 Interface for Nullable Date
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Updates the TypeScript interface in Layout.astro to accept null for modDatetime.
```typescript
export interface Props {
title?: string;
author?: string;
description?: string;
ogImage?: string;
canonicalURL?: string;
pubDatetime?: Date;
modDatetime?: Date | null;
}
```
--------------------------------
### Giscus Client Script Tag
Source: https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments
The standard script tag provided by Giscus for embedding comments. Replace the placeholder attributes with your specific repository and category details.
```html
```
--------------------------------
### Update Font component in Layout.astro
Source: https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme
Load the custom font using the Font component in the document head.
```astro
---
import { Font } from "astro:assets";
// ...
---
```
--------------------------------
### Apply prose class to HTML content
Source: https://astro-paper.pages.dev/posts/examples/tailwind-typography
Use the 'prose' class on a container element to automatically style nested headings, paragraphs, and other typographic elements.
```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.
```
--------------------------------
### Update modDatetime via pre-commit hook
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
This script iterates through staged Markdown files, updating the modDatetime frontmatter field if the draft status is false, or finalizing the draft status if set to first.
```bash
# Modified files, update the modDatetime
git diff --cached --name-status |
grep -i '^M.*\.md$' |
while read _ file; do
filecontent=$(cat "$file")
frontmatter=$(echo "$filecontent" | awk -v RS='---' 'NR==2{print}')
draft=$(echo "$frontmatter" | awk '/^draft: /{print $2}')
if [ "$draft" = "false" ]; then
echo "$file modDateTime updated"
cat $file | sed "/---.*/,/---.*/s/^modDatetime:.*$/modDatetime: $(date -u "+%Y-%m-%dT%H:%M:%SZ")/" > tmp
mv tmp $file
git add $file
fi
if [ "$draft" = "first" ]; then
echo "First release of $file, draft set to false and modDateTime removed"
cat $file | sed "/---.*/,/---.*/s/^modDatetime:.*$/modDatetime:/" | sed "/---.*/,/---.*/s/^draft:.*$/draft: false/" > tmp
mv tmp $file
git add $file
fi
done
```
--------------------------------
### Update Datetime Component Props
Source: https://astro-paper.pages.dev/posts/setting-dates-via-git-hooks
Updates the Datetime component interface to allow null values for modDatetime.
```typescript
interface DatetimesProps {
pubDatetime: string | Date;
modDatetime: string | Date | undefined | null;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.