@love-rox/ptpt-astro

Name: patapata
Author: Love-Rox

Astro 4+ only. The integration wires up the Markdown plugin, injects the stylesheet, and runs the client hydrator for you. Ships Patapata.astro and PatapataBoard.astro to drop a display straight into a template.

v0.1.1MITastro >= 4

Demo View on npm GitHub

GATE01

Install

Peer dependencies: astro >= 4 and @love-rox/ptpt-core. @love-rox/ptpt-rehype is pulled in automatically.

bun

bun add @love-rox/ptpt-astro

pnpm

pnpm add @love-rox/ptpt-astro

npm

npm i @love-rox/ptpt-astro

yarn

yarn add @love-rox/ptpt-astro

GATE02

Pieces

Two pieces

ptpt() integration

Registers @love-rox/ptpt-rehype on Astro's Markdown / MDX pipeline, injects @love-rox/ptpt-core/styles.css, and runs the client hydrator on every page — so marked content in .md / .mdx animates with no extra wiring.

Astro components that emit static, readable markup the hydrator animates on load. <Patapata> is one inline display; <PatapataBoard> splits on newlines into rows.

GATE03

Usage

Add the integration to astro.config.mjs. That alone makes marked Markdown / MDX content animate and injects the stylesheet + hydrator.

astro.config.mjsts

// astro.config.mjs
import { defineConfig } from "astro/config";
import ptpt from "@love-rox/ptpt-astro";

export default defineConfig({
  integrations: [ptpt()],
});

With options

Toggle each piece, and forward rehype options (like defaultPreset) through markdown.

astro.config.mjs (with options)ts

// astro.config.mjs
import { defineConfig } from "astro/config";
import ptpt from "@love-rox/ptpt-astro";

export default defineConfig({
  integrations: [
    ptpt({
      // forward rehype options (e.g. a default preset name)
      markdown: { defaultPreset: "alphanumeric" },
      styles: true,
      hydrate: true,
    }),
  ],
});

Inside an `.astro` file

Drop a display straight into a template with the <Patapata> component. preset here is a preset name, resolved by the hydrator.

src/pages/example.astroastro

---
import Patapata from "@love-rox/ptpt-astro/Patapata.astro";
import PatapataBoard from "@love-rox/ptpt-astro/PatapataBoard.astro";
---

<!-- preset is a built-in preset NAME, resolved by the hydrator -->
<Patapata target="TOKYO" preset="alphanumeric" />

<PatapataBoard targets={`TOKYO\nOSAKA`} preset="alphanumeric" />

GATE04

Options

The shared cell options (carried via data-ptpt-*) behave exactly as they do in the React / Vue / rehype adapters. The integration itself has three toggles.

Shared cell options + rehype passthrough

Option	Type	Default	Description
preset	PresetDefinition \| string	defaultPreset	The flap set. Pass a `PresetDefinition` (its `recommendedDuration` / `locale` become defaults) or a string of characters whose order is the flap order. Mutually exclusive with `frames`.
frames	FrameInput[]	undefined	An explicit frame set — text, images, or arbitrary elements. Mutually exclusive with `preset`.
durationPerFlap	number	preset's recommendation, else 200	Milliseconds for one flap. Overrides the preset's `recommendedDuration`.
direction	'forward' \| 'shortest'	'forward'	Direction taken through the frame ring. `shortest` may reverse to reach a nearer flap.
reducedMotion	'instant' \| 'minimal' \| 'ignore'	'instant'	Behaviour when the OS prefers reduced motion. `instant` snaps to the target without animating.
className	string	'patapata'	Class that marks an inline element for conversion into a board.
fenceLanguage	string	'patapata'	Code-fence language that marks a fenced block for conversion.
defaultPreset	string	undefined	Preset name applied when an element / block specifies none.

Integration options

Option	Type	Default	Description
markdown	boolean \| RehypePtptOptions	true	Register `rehypePtpt` on the Markdown / MDX pipeline. Pass an object to forward rehype options (e.g. `defaultPreset`); set `false` to opt out.
styles	boolean	true	Inject `@love-rox/ptpt-core/styles.css` on every page.
hydrate	boolean	true	Inject the client hydrator that runs on load.

GATE05

Behaviour

Behavior notes

Astro is SSG-first, so the plugin runs at build time — the only client cost is the small hydrator that animates the static markup.
Without JS the boards still render as plain, readable text; hydration just adds the flip.
markdown: false opts out of the Markdown pipeline (e.g. if you only want the components); styles: false / hydrate: false skip those injections.
The components and the Markdown plugin share the same data-ptpt-* output, so .astro-authored and Markdown content behave identically.

GATE06

Other adapters

Not using Astro? Drop the rehype plugin into your unified pipeline directly. Need runtime control in an app? Use the React or Vue components.

← Back to package family