@riebeckite/plugin-shortcodes 0.0.20 → 0.0.21

package/README.md

@@ -73,6 +73,178 @@ diagnostic, and malformed attributes emit `shortcodes-invalid` and are ignored.
 | `link-card` | leaf | yes | `url`/`href`, `title`, `description`, `image`/`icon` | Link preview card |
 | `file` | leaf | yes | `url`/`src`/`path`, `name`/`label`, `size` | Download link |
 
+## Actual Rendering
+
+The following examples demonstrate all 12 built-in shortcodes. Each example shows the Markdown syntax followed by the shortcode itself, allowing you to see how it renders when the Shortcodes plugin is enabled.
+
+### Badge
+
+Display status indicators or labels inline with text.
+
+```md
+This feature is :badge[New]{variant=success}.
+
+Current status: :badge[Beta]{variant=warning}
+```
+
+This feature is :badge[New]{variant=success}.
+
+Current status: :badge[Beta]{variant=warning}
+
+### Keyboard (kbd)
+
+Display keyboard shortcuts using semantic `<kbd>` elements.
+
+```md
+Press :kbd[Ctrl+S] to save your changes.
+
+Use :kbd[Ctrl+K] to open search.
+```
+
+Press :kbd[Ctrl+S] to save your changes.
+
+Use :kbd[Ctrl+K] to open search.
+
+### Note
+
+Highlight useful information, tips, and other supplementary content.
+
+```md
+:::note[Tip]{type=info}
+You can use **Markdown** inside this container.
+
+- Lists
+- **Bold text**
+- [Links](https://example.com)
+:::
+```
+
+:::note[Tip]{type=info}
+You can use **Markdown** inside this container.
+
+- Lists
+- **Bold text**
+- [Links](https://example.com)
+:::
+
+### Callout
+
+Display important notices or warnings. `callout` is an alias of `note` with a different CSS class.
+
+```md
+:::callout[Warning]{type=warning}
+Remember to rebuild your site after changing the configuration file.
+:::
+```
+
+:::callout[Warning]{type=warning}
+Remember to rebuild your site after changing the configuration file.
+:::
+
+### Details
+
+Create collapsible sections that users can expand to reveal additional content.
+
+```md
+:::details[Show details]
+This content is hidden until the section is expanded.
+
+You can include **Markdown** and lists:
+
+- Item A
+- Item B
+:::
+```
+
+:::details[Show details]
+This content is hidden until the section is expanded.
+
+You can include **Markdown** and lists:
+
+- Item A
+- Item B
+:::
+
+### Spoiler
+
+Hide content behind an expandable section. `spoiler` works like `details` but uses a different CSS class.
+
+```md
+:::spoiler[Reveal spoiler]
+The hidden content appears when the user expands this section.
+
+**Markdown** is supported here too.
+:::
+```
+
+:::spoiler[Reveal spoiler]
+The hidden content appears when the user expands this section.
+
+**Markdown** is supported here too.
+:::
+
+### Figure
+
+Display images with optional captions and dimensions using semantic `<figure>` markup.
+
+```md
+::figure[Sample image]{src="https://placehold.co/800x400/png" alt="Sample placeholder image" caption="Figure 1: Example image"}
+```
+
+::figure[Sample image]{src="https://placehold.co/800x400/png" alt="Sample placeholder image" caption="Figure 1: Example image"}
+
+### YouTube
+
+Embed YouTube videos using the privacy-enhanced `youtube-nocookie.com` domain.
+
+```md
+::youtube[id=dQw4w9WgXcQ]
+```
+
+::youtube[id=dQw4w9WgXcQ]
+
+### Vimeo
+
+Embed Vimeo videos with the `dnt=1` privacy parameter.
+
+```md
+::vimeo[id=76979871]
+```
+
+::vimeo[id=76979871]
+
+### GitHub Gist
+
+Embed GitHub Gist code snippets directly into a page. A fallback link is provided for environments where JavaScript is disabled.
+
+```md
+::gist{user=octocat id=aa5a315d61ae9438b18d}
+```
+
+::gist{user=octocat id=aa5a315d61ae9438b18d}
+
+### Link Card
+
+Display external links as preview cards with titles and descriptions.
+
+```md
+::link-card[GitHub]{url="https://github.com" title="GitHub" description="A platform for hosting code and collaborating on software projects"}
+```
+
+::link-card[GitHub]{url="https://github.com" title="GitHub" description="A platform for hosting code and collaborating on software projects"}
+
+### File
+
+Create downloadable file links with optional filenames and file sizes.
+
+```md
+::file[Sample PDF]{url="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" name="sample.pdf" size="13 KB"}
+```
+
+::file[Sample PDF]{url="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" name="sample.pdf" size="13 KB"}
+
+The code blocks above show the original Markdown syntax. The shortcode expressions immediately below them serve as live rendering examples when processed by Riebeckite with the Shortcodes plugin enabled.
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -121,4 +293,3 @@ input themselves — `escapeHtml` and `escapeHtmlAttribute` are re-exported from
 ## See also
 
 - [Plugin guide](../../../docs/docs/reference/plugin-api.md)
-

package/README_ja.md

@@ -72,6 +72,178 @@ export default defineConfig({
 | `link-card` | リーフ | 可 | `url`/`href`, `title`, `description`, `image`/`icon` | リンクプレビューカード |
 | `file` | リーフ | 可 | `url`/`src`/`path`, `name`/`label`, `size` | ダウンロードリンク |
 
+## 実際のレンダリング
+
+以下の例では、組み込みショートコード全12種類の使い方を紹介します。各例では Markdown の記法と、その直下にショートコード自体を記載しています。Shortcodes プラグインが有効な場合、実際のレンダリング結果を確認できます。
+
+### バッジ（badge）
+
+文章の途中にステータスやラベルを表示できます。
+
+```md
+この機能は :badge[新着]{variant=success} です。
+
+現在の状態: :badge[ベータ版]{variant=warning}
+```
+
+この機能は :badge[新着]{variant=success} です。
+
+現在の状態: :badge[ベータ版]{variant=warning}
+
+### キーボード（kbd）
+
+キーボードショートカットを意味的に適切な `<kbd>` 要素で表示できます。
+
+```md
+変更を保存するには :kbd[Ctrl+S] を押してください。
+
+検索を開くには :kbd[Ctrl+K] を使用します。
+```
+
+変更を保存するには :kbd[Ctrl+S] を押してください。
+
+検索を開くには :kbd[Ctrl+K] を使用します。
+
+### ノート（note）
+
+ヒントや補足情報などを目立たせて表示できます。
+
+```md
+:::note[ヒント]{type=info}
+このコンテナ内では **Markdown** を使用できます。
+
+- リスト
+- **太字**
+- [リンク](https://example.com)
+:::
+```
+
+:::note[ヒント]{type=info}
+このコンテナ内では **Markdown** を使用できます。
+
+- リスト
+- **太字**
+- [リンク](https://example.com)
+:::
+
+### コールアウト（callout）
+
+重要な通知や警告を表示できます。`callout` は `note` のエイリアスで、異なる CSS クラスが適用されます。
+
+```md
+:::callout[注意]{type=warning}
+設定ファイルを変更した場合は、サイトを再ビルドしてください。
+:::
+```
+
+:::callout[注意]{type=warning}
+設定ファイルを変更した場合は、サイトを再ビルドしてください。
+:::
+
+### 折りたたみ（details）
+
+クリックすると追加のコンテンツを展開できるセクションを作成できます。
+
+```md
+:::details[詳細を表示]
+このコンテンツは、セクションを展開するまで非表示になります。
+
+**Markdown** やリストも使用できます。
+
+- 項目 A
+- 項目 B
+:::
+```
+
+:::details[詳細を表示]
+このコンテンツは、セクションを展開するまで非表示になります。
+
+**Markdown** やリストも使用できます。
+
+- 項目 A
+- 項目 B
+:::
+
+### スポイラー（spoiler）
+
+コンテンツを折りたたみセクション内に隠せます。`spoiler` は `details` と同様に動作しますが、異なる CSS クラスが適用されます。
+
+```md
+:::spoiler[ネタバレを表示]
+ユーザーがこのセクションを展開すると、隠されたコンテンツが表示されます。
+
+ここでも **Markdown** を使用できます。
+:::
+```
+
+:::spoiler[ネタバレを表示]
+ユーザーがこのセクションを展開すると、隠されたコンテンツが表示されます。
+
+ここでも **Markdown** を使用できます。
+:::
+
+### 画像（figure）
+
+意味的に適切な `<figure>` 要素を使用して、キャプションやサイズを指定した画像を表示できます。
+
+```md
+::figure[サンプル画像]{src="https://placehold.co/800x400/png" alt="サンプルのプレースホルダー画像" caption="Figure 1: 画像の表示例"}
+```
+
+::figure[サンプル画像]{src="https://placehold.co/800x400/png" alt="サンプルのプレースホルダー画像" caption="Figure 1: 画像の表示例"}
+
+### YouTube
+
+プライバシーに配慮した `youtube-nocookie.com` ドメインを使用して、YouTube 動画を埋め込めます。
+
+```md
+::youtube[id=dQw4w9WgXcQ]
+```
+
+::youtube[id=dQw4w9WgXcQ]
+
+### Vimeo
+
+`dnt=1` プライバシーパラメータを使用して、Vimeo 動画を埋め込めます。
+
+```md
+::vimeo[id=76979871]
+```
+
+::vimeo[id=76979871]
+
+### GitHub Gist
+
+GitHub Gist のコードスニペットをページ内に直接埋め込めます。JavaScript が無効な環境では、代替リンクが提供されます。
+
+```md
+::gist{user=octocat id=aa5a315d61ae9438b18d}
+```
+
+::gist{user=octocat id=aa5a315d61ae9438b18d}
+
+### リンクカード（link-card）
+
+外部リンクをタイトルや説明付きのプレビューカードとして表示できます。
+
+```md
+::link-card[GitHub]{url="https://github.com" title="GitHub" description="コードのホスティングとソフトウェア開発の共同作業を行うためのプラットフォーム"}
+```
+
+::link-card[GitHub]{url="https://github.com" title="GitHub" description="コードのホスティングとソフトウェア開発の共同作業を行うためのプラットフォーム"}
+
+### ファイル（file）
+
+ファイル名やサイズを指定したダウンロードリンクを作成できます。
+
+```md
+::file[サンプルPDF]{url="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" name="sample.pdf" size="13 KB"}
+```
+
+::file[サンプルPDF]{url="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" name="sample.pdf" size="13 KB"}
+
+上記のコードブロックは元の Markdown 記法を示しています。その直下のショートコードは、Shortcodes プラグインを有効にした Riebeckite で処理された際の、実際のレンダリングを確認するための例です。
+
 ## オプション
 
 | オプション | 型 | 既定値 | 説明 |
@@ -120,4 +292,3 @@ container }` を受け取り、文字列を返します。独自レンダラー
 ## 関連
 
 - [プラグインガイド](../../../docs/docs/reference/plugin-api.ja.md)
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-shortcodes",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,11 +17,11 @@
   "dependencies": {
     "@types/mdast": "^4.0.4",
     "unist-util-visit": "^5.1.0",
-    "@riebeckite/core": "0.0.20"
+    "@riebeckite/core": "0.0.21"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.20"
+    "@riebeckite/test": "0.0.21"
   },
   "publishConfig": {
     "access": "public"