starlight-sidebar-topics-dropdown 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # starlight-sidebar-topics-dropdown
 
+## 0.5.0
+
+### Minor Changes
+
+- [#40](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/40) [`acf6f15`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/acf6f156d4e8eaa00b2205dbb89befbd5dea27c7) Thanks [@trueberryless](https://github.com/trueberryless)! - ⚠️ **BREAKING CHANGE:** This plugin now uses the [Starlight Sidebar Topics](https://starlight-sidebar-topics.netlify.app/) plugin as a peer dependency. Please follow the upgrade guide below to migrate to the new version.
+
+  1. Install the [Starlight Sidebar Topics](https://starlight-sidebar-topics.netlify.app/) plugin:
+
+     ```sh
+     npm i starlight-sidebar-topics
+     ```
+
+  2. Update the `starlight-sidebar-topics-dropdown` plugin in your `astro.config.mjs` (use the `starlight-sidebar-topics` plugin instead):
+
+     ```diff lang="js"
+     // astro.config.mjs
+     -import starlightSidebarTopicsDropdown from "starlight-sidebar-topics-dropdown";
+     +import starlightSidebarTopics from "starlight-sidebar-topics";
+     ```
+
+  3. Exchange the `starlight-sidebar-topics-dropdown` plugin with the `starlight-sidebar-topics` plugin and add a manual override for the `Sidebar` component where you can use the dropdown component from the `starlight-sidebar-topics-dropdown` plugin:
+
+     ```diff lang="js"
+     // astro.config.mjs
+     export default defineConfig({
+       integrations: [
+         starlight({
+           plugins: [
+     -        starlightSidebarTopicsDropdown([
+     +        starlightSidebarTopics([
+               // Your Starlight Sidebar Topics configuration here (unchanged).
+             ]),
+           ],
+     +      components: {
+     +        Sidebar: './src/components/Sidebar.astro',
+     +      },
+         }),
+       ],
+     });
+     ```
+
+  4. Create an Astro component to replace the default Starlight `<Sidebar>` component with which will render the topic list dropdown menu and [re-use the default Starlight sidebar](https://starlight.astro.build/guides/overriding-components/#reuse-a-built-in-component):
+
+     ```astro
+     ---
+     // src/components/Sidebar.astro
+     import Default from "@astrojs/starlight/components/Sidebar.astro";
+     import TopicsDropdown from "starlight-sidebar-topics-dropdown/TopicsDropdown.astro";
+     ---
+
+     {/* Render the topics dropdown menu. */}
+     <TopicsDropdown />
+     {/* Render the default sidebar. */}
+     <Default><slot /></Default>
+     ```
+
+  5. Update the schema import in `src/content.config.ts`:
+
+     ```diff lang="ts"
+     // src/content.config.ts
+     -import { topicSchema } from "starlight-sidebar-topics-dropdown/schema";
+     +import { topicSchema } from "starlight-sidebar-topics/schema";
+     ```
+
+## 0.4.1
+
+### Patch Changes
+
+- [`01024d4`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/01024d471326097f20087ac401bd1df4d9a8cd22) Thanks [@trueberryless](https://github.com/trueberryless)! - Small fixes and docs changes
+
 ## 0.4.0
 
 ### Minor Changes

package/components/TopicsDropdown.astro

@@ -0,0 +1,281 @@
+---
+import { Badge, Icon } from "@astrojs/starlight/components";
+import type { ComponentProps } from "astro/types";
+
+const { topics } = Astro.locals.starlightSidebarTopics;
+const currentTopic = topics.find((topic) => topic.isCurrent);
+---
+
+<div class="starlight-sidebar-topics-dropdown-dropdown">
+  <button
+    id="starlight-sidebar-topics-dropdown-button"
+    class="starlight-sidebar-topics-dropdown-button"
+  >
+    {
+      currentTopic.icon && (
+        <div class="starlight-sidebar-topics-dropdown-button-icon">
+          <Icon
+            name={currentTopic.icon as ComponentProps<typeof Icon>["name"]}
+          />
+        </div>
+      )
+    }
+    <span class="starlight-sidebar-topics-dropdown-button-label"
+      >{currentTopic.label}</span
+    >
+    {
+      currentTopic.badge && (
+        <Badge
+          class="starlight-sidebar-topics-dropdown-badge"
+          text={currentTopic.badge.text}
+          variant={currentTopic.badge.variant}
+        />
+      )
+    }
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-4 w-4 opacity-50"
+      aria-hidden="true"
+      ><path
+        d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"></path></svg
+    >
+  </button>
+
+  <div
+    id="starlight-sidebar-topics-dropdown-menu"
+    class="starlight-sidebar-topics-dropdown-menu"
+    hidden
+  >
+    {
+      topics.map((topic) => {
+        return (
+          <a
+            href={topic.link}
+            class:list={{
+              "starlight-sidebar-topics-dropdown-item": true,
+              "starlight-sidebar-topics-dropdown-current-item": topic.isCurrent,
+            }}
+          >
+            {topic.icon && (
+              <div class="starlight-sidebar-topics-dropdown-icon">
+                <Icon
+                  name={topic.icon as ComponentProps<typeof Icon>["name"]}
+                />
+              </div>
+            )}
+            <span class="starlight-sidebar-topics-dropdown-label">
+              {topic.label}
+            </span>
+            {topic.badge && (
+              <Badge
+                class="starlight-sidebar-topics-dropdown-badge"
+                text={topic.badge.text}
+                variant={topic.badge.variant}
+              />
+            )}
+          </a>
+        );
+      })
+    }
+  </div>
+</div>
+
+<style>
+  .starlight-sidebar-topics-dropdown-dropdown {
+    position: relative;
+    display: block;
+    width: calc(100% - 2 * 2px);
+    margin-inline: 2px;
+    margin-top: 4px;
+  }
+
+  .starlight-sidebar-topics-dropdown-button {
+    display: flex;
+    align-items: center;
+    background-color: var(--sl-color-gray-6);
+    border: none;
+    border-radius: 0.25rem;
+    color: var(--sl-color-white);
+    padding: 0.3rem 0.5rem;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .starlight-sidebar-topics-dropdown-button::before {
+    content: "";
+    background-color: var(--sl-color-gray-5);
+    border-radius: 0.25rem;
+    inset: -2px;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .starlight-sidebar-topics-dropdown-button:has(
+      .starlight-sidebar-topics-dropdown-button-icon
+    )::before {
+    content: "";
+    background-image: linear-gradient(
+      to right,
+      var(--sl-color-text-accent) calc(1.4rem + 16px + 2px),
+      var(--sl-color-gray-5) 0
+    );
+  }
+
+  .starlight-sidebar-topics-dropdown-button:has(
+      .starlight-sidebar-topics-dropdown-button-icon
+    ) {
+    background: linear-gradient(
+      to right,
+      var(--sl-color-text-accent) calc(1.4rem + 16px),
+      var(--sl-color-gray-6) 0
+    );
+  }
+
+  .starlight-sidebar-topics-dropdown-button-icon {
+    align-items: center;
+    border-radius: 0.25rem;
+    display: flex;
+    justify-content: center;
+    padding: 0.2rem;
+    background-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-invert);
+  }
+
+  .starlight-sidebar-topics-dropdown-button-label {
+    font-weight: 600;
+    margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .starlight-sidebar-topics-dropdown-button:has(
+      .starlight-sidebar-topics-dropdown-button-icon
+    )
+    .starlight-sidebar-topics-dropdown-button-label {
+    font-weight: 600;
+    margin-left: 1rem;
+  }
+
+  .starlight-sidebar-topics-dropdown-label {
+    font-weight: 600;
+    margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .starlight-sidebar-topics-dropdown-item:has(
+      .starlight-sidebar-topics-dropdown-icon
+    )
+    .starlight-sidebar-topics-dropdown-label {
+    margin-left: 0.5rem;
+  }
+
+  .starlight-sidebar-topics-dropdown-button > svg {
+    margin-left: auto;
+    font-size: 1rem;
+    color: var(--sl-color-white);
+  }
+
+  .starlight-sidebar-topics-dropdown-menu {
+    display: block;
+    position: absolute;
+    margin-top: 0.5rem;
+    width: 100%;
+    background-color: var(--sl-color-gray-6);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    min-width: 200px;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    z-index: 1000000;
+  }
+
+  .starlight-sidebar-topics-dropdown-menu[hidden] {
+    display: none;
+  }
+
+  .starlight-sidebar-topics-dropdown-item {
+    display: flex;
+    align-items: center;
+    padding: 0.3em;
+    color: var(--sl-color-white);
+    text-decoration: none;
+    font-weight: 600;
+  }
+
+  .starlight-sidebar-topics-dropdown-icon {
+    align-items: center;
+    border-radius: 0.25rem;
+    border: 1px solid var(--sl-color-gray-4);
+    display: flex;
+    justify-content: center;
+    padding: 0.25rem;
+  }
+
+  .starlight-sidebar-topics-dropdown-button:is(
+      .starlight-sidebar-topics-dropdown-current,
+      :hover,
+      :focus-visible
+    )
+    .starlight-sidebar-topics-dropdown-icon {
+    background-color: var(--sl-color-text-accent);
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-invert);
+  }
+
+  .starlight-sidebar-topics-dropdown-item:is(
+      :hover,
+      .starlight-sidebar-topics-dropdown-current-item
+    )
+    .starlight-sidebar-topics-dropdown-icon {
+    background-color: var(--sl-color-text-accent);
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-invert);
+  }
+
+  .starlight-sidebar-topics-dropdown-badge {
+    margin-left: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+
+<script is:inline>
+  const dropdownButton = document.getElementById(
+    "starlight-sidebar-topics-dropdown-button"
+  );
+  const dropdownMenu = document.getElementById(
+    "starlight-sidebar-topics-dropdown-menu"
+  );
+
+  if (!dropdownButton || !dropdownMenu) {
+    throw new Error("Dropdown elements not found");
+  }
+
+  dropdownButton.addEventListener("click", () => {
+    const isOpen = !dropdownMenu.hidden;
+    dropdownMenu.hidden = isOpen;
+  });
+
+  function closeDropdown(event) {
+    if (
+      dropdownMenu &&
+      !dropdownMenu.contains(event.target) &&
+      dropdownButton &&
+      !dropdownButton.contains(event.target)
+    ) {
+      dropdownMenu.hidden = true;
+    }
+  }
+
+  document.addEventListener("click", closeDropdown);
+</script>

package/index.ts

@@ -1,92 +1 @@
-import type {
-  StarlightPlugin,
-  StarlightUserConfig,
-} from "@astrojs/starlight/types";
-
-import {
-  StarlightSidebarTopicsDropdownConfigSchema,
-  type StarlightSidebarTopicsDropdownUserConfig,
-} from "./libs/config";
-import { overrideStarlightComponent, throwPluginError } from "./libs/plugin";
-import { vitePluginStarlightSidebarTopicsDropdown } from "./libs/vite";
-
-export type {
-  StarlightSidebarTopicsDropdownConfig,
-  StarlightSidebarTopicsDropdownUserConfig,
-} from "./libs/config";
-
-export default function starlightSidebarTopicsDropdownPlugin(
-  userConfig: StarlightSidebarTopicsDropdownUserConfig
-): StarlightPlugin {
-  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")}`
-    );
-  }
-
-  const config = parsedConfig.data;
-
-  return {
-    name: "starlight-sidebar-topics-dropdown-plugin",
-    hooks: {
-      "config:setup"({
-        addIntegration,
-        addRouteMiddleware,
-        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.trueberryless.org/docs/configuration/"
-          );
-        }
-
-        addRouteMiddleware({
-          entrypoint: "starlight-sidebar-topics-dropdown/middleware",
-        });
-
-        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"
-            ),
-          },
-          sidebar,
-        });
-
-        addIntegration({
-          name: "starlight-sidebar-topics-dropdown-integration",
-          hooks: {
-            "astro:config:setup": ({ updateConfig }) => {
-              updateConfig({
-                vite: {
-                  plugins: [vitePluginStarlightSidebarTopicsDropdown(config)],
-                },
-              });
-            },
-          },
-        });
-      },
-    },
-  };
-}
+export { default as TopicsDropdown } from "./components/TopicsDropdown.astro";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-sidebar-topics-dropdown",
-  "version": "0.4.0",
+  "version": "0.5.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",
@@ -24,10 +24,7 @@
   "type": "module",
   "exports": {
     ".": "./index.ts",
-    "./components/Sidebar.astro": "./components/starlight/Sidebar.astro",
-    "./middleware": "./middleware.ts",
-    "./overrides/Sidebar.astro": "./overrides/Sidebar.astro",
-    "./schema": "./schema.ts",
+    "./TopicsDropdown.astro": "./components/TopicsDropdown.astro",
     "./package.json": "./package.json"
   },
   "devDependencies": {
@@ -35,7 +32,8 @@
     "astro": "^5.3.0"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.30"
+    "@astrojs/starlight": ">=0.30",
+    "starlight-sidebar-topics": ">=0.6"
   },
   "packageManager": "pnpm@9.3.0",
   "engines": {

package/components/Topics.astro

@@ -1,253 +0,0 @@
----
-import { Badge, Icon } from '@astrojs/starlight/components'
-import { AstroError } from 'astro/errors'
-import type { ComponentProps } from 'astro/types'
-import { getRelativeLocaleUrl } from 'astro:i18n'
-import starlightConfig from 'virtual:starlight/user-config'
-import config from 'virtual:starlight-sidebar-topics-dropdown/config'
-
-import type { StarlightSidebarTopicsDropdownSharedConfig } from '../libs/config'
-
-interface Props {
-  current: StarlightSidebarTopicsDropdownSharedConfig[number]
-}
-
-const { current } = Astro.props
-
-const defaultLang = starlightConfig.defaultLocale?.lang || starlightConfig.defaultLocale?.locale || 'en'
-
-function getTranslation(translations: Record<string, string>, link: string, description: string) {
-  const defaultTranslation = translations[defaultLang]
-
-  if (!defaultTranslation) {
-    throw new AstroError(
-      `The ${description} for "${link}" must have a key for the default language "${defaultLang}".`,
-      'Update the Starlight config to include a topic label for the default language.',
-    )
-  }
-
-  let translation = defaultTranslation
-
-  if (Astro.currentLocale) {
-    translation = translations[Astro.currentLocale] ?? defaultTranslation
-  }
-
-  return translation
-}
----
-
-<div class="starlight-sidebar-topics-dropdown-dropdown">
-  <button id="starlight-sidebar-topics-dropdown-button" class="starlight-sidebar-topics-dropdown-button">
-    {current.icon && (
-      <div class="starlight-sidebar-topics-dropdown-button-icon">
-        <Icon name={current.icon as ComponentProps<typeof Icon>['name']} />
-      </div>
-    )}
-    <span class="starlight-sidebar-topics-dropdown-button-label">{typeof current.label === 'string' ? current.label : getTranslation(current.label, current.link, 'topic label')}</span>
-    {current.badge && (
-      <Badge
-        class="starlight-sidebar-topics-dropdown-badge"
-        text={
-          typeof current.badge.text === 'string'
-            ? current.badge.text
-            : getTranslation(current.badge.text, current.link, 'current badge text')
-        }
-        variant={current.badge.variant}
-      />
-    )}
-    <svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
-  </button>
-
-  <div id="starlight-sidebar-topics-dropdown-menu" class="starlight-sidebar-topics-dropdown-menu" hidden>
-    {
-      config.map((topic) => {
-        const isLinkTopic = topic.type === 'link'
-        const isCurrent = isLinkTopic ? false : topic.label === current.label && topic.link === current.link
-        const link =
-          !isLinkTopic && Astro.currentLocale ? getRelativeLocaleUrl(Astro.currentLocale, topic.link) : topic.link
-        const label =
-          typeof topic.label === 'string' ? topic.label : getTranslation(topic.label, topic.link, 'topic label')
-
-        return (
-          <a href={link} class:list={{ 'starlight-sidebar-topics-dropdown-item': true, 'starlight-sidebar-topics-dropdown-current-item': isCurrent }}>
-            {topic.icon && (
-              <div class="starlight-sidebar-topics-dropdown-icon">
-                <Icon name={topic.icon as ComponentProps<typeof Icon>['name']} />
-              </div>
-            )}
-            <span class="starlight-sidebar-topics-dropdown-label">{label}</span>
-            {topic.badge && (
-              <Badge
-                class="starlight-sidebar-topics-dropdown-badge"
-                text={
-                  typeof topic.badge.text === 'string'
-                    ? topic.badge.text
-                    : getTranslation(topic.badge.text, topic.link, 'topic badge text')
-                }
-                variant={topic.badge.variant}
-              />
-            )}
-          </a>
-        )
-      })
-    }
-  </div>
-</div>
-
-<style>
-  .starlight-sidebar-topics-dropdown-dropdown {
-    position: relative;
-    display: block;
-    width: calc(100% - 2 * 2px);
-    margin-inline: 2px;
-		margin-top: 4px;
-  }
-
-  .starlight-sidebar-topics-dropdown-button {
-    display: flex;
-    align-items: center;
-    background-color: var(--sl-color-gray-6);
-    border: none;
-    border-radius: 0.25rem;
-    color: var(--sl-color-white);
-    padding: 0.3rem 0.5rem;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  .starlight-sidebar-topics-dropdown-button::before {
-    content: '';
-    background-color: var(--sl-color-gray-5);
-    border-radius: 0.25rem;
-    inset: -2px;
-    position: absolute;
-    z-index: -1;
-  }
-
-
-  .starlight-sidebar-topics-dropdown-button:has(.starlight-sidebar-topics-dropdown-button-icon)::before {
-    content: '';
-    background-image: linear-gradient(to right, var(--sl-color-text-accent) calc(1.4rem + 16px + 2px), var(--sl-color-gray-5) 0);
-  }
-
-  .starlight-sidebar-topics-dropdown-button:has(.starlight-sidebar-topics-dropdown-button-icon) {
-    background: linear-gradient(to right, var(--sl-color-text-accent) calc(1.4rem + 16px), var(--sl-color-gray-6) 0);
-  }
-  
-  .starlight-sidebar-topics-dropdown-button-icon {
-    align-items: center;
-    border-radius: 0.25rem;
-    display: flex;
-    justify-content: center;
-    padding: 0.2rem;
-    background-color: var(--sl-color-text-accent);
-    color: var(--sl-color-text-invert);
-  }
-
-  .starlight-sidebar-topics-dropdown-button-label {
-    font-weight: 600;
-    margin-right: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .starlight-sidebar-topics-dropdown-button:has(.starlight-sidebar-topics-dropdown-button-icon) .starlight-sidebar-topics-dropdown-button-label {
-    font-weight: 600;
-    margin-left: 1rem;
-  }
-
-  .starlight-sidebar-topics-dropdown-label {
-    font-weight: 600;
-    margin-right: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .starlight-sidebar-topics-dropdown-item:has(.starlight-sidebar-topics-dropdown-icon) .starlight-sidebar-topics-dropdown-label {
-    margin-left: 0.5rem;
-  }
-
-  .starlight-sidebar-topics-dropdown-button>svg {
-    margin-left: auto;
-    font-size: 1rem;
-    color: var(--sl-color-white);
-  }
-
-  .starlight-sidebar-topics-dropdown-menu {
-    display: block;
-    position: absolute;
-    margin-top: 0.5rem;
-    width: 100%;
-    background-color: var(--sl-color-gray-6);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    min-width: 200px;
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    z-index: 1000000;
-  }
-
-  .starlight-sidebar-topics-dropdown-menu[hidden] {
-    display: none;
-  }
-
-  .starlight-sidebar-topics-dropdown-item {
-    display: flex;
-    align-items: center;
-    padding: 0.3em;
-    color: var(--sl-color-white);
-    text-decoration: none;
-    font-weight: 600;
-  }
-
-  .starlight-sidebar-topics-dropdown-icon {
-    align-items: center;
-    border-radius: 0.25rem;
-    border: 1px solid var(--sl-color-gray-4);
-    display: flex;
-    justify-content: center;
-    padding: 0.25rem;
-  }
-
-  .starlight-sidebar-topics-dropdown-button:is(.starlight-sidebar-topics-dropdown-current, :hover, :focus-visible) .starlight-sidebar-topics-dropdown-icon {
-    background-color: var(--sl-color-text-accent);
-    border-color: var(--sl-color-text-accent);
-    color: var(--sl-color-text-invert);
-  }  
-
-  .starlight-sidebar-topics-dropdown-item:is(:hover, .starlight-sidebar-topics-dropdown-current-item) .starlight-sidebar-topics-dropdown-icon {
-    background-color: var(--sl-color-text-accent);
-    border-color: var(--sl-color-text-accent);
-    color: var(--sl-color-text-invert);
-  }
-
-  .starlight-sidebar-topics-dropdown-badge {
-    margin-left: 0.25rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
-
-<script is:inline>
-  const dropdownButton = document.getElementById('starlight-sidebar-topics-dropdown-button');
-  const dropdownMenu = document.getElementById('starlight-sidebar-topics-dropdown-menu');
-
-  if (!dropdownButton || !dropdownMenu) {
-    throw new Error('Dropdown elements not found');
-  }
-
-  dropdownButton.addEventListener('click', () => {
-    const isOpen = !dropdownMenu.hidden;
-    dropdownMenu.hidden = isOpen;
-  });
-
-  function closeDropdown(event) {
-    if (dropdownMenu && !dropdownMenu.contains(event.target) && dropdownButton && !dropdownButton.contains(event.target)) {
-      dropdownMenu.hidden = true;
-    }
-  }
-
-  document.addEventListener('click', closeDropdown);
-</script>

package/components/starlight/Sidebar.astro

@@ -1,28 +0,0 @@
----
-import { StarlightSidebarTopicsDropdownLocalsSymbol, type StarlightSidebarTopicsDropdownLocals } from '../../libs/locals'
-import Topics from '../Topics.astro'
-const { entry } = Astro.locals.starlightRoute
-// @ts-expect-error - See `libs/locals` for more information.
-const currentTopic = Astro.locals[StarlightSidebarTopicsDropdownLocalsSymbol] as StarlightSidebarTopicsDropdownLocals
----
-
-{entry['data'].template !== 'splash' && currentTopic && <Topics current={currentTopic.config} />}
-
-<style is:global>
-	sl-sidebar-state-persist ul.top-level > li:not(:has(details)) {
-		margin-top: 0rem;
-	}
-	sl-sidebar-state-persist ul.top-level > li:has(details) {
-		margin-block: 0.5rem;
-	}
-	/* sl-sidebar-state-persist ul.top-level > li > a {
-		font-size: var(--sl-text-sm);
-	} */
-	sl-sidebar-state-persist ul.top-level > li > a[aria-current='page'] {
-		font-weight: 600;
-	}
-	sl-sidebar-state-persist ul.top-level > li > a[aria-current='false'] {
-		font-weight: 400;
-		color: var(--sl-color-gray-2);
-	}
-</style>

package/libs/config.ts

@@ -1,82 +0,0 @@
-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"),
-});
-
-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(),
-});
-
-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"]>
-  >,
-});
-
-export const StarlightSidebarTopicsDropdownConfigSchema = z
-  .union([sidebarTopicGroupSchema, sidebarTopicLinkSchema])
-  .array();
-
-export type StarlightSidebarTopicsDropdownUserConfig = z.input<
-  typeof StarlightSidebarTopicsDropdownConfigSchema
->;
-export type StarlightSidebarTopicsDropdownConfig = z.output<
-  typeof StarlightSidebarTopicsDropdownConfigSchema
->;
-
-export type StarlightSidebarTopicsDropdownSharedConfig = (
-  | (z.output<typeof sidebarTopicLinkSchema> & { type: "link" })
-  | (Omit<z.output<typeof sidebarTopicGroupSchema>, "items"> & {
-      type: "group";
-    })
-)[];

