starlight-sidebar-topics-dropdown 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # starlight-sidebar-topics-dropdown
 
+## 0.7.1
+
+### Patch Changes
+
+- [#138](https://github.com/trueberryless/starlight-sidebar-topics-dropdown/pull/138) [`53c2e25`](https://github.com/trueberryless/starlight-sidebar-topics-dropdown/commit/53c2e255ff5e3b742eee8037ee87ae93f0d978e8) Thanks [@trueberryless-bot](https://github.com/trueberryless-bot)! - Updates the repository links after the move from the `trueberryless-org` GitHub organization to the `trueberryless` account.
+
+## 0.7.0
+
+### Minor Changes
+
+- [#129](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/129) [`068240b`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/068240bb01ce039b48652803fe5f4b15c55b59bc) Thanks [@trueberryless](https://github.com/trueberryless) and [@deining](https://github.com/deining)! - Adds support for Astro v7, drops support for Astro v6.
+  
+  ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now `0.42.0` and the minimum supported version of Starlight Sidebar Topics is now `0.9.0`.
+  
+  Please follow the [upgrade guide](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.42.0) to update your project.
+
+### Patch Changes
+
+- [#129](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/129) [`068240b`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/068240bb01ce039b48652803fe5f4b15c55b59bc) Thanks [@trueberryless](https://github.com/trueberryless)! - Adds a readable error message with a hint when the component is used without the [Starlight Sidebar Topics](https://starlight-sidebar-topics.netlify.app/) plugin.
+
+- [#129](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/129) [`068240b`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/068240bb01ce039b48652803fe5f4b15c55b59bc) Thanks [@trueberryless](https://github.com/trueberryless)! - Fixes a build error on pages not associated with any topic, e.g. [excluded pages](https://starlight-sidebar-topics.netlify.app/docs/guides/excluded-pages/). The dropdown menu is no longer rendered on such pages, matching the built-in topic list of the Starlight Sidebar Topics plugin.
+
+- [#129](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/129) [`068240b`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/068240bb01ce039b48652803fe5f4b15c55b59bc) Thanks [@trueberryless](https://github.com/trueberryless)! - Fixes an issue where the [HTML attributes](https://starlight-sidebar-topics.netlify.app/docs/configuration/#attrs) configured for a topic link were not applied to the links in the dropdown menu.
+
+- [#129](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/129) [`068240b`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/068240bb01ce039b48652803fe5f4b15c55b59bc) Thanks [@trueberryless](https://github.com/trueberryless)! - Improves the dropdown menu accessibility by exposing its expanded state to assistive technologies, and fixes an issue where only the first dropdown menu would work when rendering multiple dropdown menus on the same page.
+
 ## 0.6.0
 
 ### Minor Changes
@@ -107,7 +133,7 @@
 
 ### Minor Changes
 
-- [#31](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/31) [`3193771`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/31937716171b020f414ece6783c17181fbd5fdcf) Thanks [@trueberryless](https://github.com/trueberryless)! - ⚠️ **BREAKING CHANGE:** The Starlight Sidebar Topics Dropdown plugin no longer provides the same ["Unnested Sidebar" configuration](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/guides/unnested-sidebar/) like before. Please adapt your `astro.config.mjs` with the up-to-date guide on [how to configure a "Unnested Sidebar"](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/guides/unnested-sidebar/#configure-an-unnested-sidebar).
+- [#31](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/31) [`3193771`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/31937716171b020f414ece6783c17181fbd5fdcf) Thanks [@trueberryless](https://github.com/trueberryless)! - ⚠️ **BREAKING CHANGE:** The Starlight Sidebar Topics Dropdown plugin no longer provides the same ["Unnested Sidebar" configuration](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/blob/5034b142e08b2561813fed9553ab0ee73109d30b/docs/src/content/docs/docs/guides/unnested-sidebar.mdx) like before. Please adapt your `astro.config.mjs` with the up-to-date guide on [how to configure a "Unnested Sidebar"](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/blob/5034b142e08b2561813fed9553ab0ee73109d30b/docs/src/content/docs/docs/guides/unnested-sidebar.mdx#configure-an-unnested-sidebar).
 
 - [#31](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/31) [`db10526`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/db10526d49aab3ac8619159d40968dbc4748c9a0) Thanks [@trueberryless](https://github.com/trueberryless)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now version `0.32.0`.
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present, trueberryless
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,15 +1,15 @@
 # `starlight-sidebar-topics-dropdown`
 
-Dropdown topic list for the Starlight Sidebar Topics plugin.
+Starlight component to display the [Starlight Sidebar Topics](https://starlight-sidebar-topics.netlify.app) plugin topic list as a dropdown menu.
 
 ## Documentation
 
 Want to get started immediately?
 
-Check out the `starlight-sidebar-topics-dropdown` getting started guide.
+Check out the [getting started guide](https://starlight-sidebar-topics-dropdown.netlify.app/docs/getting-started/).
 
 ## License
 
 Licensed under the MIT license, Copyright © trueberryless.
 
-See [LICENSE](/LICENSE) for more information.
+See [LICENSE](https://github.com/trueberryless/starlight-sidebar-topics-dropdown/blob/main/LICENSE) for more information.

package/components/TopicsDropdown.astro

@@ -1,73 +1,70 @@
 ---
 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);
+import { getTopicLinkAttributes, getTopicsDropdown } from "../libs/topics";
+
+const dropdown = getTopicsDropdown(Astro.locals);
 ---
 
-<div class="starlight-sidebar-topics-dropdown-dropdown">
-  <button
-    id="starlight-sidebar-topics-dropdown-button"
-    class="starlight-sidebar-topics-dropdown-button"
-  >
-    {
-      currentTopic.icon && (
+{dropdown && (
+  <starlight-sidebar-topics-dropdown class="starlight-sidebar-topics-dropdown-dropdown">
+    <button
+      type="button"
+      aria-expanded="false"
+      class="starlight-sidebar-topics-dropdown-button"
+    >
+      {dropdown.currentTopic.icon && (
         <div class="starlight-sidebar-topics-dropdown-button-icon">
-          <Icon
-            name={currentTopic.icon as ComponentProps<typeof Icon>["name"]}
-          />
+          <Icon name={dropdown.currentTopic.icon} />
         </div>
-      )
-    }
-    <span class="starlight-sidebar-topics-dropdown-button-label"
-      >{currentTopic.label}</span
-    >
-    {
-      currentTopic.badge && (
+      )}
+      <span class="starlight-sidebar-topics-dropdown-button-label">
+        {dropdown.currentTopic.label}
+      </span>
+      {dropdown.currentTopic.badge && (
         <Badge
           class="starlight-sidebar-topics-dropdown-badge"
-          text={currentTopic.badge.text}
-          variant={currentTopic.badge.variant}
+          text={dropdown.currentTopic.badge.text}
+          variant={dropdown.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>
+      )}
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        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 class="starlight-sidebar-topics-dropdown-menu" hidden>
+      {dropdown.topics.map((topic) => {
+        const { attributes, className } = getTopicLinkAttributes(topic);
 
-  <div
-    id="starlight-sidebar-topics-dropdown-menu"
-    class="starlight-sidebar-topics-dropdown-menu"
-    hidden
-  >
-    {
-      topics.map((topic) => {
         return (
           <a
+            {...attributes}
             href={topic.link}
-            class:list={{
-              "starlight-sidebar-topics-dropdown-item": true,
-              "starlight-sidebar-topics-dropdown-current-item": topic.isCurrent,
-            }}
+            class:list={[
+              "starlight-sidebar-topics-dropdown-item",
+              {
+                "starlight-sidebar-topics-dropdown-current-item":
+                  topic.isCurrent,
+              },
+              className,
+            ]}
           >
             {topic.icon && (
               <div class="starlight-sidebar-topics-dropdown-icon">
-                <Icon
-                  name={topic.icon as ComponentProps<typeof Icon>["name"]}
-                />
+                <Icon name={topic.icon} />
               </div>
             )}
             <span class="starlight-sidebar-topics-dropdown-label">
@@ -82,10 +79,10 @@ const currentTopic = topics.find((topic) => topic.isCurrent);
             )}
           </a>
         );
-      })
-    }
-  </div>
-</div>
+      })}
+    </div>
+  </starlight-sidebar-topics-dropdown>
+)}
 
 <style>
   .starlight-sidebar-topics-dropdown-dropdown {
@@ -225,17 +222,6 @@ const currentTopic = topics.find((topic) => topic.isCurrent);
     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
@@ -254,33 +240,54 @@ const currentTopic = topics.find((topic) => topic.isCurrent);
   }
 </style>
 
-<script is:inline>
-  const dropdownButton = document.getElementById(
-    "starlight-sidebar-topics-dropdown-button"
-  );
-  const dropdownMenu = document.getElementById(
-    "starlight-sidebar-topics-dropdown-menu"
-  );
+<script>
+  class StarlightSidebarTopicsDropdown extends HTMLElement {
+    #controller = new AbortController();
 
-  if (!dropdownButton || !dropdownMenu) {
-    throw new Error("Dropdown elements not found");
-  }
+    connectedCallback() {
+      const button = this.querySelector("button");
+      const menu = this.querySelector<HTMLElement>(
+        ".starlight-sidebar-topics-dropdown-menu"
+      );
+      if (!button || !menu) return;
 
-  dropdownButton.addEventListener("click", () => {
-    const isOpen = !dropdownMenu.hidden;
-    dropdownMenu.hidden = isOpen;
-  });
+      const { signal } = this.#controller;
 
-  function closeDropdown(event) {
-    if (
-      dropdownMenu &&
-      !dropdownMenu.contains(event.target) &&
-      dropdownButton &&
-      !dropdownButton.contains(event.target)
-    ) {
-      dropdownMenu.hidden = true;
+      button.addEventListener(
+        "click",
+        () =>
+          this.#toggle(
+            button,
+            menu,
+            button.getAttribute("aria-expanded") !== "true"
+          ),
+        { signal }
+      );
+
+      document.addEventListener(
+        "click",
+        (event) => {
+          if (event.target instanceof Node && this.contains(event.target))
+            return;
+          this.#toggle(button, menu, false);
+        },
+        { signal }
+      );
+    }
+
+    disconnectedCallback() {
+      this.#controller.abort();
+      this.#controller = new AbortController();
+    }
+
+    #toggle(button: HTMLButtonElement, menu: HTMLElement, isOpen: boolean) {
+      menu.hidden = !isOpen;
+      button.setAttribute("aria-expanded", String(isOpen));
     }
   }
 
-  document.addEventListener("click", closeDropdown);
+  customElements.define(
+    "starlight-sidebar-topics-dropdown",
+    StarlightSidebarTopicsDropdown
+  );
 </script>

package/libs/error.ts

@@ -0,0 +1,14 @@
+import { AstroError } from "astro/errors";
+
+const issueUrl =
+  "https://github.com/trueberryless/starlight-sidebar-topics-dropdown/issues/new";
+
+export function throwPluginError(message: string, hint?: string): never {
+  const hintHeader = "See the error report above for more informations.";
+  const hintFooter = `\n\nIf you believe this is a bug, please file an issue at ${issueUrl}`;
+
+  throw new AstroError(
+    message,
+    hint ? `${hint}${hintFooter}` : `${hintHeader}${hintFooter}`
+  );
+}

package/libs/topics.ts

@@ -0,0 +1,48 @@
+import { throwPluginError } from "./error";
+
+type SidebarTopicsData = App.Locals["starlightSidebarTopics"];
+
+export type SidebarTopic = SidebarTopicsData["topics"][number];
+
+export interface TopicsDropdown {
+  currentTopic: SidebarTopic;
+  topics: SidebarTopic[];
+}
+
+export function getTopicsDropdown(
+  locals: App.Locals
+): TopicsDropdown | undefined {
+  return resolveTopicsDropdown(
+    locals.starlightRoute.hasSidebar,
+    getSidebarTopicsData(locals)
+  );
+}
+
+export function getSidebarTopicsData(locals: App.Locals): SidebarTopicsData {
+  if (!("starlightSidebarTopics" in locals)) {
+    throwPluginError(
+      "The Starlight Sidebar Topics Dropdown component requires the Starlight Sidebar Topics plugin.",
+      "Install the `starlight-sidebar-topics` package and add the plugin to the `plugins` array of your Starlight configuration. Follow the getting started guide at https://starlight-sidebar-topics.netlify.app/docs/getting-started/ for more information."
+    );
+  }
+
+  return locals.starlightSidebarTopics;
+}
+
+export function resolveTopicsDropdown(
+  hasSidebar: boolean,
+  { isPageWithTopic, topics }: SidebarTopicsData
+): TopicsDropdown | undefined {
+  if (!hasSidebar || !isPageWithTopic) return;
+
+  const currentTopic = topics.find((topic) => topic.isCurrent);
+  if (!currentTopic) return;
+
+  return { currentTopic, topics };
+}
+
+export function getTopicLinkAttributes({ attrs }: SidebarTopic) {
+  const { class: className, ...attributes } = attrs ?? {};
+
+  return { attributes, className };
+}

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "starlight-sidebar-topics-dropdown",
-  "version": "0.6.0",
-  "description": "Dropdown topic list for the Starlight Sidebar Topics plugin.",
+  "version": "0.7.1",
+  "description": "Starlight component to display the Starlight Sidebar Topics plugin topic list as a dropdown menu.",
   "keywords": [
     "starlight",
     "component",
     "sidebar",
     "topics",
-    "dropdown"
+    "dropdown",
+    "documentation",
+    "astro",
+    "withastro"
   ],
-  "homepage": "https://starlight-sidebar-topics-dropdown.trueberryless.org/",
+  "homepage": "https://starlight-sidebar-topics-dropdown.netlify.app/",
   "bugs": {
-    "url": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/issues"
+    "url": "https://github.com/trueberryless/starlight-sidebar-topics-dropdown/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown.git",
+    "url": "https://github.com/trueberryless/starlight-sidebar-topics-dropdown.git",
     "directory": "packages/starlight-sidebar-topics-dropdown"
   },
   "license": "MIT",
-  "author": "trueberryless <trueberryless@gmail.com> (https://trueberryless.org)",
+  "author": "trueberryless <trueberryless@gmail.com> (https://felixs.dev)",
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -27,14 +31,14 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@astrojs/starlight": "^0.38.1",
-    "astro": "^6.0.5"
+    "@astrojs/starlight": "^0.42.4",
+    "astro": "^7.3.5",
+    "starlight-sidebar-topics": "^0.9.0"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.38",
-    "starlight-sidebar-topics": ">=0.7"
+    "@astrojs/starlight": ">=0.42.0",
+    "starlight-sidebar-topics": ">=0.9.0"
   },
-  "packageManager": "pnpm@10.10.0",
   "engines": {
     "node": ">=22.12.0"
   },