Change Vault copy destination to root with starlight-obsidian plugin

By default, Obsidian Vault is copied to src/content/docs/notes by the starlight-obsidian plugin.

As a result, the sidebar UI display and URL path description are one level below the root, resulting in a one-level difference in directory structure compared to when viewed on Obsidian.

What I want to achieve

Set the Vault copy destination directly under src/content/docs
Align sidebar with Obsidian Vault hierarchy

Set the Vault copy destination directly under src/content

This is relatively easy.

First, empty the area under src/content/docs.

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

Next, change the settings by playing around with 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',
    }),
  ],
})

By specifying output: '.', it will be copied directly under the root.

A GitHub issue has been opened for this, but in order to comply with the specifications of @astrojs/starlight, the policy is not to support it as a plugin at this time.

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

Therefore, instead of using obsidianSidebarGroup generated by starlight-obsidian, we will create the directory structure with our own implementation.

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

summary

By changing the default behavior of the starlight-obsidian plugin, the hierarchical structure of Obsidian Vault can be directly reflected on the Starlight site.

Auto-generating sidebars allows you to maintain a consistent structure between Obsidian and Starlight.

What I want to achieve

Set the Vault copy destination directly under src/content

Align the sidebar with Obsidian Vault’s hierarchy

summary