lildocs 0.1.21 → 0.1.23

package/dist/render/Layout.tsrx

@@ -1,380 +0,0 @@
-import type { Heading, Page } from "../core/content.js";
-import type { ResolvedLogo } from "../core/logo.js";
-import type { NavItem } from "../core/nav.js";
-import type { NavigationOptions } from "../core/theme.js";
-import { relativeUrl, rootRelativeUrl } from "./paths.js";
-import type { PageNavigation } from "./types.js";
-
-export type LayoutProps = {
-  page: Page;
-  nav: NavItem[];
-  pageNavigation?: PageNavigation;
-  css: string;
-  searchIndexJson: string;
-  logo: ResolvedLogo;
-  favicon?: string;
-  repositoryUrl?: string;
-  projectName?: string;
-  navigation?: NavigationOptions;
-  clientScriptPath: string;
-  clientStylePaths: string[];
-};
-
-export function Layout({
-  page,
-  nav,
-  pageNavigation,
-  searchIndexJson,
-  logo,
-  favicon,
-  repositoryUrl,
-  projectName,
-  navigation,
-  clientScriptPath,
-  clientStylePaths,
-}: LayoutProps) @{
-  const transition = navigation?.transition ?? "fade";
-  const issueUrl = issueUrlForRepository(repositoryUrl);
-  const repositoryLabel = repositoryLabelForUrl(repositoryUrl);
-
-  <>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>
-      {(projectName ? `${page.title} • ${projectName}` : page.title) as string}
-    </title>
-    @if (favicon) {
-      <link rel="icon" href={assetSrc(page.route, favicon)} />
-    }
-    <link
-      rel="stylesheet"
-      href={rootRelativeUrl(page.route, "assets/tabler-icons.css")}
-    />
-    <link
-      rel="stylesheet"
-      href={rootRelativeUrl(page.route, "assets/lildocs.css")}
-    />
-    @for (const stylePath of clientStylePaths; key stylePath) {
-      <link rel="stylesheet" href={assetSrc(page.route, stylePath)} />
-    }
-    <div class="pageShell">
-      <aside id="lildocs-sidebar" class="sidebar">
-        <div class="sidebarContents">
-          <div class="sidebarHeader">
-            <a class="brand" href={relativeUrl(page.route, "index.html")}>
-              @if (logo.image) {
-                <img
-                  class="brandLogo"
-                  src={assetSrc(page.route, logo.image)}
-                  alt=""
-                />
-              }
-              @if (logo.text) {
-                <span>
-                  {logo.text as string}
-                </span>
-              }
-            </a>
-            <button
-              id="lildocs-sidebar-toggle"
-              class="sidebarToggle"
-              type="button"
-              aria-label="Collapse sidebar"
-              aria-controls="lildocs-sidebar"
-              aria-expanded="false"
-            >
-              <span
-                class="sidebarCollapseIcon ti ti-layout-sidebar-left-collapse"
-                aria-hidden="true"
-              />
-              <span class="sidebarMenuIcon ti ti-menu-2" aria-hidden="true" />
-            </button>
-          </div>
-          <div id="lildocs-search-root" class="searchBox">
-            <span class="searchIcon ti ti-search" aria-hidden="true" />
-            <input
-              id="lildocs-search-input"
-              type="search"
-              placeholder="Search docs"
-              aria-label="Search docs"
-            />
-          </div>
-          <nav
-            id="lildocs-sidebar-navigation"
-            aria-label="Documentation navigation"
-          >
-            <NavList
-              items={nav}
-              currentRoute={page.route}
-              pageRoute={page.route}
-            />
-          </nav>
-          @if (repositoryUrl && repositoryLabel) {
-            <a
-              class="sidebarRepoLink"
-              href={repositoryUrl}
-              aria-label="View repository on GitHub"
-            >
-              <span class="repoIcon" aria-hidden="true" />
-              <span>
-                {repositoryLabel as string}
-              </span>
-            </a>
-          }
-        </div>
-      </aside>
-      <div class="sidebarFloatingControls">
-        <button
-          id="lildocs-sidebar-expand"
-          class="sidebarToggle"
-          type="button"
-          aria-label="Expand sidebar"
-          aria-controls="lildocs-sidebar"
-        >
-          <span class="ti ti-layout-sidebar-left-expand" aria-hidden="true" />
-        </button>
-        <button
-          id="lildocs-floating-search"
-          class="sidebarToggle"
-          type="button"
-          aria-label="Search docs"
-        >
-          <span class="ti ti-search" aria-hidden="true" />
-        </button>
-      </div>
-      <div id="swup" class="contentGrid">
-        <main class={`content transition-${transition}`}>
-          <article>
-            <GroupBreadcrumbs route={page.route} />
-            <div dangerouslySetInnerHTML={{ __html: page.html ?? "" }} />
-          </article>
-          <PageNav pageNavigation={pageNavigation} />
-        </main>
-        <aside class={`toc transition-${transition}`}>
-          <Toc
-            headings={page.headings}
-            repositoryUrl={repositoryUrl}
-            repositoryLabel={repositoryLabel}
-          />
-        </aside>
-      </div>
-    </div>
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `window.lildocsSearchUrl = ${JSON.stringify(
-          rootRelativeUrl(page.route, "search-index.json"),
-        )};${
-          issueUrl
-            ? `window.lildocsIssueUrl = ${JSON.stringify(issueUrl)};`
-            : ""
-        }`,
-      }}
-    />
-    <script
-      type="application/json"
-      id="lildocs-search-index"
-      dangerouslySetInnerHTML={{ __html: searchIndexJson }}
-    />
-    <div id="lildocs-overlay-root" />
-    <script type="module" src={assetSrc(page.route, clientScriptPath)} />
-  </>
-}
-
-function issueUrlForRepository(repositoryUrl: string | undefined) {
-  if (!repositoryUrl) {
-    return undefined;
-  }
-
-  let url: URL;
-  try {
-    url = new URL(repositoryUrl);
-  } catch {
-    return undefined;
-  }
-
-  if (url.hostname !== "github.com") {
-    return undefined;
-  }
-
-  const [owner, repo] = url.pathname.split("/").filter(Boolean);
-  if (!owner || !repo) {
-    return undefined;
-  }
-
-  return `https://github.com/${owner}/${repo}/issues/new`;
-}
-
-function repositoryLabelForUrl(repositoryUrl: string | undefined) {
-  if (!repositoryUrl) {
-    return undefined;
-  }
-
-  try {
-    const url = new URL(repositoryUrl);
-    if (url.hostname !== "github.com") {
-      return undefined;
-    }
-
-    const [owner, repo] = url.pathname.split("/").filter(Boolean);
-    return owner && repo ? `${owner}/${repo}` : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-function assetSrc(pageRoute: string, image: string) {
-  if (
-    /^(?:[a-z]+:)?\/\//i.test(image) || image.startsWith("data:") ||
-      image.startsWith("/")
-  ) {
-    return image;
-  }
-
-  return rootRelativeUrl(pageRoute, image);
-}
-
-function GroupBreadcrumbs({ route }: { route: string }) @{
-  const dir = route.split("/").slice(0, -1);
-  if (dir.length === 0) {
-    return null;
-  }
-
-  <p class="groupBreadcrumbs">
-    {dir.map(titleFromDir).join(" / ") as string}
-  </p>
-}
-
-function titleFromDir(dir: string) {
-  return dir.replace(/[-_]+/g, " ").replace(
-    /\S+/g,
-    (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`,
-  );
-}
-
-function PageNav({ pageNavigation }: { pageNavigation?: PageNavigation }) @{
-  if (!pageNavigation?.next) {
-    return null;
-  }
-
-  <nav class="pageNav" aria-label="Page navigation">
-    <p>
-      {"Next: "}
-      <a rel="next" href={pageNavigation.next.href}>
-        {pageNavigation.next.title as string}
-      </a>
-    </p>
-  </nav>
-}
-
-function NavList({
-  items,
-  currentRoute,
-  pageRoute,
-}: {
-  items: NavItem[];
-  currentRoute: string;
-  pageRoute: string;
-}) @{
-  <ul class="navList">
-    @for (const item of items; key item.route) {
-      const isReferenceGroup = item.route === "reference/index.html";
-      <li class={item.children.length > 0 ? "navGroup" : undefined}>
-        @if (isReferenceGroup) {
-          <span class="navFolder">
-            {item.title as string}
-          </span>
-        } @else if (item.children.length > 0 && item.hasPage) {
-          <details
-            class="navDisclosure"
-            open={isActiveBranch(item, currentRoute)}
-          >
-            <summary class={item.route === currentRoute ? "active" : undefined}>
-              {item.title as string}
-            </summary>
-            <NavList
-              items={item.children}
-              currentRoute={currentRoute}
-              pageRoute={pageRoute}
-            />
-          </details>
-        } @else if (item.children.length > 0) {
-          <span class="navFolder">
-            {item.title as string}
-          </span>
-        } @else {
-          <a
-            class={item.route === currentRoute ? "active" : undefined}
-            href={relativeUrl(pageRoute, item.route)}
-          >
-            {item.title as string}
-          </a>
-        }
-        @if (item.children.length > 0 && !item.hasPage && !isReferenceGroup) {
-          <NavList
-            items={item.children}
-            currentRoute={currentRoute}
-            pageRoute={pageRoute}
-          />
-        }
-      </li>
-    }
-  </ul>
-}
-
-function isActiveBranch(item: NavItem, currentRoute: string): boolean {
-  return item.route === currentRoute ||
-    item.children.some((child) => isActiveBranch(child, currentRoute));
-}
-
-function Toc({
-  headings,
-  repositoryUrl,
-  repositoryLabel,
-}: {
-  headings: Heading[];
-  repositoryUrl?: string;
-  repositoryLabel?: string;
-}) @{
-  const tocHeadings = headings.filter(
-    (heading) => heading.depth > 1 && heading.depth < 4,
-  );
-  if (tocHeadings.length === 0 && !repositoryLabel) {
-    return null;
-  }
-
-  <nav aria-label="Table of contents">
-    @if (tocHeadings.length > 0) {
-      <>
-        <p class="tocTitle">
-          <span class="ti ti-align-left" aria-hidden="true" />
-          On this page
-        </p>
-        <div class="tocLinks" data-toc-links>
-          <span class="tocRail" aria-hidden="true" />
-          <span class="tocVisibility" data-toc-visibility aria-hidden="true" />
-          <ul>
-            @for (const heading of tocHeadings; key heading.id) {
-              <li class={`tocDepth${heading.depth}`}>
-                <a href={`#${heading.id}`}>
-                  {heading.text as string}
-                </a>
-              </li>
-            }
-          </ul>
-        </div>
-      </>
-    }
-    @if (repositoryUrl && repositoryLabel) {
-      <a
-        class="tocRepoLink"
-        href={repositoryUrl}
-        aria-label="View repository on GitHub"
-      >
-        <span class="repoIcon" aria-hidden="true" />
-        <span>
-          {repositoryLabel as string}
-        </span>
-      </a>
-    }
-  </nav>
-}