starlight-obsidianでvaultのコピー先をルートノードに変更する

実現したいこと

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

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

これを解決したい。

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

前提

Obsidian
@astrojs/starlight
starlight-obsidian

を利用している

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',
    }),
  ],
})

サイドバーを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, { withFileType: 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, { obsidianSidebarGroup } 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
    }),
  ],
})