starlight-sidebar-topics-dropdown 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # starlight-sidebar-topics-dropdown
 
+## 0.3.0
+
+### Minor Changes
+
+- [#16](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/16) [`9edb5dc`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/9edb5dca0215df684c4471ed7e1fe878617be91a) Thanks [@trueberryless](https://github.com/trueberryless)! - Adds support for Astro v5, drops support for Astro v4.
+
+  ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now `0.30.0`.
+
+  Please follow the [upgrade guide](https://github.com/withastro/starlight/releases/tag/%40astrojs/starlight%400.30.0) to update your project.
+
+  Note that the [`legacy.collections` flag](https://docs.astro.build/en/reference/legacy-flags/#collections) is not supported by this plugin and you should update your collections to use Astro's new Content Layer API.
+
+### Patch Changes
+
+- [#18](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/18) [`2039e9a`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/2039e9a60659b5628c7406952bde0d453e38aeda) Thanks [@trueberryless](https://github.com/trueberryless)! - Add Unnested Sidebar configuration
+
 ## 0.2.2
 
 ### Patch Changes

package/index.ts

@@ -1,82 +1,92 @@
-import type { StarlightPlugin, StarlightUserConfig } from "@astrojs/starlight/types";
+import type {
+  StarlightPlugin,
+  StarlightUserConfig,
+} from "@astrojs/starlight/types";
 
 import {
-    StarlightSidebarTopicsDropdownConfigSchema,
-    type StarlightSidebarTopicsDropdownUserConfig,
+  StarlightSidebarTopicsDropdownConfigSchema,
+  type StarlightSidebarTopicsDropdownUserConfig,
 } from "./lib/config";
 import { overrideStarlightComponent, throwPluginError } from "./lib/plugin";
 import { vitePluginStarlightSidebarTopicsDropdown } from "./lib/vite";
 
 export type {
-    StarlightSidebarTopicsDropdownConfig,
-    StarlightSidebarTopicsDropdownUserConfig,
+  StarlightSidebarTopicsDropdownConfig,
+  StarlightSidebarTopicsDropdownUserConfig,
 } from "./lib/config";
 
 export default function starlightSidebarTopicsDropdownPlugin(
-    userConfig: StarlightSidebarTopicsDropdownUserConfig
+  userConfig: StarlightSidebarTopicsDropdownUserConfig
 ): StarlightPlugin {
-    const parsedConfig = StarlightSidebarTopicsDropdownConfigSchema.safeParse(userConfig);
+  const parsedConfig =
+    StarlightSidebarTopicsDropdownConfigSchema.safeParse(userConfig);
 
-    if (!parsedConfig.success) {
-        throwPluginError(
-            `The provided plugin configuration is invalid.\n${parsedConfig.error.issues
-                .map((issue) => issue.message)
-                .join("\n")}`
-        );
-    }
+  if (!parsedConfig.success) {
+    throwPluginError(
+      `The provided plugin configuration is invalid.\n${parsedConfig.error.issues
+        .map((issue) => issue.message)
+        .join("\n")}`
+    );
+  }
 
-    const config = parsedConfig.data;
+  const config = parsedConfig.data;
 
-    return {
-        name: "starlight-sidebar-topics-dropdown-plugin",
-        hooks: {
-            setup({ addIntegration, command, config: starlightConfig, logger, updateConfig }) {
-                if (command !== "dev" && command !== "build") return;
+  return {
+    name: "starlight-sidebar-topics-dropdown-plugin",
+    hooks: {
+      setup({
+        addIntegration,
+        command,
+        config: starlightConfig,
+        logger,
+        updateConfig,
+      }) {
+        if (command !== "dev" && command !== "build") return;
 
-                if (starlightConfig.sidebar) {
-                    throwPluginError(
-                        "It looks like you have a `sidebar` configured in your Starlight configuration. To use `starlight-sidebar-topics-dropdown`, create a new topic with your sidebar items.",
-                        "Learn more about topic configuration at https://starlight-sidebar-topics-dropdown.netlify.app/docs/configuration/"
-                    );
-                }
+        if (starlightConfig.sidebar) {
+          throwPluginError(
+            "It looks like you have a `sidebar` configured in your Starlight configuration. To use `starlight-sidebar-topics-dropdown`, create a new topic with your sidebar items.",
+            "Learn more about topic configuration at https://starlight-sidebar-topics-dropdown.netlify.app/docs/configuration/"
+          );
+        }
 
-                const sidebar: StarlightUserConfig["sidebar"] = [];
+        const sidebar: StarlightUserConfig["sidebar"] = [];
 
-                for (const [index, topic] of config.entries()) {
-                    if ("items" in topic) {
-                        sidebar.push({ label: String(index), items: topic.items });
-                    }
-                }
-                updateConfig({
-                    components: {
-                        ...starlightConfig.components,
-                        ...overrideStarlightComponent(
-                            starlightConfig.components,
-                            logger,
-                            "Sidebar"
-                        ),
-                        ...overrideStarlightComponent(
-                            starlightConfig.components,
-                            logger,
-                            "Pagination"
-                        ),
-                    },
-                    sidebar,
-                });
+        for (const [index, topic] of config.entries()) {
+          if ("items" in topic) {
+            sidebar.push({ label: String(index), items: topic.items });
+          }
+        }
+        updateConfig({
+          components: {
+            ...starlightConfig.components,
+            ...overrideStarlightComponent(
+              starlightConfig.components,
+              logger,
+              "Sidebar"
+            ),
+            ...overrideStarlightComponent(
+              starlightConfig.components,
+              logger,
+              "Pagination"
+            ),
+          },
+          sidebar,
+        });
 
-                addIntegration({
-                    name: "starlight-sidebar-topics-dropdown-integration",
-                    hooks: {
-                        "astro:config:setup": ({ updateConfig }) => {
-                            updateConfig({
-                                vite: {
-                                    plugins: [vitePluginStarlightSidebarTopicsDropdown(config)],
-                                },
-                            });
-                        },
-                    },
-                });
+        addIntegration({
+          name: "starlight-sidebar-topics-dropdown-integration",
+          hooks: {
+            "astro:config:setup": ({ updateConfig }) => {
+              updateConfig({
+                vite: {
+                  plugins: [vitePluginStarlightSidebarTopicsDropdown(config)],
+                },
+              });
             },
-        },
-    };
+          },
+        });
+      },
+    },
+  };
 }

package/lib/config.ts

@@ -2,73 +2,81 @@ import type { StarlightUserConfig } from "@astrojs/starlight/types";
 import { z } from "astro/zod";
 
 const sidebarTopicBadgeSchema = z.object({
-    text: z.union([z.string(), z.record(z.string())]),
-    variant: z.enum(["note", "danger", "success", "caution", "tip", "default"]).default("default"),
+  text: z.union([z.string(), z.record(z.string())]),
+  variant: z
+    .enum(["note", "danger", "success", "caution", "tip", "default"])
+    .default("default"),
 });
 
 const sidebarTopicBaseSchema = z.object({
-    /**
-     * An optional badge to display next to the topic label.
-     *
-     * This option accepts the same configuration as the Starlight badge sidebar item configuration.
-     * @see https://starlight.astro.build/guides/sidebar/#badges
-     */
-    badge: z
-        .union([z.string(), sidebarTopicBadgeSchema])
-        .transform((badge) =>
-            typeof badge === "string" ? { variant: "default" as const, text: badge } : badge
-        )
-        .optional(),
-    /**
-     * The name of an optional icon to display before the topic label set to one of Starlight’s built-in icons.
-     * @see https://starlight.astro.build/reference/icons/#all-icons
-     */
-    icon: z.string().optional(),
-    /**
-     * The topic label visible at the top of the sidebar.
-     *
-     * The value can be a string, or for multilingual sites, an object with values for each different locale. When using
-     * the object form, the keys must be BCP-47 tags (e.g. en, fr, or zh-CN).
-     */
-    label: z.union([z.string(), z.record(z.string())]),
-    /**
-     * The link to the topic’s content which an be a relative link to local files or the full URL of an external page.
-     *
-     * For internal links, the link can either be a page included in the items array or a different page acting as the
-     * topic’s landing page.
-     */
-    link: z.string(),
+  /**
+   * An optional badge to display next to the topic label.
+   *
+   * This option accepts the same configuration as the Starlight badge sidebar item configuration.
+   * @see https://starlight.astro.build/guides/sidebar/#badges
+   */
+  badge: z
+    .union([z.string(), sidebarTopicBadgeSchema])
+    .transform((badge) =>
+      typeof badge === "string"
+        ? { variant: "default" as const, text: badge }
+        : badge
+    )
+    .optional(),
+  /**
+   * The name of an optional icon to display before the topic label set to one of Starlight’s built-in icons.
+   * @see https://starlight.astro.build/reference/icons/#all-icons
+   */
+  icon: z.string().optional(),
+  /**
+   * The topic label visible at the top of the sidebar.
+   *
+   * The value can be a string, or for multilingual sites, an object with values for each different locale. When using
+   * the object form, the keys must be BCP-47 tags (e.g. en, fr, or zh-CN).
+   */
+  label: z.union([z.string(), z.record(z.string())]),
+  /**
+   * The link to the topic’s content which an be a relative link to local files or the full URL of an external page.
+   *
+   * For internal links, the link can either be a page included in the items array or a different page acting as the
+   * topic’s landing page.
+   */
+  link: z.string(),
 });
 
 const sidebarTopicLinkSchema = sidebarTopicBaseSchema;
 
 const sidebarTopicGroupSchema = sidebarTopicBaseSchema.extend({
-    /**
-     * An optional unique identifier for the topic that can be used to associate content pages that are not listed in any
-     * topic sidebar configuration with this topic.
-     */
-    id: z.string().optional(),
-    /**
-     * The sidebar items (links and subcategories) to display for this topic.
-     *
-     * The topic’s sidebar navigation items. This represents the sidebar displayed when the topic `link` page or any of
-     * the pages configured in the `items` array is the current page.
-     */
-    items: z.any().array() as z.Schema<NonNullable<StarlightUserConfig["sidebar"]>>,
+  /**
+   * An optional unique identifier for the topic that can be used to associate content pages that are not listed in any
+   * topic sidebar configuration with this topic.
+   */
+  id: z.string().optional(),
+  /**
+   * The sidebar items (links and subcategories) to display for this topic.
+   *
+   * The topic’s sidebar navigation items. This represents the sidebar displayed when the topic `link` page or any of
+   * the pages configured in the `items` array is the current page.
+   */
+  items: z.any().array() as z.Schema<
+    NonNullable<StarlightUserConfig["sidebar"]>
+  >,
 });
 
 export const StarlightSidebarTopicsDropdownConfigSchema = z
-    .union([sidebarTopicGroupSchema, sidebarTopicLinkSchema])
-    .array();
+  .union([sidebarTopicGroupSchema, sidebarTopicLinkSchema])
+  .array();
 
 export type StarlightSidebarTopicsDropdownUserConfig = z.input<
-    typeof StarlightSidebarTopicsDropdownConfigSchema
+  typeof StarlightSidebarTopicsDropdownConfigSchema
 >;
 export type StarlightSidebarTopicsDropdownConfig = z.output<
-    typeof StarlightSidebarTopicsDropdownConfigSchema
+  typeof StarlightSidebarTopicsDropdownConfigSchema
 >;
 
 export type StarlightSidebarTopicsDropdownSharedConfig = (
-    | (z.output<typeof sidebarTopicLinkSchema> & { type: "link" })
-    | (Omit<z.output<typeof sidebarTopicGroupSchema>, "items"> & { type: "group" })
+  | (z.output<typeof sidebarTopicLinkSchema> & { type: "link" })
+  | (Omit<z.output<typeof sidebarTopicGroupSchema>, "items"> & {
+      type: "group";
+    })
 )[];

package/lib/content.ts

@@ -1,11 +1,15 @@
 import type { Props } from "@astrojs/starlight/props";
 import type { TopicFrontmatterSchema } from "../schema";
-export function isStarlightEntryWithTopic(entry: StarlightEntry): entry is StarlightEntryWithTopic {
-    return (
-        "data" in entry &&
-        "topic" in (entry as StarlightEntryWithTopic).data &&
-        typeof (entry as StarlightEntryWithTopic).data.topic === "string"
-    );
+export function isStarlightEntryWithTopic(
+  entry: StarlightEntry
+): entry is StarlightEntryWithTopic {
+  return (
+    "data" in entry &&
+    "topic" in (entry as StarlightEntryWithTopic).data &&
+    typeof (entry as StarlightEntryWithTopic).data.topic === "string"
+  );
 }
 export type StarlightEntry = Props["entry"];
-export type StarlightEntryWithTopic = StarlightEntry & { data: TopicFrontmatterSchema };
+export type StarlightEntryWithTopic = StarlightEntry & {
+  data: TopicFrontmatterSchema;
+};

package/lib/i18n.ts

@@ -2,21 +2,26 @@ import starlightConfig from "virtual:starlight/user-config";
 
 import { stripTrailingSlash } from "./pathname";
 
-export function getLocalizedSlug(slug: string, locale: string | undefined): string {
-    const slugLocale = getLocaleFromSlug(slug);
-    if (slugLocale === locale) return slug;
-    locale ??= "";
-    if (slugLocale === slug) return locale;
+export function getLocalizedSlug(
+  slug: string,
+  locale: string | undefined
+): string {
+  const slugLocale = getLocaleFromSlug(slug);
+  if (slugLocale === locale) return slug;
+  locale ??= "";
+  if (slugLocale === slug) return locale;
 
-    if (slugLocale) {
-        return stripTrailingSlash(slug.replace(`${slugLocale}/`, locale ? `${locale}/` : ""));
-    }
+  if (slugLocale) {
+    return stripTrailingSlash(
+      slug.replace(`${slugLocale}/`, locale ? `${locale}/` : "")
+    );
+  }
 
-    return slug ? `${locale}/${slug}` : locale;
+  return slug ? `${locale}/${slug}` : locale;
 }
 
 export function getLocaleFromSlug(slug: string): string | undefined {
-    const locales = Object.keys(starlightConfig.locales ?? {});
-    const baseSegment = slug.split("/")[0];
-    return baseSegment && locales.includes(baseSegment) ? baseSegment : undefined;
+  const locales = Object.keys(starlightConfig.locales ?? {});
+  const baseSegment = slug.split("/")[0];
+  return baseSegment && locales.includes(baseSegment) ? baseSegment : undefined;
 }

package/lib/pathname.ts

@@ -1,17 +1,20 @@
 export function arePathnamesEqual(pathnameA: string, pathnameB: string) {
-    return stripLeadingAndTrailingSlashes(pathnameA) === stripLeadingAndTrailingSlashes(pathnameB);
+  return (
+    stripLeadingAndTrailingSlashes(pathnameA) ===
+    stripLeadingAndTrailingSlashes(pathnameB)
+  );
 }
 
 export function stripLeadingAndTrailingSlashes(pathname: string): string {
-    return stripLeadingSlash(stripTrailingSlash(pathname));
+  return stripLeadingSlash(stripTrailingSlash(pathname));
 }
 
 export function stripLeadingSlash(pathname: string) {
-    if (pathname.startsWith("/")) pathname = pathname.slice(1);
-    return pathname;
+  if (pathname.startsWith("/")) pathname = pathname.slice(1);
+  return pathname;
 }
 
 export function stripTrailingSlash(pathname: string) {
-    if (pathname.endsWith("/")) pathname = pathname.slice(0, -1);
-    return pathname;
+  if (pathname.endsWith("/")) pathname = pathname.slice(0, -1);
+  return pathname;
 }

package/lib/plugin.ts

@@ -3,30 +3,30 @@ import type { AstroIntegrationLogger } from "astro";
 import { AstroError } from "astro/errors";
 
 export function throwPluginError(message: string, hint?: string): never {
-    throw new AstroError(
-        message,
-        hint ??
-            `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/HiDeoo/starlight-sidebar-topics-dropdown/issues/new/choose`
-    );
+  throw new AstroError(
+    message,
+    hint ??
+      `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/HiDeoo/starlight-sidebar-topics-dropdown/issues/new/choose`
+  );
 }
 
 export function overrideStarlightComponent(
-    components: StarlightUserConfig["components"],
-    logger: AstroIntegrationLogger,
-    component: keyof NonNullable<StarlightUserConfig["components"]>
+  components: StarlightUserConfig["components"],
+  logger: AstroIntegrationLogger,
+  component: keyof NonNullable<StarlightUserConfig["components"]>
 ) {
-    if (components?.[component]) {
-        logger.warn(
-            `It looks like you already have a \`${component}\` component override in your Starlight configuration.`
-        );
-        logger.warn(
-            `To use \`starlight-sidebar-topics-dropdown\`, either remove your override or update it to render the content from \`starlight-sidebar-topics-dropdown/overrides/${component}.astro\`.`
-        );
+  if (components?.[component]) {
+    logger.warn(
+      `It looks like you already have a \`${component}\` component override in your Starlight configuration.`
+    );
+    logger.warn(
+      `To use \`starlight-sidebar-topics-dropdown\`, either remove your override or update it to render the content from \`starlight-sidebar-topics-dropdown/overrides/${component}.astro\`.`
+    );
 
-        return {};
-    }
+    return {};
+  }
 
-    return {
-        [component]: `starlight-sidebar-topics-dropdown/overrides/${component}.astro`,
-    };
+  return {
+    [component]: `starlight-sidebar-topics-dropdown/overrides/${component}.astro`,
+  };
 }

package/lib/sidebar.ts

@@ -8,166 +8,203 @@ import { arePathnamesEqual, stripLeadingAndTrailingSlashes } from "./pathname";
 const absoluteLinkRegex = /^https?:\/\//;
 
 export function getCurrentTopic(
-    config: StarlightSidebarTopicsDropdownSharedConfig,
-    sidebar: SidebarEntry[],
-    currentSlug: string,
-    entry: StarlightEntry
+  config: StarlightSidebarTopicsDropdownSharedConfig,
+  sidebar: SidebarEntry[],
+  currentSlug: string,
+  entry: StarlightEntry
 ): Topic | undefined {
-    // If the current page has a topic ID, use it to find the topic.
-    const topicId = getTopicIdFromEntry(entry);
-    if (topicId) return getTopicById(config, sidebar, topicId);
-
-    // Start by checking if the current page is a topic root.
-    const topicFromSlug = getTopicFromSlug(config, sidebar, currentSlug);
-    if (topicFromSlug) return topicFromSlug;
-
-    // Otherwise, find the current topic by looking for the current page in the sidebar.
-    const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
-    if (!currentSidebarTopic) return;
-
-    const currentTopicConfig = config[Number.parseInt(currentSidebarTopic.label, 10)];
-    if (!currentTopicConfig) return;
-
-    return { config: currentTopicConfig, sidebar: currentSidebarTopic.entries };
+  // If the current page has a topic ID, use it to find the topic.
+  const topicId = getTopicIdFromEntry(entry);
+  if (topicId) return getTopicById(config, sidebar, topicId);
+
+  // Start by checking if the current page is a topic root.
+  const topicFromSlug = getTopicFromSlug(config, sidebar, currentSlug);
+  if (topicFromSlug) return topicFromSlug;
+
+  // Otherwise, find the current topic by looking for the current page in the sidebar.
+  const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
+  if (!currentSidebarTopic) return;
+
+  const currentTopicConfig =
+    config[Number.parseInt(currentSidebarTopic.label, 10)];
+  if (!currentTopicConfig) return;
+
+  const sidebarHasGroups =
+    currentSidebarTopic.entries.length !== 1 ||
+    currentSidebarTopic.entries[0]?.label !== "";
+
+  return {
+    config: currentTopicConfig,
+    sidebar: currentSidebarTopic.entries,
+    sidebarHasGroups,
+  };
 }
 
-export function isTopicFirstPage(sidebar: SidebarEntry[], currentSlug: string): boolean {
-    const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
-    if (!currentSidebarTopic) return false;
+export function isTopicFirstPage(
+  sidebar: SidebarEntry[],
+  currentSlug: string
+): boolean {
+  const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
+  if (!currentSidebarTopic) return false;
 
-    const firstPage = getSidebarFirstPage(currentSidebarTopic.entries);
-    if (!firstPage) return false;
+  const firstPage = getSidebarFirstPage(currentSidebarTopic.entries);
+  if (!firstPage) return false;
 
-    return arePathnamesEqual(stripLeadingAndTrailingSlashes(firstPage.href), currentSlug);
+  return arePathnamesEqual(
+    stripLeadingAndTrailingSlashes(firstPage.href),
+    currentSlug
+  );
 }
 
-export function isTopicLastPage(sidebar: SidebarEntry[], currentSlug: string): boolean {
-    const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
-    if (!currentSidebarTopic) return false;
+export function isTopicLastPage(
+  sidebar: SidebarEntry[],
+  currentSlug: string
+): boolean {
+  const currentSidebarTopic = getCurrentSidebarTopic(sidebar);
+  if (!currentSidebarTopic) return false;
 
-    const lastPage = getSidebarLastPage(currentSidebarTopic.entries);
-    if (!lastPage) return false;
+  const lastPage = getSidebarLastPage(currentSidebarTopic.entries);
+  if (!lastPage) return false;
 
-    return arePathnamesEqual(stripLeadingAndTrailingSlashes(lastPage.href), currentSlug);
+  return arePathnamesEqual(
+    stripLeadingAndTrailingSlashes(lastPage.href),
+    currentSlug
+  );
 }
 
 function getSidebarFirstPage(sidebar: SidebarEntry[]) {
-    const entry = sidebar[0];
-    if (!entry) return;
-    if (entry.type === "link") return entry;
+  const entry = sidebar[0];
+  if (!entry) return;
+  if (entry.type === "link") return entry;
 
-    return getSidebarFirstPage(entry.entries);
+  return getSidebarFirstPage(entry.entries);
 }
 
 function getSidebarLastPage(sidebar: SidebarEntry[]) {
-    const entry = sidebar.at(-1);
-    if (!entry) return;
-    if (entry.type === "link") return entry;
+  const entry = sidebar.at(-1);
+  if (!entry) return;
+  if (entry.type === "link") return entry;
 
-    return getSidebarLastPage(entry.entries);
+  return getSidebarLastPage(entry.entries);
 }
 
 function getTopicFromSlug(
-    config: StarlightSidebarTopicsDropdownSharedConfig,
-    sidebar: SidebarEntry[],
-    slug: string
+  config: StarlightSidebarTopicsDropdownSharedConfig,
+  sidebar: SidebarEntry[],
+  slug: string
 ): Topic | undefined {
-    let topicConfig: Topic["config"] | undefined;
-    let topicSidebar: Topic["sidebar"] | undefined;
-
-    // Start by checking if the current page is a topic homepage.
-    let groupTopicIndex = -1;
-    const slugLocale = getLocaleFromSlug(slug);
-
-    for (const topic of config) {
-        if (topic.type === "group") groupTopicIndex++;
-
-        if (
-            !absoluteLinkRegex.test(topic.link) &&
-            arePathnamesEqual(
-                getLocalizedSlug(stripLeadingAndTrailingSlashes(topic.link), slugLocale),
-                slug
-            ) &&
-            groupTopicIndex !== -1
-        ) {
-            const sidebarTopic = sidebar[groupTopicIndex];
-
-            if (sidebarTopic?.type === "group") {
-                topicConfig = topic;
-                topicSidebar = sidebarTopic.entries;
-            }
-
-            break;
-        }
+  let topicConfig: Topic["config"] | undefined;
+  let topicSidebar: Topic["sidebar"] | undefined;
+  let sidebarHasGroups = true;
+
+  // Start by checking if the current page is a topic homepage.
+  let groupTopicIndex = -1;
+  const slugLocale = getLocaleFromSlug(slug);
+
+  for (const topic of config) {
+    if (topic.type === "group") groupTopicIndex++;
+
+    if (
+      !absoluteLinkRegex.test(topic.link) &&
+      arePathnamesEqual(
+        getLocalizedSlug(
+          stripLeadingAndTrailingSlashes(topic.link),
+          slugLocale
+        ),
+        slug
+      ) &&
+      groupTopicIndex !== -1
+    ) {
+      const sidebarTopic = sidebar[groupTopicIndex];
+
+      if (sidebarTopic?.type === "group") {
+        topicConfig = topic;
+        topicSidebar = sidebarTopic.entries;
+        sidebarHasGroups =
+          sidebarTopic.entries.length !== 1 ||
+          sidebarTopic.entries[0]?.label !== "";
+      }
+
+      break;
     }
+  }
 
-    if (!topicConfig || !topicSidebar) return;
+  if (!topicConfig || !topicSidebar) return;
 
-    return { config: topicConfig, sidebar: topicSidebar };
+  return { config: topicConfig, sidebar: topicSidebar, sidebarHasGroups };
 }
 
 function getTopicById(
-    config: StarlightSidebarTopicsDropdownSharedConfig,
-    sidebar: SidebarEntry[],
-    id: string
+  config: StarlightSidebarTopicsDropdownSharedConfig,
+  sidebar: SidebarEntry[],
+  id: string
 ): Topic | undefined {
-    let topicConfig: Topic["config"] | undefined;
-    let topicSidebar: Topic["sidebar"] | undefined;
-    let groupTopicIndex = -1;
-    for (const topic of config) {
-        if (topic.type === "group") groupTopicIndex++;
-        if (topic.type === "group" && topic.id === id) {
-            const sidebarTopic = sidebar[groupTopicIndex];
-            if (sidebarTopic?.type === "group") {
-                topicConfig = topic;
-                topicSidebar = sidebarTopic.entries;
-            }
-            break;
-        }
+  let topicConfig: Topic["config"] | undefined;
+  let topicSidebar: Topic["sidebar"] | undefined;
+  let sidebarHasGroups = true;
+  let groupTopicIndex = -1;
+  for (const topic of config) {
+    if (topic.type === "group") groupTopicIndex++;
+    if (topic.type === "group" && topic.id === id) {
+      const sidebarTopic = sidebar[groupTopicIndex];
+      if (sidebarTopic?.type === "group") {
+        topicConfig = topic;
+        topicSidebar = sidebarTopic.entries;
+        sidebarHasGroups =
+          sidebarTopic.entries.length !== 1 ||
+          sidebarTopic.entries[0]?.label !== "";
+      }
+      break;
     }
-    if (!topicConfig || !topicSidebar) return;
-    return { config: topicConfig, sidebar: topicSidebar };
+  }
+  if (!topicConfig || !topicSidebar) return;
+  return { config: topicConfig, sidebar: topicSidebar, sidebarHasGroups };
 }
 
-function getCurrentSidebarTopic(sidebar: SidebarEntry[]): SidebarTopic | undefined {
-    let currentSidebarTopic: SidebarTopic | undefined;
+function getCurrentSidebarTopic(
+  sidebar: SidebarEntry[]
+): SidebarTopic | undefined {
+  let currentSidebarTopic: SidebarTopic | undefined;
 
-    for (const topic of sidebar) {
-        if (topic.type === "link") continue;
+  for (const topic of sidebar) {
+    if (topic.type === "link") continue;
 
-        const currentSidebarEntry = getCurrentSidebarEntry(topic.entries);
+    const currentSidebarEntry = getCurrentSidebarEntry(topic.entries);
 
-        if (currentSidebarEntry) {
-            currentSidebarTopic = topic;
-            break;
-        }
+    if (currentSidebarEntry) {
+      currentSidebarTopic = topic;
+      break;
     }
+  }
 
-    return currentSidebarTopic;
+  return currentSidebarTopic;
 }
 
-function getCurrentSidebarEntry(sidebar: SidebarEntry[]): SidebarEntry | undefined {
-    return sidebar.find((entry) => {
-        if (entry.type === "link") {
-            return entry.isCurrent;
-        }
+function getCurrentSidebarEntry(
+  sidebar: SidebarEntry[]
+): SidebarEntry | undefined {
+  return sidebar.find((entry) => {
+    if (entry.type === "link") {
+      return entry.isCurrent;
+    }
 
-        return getCurrentSidebarEntry(entry.entries);
-    });
+    return getCurrentSidebarEntry(entry.entries);
+  });
 }
 
 function getTopicIdFromEntry(entry: StarlightEntry): string | undefined {
-    return isStarlightEntryWithTopic(entry) ? entry.data.topic : undefined;
+  return isStarlightEntryWithTopic(entry) ? entry.data.topic : undefined;
 }
 
 type SidebarEntry = Props["sidebar"][number];
 
 interface SidebarTopic {
-    label: string;
-    entries: SidebarEntry[];
+  label: string;
+  entries: SidebarEntry[];
 }
 
 export interface Topic {
-    config: StarlightSidebarTopicsDropdownSharedConfig[number];
-    sidebar: SidebarEntry[];
+  config: StarlightSidebarTopicsDropdownSharedConfig[number];
+  sidebar: SidebarEntry[];
+  sidebarHasGroups: boolean;
 }

package/lib/vite.ts

@@ -1,34 +1,36 @@
 import type { ViteUserConfig } from "astro";
 
 import type {
-    StarlightSidebarTopicsDropdownConfig,
-    StarlightSidebarTopicsDropdownSharedConfig,
+  StarlightSidebarTopicsDropdownConfig,
+  StarlightSidebarTopicsDropdownSharedConfig,
 } from "./config";
 
 const moduleId = "virtual:starlight-sidebar-topics-dropdown/config";
 
 export function vitePluginStarlightSidebarTopicsDropdown(
-    config: StarlightSidebarTopicsDropdownConfig
+  config: StarlightSidebarTopicsDropdownConfig
 ): VitePlugin {
-    const resolvedModuleId = `\0${moduleId}`;
+  const resolvedModuleId = `\0${moduleId}`;
 
-    const sharedConfig: StarlightSidebarTopicsDropdownSharedConfig = config.map((topic) => {
-        if (!("items" in topic)) return { ...topic, type: "link" };
-        const { items, ...topicWithoutItems } = topic;
-        return { ...topicWithoutItems, type: "group" };
-    });
+  const sharedConfig: StarlightSidebarTopicsDropdownSharedConfig = config.map(
+    (topic) => {
+      if (!("items" in topic)) return { ...topic, type: "link" };
+      const { items, ...topicWithoutItems } = topic;
+      return { ...topicWithoutItems, type: "group" };
+    }
+  );
 
-    const moduleContent = `export default ${JSON.stringify(sharedConfig)}`;
+  const moduleContent = `export default ${JSON.stringify(sharedConfig)}`;
 
-    return {
-        name: "vite-plugin-starlight-sidebar-topics-dropdown",
-        load(id) {
-            return id === resolvedModuleId ? moduleContent : undefined;
-        },
-        resolveId(id) {
-            return id === moduleId ? resolvedModuleId : undefined;
-        },
-    };
+  return {
+    name: "vite-plugin-starlight-sidebar-topics-dropdown",
+    load(id) {
+      return id === resolvedModuleId ? moduleContent : undefined;
+    },
+    resolveId(id) {
+      return id === moduleId ? resolvedModuleId : undefined;
+    },
+  };
 }
 
 type VitePlugin = NonNullable<ViteUserConfig["plugins"]>[number];

package/overrides/Pagination.astro

@@ -4,14 +4,14 @@ import type { Props } from '@astrojs/starlight/props'
 
 import { isTopicFirstPage, isTopicLastPage } from '../lib/sidebar'
 
-const { pagination, sidebar, slug } = Astro.props
+const { id, pagination, sidebar } = Astro.props
 let { prev, next } = pagination
 
-if (isTopicFirstPage(sidebar, slug)) {
+if (isTopicFirstPage(sidebar, id)) {
   prev = undefined
 }
 
-if (isTopicLastPage(sidebar, slug)) {
+if (isTopicLastPage(sidebar, id)) {
   next = undefined
 }
 ---

package/overrides/Sidebar.astro

@@ -7,16 +7,16 @@ import Topics from '../components/Topics.astro'
 import { throwPluginError } from '../lib/plugin'
 import { getCurrentTopic, type Topic } from '../lib/sidebar'
 
-const { entry, sidebar, slug } = Astro.props
+const { id, entry, sidebar } = Astro.props
 
 let currentSidebar = sidebar
 let currentTopic: Topic | undefined = undefined
 
 if (entry['data'].template !== 'splash') {
-  currentTopic = getCurrentTopic(config, sidebar, slug, entry)
+  currentTopic = getCurrentTopic(config, sidebar, id, entry)
   if (!currentTopic)
     throwPluginError(
-      `Failed to find the topic for the \`${slug}\` page.`,
+      `Failed to find the topic for the \`${id}\` page.`,
       `Either include this page in the sidebar configuration of the desired topic using the \`items\` property or to associate an unlisted page with a topic, use the \`topic\` frontmatter property and set it to the desired topic ID.
 Learn more about unlisted pages in the ["Unlisted pages"](https://starlight-sidebar-topics.netlify.app/docs/guides/unlisted-pages/) guide.`,
     )
@@ -25,4 +25,16 @@ Learn more about unlisted pages in the ["Unlisted pages"](https://starlight-side
 ---
 
 {entry['data'].template !== 'splash' && currentTopic && <Topics current={currentTopic.config} />}
-<Default {...Astro.props} sidebar={currentSidebar}><slot /></Default>
+<Default {...Astro.props} sidebar={currentSidebar}><slot /></Default>
+
+{!currentTopic?.sidebarHasGroups &&
+  <style is:global>
+    sl-sidebar-state-persist summary {
+      display: none !important;
+    }
+    sl-sidebar-state-persist ul li {
+      margin-inline-start: 0;
+      border-inline-start: none;
+    }
+  </style>
+}

package/package.json

@@ -1,46 +1,46 @@
 {
-    "name": "starlight-sidebar-topics-dropdown",
-    "version": "0.2.2",
-    "license": "MIT",
-    "description": "Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.",
-    "author": "trueberryless (https://trueberryless.org)",
-    "type": "module",
-    "exports": {
-        ".": "./index.ts",
-        "./overrides/Pagination.astro": "./overrides/Pagination.astro",
-        "./overrides/Sidebar.astro": "./overrides/Sidebar.astro",
-        "./schema": "./schema.ts",
-        "./package.json": "./package.json"
-    },
-    "devDependencies": {
-        "@astrojs/starlight": "^0.28.3",
-        "astro": "^4.16.6"
-    },
-    "peerDependencies": {
-        "@astrojs/starlight": ">=0.28"
-    },
-    "engines": {
-        "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
-    },
-    "packageManager": "pnpm@9.3.0",
-    "publishConfig": {
-        "access": "public"
-    },
-    "keywords": [
-        "starlight",
-        "plugin",
-        "sidebar",
-        "subpages",
-        "sections",
-        "dropdown",
-        "documentation",
-        "astro"
-    ],
-    "homepage": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown.git",
-        "directory": "packages/starlight-sidebar-topics-dropdown"
-    },
-    "bugs": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/issues"
+  "name": "starlight-sidebar-topics-dropdown",
+  "version": "0.3.0",
+  "description": "Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.",
+  "keywords": [
+    "starlight",
+    "plugin",
+    "sidebar",
+    "subpages",
+    "sections",
+    "dropdown",
+    "documentation",
+    "astro"
+  ],
+  "homepage": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown",
+  "bugs": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown.git",
+    "directory": "packages/starlight-sidebar-topics-dropdown"
+  },
+  "license": "MIT",
+  "author": "trueberryless (https://trueberryless.org)",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./overrides/Pagination.astro": "./overrides/Pagination.astro",
+    "./overrides/Sidebar.astro": "./overrides/Sidebar.astro",
+    "./schema": "./schema.ts",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@astrojs/starlight": "^0.30.3",
+    "astro": "^5.1.1"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.30"
+  },
+  "packageManager": "pnpm@9.3.0",
+  "engines": {
+    "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/schema.ts

@@ -1,10 +1,10 @@
 import { z } from "astro/zod";
 export const topicSchema = z.object({
-    /**
-     * ID of the topic to associate with the current page if the page is not listed in any topic sidebar configuration.
-     *
-     * @see https://starlight-sidebar-topics.netlify.app/docs/guides/unlisted-pages/
-     */
-    topic: z.string().optional(),
+  /**
+   * ID of the topic to associate with the current page if the page is not listed in any topic sidebar configuration.
+   *
+   * @see https://starlight-sidebar-topics.netlify.app/docs/guides/unlisted-pages/
+   */
+  topic: z.string().optional(),
 });
 export type TopicFrontmatterSchema = z.input<typeof topicSchema>;

package/starlight.d.ts

@@ -1,5 +1,5 @@
 declare module "virtual:starlight/user-config" {
-    const Config: import("@astrojs/starlight/types").StarlightConfig;
+  const Config: import("@astrojs/starlight/types").StarlightConfig;
 
-    export default Config;
+  export default Config;
 }

package/virtual.d.ts

@@ -1,5 +1,5 @@
 declare module "virtual:starlight-sidebar-topics-dropdown/config" {
-    const StarlightSidebarTopicsDropdownConfig: import("./libs/config").StarlightSidebarTopicsDropdownSharedConfig;
+  const StarlightSidebarTopicsDropdownConfig: import("./libs/config").StarlightSidebarTopicsDropdownSharedConfig;
 
-    export default StarlightSidebarTopicsDropdownConfig;
+  export default StarlightSidebarTopicsDropdownConfig;
 }