feat: add Astro example (custom components + CSS) by r4ai · Pull Request #428 · r4ai/remark-callout

r4ai · 2026-03-25T06:39:43Z

Summary

Adds examples/astro/ — a new Astro + MDX example project demonstrating two approaches for using @r4ai/remark-callout.

Pages

Route	Description
`/`	Home page with links to both examples
`/custom-components`	Callouts styled with custom React components + Tailwind CSS
`/css`	Callouts styled with plain CSS (zero JS)

Approach 1 — Custom Components (`/custom-components`)

Configures remark-callout to emit custom element names (callout-root, callout-title, callout-body)
Maps them to React components via MDX export const components = {...}
Tailwind CSS v4 + @radix-ui/react-icons for per-type icons
Foldable callouts use native <details>/<summary> inside the React component

Approach 2 — CSS Only (`/css`)

Uses the same custom element output from remark-callout
No React component mapping — custom elements render as plain HTML
Styled entirely via src/styles/callout.css using element selectors (callout-root[type="note"] etc.)
CSS custom properties (--callout-color) for per-type theming
Zero JavaScript required for callout rendering

Tech Stack

Astro v5.18 (latest)
@astrojs/mdx v5 (latest)
@astrojs/react v5 (latest)
Tailwind CSS v4 (latest)
React 19
All packages installed via bun

Checklist

astro build passes with 0 errors
astro check passes with 0 errors / warnings
Both pages render all callout types correctly

Adds examples/astro/ demonstrating two approaches for using @r4ai/remark-callout in an Astro + MDX project: - /custom-components: callouts rendered via custom React components (CalloutRoot / CalloutTitle / CalloutBody) with Tailwind CSS styling and foldable <details>/<summary> support - /css: callouts rendered as plain custom HTML elements (callout-root / callout-title / callout-body) styled with pure CSS custom properties — zero JS runtime required Tech stack: Astro v5, @astrojs/mdx, @astrojs/react, Tailwind CSS v4

changeset-bot · 2026-03-25T06:39:47Z

⚠️ No Changeset found

Latest commit: 1b5770b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codecov · 2026-03-25T06:41:04Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Add @custom-variant dark to global.css for class-based dark mode - Add ThemeToggle.astro: sun/moon button that toggles .dark on <html> and persists preference to localStorage - Add anti-FOUC inline script in BaseLayout <head> to apply the saved theme before first paint - Add sticky header with nav links and ThemeToggle to BaseLayout - Rewrite index.astro with Tailwind dark: classes (remove all inline styles) - Remove duplicate global.css imports from MDX pages (now in BaseLayout) - Add callout.css dark mode overrides: lighter per-type colors (e.g. blue-400 instead of blue-500) and slightly higher opacity for legibility on dark backgrounds - Add playwright.config.ts and @playwright/test for upcoming E2E tests

Copilot

Pull request overview

Adds a new examples/astro/ workspace project to demonstrate integrating @r4ai/remark-callout with Astro + MDX, including both React-component rendering and a CSS-only styling approach.

Changes:

Introduces an Astro + MDX example with two routes: custom React component mapping and CSS-only styling.
Adds Tailwind v4 styling, theme toggle (dark mode), and comprehensive callout CSS for all supported callout types.
Adds example project configuration (Astro config, TS config, Playwright config, workspace deps) and updates bun.lock.

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
examples/astro/tsconfig.json	Astro strict TS config with `@/*` path alias.
examples/astro/src/styles/global.css	Tailwind v4 base setup + dark variant + base element resets.
examples/astro/src/styles/callout.css	CSS-only callout styling using custom element selectors and per-type theming.
examples/astro/src/pages/index.astro	Landing page linking to the two example approaches.
examples/astro/src/pages/custom-components.mdx	MDX page mapping `callout-*` elements to React components.
examples/astro/src/pages/css.mdx	MDX page demonstrating styling `callout-*` elements via CSS only.
examples/astro/src/layouts/BaseLayout.astro	Shared layout shell with nav + anti-FOUC theme init.
examples/astro/src/env.d.ts	Astro type reference for generated `.astro` types.
examples/astro/src/components/ThemeToggle.astro	Client-side theme toggle button + icon swapping.
examples/astro/src/components/Callout.tsx	React callout components that render foldable callouts with `<details>/<summary>`.
examples/astro/playwright.config.ts	Playwright configuration for the example workspace.
examples/astro/package.json	Example workspace package definition + dependencies/scripts.
examples/astro/astro.config.ts	Astro integrations + Tailwind Vite plugin + `remarkCallout` custom element output.
examples/astro/README.md	Documentation explaining both approaches and setup steps.
examples/astro/.gitignore	Example-specific ignores (dist, .astro, node_modules, env files, etc.).
bun.lock	Workspace lockfile updates to include the new example package and dependencies.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/astro/src/components/ThemeToggle.astro

examples/astro/src/styles/callout.css

examples/astro/package.json

examples/astro/src/components/Callout.tsx

- Update nested biome.json configs to use 'extends: //' syntax - Add check/check:write scripts to root package.json - Remove check scripts from individual packages - Remove Prettier from website package (use Biome for all formatting) - Remove check tasks from turbo.json (now run directly from root) - Update lefthook.yml to run Biome from root for all packages Following Biome v2 monorepo best practices with centralized execution to reduce management overhead. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Apply Biome formatting to all TypeScript, JavaScript, JSON, and other supported files across the monorepo using the consolidated root-level Biome configuration. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

r4ai requested a review from Copilot March 25, 2026 07:08

Copilot started reviewing on behalf of r4ai March 25, 2026 07:08 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

r4ai and others added 4 commits March 25, 2026 18:30

style: apply Biome formatting across all packages

ff92706

Apply Biome formatting to all TypeScript, JavaScript, JSON, and other supported files across the monorepo using the consolidated root-level Biome configuration. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

fix: address Astro example review feedback

b46f2ba

feat(examples/astro): replace @radix-ui/react-icons with lucide-react

1b5770b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Astro example (custom components + CSS)#428

feat: add Astro example (custom components + CSS)#428
r4ai wants to merge 6 commits intomainfrom
feature/astro-example

r4ai commented Mar 25, 2026

Uh oh!

changeset-bot bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

r4ai commented Mar 25, 2026

Summary

Pages

Approach 1 — Custom Components (/custom-components)

Approach 2 — CSS Only (/css)

Tech Stack

Checklist

Uh oh!

changeset-bot bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

codecov bot commented Mar 25, 2026

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Approach 1 — Custom Components (`/custom-components`)

Approach 2 — CSS Only (`/css`)

changeset-bot bot commented Mar 25, 2026 •

edited

Loading