シェアと Markdown コピー

各記事のタイトル右には 3 つのアクションボタンが並んでいます。

シェア（URL コピー）

クリックすると site.url + 記事のパス を絶対 URL でコピーします。site.yaml の url: キーがコピー結果に反映されるので、本番ドメインを設定しておくと SNS などへ貼り付けてすぐシェアできます。

site:
  url: "https://docs.example.com"

Markdown コピー

「📋」を押すと、その記事の Markdown をクリップボードにコピーします。先頭にタイトルが # Title の形で付き、フロントマターは取り除かれます。

# 記事タイトル

本文の Markdown がここに入る。

## 見出し
...

こんな時に便利

• AI / LLM に貼り付けて質問 — 記事を読みながら ChatGPT や Claude に「この記事の手順を要約して」「コードのこの部分について解説して」と聞ける
• 別のドキュメントへ引用 — 一部を別の場所へ転記したい時
• オフラインでの参照 — 出張前にメモアプリにペーストしておく

サーバ側の仕組み

ボタンの裏では /path/to/article.md という新しいエンドポイントを叩いています。.html の URL の拡張子を .md に変えるだけで生 Markdown が返ります。

GET /guide/features/share-and-copy.md
→
Content-Type: text/markdown; charset=utf-8

# シェアと Markdown コピー

各記事のタイトル右には 3 つのアクションボタンが並んでいます。
...

エンドポイント自体も使えます。curl https://docs.example.com/guide/features/share-and-copy.md で記事の素材を取得できますし、CMS や別の生成スクリプトのソースとしても流用できます。

クリックフィードバック

コピーに成功するとアイコンが ✓ に 2 秒だけ差し替わります。失敗時（HTTPS 以外で navigator.clipboard が拒否される等）はボタンが赤くなり、title 属性で「コピーに失敗しました」が出ます。

機能を無効化したい

ボタンを消したい場合は themes/docs/entry.html.twig から該当 <button> を削除すれば OK。/path.md エンドポイント自体は残るので、無効化したい時は Application.php の $this->router->add('GET', '/{**path}.md', ...) ルートも合わせて削除してください。

実装ファイル一覧

すべて IIFE で囲まれているので他スクリプトと const 名が衝突する心配もありません。