package/libs/content.ts

@@ -1,15 +0,0 @@
-import type { StarlightRouteData } from "@astrojs/starlight/route-data";
-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 type StarlightEntry = StarlightRouteData["entry"];
-export type StarlightEntryWithTopic = StarlightEntry & {
-  data: TopicFrontmatterSchema;
-};

package/libs/i18n.ts

@@ -1,27 +0,0 @@
-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;
-
-  if (slugLocale) {
-    return stripTrailingSlash(
-      slug.replace(`${slugLocale}/`, locale ? `${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;
-}

package/libs/locals.ts

@@ -1,14 +0,0 @@
-import type { StarlightSidebarTopicsDropdownSharedConfig } from "./config";
-
-/**
- * We keep track of the current topic configuration using a variable stored using `Astro.locals` which will be reset for
- * each new page. The value is tracked using an untyped symbol on purpose to avoid users to get autocomplete for it and
- * avoid potential clashes with user-defined variables.
- */
-export const StarlightSidebarTopicsDropdownLocalsSymbol = Symbol.for(
-  "starlight-sidebar-topics-dropdown:locals"
-);
-
-export interface StarlightSidebarTopicsDropdownLocals {
-  config: StarlightSidebarTopicsDropdownSharedConfig[number];
-}

package/libs/pathname.ts

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

package/libs/plugin.ts

@@ -1,32 +0,0 @@
-import type { StarlightUserConfig } from "@astrojs/starlight/types";
-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/trueberryless-org/starlight-sidebar-topics-dropdown/issues/new/choose`
-  );
-}
-
-export function overrideStarlightComponent(
-  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\`.`
-    );
-
-    return {};
-  }
-
-  return {
-    [component]: `starlight-sidebar-topics-dropdown/overrides/${component}.astro`,
-  };
-}

