@astrojs/starlight 0.5.5 → 0.6.0

package/components/Search.astro

@@ -4,324 +4,314 @@ import { useTranslations } from '../utils/translations';
 import Icon from '../user-components/Icon.astro';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
 const pagefindTranslations = {
-  placeholder: t('search.label'),
-  ...Object.fromEntries(
-    Object.entries(t.pick('pagefind.')).map(([key, value]) => [
-      key.replace('pagefind.', ''),
-      value,
-    ])
-  ),
+	placeholder: t('search.label'),
+	...Object.fromEntries(
+		Object.entries(t.pick('pagefind.')).map(([key, value]) => [key.replace('pagefind.', ''), value])
+	),
 };
 ---
 
 <site-search data-translations={JSON.stringify(pagefindTranslations)}>
-  <button data-open-modal disabled>
-    {
-      /* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
-    }
-    <Icon name="magnifier" label={t('search.label')} />
-    <span class="hidden md:block" aria-hidden="true">{t('search.label')}</span>
-    <Icon
-      name="forward-slash"
-      class="hidden md:block"
-      label={t('search.shortcutLabel')}
-    />
-  </button>
-
-  <dialog style="padding:0" aria-label={t('search.label')}>
-    <div class="dialog-frame flex">
-      {
-        /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
-      }
-      <button data-close-modal class="flex md:hidden">
-        {t('search.cancelLabel')}
-      </button>
-      {
-        import.meta.env.DEV ? (
-          <div style="margin: auto; text-align: center; white-space: pre-line;" dir="ltr">
-            <p>{t("search.devWarning")}</p>
-          </div>
-        ) : (
-          <div class="search-container">
-            <div id="starlight__search" />
-          </div>
-        )
-      }
-    </div>
-  </dialog>
+	<button data-open-modal disabled>
+		{
+			/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
+		}
+		<Icon name="magnifier" label={t('search.label')} />
+		<span class="hidden md:block" aria-hidden="true">{t('search.label')}</span>
+		<Icon name="forward-slash" class="hidden md:block" label={t('search.shortcutLabel')} />
+	</button>
+
+	<dialog style="padding:0" aria-label={t('search.label')}>
+		<div class="dialog-frame flex">
+			{
+				/* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
+			}
+			<button data-close-modal class="flex md:hidden">
+				{t('search.cancelLabel')}
+			</button>
+			{
+				import.meta.env.DEV ? (
+					<div style="margin: auto; text-align: center; white-space: pre-line;" dir="ltr">
+						<p>{t('search.devWarning')}</p>
+					</div>
+				) : (
+					<div class="search-container">
+						<div id="starlight__search" />
+					</div>
+				)
+			}
+		</div>
+	</dialog>
 </site-search>
 
 <script>
-  class SiteSearch extends HTMLElement {
-    constructor() {
-      super();
-      const openBtn = this.querySelector<HTMLButtonElement>(
-        'button[data-open-modal]'
-      )!;
-      const closeBtn = this.querySelector<HTMLButtonElement>(
-        'button[data-close-modal]'
-      )!;
-      const dialog = this.querySelector('dialog')!;
-      const dialogFrame = this.querySelector('.dialog-frame')!;
-
-      /** Close the modal if a user clicks outside of the modal. */
-      const onWindowClick = (event: MouseEvent) => {
-        if (
-          document.body.contains(event.target as Node) &&
-          !dialogFrame.contains(event.target as Node)
-        )
-          closeModal();
-      };
-
-      const openModal = (event?: MouseEvent) => {
-        dialog.showModal();
-        this.querySelector('input')?.focus();
-        event?.stopPropagation();
-        window.addEventListener('click', onWindowClick);
-      };
-
-      const closeModal = () => {
-        dialog.close();
-        window.removeEventListener('click', onWindowClick);
-      };
-
-      openBtn.addEventListener('click', openModal);
-      openBtn.disabled = false;
-      closeBtn.addEventListener('click', closeModal);
-
-      // Listen for `/` and `cmd + k` keyboard shortcuts.
-      window.addEventListener('keydown', (e) => {
-        if (e.metaKey === true && e.key === 'k') {
-          dialog.open ? closeModal() : openModal();
-          e.preventDefault();
-        } else if (e.key === '/' && !dialog.open) {
-          openModal();
-          e.preventDefault();
-        }
-      });
-
-      let translations = {};
-      try {
-        translations = JSON.parse(this.dataset.translations || '{}');
-      } catch {}
-
-      window.addEventListener('DOMContentLoaded', () => {
-        if (import.meta.env.DEV) return;
-        const onIdle =
-          window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
-        onIdle(async () => {
-          const { PagefindUI } = await import('@pagefind/default-ui');
-          new PagefindUI({
-            element: '#starlight__search',
-            baseUrl: import.meta.env.BASE_URL,
-            bundlePath:
-              import.meta.env.BASE_URL.replace(/\/$/, '') + '/_pagefind/',
-            showImages: false,
-            translations,
-          });
-        });
-      });
-    }
-  }
-  customElements.define('site-search', SiteSearch);
+	class SiteSearch extends HTMLElement {
+		constructor() {
+			super();
+			const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+			const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
+			const dialog = this.querySelector('dialog')!;
+			const dialogFrame = this.querySelector('.dialog-frame')!;
+
+			/** Close the modal if a user clicks outside of the modal. */
+			const onWindowClick = (event: MouseEvent) => {
+				if (
+					document.body.contains(event.target as Node) &&
+					!dialogFrame.contains(event.target as Node)
+				)
+					closeModal();
+			};
+
+			const openModal = (event?: MouseEvent) => {
+				dialog.showModal();
+				this.querySelector('input')?.focus();
+				event?.stopPropagation();
+				window.addEventListener('click', onWindowClick);
+			};
+
+			const closeModal = () => {
+				dialog.close();
+				window.removeEventListener('click', onWindowClick);
+			};
+
+			openBtn.addEventListener('click', openModal);
+			openBtn.disabled = false;
+			closeBtn.addEventListener('click', closeModal);
+
+			// Listen for `/` and `cmd + k` keyboard shortcuts.
+			window.addEventListener('keydown', (e) => {
+				const isInput =
+					document.activeElement &&
+					['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase());
+				if (e.metaKey === true && e.key === 'k') {
+					dialog.open ? closeModal() : openModal();
+					e.preventDefault();
+				} else if (e.key === '/' && !dialog.open && !isInput) {
+					openModal();
+					e.preventDefault();
+				}
+			});
+
+			let translations = {};
+			try {
+				translations = JSON.parse(this.dataset.translations || '{}');
+			} catch {}
+
+			window.addEventListener('DOMContentLoaded', () => {
+				if (import.meta.env.DEV) return;
+				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+				onIdle(async () => {
+					const { PagefindUI } = await import('@pagefind/default-ui');
+					new PagefindUI({
+						element: '#starlight__search',
+						baseUrl: import.meta.env.BASE_URL,
+						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/_pagefind/',
+						showImages: false,
+						translations,
+					});
+				});
+			});
+		}
+	}
+	customElements.define('site-search', SiteSearch);
 </script>
 
 <style>
-  button[data-open-modal] {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    border: 0;
-    background-color: transparent;
-    color: var(--sl-color-gray-1);
-    cursor: pointer;
-    height: 2.5rem;
-    font-size: var(--sl-text-xl);
-  }
-
-  @media (min-width: 50rem) {
-    button[data-open-modal] {
-      border: 1px solid var(--sl-color-gray-5);
-      border-radius: 0.5rem;
-      padding-inline-start: 0.75rem;
-      padding-inline-end: 1rem;
-      background-color: var(--sl-color-black);
-      color: var(--sl-color-gray-2);
-      font-size: var(--sl-text-sm);
-      width: 100%;
-      max-width: 22rem;
-    }
-    button[data-open-modal]:hover {
-      border-color: var(--sl-color-gray-2);
-      color: var(--sl-color-white);
-    }
-
-    button[data-open-modal] > :last-child {
-      margin-inline-start: auto;
-    }
-  }
-
-  dialog {
-    margin: 0;
-    background-color: var(--sl-color-gray-6);
-    border: 1px solid var(--sl-color-gray-5);
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-    box-shadow: var(--sl-shadow-lg);
-  }
-  dialog[open] {
-    display: grid;
-  }
-
-  dialog::backdrop {
-    background-color: var(--sl-color-backdrop-overlay);
-    -webkit-backdrop-filter: blur(0.25rem);
-    backdrop-filter: blur(0.25rem);
-  }
-
-  .dialog-frame {
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
-  }
-
-  button[data-close-modal] {
-    position: absolute;
-    z-index: 1;
-    align-items: center;
-    align-self: flex-end;
-    height: calc(64px * var(--pagefind-ui-scale));
-    padding: 0.25rem;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--sl-color-text-accent);
-  }
-
-  #starlight__search {
-    --pagefind-ui-primary: var(--sl-color-accent-light);
-    --pagefind-ui-text: var(--sl-color-gray-2);
-    --pagefind-ui-background: var(--sl-color-black);
-    --pagefind-ui-border: var(--sl-color-gray-5);
-    --pagefind-ui-border-width: 1px;
-    --sl-search-cancel-space: 5rem;
-  }
-
-  @media (min-width: 50rem) {
-    #starlight__search {
-      --sl-search-cancel-space: 0px;
-    }
-
-    dialog {
-      margin: 4rem auto auto;
-      border-radius: 0.5rem;
-      width: 90%;
-      max-width: 40rem;
-      height: max-content;
-      min-height: 15rem;
-      max-height: calc(100% - 8rem);
-    }
-  }
+	button[data-open-modal] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		border: 0;
+		background-color: transparent;
+		color: var(--sl-color-gray-1);
+		cursor: pointer;
+		height: 2.5rem;
+		font-size: var(--sl-text-xl);
+	}
+
+	@media (min-width: 50rem) {
+		button[data-open-modal] {
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 1rem;
+			background-color: var(--sl-color-black);
+			color: var(--sl-color-gray-2);
+			font-size: var(--sl-text-sm);
+			width: 100%;
+			max-width: 22rem;
+		}
+		button[data-open-modal]:hover {
+			border-color: var(--sl-color-gray-2);
+			color: var(--sl-color-white);
+		}
+
+		button[data-open-modal] > :last-child {
+			margin-inline-start: auto;
+		}
+	}
+
+	dialog {
+		margin: 0;
+		background-color: var(--sl-color-gray-6);
+		border: 1px solid var(--sl-color-gray-5);
+		width: 100%;
+		max-width: 100%;
+		height: 100%;
+		max-height: 100%;
+		box-shadow: var(--sl-shadow-lg);
+	}
+	dialog[open] {
+		display: grid;
+	}
+
+	dialog::backdrop {
+		background-color: var(--sl-color-backdrop-overlay);
+		-webkit-backdrop-filter: blur(0.25rem);
+		backdrop-filter: blur(0.25rem);
+	}
+
+	.dialog-frame {
+		flex-direction: column;
+		gap: 1rem;
+		padding: 1.5rem;
+	}
+
+	button[data-close-modal] {
+		position: absolute;
+		z-index: 1;
+		align-items: center;
+		align-self: flex-end;
+		height: calc(64px * var(--pagefind-ui-scale));
+		padding: 0.25rem;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		color: var(--sl-color-text-accent);
+	}
+
+	#starlight__search {
+		--pagefind-ui-primary: var(--sl-color-accent-light);
+		--pagefind-ui-text: var(--sl-color-gray-2);
+		--pagefind-ui-background: var(--sl-color-black);
+		--pagefind-ui-border: var(--sl-color-gray-5);
+		--pagefind-ui-border-width: 1px;
+		--sl-search-cancel-space: 5rem;
+	}
+
+	@media (min-width: 50rem) {
+		#starlight__search {
+			--sl-search-cancel-space: 0px;
+		}
+
+		dialog {
+			margin: 4rem auto auto;
+			border-radius: 0.5rem;
+			width: 90%;
+			max-width: 40rem;
+			height: max-content;
+			min-height: 15rem;
+			max-height: calc(100% - 8rem);
+		}
+	}
 </style>
 
 <style is:global>
