@umami/shiso 0.61.0 → 1.0.0

package/src/components/Docs.tsx

@@ -3,12 +3,14 @@ import { useLocation, useNavigate } from 'react-router';
 import { DocContent } from '@/components/DocContent';
 import { Footer } from '@/components/Footer';
 import { Menu } from '@/components/icons';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
 import { PageLinks } from '@/components/PageLinks';
 import { SideNav } from '@/components/SideNav';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { VersionSwitcher } from '@/components/VersionSwitcher';
 import { renderInlineMarkdown } from '@/lib/inline-markdown';
-import { DOCS_PREFIX } from '@/lib/paths';
+import { docsHomeUrl, getScopeByPathname } from '@/lib/site-config';
 import type { DocModule, NormalizedDocsPage, SiteModel } from '@/lib/types';
 
 /**
@@ -23,7 +25,7 @@ function NotFound({ site }: { site: SiteModel }) {
 
   useEffect(() => {
     if (redirect) {
-      navigate(DOCS_PREFIX || '/', { replace: true });
+      navigate(docsHomeUrl, { replace: true });
     }
   }, [redirect, navigate]);
 
@@ -44,7 +46,9 @@ export interface DocsProps {
 export function Docs({ page, doc, site }: DocsProps) {
   const { pathname } = useLocation();
   const [menuOpen, setMenuOpen] = useState(false);
-  const { tabs, navigation } = site.docs;
+  // Navigation follows the scope (version/language) that owns the current page.
+  const scopeDocs = getScopeByPathname(pathname).docs;
+  const { tabs, navigation } = scopeDocs;
 
   // Close the mobile menu and start each newly loaded page at the top. Hash
   // links keep their native section-scrolling behavior.
@@ -82,10 +86,14 @@ export function Docs({ page, doc, site }: DocsProps) {
         >
           <SheetTitle className="sr-only">{site.labels.documentationNavigation}</SheetTitle>
           <div className="pt-8">
+            <div className="flex items-center gap-2 pb-4 lg:hidden">
+              <VersionSwitcher />
+              <LanguageSwitcher />
+            </div>
             <SideNav
               tabs={tabs}
               navigation={navigation}
-              anchors={site.docs.anchors}
+              anchors={scopeDocs.anchors}
               drilldown={site.drilldown}
               navigationLabel={site.labels.documentationNavigation}
               expandLabel={site.labels.expand}
@@ -99,7 +107,7 @@ export function Docs({ page, doc, site }: DocsProps) {
           <SideNav
             tabs={tabs}
             navigation={navigation}
-            anchors={site.docs.anchors}
+            anchors={scopeDocs.anchors}
             isSticky
             drilldown={site.drilldown}
             navigationLabel={site.labels.documentationNavigation}

package/src/components/Footer.tsx

@@ -44,15 +44,12 @@ export function Footer({
       {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>
+            <a
+              href="https://shiso.umami.is?ref=docs-footer"
+              className="text-sm hover:text-foreground"
+            >
+              Powered by <span className="font-bold">shiso</span>
+            </a>
           ) : (
             <span />
           )}

package/src/components/Header.tsx

@@ -1,8 +1,11 @@
+import { useLocation } from 'react-router';
 import { ConfiguredIcon } from '@/components/ConfiguredIcon';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
 import { Search } from '@/components/Search';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import { TopNav } from '@/components/TopNav';
-import { DOCS_PREFIX } from '@/lib/paths';
+import { VersionSwitcher } from '@/components/VersionSwitcher';
+import { docsHomeUrl, getScopeByPathname } from '@/lib/site-config';
 import type { NormalizedLink, SiteModel } from '@/lib/types';
 
 function NavbarLinkItem({ link, primary = false }: { link: NormalizedLink; primary?: boolean }) {
@@ -28,8 +31,11 @@ function NavbarLinkItem({ link, primary = false }: { link: NormalizedLink; prima
 }
 
 export function Header({ site }: { site: SiteModel }) {
-  const { logo, navbar, name, appearance, docs, labels, search } = site;
-  const brandHref = logo?.href || DOCS_PREFIX || '/';
+  const { logo, navbar, name, appearance, labels, search } = site;
+  const { pathname } = useLocation();
+  // The header renders the navigation of whichever scope owns the current page.
+  const docs = getScopeByPathname(pathname).docs;
+  const brandHref = logo?.href || docsHomeUrl;
   const hasBrand = !!name || !!logo?.light || !!logo?.dark;
 
   return (
@@ -56,6 +62,10 @@ export function Header({ site }: { site: SiteModel }) {
               {name ? <span>{name}</span> : null}
             </a>
           ) : null}
+          <div className="hidden items-center gap-2 lg:flex">
+            <VersionSwitcher />
+            <LanguageSwitcher />
+          </div>
         </div>
         {docs.showTabs ? <TopNav docs={docs} label={labels.sections} /> : null}
         <div className="flex min-w-0 items-center gap-2 justify-self-end">

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,59 @@
+import { useLocation, useNavigate } from 'react-router';
+import { Check, ChevronRight } from '@/components/icons';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { getLanguageScopes } from '@/lib/docs-config';
+import { docsSite, getScopeByPathname } from '@/lib/site-config';
+
+/**
+ * Language selector for multi-language sites. Each option is a language's
+ * landing scope — its default version — so switching languages always lands
+ * on that language's default-version first page. Hidden languages never
+ * appear as options.
+ */
+export function LanguageSwitcher() {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const current = getScopeByPathname(pathname);
+  const options = getLanguageScopes(docsSite);
+
+  if (!current.language || (options.length < 2 && !current.hidden)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="outline"
+            className="h-auto gap-1.5 rounded-md bg-card px-2.5 py-1.5 text-sm font-medium text-foreground"
+          />
+        }
+      >
+        {current.language}
+        <ChevronRight className="size-3.5 rotate-90 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-32">
+        {options.map(scope => (
+          <DropdownMenuItem
+            key={scope.id}
+            onClick={() => {
+              if (scope.language !== current.language) {
+                navigate(scope.firstPageUrl);
+              }
+            }}
+          >
+            <span className="grow">{scope.language}</span>
+            {scope.language === current.language ? <Check className="size-3.5" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/Layout.tsx

@@ -1,9 +1,17 @@
 import type { ReactNode } from 'react';
+import { useLocation } from 'react-router';
 import { Banner } from '@/components/Banner';
 import { Header } from '@/components/Header';
+import { useHead } from '@/lib/head';
 import type { SiteModel } from '@/lib/types';
 
 export function Layout({ children, site }: { children: ReactNode; site: SiteModel }) {
+  const { pathname } = useLocation();
+
+  // Keep metadata, document language, and text direction synchronized after
+  // client-side navigation. The prerendered values are retained on hydration.
+  useHead(pathname);
+
   return (
     <div className="flex min-h-dvh flex-col">
       <Banner banner={site.banner} dismissLabel={site.labels.dismissBanner} />

package/src/components/Search.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 import { Search as SearchIcon } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import {
@@ -14,6 +14,7 @@ import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/
 import type { SearchResult } from '@/lib/search';
 import type { ResolvedSearchConfig } from '@/lib/search/config';
 import { resolveSearchProvider, type SearchProvider } from '@/lib/search/provider';
+import { getScopeByPathname } from '@/lib/site-config';
 import type { ThemeLabels } from '@/lib/types';
 
 /**
@@ -22,6 +23,7 @@ import type { ThemeLabels } from '@/lib/types';
  */
 export function Search({ config, labels }: { config: ResolvedSearchConfig; labels: ThemeLabels }) {
   const navigate = useNavigate();
+  const { pathname } = useLocation();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
@@ -66,7 +68,14 @@ export function Search({ config, labels }: { config: ResolvedSearchConfig; label
 
       try {
         const activeProvider = await loadProvider();
-        const nextResults = await activeProvider.search(value);
+        // Search stays inside the version/language scope being browsed.
+        // Providers that predate the context argument simply ignore it.
+        const scope = getScopeByPathname(pathname);
+        const nextResults = await activeProvider.search(value, undefined, {
+          scopeId: scope.id,
+          language: scope.language,
+          version: scope.version,
+        });
 
         if (currentRequest === requestId.current) {
           setResults(nextResults);
@@ -80,7 +89,7 @@ export function Search({ config, labels }: { config: ResolvedSearchConfig; label
         }
       }
     },
-    [loadProvider],
+    [loadProvider, pathname],
   );
 
   const openDialog = useCallback(() => {

package/src/components/VersionSwitcher.tsx

@@ -0,0 +1,60 @@
+import { useLocation, useNavigate } from 'react-router';
+import { Check, ChevronRight } from '@/components/icons';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { docsSite, getScopeByPathname } from '@/lib/site-config';
+
+/**
+ * Version selector for multi-version sites. Options come from the visible
+ * version scopes of the active language; selecting one navigates to that
+ * scope's first visible page. Hidden versions never appear as options, but a
+ * hidden version still shows as the current value while it is being viewed.
+ */
+export function VersionSwitcher() {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const current = getScopeByPathname(pathname);
+  const options = docsSite.scopes.filter(
+    scope => scope.version && !scope.hidden && scope.language === current.language,
+  );
+
+  if (!current.version || (options.length < 2 && !current.hidden)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="outline"
+            className="h-auto gap-1.5 rounded-md bg-card px-2.5 py-1.5 text-sm font-medium text-foreground"
+          />
+        }
+      >
+        {current.version}
+        <ChevronRight className="size-3.5 rotate-90 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-32">
+        {options.map(scope => (
+          <DropdownMenuItem
+            key={scope.id}
+            onClick={() => {
+              if (scope.id !== current.id) {
+                navigate(scope.firstPageUrl);
+              }
+            }}
+          >
+            <span className="grow">{scope.version}</span>
+            {scope.id === current.id ? <Check className="size-3.5" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/docs/PropertiesTable.tsx

@@ -23,17 +23,17 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
   }
 
   return (
-    <div className="my-4 overflow-x-auto rounded-lg border border-border p-6">
+    <div className="my-4 overflow-x-auto rounded-lg border border-border px-6 py-2">
       <table className="m-0 min-w-[40rem] table-fixed border-collapse">
         <thead>
           <tr>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 pr-6 text-left text-sm font-semibold text-foreground">
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
               Name
             </th>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 pr-6 text-left text-sm font-semibold text-foreground">
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
               Type
             </th>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 text-left text-sm font-semibold text-foreground">
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground">
               Description
             </th>
           </tr>
@@ -47,7 +47,7 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
             return (
               <tr key={row.key ?? name}>
                 <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 pr-6 align-top text-sm text-foreground`}
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
                 >
                   <span className="inline-flex flex-wrap items-center gap-2">
                     {name}
@@ -60,12 +60,12 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
                   </span>
                 </td>
                 <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 pr-6 align-top text-sm text-foreground`}
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
                 >
                   {displayValue(type)}
                 </td>
                 <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 align-top text-sm leading-6 text-foreground [&_p]:m-0`}
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 align-top text-sm leading-6 text-foreground [&_p]:m-0`}
                 >
                   {description}
                   {defaultValue ? (

package/src/entry-server.tsx

@@ -2,13 +2,23 @@ import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router';
 import { App } from '@/App';
 import { getDocModule, getLastModified } from '@/lib/content';
+import { getScopeForPage } from '@/lib/docs-config';
 import { buildHead, renderHeadToString } from '@/lib/head';
 import { BASE_URL, toAbsoluteUrl } from '@/lib/paths';
-import { docsConfig, getRedirects, getSeo, siteName } from '@/lib/site-config';
+import {
+  docsHomeUrl,
+  docsSite,
+  getLocaleByPathname,
+  getRedirects,
+  getSeo,
+  siteName,
+} from '@/lib/site-config';
 
 export interface RenderResult {
   html: string;
   head: string;
+  /** Attributes for the document element: language and text direction. */
+  htmlAttrs: { lang: string; dir: 'ltr' | 'rtl' };
 }
 
 export interface SitemapEntry {
@@ -16,9 +26,9 @@ export interface SitemapEntry {
   lastmod?: string;
 }
 
-/** Base-relative routes. The prerenderer prepends the deploy base itself. */
+/** Base-relative routes for every scope. The prerenderer prepends the deploy base itself. */
 export function getRoutes(): string[] {
-  return docsConfig.pages.map(page => page.url);
+  return docsSite.pages.map(page => page.url);
 }
 
 /** Redirect rules with exact-match sources, for static redirect pages. */
@@ -31,7 +41,7 @@ export { getRedirects };
  * "/content/docs/index.mdx", resolved against the project root.
  */
 export function getMarkdownPages(): { route: string; filePath: string }[] {
-  return docsConfig.pages.map(page => ({ route: page.url, filePath: page.filePath }));
+  return docsSite.pages.map(page => ({ route: page.url, filePath: page.filePath }));
 }
 
 /**
@@ -43,8 +53,10 @@ export function getSitemapEntries(): SitemapEntry[] {
   const { indexing } = getSeo();
   const entries: SitemapEntry[] = [];
 
-  for (const page of docsConfig.pages) {
-    if (page.hidden && indexing !== 'all') {
+  for (const page of docsSite.pages) {
+    // Hidden pages and pages of hidden scopes (versions/languages) stay out
+    // of the sitemap unless `seo.indexing: "all"` opts them in.
+    if ((page.hidden || getScopeForPage(docsSite, page).hidden) && indexing !== 'all') {
       continue;
     }
 
@@ -71,7 +83,7 @@ export function render(url: string): RenderResult {
     </StaticRouter>,
   );
 
-  return { html, head: renderHeadToString(buildHead(url)) };
+  return { html, head: renderHeadToString(buildHead(url)), htmlAttrs: getLocaleByPathname(url) };
 }
 
-export { siteName };
+export { docsHomeUrl, siteName };