package/libs/sidebar.ts

@@ -1,210 +0,0 @@
-import type { StarlightRouteData } from "@astrojs/starlight/route-data";
-
-import type { StarlightSidebarTopicsDropdownSharedConfig } from "./config";
-import { isStarlightEntryWithTopic, type StarlightEntry } from "./content";
-import { getLocaleFromSlug, getLocalizedSlug } from "./i18n";
-import { arePathnamesEqual, stripLeadingAndTrailingSlashes } from "./pathname";
-
-const absoluteLinkRegex = /^https?:\/\//;
-
-export function getCurrentTopic(
-  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;
-
-  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;
-
-  const firstPage = getSidebarFirstPage(currentSidebarTopic.entries);
-  if (!firstPage) return false;
-
-  return arePathnamesEqual(
-    stripLeadingAndTrailingSlashes(firstPage.href),
-    currentSlug
-  );
-}
-
-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;
-
-  return arePathnamesEqual(
-    stripLeadingAndTrailingSlashes(lastPage.href),
-    currentSlug
-  );
-}
-
-function getSidebarFirstPage(sidebar: SidebarEntry[]) {
-  const entry = sidebar[0];
-  if (!entry) return;
-  if (entry.type === "link") return entry;
-
-  return getSidebarFirstPage(entry.entries);
-}
-
-function getSidebarLastPage(sidebar: SidebarEntry[]) {
-  const entry = sidebar.at(-1);
-  if (!entry) return;
-  if (entry.type === "link") return entry;
-
-  return getSidebarLastPage(entry.entries);
-}
-
-function getTopicFromSlug(
-  config: StarlightSidebarTopicsDropdownSharedConfig,
-  sidebar: SidebarEntry[],
-  slug: string
-): Topic | undefined {
-  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;
-
-  return { config: topicConfig, sidebar: topicSidebar, sidebarHasGroups };
-}
-
-function getTopicById(
-  config: StarlightSidebarTopicsDropdownSharedConfig,
-  sidebar: SidebarEntry[],
-  id: string
-): Topic | undefined {
-  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, sidebarHasGroups };
-}
-
-function getCurrentSidebarTopic(
-  sidebar: SidebarEntry[]
-): SidebarTopic | undefined {
-  let currentSidebarTopic: SidebarTopic | undefined;
-
-  for (const topic of sidebar) {
-    if (topic.type === "link") continue;
-
-    const currentSidebarEntry = getCurrentSidebarEntry(topic.entries);
-
-    if (currentSidebarEntry) {
-      currentSidebarTopic = topic;
-      break;
-    }
-  }
-
-  return currentSidebarTopic;
-}
-
-function getCurrentSidebarEntry(
-  sidebar: SidebarEntry[]
-): SidebarEntry | undefined {
-  return sidebar.find((entry) => {
-    if (entry.type === "link") {
-      return entry.isCurrent;
-    }
-
-    return getCurrentSidebarEntry(entry.entries);
-  });
-}
-
-function getTopicIdFromEntry(entry: StarlightEntry): string | undefined {
-  return isStarlightEntryWithTopic(entry) ? entry.data.topic : undefined;
-}
-
-type SidebarEntry = StarlightRouteData["sidebar"][number];
-
-interface SidebarTopic {
-  label: string;
-  entries: SidebarEntry[];
-}
-
-export interface Topic {
-  config: StarlightSidebarTopicsDropdownSharedConfig[number];
-  sidebar: SidebarEntry[];
-  sidebarHasGroups: boolean;
-}

