VitePress覚書
VitePressでこのサイトを構築し運用する中で書き留めた独立した記事群。
私は如何にしてVitePressを愛するようになったか
私がインターネットを利用し始めた1990年代は,Yahoo!やNetscape Navigatorが広く用いられていた時代でした。当時の個人サイトは,主としてHTMLの直書きによって構築され,カウンターや掲示板を備える形態が一般的でした。サイトの発見可能性は,人手による分類登録や各サイトに設置された「リンク集」に大きく…
Dockerで開発サーバを動かす
VitePressはViteを採用しています。Hot Module Replacementにより,VitePressドキュメントを執筆するにあたり,プレビューをリアルタイムで更新させることができます。このプロジェクトでは,VitePress開発サーバをDockerで起動し,Markdown本文はObsidianで編集す…
図(figure)プラグイン
標準的なMarkdown記法では,画像を挿入する手段はaltしかなく,キャプションの付与や画像の横並べ,サイズ指定,テキスト回り込みといった,技術文書や学術文書で必要になる機能が欠けています。本稿では,これらを実現するカスタムmarkdown-itプラグインの実装を記録します。完成後は,以下のように書けます。単一画像に…
Pikchrによる図の挿入
Pikchr(ピクチャー)はSQLiteの作者D. Richard Hippが開発したテキストベースの作図言語です。Markdownのfenced code blockに記述したPikchrスクリプトをクライアントサイドのWebAssemblyでSVGに変換してページに埋め込む仕組みを記録します。以下のように書きます…
VitePressプロジェクト構成
このページでは,このリポジトリ固有のディレクトリ構成とルーティング方針を整理します。一般的なVitePressではdocs直下に記事を置きますが,本プロジェクトはdocs/sigbitをsrcDirにしています。理由は,docs/sigbitをObsidian Vaultとして同期するためです。主要な構成は次の通りです…
Vueコンポーネント
VitePressではMarkdownファイルに直接`や`タグを書いて実行できます。あらかじめHTML, CSS, JavaScriptを組み合わせた部品を定義しておき,Markdownから呼び出すこともできます。この仕組みのことをVue Single-File Componentと呼びます。Vueコンポーネントを一度…
VitePressでWebAssemblyを使う
VitePressのコンテンツ内でWebAssembly(WASM)を利用する際の,汎用的な設計をまとめます。ここではRay Tracingに依存しない共通論点(配置,読み込み,制約)を扱います。WASMの生成物は,通常,グルーコード(.js / .mjs)とバイナリ(.wasm)の2ファイルで構成されます。このプロジ…