公開するルートと画面を選ぶ

mountPathをすべてのルートの起点にする

app.route(decks.mountPath, decks.router())と登録すると、設定したmountPathの下にすべてのルートが作られます。

画面ごとの役割を確認する

使わない画面を設定ファイルで無効にする

通常はhono-decks.config.tsのrouter.pagesで、不要な画面をfalseにします。標準ではembed以外の画面が有効です。devを省略すると、ViteとWranglerが設定するNODE_ENVから開発モードを判定します。

export default defineDecksConfig({
  mountPath: "/decks",
  router: {
    pages: {
      index: false,
      print: false,
      presenter: ({ dev }) => dev,
    },
  },
})

関数を指定した項目はリクエストごとに評価されるため、認証状態や環境変数による制御にも使えます。

printを無効にすると、標準ビューアーと外部埋め込みの印刷ボタンも表示されません。ビューアーのCmd / Ctrl + Pは専用ルートへ移動せず、ブラウザ本来の印刷として動作します。独自に追加したリンクは自動では削除されません。

標準UIを調整する、または独自画面を作る

pages.index.renderは、デッキ一覧の見た目だけを変える場合に使います。共通設定はhono-decks.config.tsに置きます。次のdecks.router(overrides)は、特定の登録箇所だけを上書きする例です。

decks.router({
  pages: {
    index: {
      title: ({ decks }) => String(decks.length) + " decks",
      render: ({ title, defaultContent }) => <main><h1>{title}</h1>{defaultContent}</main>,
    },
  },
})

Honoアプリ独自の画面を作る

decks.context()は、独自の詳細画面や管理画面へデッキ、目次、URL情報を渡します。

app.get(
  "/decks/:slug/about",
  decks.context(),
  (c) => c.json({
    title: c.var.deck.meta.title,
    slides: c.var.deck.slides.length,
    toc: c.var.deckToc,
  }),
)

同じスライド位置をURLで共有する

ビューアー、発表画面、発表者画面は、スライド位置を?slide=2&step=1の形で共有します。slideは1から始まるスライド番号です。stepは0から始まり、step=0は段階表示がまだ始まっていない状態を表します。最後のスライドの最後のステップから先へ進んでも、URLの値は変わりません。

外部サイトへ埋め込む場合はHTMLとセキュリティで許可するオリジンを設定します。すべてのオプションを探す場合はAPIを参照してください。