package/libs/starlight.ts

@@ -1,29 +0,0 @@
-import type { StarlightUserConfig } from "@astrojs/starlight/types";
-import type { AstroIntegrationLogger } from "astro";
-
-export function overrideStarlightComponent(
-  components: StarlightUserConfig["components"],
-  logger: AstroIntegrationLogger,
-  override: keyof NonNullable<StarlightUserConfig["components"]>,
-  component: string
-) {
-  if (components?.[override]) {
-    logger.warn(
-      `It looks like you already have a \`${override}\` 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/components/${component}.astro\`.`
-    );
-    // if (component === "DynamicVersionBadge") {
-    //   logger.warn(
-    //     "Notice that the `DynamicVersionBadge` component must be rendered AFTER the original Starlight `SiteTitle` component in the DOM. This ensures proper layout and behavior within the application."
-    //   );
-    // }
-
-    return {};
-  }
-
-  return {
-    [override]: `starlight-sidebar-topics-dropdown/overrides/${override}.astro`,
-  };
-}

package/libs/vite.ts

@@ -1,36 +0,0 @@
-import type { ViteUserConfig } from "astro";
-
-import type {
-  StarlightSidebarTopicsDropdownConfig,
-  StarlightSidebarTopicsDropdownSharedConfig,
-} from "./config";
-
-const moduleId = "virtual:starlight-sidebar-topics-dropdown/config";
-
-export function vitePluginStarlightSidebarTopicsDropdown(
-  config: StarlightSidebarTopicsDropdownConfig
-): VitePlugin {
-  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 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;
-    },
-  };
-}
-
-type VitePlugin = NonNullable<ViteUserConfig["plugins"]>[number];

