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로 일관된 구조를 유지한다.