Display of sidebar components in the runtime environment

[TTinoueTT]

What version of starlight are you using?

0.29.2

What version of astro are you using?

4.16.14

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

sidebar component

The items are specified in astro.confi.mjs as follows in the sidebar component.

import db from '@astrojs/db';
import netlify from '@astrojs/netlify';
import preact from '@astrojs/preact';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';
import { loadEnv } from 'vite';

const { SITE_URL, EDIT_SITE_URL, SOCIAL_GITHUB } = loadEnv(process.env.NODE_ENV, process.cwd(), '');

export default defineConfig({
    site: SITE_URL,
    integrations: [
        preact(),
        db(),
        starlight({
            title: 'Linuledge',
            defaultLocale: 'root',
            locales: {
                root: {
                    label: '日本語',
                    lang: 'ja',
                },
                en: {
                    label: 'English',
                },
            },
            logo: {
                // ~~
            },
            customCss: [
                // ~~
            ],
            editLink: {
                baseUrl: EDIT_SITE_URL,
            },
            tableOfContents: {
                minHeadingLevel: 2,
                maxHeadingLevel: 4,
            },
            social: {
                github: SOCIAL_GITHUB,
            },
            sidebar: [
                {
                    label: 'Astro-Starlight',
                    items: [
                        {
                            label: 'Guide',
                            autogenerate: { directory: 'astro-starlight/guide' },
                        },
                        {
                            label: 'Component',
                            autogenerate: { directory: 'astro-starlight/component' },
                        },
                        {
                            label: 'CSS',
                            autogenerate: { directory: 'astro-starlight/css' },
                        },
                    ],
                },
                {
                    label: 'Linux',
                    items: [
                        {
                            label: 'コマンド',
                            collapsed: true,
                            autogenerate: { directory: 'linux/cmd' },
                        },
                        {
                            label: '記事',
                            items: [
                                {
                                    label: 'Mail について',
                                    autogenerate: { directory: 'linux/posts/mail' },
                                },
                                {
                                    label: 'ネットワーク について',
                                    autogenerate: { directory: 'linux/posts/network' },
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Terraform',
                    items: [
                        {
                            label: 'Terraform について',
                            autogenerate: { directory: 'terraform/about-terraform' },
                        },
                        {
                            label: 'AWS プロバイダ',
                            autogenerate: { directory: 'terraform/aws-provider-services' },
                        },
                        {
                            label: 'Terraform コマンド',
                            collapsed: true,
                            items: [
                                {
                                    label: '主要なワークフローコマンド',
                                    autogenerate: { directory: 'terraform/cmds/main-commands' },
                                },
                                {
                                    label: '一般的でないコマンドや高度なコマンド',
                                    autogenerate: {
                                        directory: 'terraform/cmds/all-other-commands',
                                    },
                                },
                            ],
                        },
                    ],
                },
            ],
        }),
    ],
    output: 'hybrid',
    adapter: netlify(),
});

In the development environment, the page hierarchy within the sidebar component is displayed as follows.

A preview of the deployed state in the execution environment does not show the hierarchy as shown below.

All mdx files are described in the same way. Some also have a hierarchy that is also displayed in the execution environment.

sample.mdx

---
title: FileTree
description: FileTree コンポーネントの紹介
tags:
    - "Astro"
sidebar:
    # このリンクのカスタムラベルを設定します
    label: FileTree
    # このリンクの順番をカスタマイズします（数字が小さいほど上に表示されます）
    order: 2
    # このリンクにバッジを追加します
    # badge:
    #     text: ""
    #     variant: tip
---

Link to Minimal Reproducible Example

https://linuledge-test.netlify.app/linux/posts/mail/postfix/

Participation

• [X] I am willing to submit a pull request for this issue.

[HiDeoo]

Thanks for your report.

After trying out the dev branch of the provided repro link, it looks like for me even in development I get the same behavior you're describing.

The issue seems to be related to a case issue, e.g. the Guide sidebar group is auto-generated with astro-starlight/guide as the directory value, but the actual directory is Astro-Starlight/Guide/ (note the case difference). After renaming the Astro-Starlight and Guide directories to lowercase, the sidebar group is now correctly generated on my end.

Would you be able to confirm if this is the same issue you're experiencing?

[TTinoueTT]

@HiDeoo Thank you for your response. To your point, my current directory is already named in lower case.

I also followed your lead and changed the value of label to lower case.

sidebar: [
    {
        label: 'astro-starlight',  // <- Change to lower case. 
        items: [
            {
                label: 'guide', // <- Change to lower case. 
                autogenerate: { directory: 'astro-starlight/guide' },
            },
            {
                label: 'Component',
                autogenerate: { directory: 'astro-starlight/component' },
            },
            {
                label: 'CSS',
                autogenerate: { directory: 'astro-starlight/css' },
            },
        ],
    },

We then looked at the sidebar in the deployed execution environment, but it was not displayed.

The directory "terraform//" in the configuration labelled as "Terraform" is properly labelled, so no correlation with lower case letters can be found.

I also checked to see if it was caused by the server on which I deployed, netlify, being in uppercase, but that too remains in lowercase.

The objective is for the preview to be displayed in uppercase. I want directory management to be in lower case.

[HiDeoo]

Having the label different from the file system structure is perfectly fine. My suggestions were mostly regarding the directory property only.

To your point, my current directory is already named in lower case.

Is this not the dev branch of the repository? I'm not seeing that the directory is named in lowercase personally.

[TTinoueTT]

@HiDeoo Thank you very much. With what you have presented, I now know what I need to fix.

It appears that this is due to the fact that I created the directory in capitals when I initially created it and did not do the git mv operation to move the original file.

If I had looked at the repository itself from the beginning, I would have noticed this situation. So it turns out that starlight's behavior was not the cause.

[HiDeoo]

It appears that this is due to the fact that I created the directory in capitals when I initially created it and did not do the git mv operation to move the original file.

Ah, I see, makes sense. Glad you got it sorted out!

I guess we can consider this issue resolved :tada: