@luma-dev/my-unified

[!WARNING] このパッケージが提供するプラグインは私のユースケースに特化したものなので，直接使うのは推奨しません．
The plugins provided by this package are specific to my use case, so I do not recommend using them directly!

下記の通りCC0でライセンスしていますので，コピペしてご利用することをおすすめします．

ライセンス

MITとCC0でライセンスされています

インストール

npm i @luma-dev/my-unified

Next.jsでの設定例

ESM (package.jsonのtype=module) 前提での設定例．プラグインの指定順は結果に影響を与えるため注意．

// next.config.js
import remarkGfm from "remark-gfm";
import remarkFrontmatter from "remark-frontmatter";
import remarkMath from "remark-math";

import createMDX from "@next/mdx";

import rehypeKatex from "@luma-dev/my-unified/rehype-katex";
import remarkTerm from "@luma-dev/my-unified/remark-term";
import remarkMeta from "@luma-dev/my-unified/remark-meta";
import rehypeReplaceText from "@luma-dev/my-unified/rehype-replace-text";
import rehypeSave from "@luma-dev/my-unified/rehype-save";
import rehypeCounter from "@luma-dev/my-unified/rehype-counter";
import rehypeAddSlug from "@luma-dev/my-unified/rehype-add-slug";
import rehypeWrap from "@luma-dev/my-unified/rehype-wrap";
import rehypeCleanInternal from "@luma-dev/my-unified/rehype-clean-internal";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      remarkGfm,
      rehypeReplaceText,
      rehypeKatex,
      rehypeSave,
      rehypeCounter,

      rehypeAddSlug,
      rehypeWrap,

      rehypeCleanInternal,
    ],
    remarkPlugins: [remarkFrontmatter, remarkMath, remarkTerm, remarkMeta],
  },
});

export default withMDX(nextConfig);

// mdx-components.tsx
import type {
  LumaMdxLayoutProps,
  LumaKatexProps,
  LumaCounterProps,
  LumaLoadedProps,
  LumaTermProps,
} from "@luma-type/my-unified/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    LumaMdxLayout: (props: LumaMdxLayoutProps) => (
      /* Replace with your component */
      <div>
        <div>LumaMdxLayout</div>
        {props.children}
      </div>
    ),
    LumaKatex: (props: LumaKatexProps) => (
      /* Replace with your component */
      <div>
        <div>LumaKatex</div>
        {props.children}
      </div>
    ),
    LumaCounter: (props: LumaCounterProps) => (
      /* Replace with your component */
      <div>
        <div>LumaCounter</div>
        {props.children}
      </div>
    ),
    LumaLoaded: (props: LumaLoadedProps) => (
      /* Replace with your component */
      <div>
        <div>LumaLoaded</div>
        {props.children}
      </div>
    ),
    LumaTerm: (props: LumaTermProps) => (
      /* Replace with your component */
      <div>
        <div>LumaTerm</div>
        {props.children}
      </div>
    ),
  };
}

rehype-add-slug

各ヘディングに対し，slug化したそのテキストを属性として渡し，それより上位のヘディングのslugも属性に付与するプラグイン

import rehypeAddSlug from "@luma-dev/my-unified/rehype-add-slug";

例: 以下の入力に対し，

# hello world

## 1. getting started

## 2. install

## 3. uninstall

# description

## 1. something

## 2. other

以下のように変換される

<h1 slug="hello_world">hello world</h1>
<h2 lastH1Slug="hello_world" slug="1.getting_started">1. getting started</h1>
<h2 lastH1Slug="hello_world" slug="2.install">2. install</h1>
...

rehype-replace-text

句点読点を統一する．「，」「．」を「、」「。」に置き換えるプラグイン．

import rehypeReplaceText from "@luma-dev/my-unified/rehype-replace-text";

例: 以下の入力に対し，

こんにちは，ねこだよ．

以下のように変換される

こんにちは、ねこだよ。

remark-term

用語を参照する記法を追加します．mdx前提です．

import remarkTerm from "@luma-dev/my-unified/remark-term";

