starlight-sidebar-topics-dropdown 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# 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
+
+- [#11](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/11) [`88b99c5`](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/commit/88b99c5efda810aa7a614752af18dd01af7fc1e0) Thanks [@trueberryless](https://github.com/trueberryless)! - Improves missing topic error messages by including the slug of the relevant page

package/README.md

@@ -1,15 +1,15 @@
-# `starlight-sidebar-topics-dropdown`
-
-Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.
-
-## Documentation
-
-Want to get started immediately?
-
-Check out the `starlight-sidebar-topics-dropdown` getting started guide.
-
-## License
-
-Licensed under the MIT License, Copyright © trueberryless-org.
-
-See [LICENSE](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/blob/main/LICENSE) for more information.
+# `starlight-sidebar-topics-dropdown`
+
+Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.
+
+## Documentation
+
+Want to get started immediately?
+
+Check out the `starlight-sidebar-topics-dropdown` getting started guide.
+
+## License
+
+Licensed under the MIT license, Copyright © trueberryless.
+
+See [LICENSE](/LICENSE) for more information.

package/components/Topics.astro

@@ -1,253 +1,253 @@
----
-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 '../lib/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% - 8px - 2 * 2px);
-    margin-left: calc(8px + 2px);
-    margin-right: calc(2px);
-  }
-
-  .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>
+---
+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 '../lib/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% - 8px - 2 * 2px);
+    margin-left: calc(8px + 2px);
+    margin-right: calc(2px);
+  }
+
+  .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>