### 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 ![something](@/assets/images/example.jpg) ![something](../../assets/images/example.jpg) something ``` -------------------------------- ### 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 ![something](/assets/images/example.jpg) something ``` -------------------------------- ### 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]