-  #starlight__search .pagefind-ui__form::before {
-    --pagefind-ui-text: var(--sl-color-gray-1);
-    opacity: 1;
-  }
-
-  #starlight__search .pagefind-ui__search-input {
-    color: var(--sl-color-white);
-    font-weight: 400;
-    width: calc(100% - var(--sl-search-cancel-space));
-  }
-
-  #starlight__search input:focus {
-    --pagefind-ui-border: var(--sl-color-accent);
-  }
-
-  #starlight__search .pagefind-ui__search-clear {
-    inset-inline-end: var(--sl-search-cancel-space);
-    width: calc(60px * var(--pagefind-ui-scale));
-    padding: 0;
-    background-color: transparent;
-    overflow: hidden;
-  }
-  #starlight__search .pagefind-ui__search-clear:focus {
-    outline: 1px solid var(--sl-color-accent);
-  }
-  #starlight__search .pagefind-ui__search-clear::before {
-    content: '';
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-      center / 50% no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-      center / 50% no-repeat;
-    background-color: var(--sl-color-text-accent);
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  #starlight__search .pagefind-ui__results > * + * {
-    margin-top: 0.5rem;
-  }
-  #starlight__search .pagefind-ui__result {
-    position: relative;
-    border: 0;
-    border-radius: 0.25rem;
-    padding: 1rem;
-    background-color: var(--sl-color-black);
-  }
-
-  #starlight__search .pagefind-ui__result:hover,
-  #starlight__search .pagefind-ui__result:focus-within {
-    outline: 1px solid var(--sl-color-accent-high);
-  }
-
-  #starlight__search .pagefind-ui__result:focus-within {
-    background-color: var(--sl-color-accent-low);
-  }
-
-  #starlight__search .pagefind-ui__result-thumb,
-  #starlight__search .pagefind-ui__result-inner {
-    margin-top: 0;
-  }
-
-  #starlight__search .pagefind-ui__result-link {
-    --pagefind-ui-text: var(--sl-color-white);
-    font-weight: 600;
-  }
-
-  #starlight__search .pagefind-ui__result-link:hover {
-    text-decoration: none;
-  }
-
-  #starlight__search .pagefind-ui__result-link::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
-  #starlight__search .pagefind-ui__result-excerpt {
-    font-size: var(--sl-text-body-sm);
-    word-break: break-word;
-  }
-
-  #starlight__search mark {
-    color: var(--sl-color-white);
-    background-color: var(--sl-color-accent-low);
-    font-weight: 500;
-    padding: 0.1em 0.2em;
-  }
-
-  #starlight__search .pagefind-ui__result:focus-within mark {
-    text-decoration: underline;
-  }
+	#starlight__search .pagefind-ui__form::before {
+		--pagefind-ui-text: var(--sl-color-gray-1);
+		opacity: 1;
+	}
+
+	#starlight__search .pagefind-ui__search-input {
+		color: var(--sl-color-white);
+		font-weight: 400;
+		width: calc(100% - var(--sl-search-cancel-space));
+	}
+
+	#starlight__search input:focus {
+		--pagefind-ui-border: var(--sl-color-accent);
+	}
+
+	#starlight__search .pagefind-ui__search-clear {
+		inset-inline-end: var(--sl-search-cancel-space);
+		width: calc(60px * var(--pagefind-ui-scale));
+		padding: 0;
+		background-color: transparent;
+		overflow: hidden;
+	}
+	#starlight__search .pagefind-ui__search-clear:focus {
+		outline: 1px solid var(--sl-color-accent);
+	}
+	#starlight__search .pagefind-ui__search-clear::before {
+		content: '';
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+			center / 50% no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+			center / 50% no-repeat;
+		background-color: var(--sl-color-text-accent);
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	#starlight__search .pagefind-ui__results > * + * {
+		margin-top: 0.5rem;
+	}
+	#starlight__search .pagefind-ui__result {
+		position: relative;
+		border: 0;
+		border-radius: 0.25rem;
+		padding: 1rem;
+		background-color: var(--sl-color-black);
+	}
+
+	#starlight__search .pagefind-ui__result:hover,
+	#starlight__search .pagefind-ui__result:focus-within {
+		outline: 1px solid var(--sl-color-accent-high);
+	}
+
+	#starlight__search .pagefind-ui__result:focus-within {
+		background-color: var(--sl-color-accent-low);
+	}
+
+	#starlight__search .pagefind-ui__result-thumb,
+	#starlight__search .pagefind-ui__result-inner {
+		margin-top: 0;
+	}
+
+	#starlight__search .pagefind-ui__result-link {
+		--pagefind-ui-text: var(--sl-color-white);
+		font-weight: 600;
+	}
+
+	#starlight__search .pagefind-ui__result-link:hover {
+		text-decoration: none;
+	}
+
+	#starlight__search .pagefind-ui__result-link::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+
+	#starlight__search .pagefind-ui__result-excerpt {
+		font-size: var(--sl-text-body-sm);
+		word-break: break-word;
+	}
+
+	#starlight__search mark {
+		color: var(--sl-color-white);
+		background-color: var(--sl-color-accent-low);
+		font-weight: 500;
+		padding: 0.1em 0.2em;
+	}
+
+	#starlight__search .pagefind-ui__result:focus-within mark {
+		text-decoration: underline;
+	}
 </style>