@umami/shiso 0.54.0 → 0.61.0

package/src/components/Footer.tsx

@@ -0,0 +1,84 @@
+import { ConfiguredIcon } from '@/components/ConfiguredIcon';
+import type { NormalizedFooter } from '@/lib/types';
+
+export function Footer({
+  footer,
+  className = '',
+}: {
+  footer: NormalizedFooter | null;
+  className?: string;
+}) {
+  if (!footer) {
+    return null;
+  }
+
+  const { socials, links: columns, attribution } = footer;
+
+  return (
+    <footer className={`mt-8 border-border border-t py-8 text-muted-foreground ${className}`}>
+      {columns.length > 0 && (
+        <div className="mb-8 grid grid-cols-[repeat(auto-fit,minmax(10rem,max-content))] gap-x-16 gap-y-8">
+          {columns.map((column, index) => (
+            <div key={column.header || index}>
+              {column.header && (
+                <div className="mb-3 text-sm font-semibold text-foreground">{column.header}</div>
+              )}
+              <ul className="m-0 flex list-none flex-col gap-2 p-0">
+                {column.items.map(item => (
+                  <li key={item.href}>
+                    <a
+                      href={item.href}
+                      target={item.target}
+                      rel={item.target === '_blank' ? 'noreferrer' : undefined}
+                      className="text-sm text-muted-foreground hover:text-foreground"
+                    >
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      )}
+      {attribution || socials.length > 0 ? (
+        <div className="flex items-center justify-between gap-4">
+          {attribution ? (
+            <span className="text-sm">
+              Powered by{' '}
+              <a
+                href="https://shiso.umami.is?ref=docs-footer"
+                className="font-bold hover:text-foreground"
+              >
+                shiso
+              </a>
+            </span>
+          ) : (
+            <span />
+          )}
+          {socials.length > 0 && (
+            <div className="flex items-center gap-1">
+              {socials.map(link => {
+                const iconOnly = !link.label;
+
+                return (
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    target={link.target}
+                    rel={link.target === '_blank' ? 'noreferrer' : undefined}
+                    className={`inline-flex min-h-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground ${iconOnly ? 'size-8' : 'gap-1.5 px-2'}`}
+                    aria-label={iconOnly ? link.ariaLabel || link.icon || link.href : undefined}
+                  >
+                    <ConfiguredIcon icon={link.icon} />
+                    {link.label}
+                  </a>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </footer>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,72 @@
+import { ConfiguredIcon } from '@/components/ConfiguredIcon';
+import { Search } from '@/components/Search';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { TopNav } from '@/components/TopNav';
+import { DOCS_PREFIX } from '@/lib/paths';
+import type { NormalizedLink, SiteModel } from '@/lib/types';
+
+function NavbarLinkItem({ link, primary = false }: { link: NormalizedLink; primary?: boolean }) {
+  const iconOnly = !link.label;
+  const accessibleLabel = link.ariaLabel || link.icon || link.href;
+
+  return (
+    <a
+      href={link.href}
+      className={
+        primary
+          ? `ml-1 inline-flex items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground hover:opacity-90 ${iconOnly ? 'size-8' : 'gap-1.5 px-3.5 py-1.5'}`
+          : `inline-flex items-center rounded-md text-sm font-medium text-foreground hover:bg-accent hover:text-foreground ${iconOnly ? 'size-8 justify-center' : 'gap-1.5 px-2.5 py-1.5'}`
+      }
+      target={link.target}
+      rel={link.target === '_blank' ? 'noreferrer' : undefined}
+      aria-label={iconOnly ? accessibleLabel : undefined}
+    >
+      <ConfiguredIcon icon={link.icon} />
+      {link.label}
+    </a>
+  );
+}
+
+export function Header({ site }: { site: SiteModel }) {
+  const { logo, navbar, name, appearance, docs, labels, search } = site;
+  const brandHref = logo?.href || DOCS_PREFIX || '/';
+  const hasBrand = !!name || !!logo?.light || !!logo?.dark;
+
+  return (
+    <header className="sticky top-0 z-50 h-[var(--header-height)] shrink-0 border-border border-b bg-[color-mix(in_srgb,var(--background)_92%,transparent)] backdrop-blur-md">
+      <div className="mx-auto grid h-full max-w-[1600px] grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-5">
+        <div className="flex min-w-0 items-center gap-5 justify-self-start">
+          {hasBrand ? (
+            <a
+              href={brandHref}
+              target={logo?.target}
+              rel={logo?.target === '_blank' ? 'noreferrer' : undefined}
+              className="inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]"
+            >
+              {logo?.light ? (
+                <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" />
+              ) : null}
+              {logo?.dark ? (
+                <img
+                  src={logo.dark}
+                  alt=""
+                  className={`hidden h-6 w-auto dark:block ${logo.light === logo.dark ? 'dark:invert' : ''}`}
+                />
+              ) : null}
+              {name ? <span>{name}</span> : null}
+            </a>
+          ) : null}
+        </div>
+        {docs.showTabs ? <TopNav docs={docs} label={labels.sections} /> : null}
+        <div className="flex min-w-0 items-center gap-2 justify-self-end">
+          <Search config={search} labels={labels} />
+          {navbar?.links.map(link => (
+            <NavbarLinkItem key={link.href} link={link} />
+          ))}
+          {!appearance.strict && <ThemeToggle label={labels.toggleTheme} />}
+          {navbar?.primary ? <NavbarLinkItem link={navbar.primary} primary /> : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/Layout.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { Banner } from '@/components/Banner';
+import { Header } from '@/components/Header';
+import type { SiteModel } from '@/lib/types';
+
+export function Layout({ children, site }: { children: ReactNode; site: SiteModel }) {
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <Banner banner={site.banner} dismissLabel={site.labels.dismissBanner} />
+      <Header site={site} />
+      <div className="mx-auto flex min-h-0 w-full max-w-[1600px] grow flex-col px-5">
+        <main className="min-h-0 grow">{children}</main>
+      </div>
+    </div>
+  );
+}

package/src/components/PageLinks.tsx

@@ -0,0 +1,71 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import type { TocEntry } from '@/lib/types';
+
+export interface PageLinksProps {
+  items?: TocEntry[];
+  title: string;
+  navigationLabel: string;
+}
+
+export function PageLinks({ items = [], title, navigationLabel }: PageLinksProps) {
+  const [hash, setHash] = useState(items?.[0]?.id);
+
+  useEffect(() => {
+    setHash(items?.[0]?.id);
+
+    const callback = () => {
+      const found = [...items].reverse().find(({ id }) => {
+        const rect = document.getElementById(id)?.getBoundingClientRect();
+        return rect && rect.top <= 0;
+      });
+
+      if (found) {
+        setHash(found.id);
+      }
+    };
+
+    window.addEventListener('scroll', callback, false);
+
+    return () => {
+      window.removeEventListener('scroll', callback, false);
+    };
+  }, [items]);
+
+  if (!items?.length) {
+    return null;
+  }
+
+  const indent = (size: number) => {
+    if (size <= 2) {
+      return '0px';
+    }
+
+    return `${(size - 2) * 10}px`;
+  };
+
+  return (
+    <div className="flex h-max min-w-60 flex-col gap-3 text-sm">
+      <div className="font-bold text-foreground">{title}</div>
+      <nav className="flex flex-col" aria-label={navigationLabel}>
+        {items.map(({ name, id, size }) => {
+          const isActive = hash === id;
+
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={classNames('block border-l px-3 py-1.5', {
+                'border-l-primary font-medium text-primary': isActive,
+                'border-border text-muted-foreground hover:text-foreground': !isActive,
+              })}
+              aria-current={isActive ? 'location' : undefined}
+            >
+              <span style={{ marginLeft: indent(size), display: 'block' }}>{name}</span>
+            </a>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}

package/src/components/Search.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { Search as SearchIcon } from '@/components/icons';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import type { SearchResult } from '@/lib/search';
+import type { ResolvedSearchConfig } from '@/lib/search/config';
+import { resolveSearchProvider, type SearchProvider } from '@/lib/search/provider';
+import type { ThemeLabels } from '@/lib/types';
+
+/**
+ * Provider-neutral search dialog. The selected provider and its index or
+ * client are loaded on demand, so search stays out of the initial bundle.
+ */
+export function Search({ config, labels }: { config: ResolvedSearchConfig; labels: ThemeLabels }) {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle');
+  const provider = useRef<Promise<SearchProvider> | null>(null);
+  const requestId = useRef(0);
+
+  const loadProvider = useCallback(() => {
+    if (!provider.current) {
+      provider.current = resolveSearchProvider(config.provider, config.options)
+        .then(resolved => {
+          if (resolved.fellBack) {
+            console.warn(
+              `[shiso] Unknown search provider "${config.provider}" — using the built-in local provider.`,
+            );
+          }
+
+          return resolved.provider;
+        })
+        .catch(error => {
+          provider.current = null;
+          throw error;
+        });
+    }
+
+    return provider.current;
+  }, [config.options, config.provider]);
+
+  const runQuery = useCallback(
+    async (value: string) => {
+      const currentRequest = ++requestId.current;
+      setQuery(value);
+
+      if (!value.trim()) {
+        setResults([]);
+        setStatus('idle');
+        return;
+      }
+
+      setResults([]);
+      setStatus('loading');
+
+      try {
+        const activeProvider = await loadProvider();
+        const nextResults = await activeProvider.search(value);
+
+        if (currentRequest === requestId.current) {
+          setResults(nextResults);
+          setStatus('ready');
+        }
+      } catch (error) {
+        if (currentRequest === requestId.current) {
+          console.error('[shiso] Search provider failed:', error);
+          setResults([]);
+          setStatus('error');
+        }
+      }
+    },
+    [loadProvider],
+  );
+
+  const openDialog = useCallback(() => {
+    if (!config.enabled) {
+      return;
+    }
+
+    setOpen(true);
+    void loadProvider().catch(error => {
+      console.error('[shiso] Search provider failed to load:', error);
+    });
+  }, [config.enabled, loadProvider]);
+
+  const closeDialog = useCallback(() => {
+    requestId.current += 1;
+    setOpen(false);
+    setQuery('');
+    setResults([]);
+    setStatus('idle');
+  }, []);
+
+  // Global shortcut configured by docs.json.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        config.enabled &&
+        config.shortcut &&
+        (event.metaKey || event.ctrlKey) &&
+        event.key.toLowerCase() === config.shortcut
+      ) {
+        event.preventDefault();
+        openDialog();
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [config.enabled, config.shortcut, openDialog]);
+
+  const select = (result: SearchResult) => {
+    closeDialog();
+    navigate(result.url);
+  };
+
+  if (!config.enabled) {
+    return null;
+  }
+
+  const hasQuery = !!query.trim();
+
+  return (
+    <Dialog open={open} onOpenChange={nextOpen => (nextOpen ? openDialog() : closeDialog())}>
+      <DialogTrigger
+        render={
+          <Button
+            variant="outline"
+            className="h-auto gap-2 rounded-md bg-card px-2.5 py-1.5 text-muted-foreground hover:border-input hover:bg-card hover:text-foreground"
+          />
+        }
+      >
+        <SearchIcon className="size-3.5" />
+        <span className="min-w-24 text-left">{config.prompt}</span>
+        {config.shortcut ? (
+          <kbd className="rounded-sm border border-border bg-muted px-[0.3rem] py-[0.05rem] text-[0.7rem] font-sans">
+            {config.shortcutLabel}
+          </kbd>
+        ) : null}
+      </DialogTrigger>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="bg-black/40 supports-backdrop-filter:backdrop-blur-none"
+        className="top-[10vh] max-w-[calc(100%-2rem)] -translate-y-0 gap-0 overflow-hidden rounded-lg border border-border bg-background p-0 ring-0 shadow-[0_10px_40px_rgba(0,0,0,0.2)] sm:max-w-[34rem]"
+      >
+        <DialogTitle className="sr-only">{labels.searchTitle}</DialogTitle>
+        <Command shouldFilter={false} className="rounded-none bg-background p-0">
+          <CommandInput
+            autoFocus
+            className="text-base md:text-base"
+            placeholder={config.prompt}
+            value={query}
+            onValueChange={runQuery}
+            onKeyDownCapture={event => {
+              if (event.key === 'Home' || event.key === 'End') {
+                event.stopPropagation();
+              }
+            }}
+          />
+          <CommandList className="max-h-[50vh] border-border border-t">
+            {hasQuery ? (
+              <CommandEmpty>
+                {status === 'loading'
+                  ? labels.searching
+                  : status === 'error'
+                    ? labels.searchUnavailable
+                    : labels.noResults}
+              </CommandEmpty>
+            ) : null}
+            {hasQuery && results.length ? (
+              <CommandGroup className="p-2">
+                {results.map(result => (
+                  <CommandItem
+                    key={result.url}
+                    value={result.url}
+                    className="block whitespace-normal rounded-md px-3 py-2 text-left [&>svg:last-child]:hidden"
+                    onSelect={() => select(result)}
+                  >
+                    <div className="text-[0.9rem] font-semibold text-foreground">
+                      {result.page}
+                      {result.heading ? ` › ${result.heading}` : ''}
+                    </div>
+                    {result.snippet && (
+                      <div className="mt-[0.15rem] line-clamp-2 text-[0.8rem] text-muted-foreground">
+                        {result.snippet}
+                      </div>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ) : null}
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}