package/middleware.ts

@@ -1,43 +0,0 @@
-import { defineRouteMiddleware } from "@astrojs/starlight/route-data";
-import config from "virtual:starlight-sidebar-topics-dropdown/config";
-
-import {
-  StarlightSidebarTopicsDropdownLocalsSymbol,
-  type StarlightSidebarTopicsDropdownLocals,
-} from "./libs/locals";
-import { throwPluginError } from "./libs/plugin";
-import {
-  getCurrentTopic,
-  isTopicFirstPage,
-  isTopicLastPage,
-} from "./libs/sidebar";
-
-export const onRequest = defineRouteMiddleware((context) => {
-  const { starlightRoute } = context.locals;
-  const { entry, id, pagination, sidebar } = starlightRoute;
-
-  if (entry["data"].template !== "splash") {
-    const currentTopic = getCurrentTopic(config, sidebar, id, entry);
-
-    if (!currentTopic)
-      throwPluginError(
-        `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-dropdown.trueberryless.org/docs/guides/unlisted-pages/) guide.`
-      );
-
-    starlightRoute.sidebar = currentTopic.sidebar;
-    // @ts-expect-error - See `libs/locals` for more information.
-    context.locals[StarlightSidebarTopicsDropdownLocalsSymbol] = {
-      config: currentTopic.config,
-    } satisfies StarlightSidebarTopicsDropdownLocals;
-
-    if (isTopicFirstPage(sidebar, id)) {
-      pagination.prev = undefined;
-    }
-
-    if (isTopicLastPage(sidebar, id)) {
-      pagination.next = undefined;
-    }
-  }
-});

package/overrides/Sidebar.astro

@@ -1,7 +0,0 @@
----
-import Default from '@astrojs/starlight/components/Sidebar.astro'
-import StarlightSidebarTopicsDropdownSidebar from '../components/starlight/Sidebar.astro'
----
-
-<StarlightSidebarTopicsDropdownSidebar />
-<Default><slot /></Default>

package/schema.ts

@@ -1,10 +0,0 @@
-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-dropdown.trueberryless.org/docs/guides/unlisted-pages/
-   */
-  topic: z.string().optional(),
-});
-export type TopicFrontmatterSchema = z.input<typeof topicSchema>;

package/starlight.d.ts

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

package/virtual.d.ts

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