Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luma-dev/my-unified
https://github.com/luma-dev/my-unified
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/luma-dev/my-unified
- Owner: luma-dev
- License: cc0-1.0
- Created: 2024-01-24T17:04:35.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-12T11:11:17.000Z (11 months ago)
- Last Synced: 2024-08-18T00:54:56.800Z (5 months ago)
- Language: TypeScript
- Size: 324 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
# @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](https://github.com/luma-dev/my-unified?tab=MIT-2-ov-file)と[CC0](https://github.com/luma-dev/my-unified?tab=CC0-1.0-1-ov-file)でライセンスされています
## インストール
```bash
npm i @luma-dev/my-unified
```
## Next.jsでの設定例
ESM (package.jsonのtype=module) 前提での設定例．プラグインの指定順は結果に影響を与えるため注意．
```js
// 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);
```
```tsx
// 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 */
LumaMdxLayout
{props.children}
),
LumaKatex: (props: LumaKatexProps) => (
/* Replace with your component */
LumaKatex
{props.children}
),
LumaCounter: (props: LumaCounterProps) => (
/* Replace with your component */
LumaCounter
{props.children}
),
LumaLoaded: (props: LumaLoadedProps) => (
/* Replace with your component */
LumaLoaded
{props.children}
),
LumaTerm: (props: LumaTermProps) => (
/* Replace with your component */
LumaTerm
{props.children}
),
};
}
```
## rehype-add-slug
各ヘディングに対し，slug化したそのテキストを属性として渡し，それより上位のヘディングのslugも属性に付与するプラグイン
```ts
import rehypeAddSlug from "@luma-dev/my-unified/rehype-add-slug";
```
例: 以下の入力に対し，
```md
# hello world
## 1. getting started
## 2. install
## 3. uninstall
# description
## 1. something
## 2. other
```
以下のように変換される
```js
hello world
1. getting started
2. install
...
```
## rehype-replace-text
句点読点を統一する．「，」「．」を「、」「。」に置き換えるプラグイン．
```ts
import rehypeReplaceText from "@luma-dev/my-unified/rehype-replace-text";
```
例: 以下の入力に対し，
```md
こんにちは，ねこだよ．
```
以下のように変換される
```md
こんにちは、ねこだよ。
```
## remark-term
用語を参照する記法を追加します．mdx前提です．
```ts
import remarkTerm from "@luma-dev/my-unified/remark-term";
```
例: 以下の入力に対し，
```mdx
[@逆元]を考える．
{/* 以下のようにすると途中で定義を変えられる */}
[@逆元]を考える．
{/* 通常のリンクでは先頭の@をエスケープする必要がある */}
[\@これもリンク](https://example.com)だよ．
```
以下のように変換される
```mdx
を考える．
を考える．
```
`indexInPage` は `termRef` が何個目に出るか， `totalInPage` は `termRef` が全体で何個あるか，をページ内で集計したもの．
`DefMapImp` (implicit) の他に `DefMapExp` (explicit) でも書き換えられる．
それらの振る舞いの違いは利用側に委ねられている．
[remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)を入れた状態でfrontmatterのYAMLで `DefMapExp` か `DefMapImp` を使うと同様に初期化できる
```mdx
---
DefMapExp:
DefMapImp:
逆元: 行列の逆元
---
```
## rehype-katex
- 下記に対する検出をして共通の定義を差し込むなどを行う
- ``, `` で囲まれたテキスト
- `katex`, `katex-def` という言語で設定したコードブロック
- `katex-save` という言語で設定したコードブロックを `` で囲って変換する
```ts
import rehypeKatex from "@luma-dev/my-unified/rehype-katex";
```
## rehype-wrap
`` で囲ってメタ情報を属性として入れるプラグイン．
```ts
import rehypeKatex from "@luma-dev/my-unified/rehype-wrap";
```
例: 以下の入力に対し，
```mdx
---
foo: bar
---
hello
```
以下のように変換される
```mdx
hello
```
- `file` はmdxファイル自体の情報
- `toc` はヘッダをまとめた情報
- `[{ tag: 'h1', level: 1, index: 0, titleComponent: ..., titleText: '...', slug: '...', children: [...] }, ...]` という形式になる
- `headers` はヘッダの中身のレンダー済みコンポーネントのリスト
- `toc` のインデックス情報がこちらのリストのインデックスに対応する
## remark-save
`` で囲ってページローカル保存（コンパイル時）， `[$name]` で呼び出しができるプラグイン．
```ts
import remarkSave from "@luma-dev/my-unified/remark-save";
```
例: 以下の入力に対し，
```mdx
world
hello [$who]
```
以下のように変換される
```mdx
hello world
```
## rehype-meta
`<_luma_internal_meta>` というタグのコンポーネントと一緒にメタデータを入れておくプラグイン．
rehype-wrapでメタデータを入れるために必要．
```ts
import rehypeSave from "@luma-dev/my-unified/rehype-meta";
```
## rehype-clean-internal
`<_luma_internal_*>` などを消すプラグイン．
```ts
import rehypeCleanInternal from "@luma-dev/my-unified/rehype-clean-internal";
```
## rehype-code-meta
`` に `.data.meta` をプロパティとして加えるプラグイン．
```ts
import rehypeCodeMeta from "@luma-dev/my-unified/rehype-code-meta";
```
## rehype-counter
`[#name]` という記法で，その名前ごとに登場回数をカウントして `` のように置き換える． `` のように書くことでそれ以降のその名前のカウンタに属性を一律で付与できる．
```ts
import rehypeCounter from "@luma-dev/my-unified/rehype-counter";
```
例: 以下の入力に対し，
```mdx
[#]フォークを持つ
[#]ナイフを持つ
[#]切る
```
以下のように変換される
```mdx
フォークを持つ
ナイフを持つ
切る
```
`template` をどう扱うか，などは `LumaCounter` を実装することで意味を与えることになる．