@love-rox/ptpt-rehype

@love-rox/ptpt-core はピア依存です（クライアント hydrator が利用します）。unified ベースのビルド（remark / rehype / Astro / eleventy など）で使えます。Astro 専用に最適化された API が必要な場合は Astro 版 を使ってください。

rehypePlugins に rehypePtpt を追加します。認識される入力は2種類——マーカークラスを付けたインライン要素（<span class="patapata">HELLO</span>）と、 `patapata でタグ付けしたフェンス（1行が盤面1行）です。あとは hydrate() が見つけたものをすべて動かします。

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";
import rehypePtpt from "@love-rox/ptpt-rehype";

// Markdown marks a board with the marker class (or a ```patapata fence):
const md = '<span class="patapata" data-preset="alphanumeric">TOKYO</span>';

const html = String(
  await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeRaw)
    .use(rehypePtpt)
    .use(rehypeStringify)
    .process(md),
);
// <span class="ptpt" data-ptpt-targets="TOKYO" data-ptpt-preset="alphanumeric">TOKYO</span>

// Browser entry — animate everything the plugin emitted.
import { hydrate } from "@love-rox/ptpt-rehype/client";
import "@love-rox/ptpt-core/styles.css";

// scans the document for [data-ptpt-targets] and flips them into boards
hydrate();

プラグインは className / fenceLanguage / defaultPreset を受け取ります。下記の共通セルオプションは盤面ごとに data-ptpt-* 属性から読まれ、React / Vue / Astro と同じ意味で動きます。

• ▸プログレッシブです。build はプレーンで読めるテキストを出力するので、JS がなくても内容は残ります。hydrate はアニメーションを足すだけです。
• ▸インラインのマーカーは <span class="ptpt" data-ptpt-targets="…"> になり、 `patapata ブロックは1行ごとの盤面行になります。
• ▸マーカーに付けた data-preset / data-duration / data-direction は、出力の data-ptpt-* にそのまま引き継がれます。
• ▸選んだプリセットは対象文字をすべて含んでいる必要があります。含まないとその盤面は空欄になります——混在テキストには default / alphanumeric を選んでください。

Astro 4+ で .md / .mdx / .astro を扱うなら、このプラグインの登録・スタイルシートの注入・hydrator の実行をまとめて行い、.astro 用の <Patapata> コンポーネントも同梱した Astro インテグレーション が便利です。