starlight-obsidianプラグインでVaultのコピー先をルートに変更する

starlight-obsidianプラグインにより、Obsidian Vaultはsrc/content/docs/notesにコピーされる挙動がデフォルトとなっている。

その結果、サイドバーのUI表示やURLのパス表記上、ルートから1階層下にある状態となっており、Obsidian側で見ている時とディレクトリ構造と1階層分の差異が出てしまう。

実現したいこと

Vaultのコピー先をsrc/content/docs直下にする
サイドバーをObsidian Vaultの階層構造と合わせる

Vaultのコピー先をsrc/content直下にする

これは比較的簡単。

まずは、src/content/docs配下を空にする。

rm -rf ./src/content/docs/**/*

次に、 astro.config.mjsをいじって設定を変更する。

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightObsidian, { obsidianSidebarGroup } from 'starlight-obsidian'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightObsidian({
          output: '.'
        }),
      ],
      title: 'My Docs',
    }),
  ],
})

output: '.'を指定することで、ルート直下にコピーされる。

サイドバーをObsidian Vaultの階層構造と合わせる

こちらはGitHubのIssueが起票されているが、@astrojs/starlight側の仕様に合わせるために、プラグインとしては現時点で対応しない方針となっている。

Option to make Obsidian the entire sidebar without requiring a root node. · Issue #5 · HiDeoo/starlight-obsidian

なので、starlight-obsidianが生成するobsidianSidebarGroupを使わずに、独自実装でディレクトリ構造を作るように対応する。

touch sidebar.config.mjs

import path from 'node:path';
import fs from 'node:fs/promises';

const CONTENT_DIR = path.resolve(process.cwd(), 'src/content/docs');

export async function generateSidebar() {
  const entries = await fs.readdir(CONTENT_DIR, { withFileTypes: true });
  const dirs = entries.filter(v => v.isDirectory() && !v.name.startsWith("."));

  /** @type {import('@astrojs/starlight/types').StarlightUserConfig} */
  const config = {
    sidebar: dirs.map(v => ({
      label: v.name,
      autogenerate: {
        directory: v.name
      }
    }))
  }

  return config.sidebar
}

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightObsidian from 'starlight-obsidian'
import { generateSidebar } from './sidebar.config.mjs'

const sidebar = await generateSidebar();

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightObsidian({
          output: '.'
        }),
      ],
      title: 'My Docs',
      sidebar
    }),
  ],
})

まとめ

starlight-obsidianプラグインのデフォルト動作を変更することで、Obsidian Vaultの階層構造をそのままStarlightサイトに反映できる。

サイドバーの自動生成により、ObsidianとStarlightで一貫した構造を保てる。