例: 以下の入力に対し，

[@逆元]を考える．

{/* 以下のようにすると途中で定義を変えられる */}

<DefMapImp 逆元="群の逆元" />

[@逆元]を考える．

{/* 通常のリンクでは先頭の@をエスケープする必要がある */}
[\@これもリンク](https://example.com)だよ．

以下のように変換される

<LumaTerm
  rawTermRef="逆元"
  termRef="逆元"
  gotBy="raw"
  indexInPage={0}
  totalInPage={1}
/>
を考える．

<LumaTerm
  rawTermRef="逆元"
  termRef="群の逆元"
  gotBy="imp"
  indexInPage={0}
  totalInPage={1}
/>
を考える．

indexInPage は termRef が何個目に出るか， totalInPage は termRef が全体で何個あるか，をページ内で集計したもの．

DefMapImp (implicit) の他に DefMapExp (explicit) でも書き換えられる． それらの振る舞いの違いは利用側に委ねられている． remark-frontmatterを入れた状態でfrontmatterのYAMLで DefMapExp か DefMapImp を使うと同様に初期化できる

---
DefMapExp:
DefMapImp:
  逆元: 行列の逆元
---

rehype-katex

• 下記に対する検出をして共通の定義を差し込むなどを行う
  • <Katex>, <KatexDef> で囲まれたテキスト
  • katex, katex-def という言語で設定したコードブロック
  • katex-save という言語で設定したコードブロックを <Save> で囲って変換する

import rehypeKatex from "@luma-dev/my-unified/rehype-katex";

rehype-wrap

<LumaMdxLayout> で囲ってメタ情報を属性として入れるプラグイン．

import rehypeKatex from "@luma-dev/my-unified/rehype-wrap";

例: 以下の入力に対し，

---
foo: bar
---

hello

以下のように変換される

<LumaMdxLayout meta={{ foo: 'bar' }} file={...} toc={...} headers={...}>
hello
</LumaMdxLayout>

• file はmdxファイル自体の情報
• toc はヘッダをまとめた情報
  • [{ tag: 'h1', level: 1, index: 0, titleComponent: ..., titleText: '...', slug: '...', children: [...] }, ...] という形式になる
• headers はヘッダの中身のレンダー済みコンポーネントのリスト
  • toc のインデックス情報がこちらのリストのインデックスに対応する

remark-save

<Save $name> で囲ってページローカル保存（コンパイル時）， [$name] で呼び出しができるプラグイン．

import remarkSave from "@luma-dev/my-unified/remark-save";

例: 以下の入力に対し，

<Save $who>world</Save>
hello [$who]

以下のように変換される

hello world

rehype-meta

<_luma_internal_meta> というタグのコンポーネントと一緒にメタデータを入れておくプラグイン． rehype-wrapでメタデータを入れるために必要．

import rehypeSave from "@luma-dev/my-unified/rehype-meta";

rehype-clean-internal

<_luma_internal_*> などを消すプラグイン．

import rehypeCleanInternal from "@luma-dev/my-unified/rehype-clean-internal";

rehype-code-meta

<code> に .data.meta をプロパティとして加えるプラグイン．

import rehypeCodeMeta from "@luma-dev/my-unified/rehype-code-meta";

rehype-counter

[#name] という記法で，その名前ごとに登場回数をカウントして <LumaCounter index={0} total={3} /> のように置き換える． <C $name anyAttr="something" /> のように書くことでそれ以降のその名前のカウンタに属性を一律で付与できる．

import rehypeCounter from "@luma-dev/my-unified/rehype-counter";

例: 以下の入力に対し，

<C template="%0." />

[#]フォークを持つ
[#]ナイフを持つ
[#]切る

以下のように変換される

<LumaCounter index={0} total={3} template="%0." />
フォークを持つ
<LumaCounter index={1} total={3} template="%0." />
ナイフを持つ
<LumaCounter index={2} total={3} template="%0." />
切る

template をどう扱うか，などは LumaCounter を実装することで意味を与えることになる．