@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/search/markdown-renderer.ts

@@ -5,6 +5,8 @@ import { Subscriber } from "@supersoniks/concorde/mixins";
 import { Marked } from "marked-ts";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 import { parseMarkdownWithSonicCode } from "./sonic-code-markdown";
+import { DOCS_PAGE_RENDERED } from "../navigation/toc";
+import { parseDocsLocation } from "../docs-location";
 declare const window: { marked: Marked };
 const tagName = "docs-markdown-renderer"; // For Astro.build
 const marked = window.marked;
@@ -14,7 +16,24 @@ export class DocsMakdownRenderer extends Subscriber(LitElement) {
     marked.use(gfmHeadingId());
     this.noShadowDom = "";
     super.connectedCallback();
+    this.addEventListener("click", this.onDocLinkClick);
   }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.onDocLinkClick);
+    super.disconnectedCallback();
+  }
+
+  /** Markdown `[…](/docs/…)` links use plain `<a>` — pushState so the SPA does not full-reload. */
+  private onDocLinkClick = (e: Event) => {
+    const a = (e.target as Element | null)?.closest?.("a");
+    if (!a || a.target === "_blank" || a.hasAttribute("download")) return;
+    const href = a.getAttribute("href");
+    if (!href || href.startsWith("http") || href.startsWith("mailto:")) return;
+    if (!(href.startsWith("/docs/") || href.startsWith("/core/"))) return;
+    e.preventDefault();
+    history.pushState(null, "", href);
+  };
   @property() anchor = "";
   private _text = "";
   set text(value: string) {
@@ -25,9 +44,12 @@ export class DocsMakdownRenderer extends Subscriber(LitElement) {
     this.requestUpdate();
     setTimeout(() => {
       this.appendImport();
-      const anchor = this.querySelector("#" + this.anchor) as HTMLElement;
+      window.dispatchEvent(new CustomEvent(DOCS_PAGE_RENDERED));
+      const anchor = this.anchor
+        ? (this.querySelector("#" + CSS.escape(this.anchor)) as HTMLElement)
+        : null;
       if (anchor) {
-        document.documentElement.scrollTop = anchor.offsetTop - 95;
+        anchor.scrollIntoView({ block: "start" });
       } else if (!(this.anchor && this.anchor.indexOf("#") != -1)) {
         document.documentElement.scrollTop = 0;
       }
@@ -40,13 +62,17 @@ export class DocsMakdownRenderer extends Subscriber(LitElement) {
   appendImport() {
     if (this.querySelector("h1 + sonic-code")) return;
 
-    const locationHash = document.location.hash;
-    const isComponent = locationHash.includes("components");
+    const { url } = parseDocsLocation(
+      document.location.pathname + document.location.search + document.location.hash,
+    );
+    // Only real component pages (core/components/…), not any URL mentioning "components"
+    const isComponent = url.startsWith("core/components/");
 
     if (isComponent) {
-      const split = locationHash.split("/");
-      const componentName = split.filter((name) => name.endsWith(".md")).pop();
-      const extractComponentName = componentName?.replace(".md", "");
+      const extractComponentName = url
+        .split("/")
+        .pop()
+        ?.replace(/\.mdx?$/, "");
 
       const markup = `<sonic-code language="javascript" class="mb-8"
       ><template> import '@supersoniks/concorde/${extractComponentName}'; </template>

package/src/docs/search/page.ts

@@ -8,12 +8,15 @@ const tagName = "docs-page"; // For Astro.build
 @customElement(tagName)
 export class DocsPage extends Subscriber(LitElement) {
   connectedCallback() {
-    this.setAttribute(
-      "serviceURL",
-      document.location.pathname.replace(/\/index.html$/, "")
-    );
-    this.markDownsURL = this.getAncestorAttributeValue("markDownsURL");
-    if (this.markDownsURL.lastIndexOf("/") != this.markDownsURL.length - 1) {
+    // Markdown is at the public pathname + `.md` (e.g. `/docs/…/start.md`).
+    // Fetch from site root via API serviceURL = origin; never relative to the
+    // current pushState path.
+    this.setAttribute("serviceURL", "");
+    this.markDownsURL = this.getAncestorAttributeValue("markDownsURL") || "";
+    if (
+      this.markDownsURL &&
+      this.markDownsURL.lastIndexOf("/") != this.markDownsURL.length - 1
+    ) {
       this.markDownsURL += "/";
     }
     super.connectedCallback();

package/src/docs/search/search.ts

@@ -1,95 +1,151 @@
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, state, property } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import { tailwind } from "../tailwind";
 import search from "./docs-search.json";
 import "@supersoniks/concorde/core/components/ui/divider/divider";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-import "@supersoniks/concorde/core/components/ui/menu/menu";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
 import { Pop } from "@supersoniks/concorde/core/components/ui/pop/pop";
+import { docsPagePath } from "../docs-location";
+
+type SearchItem = { href: string; part: string; search: string; index: number };
+type SearchGroup = { title: string; href: string | null; items: SearchItem[] };
+
+/** Max sections listed under each page, and characters shown around a match. */
+const MAX_ITEMS_PER_PAGE = 3;
+const SNIPPET_RADIUS = 60;
 
 const tagName = "docs-search"; // For Astro.build
 const win: any = window;
 const fuzzysort = win.fuzzysort;
 @customElement(tagName)
 export class DocsSearch extends LitElement {
-  static styles = [tailwind, customScroll];
+  static styles = [
+    tailwind,
+    customScroll,
+    css`
+      .snippet mark {
+        background: none;
+        color: var(--sc-info);
+        font-weight: 600;
+      }
+    `,
+  ];
   @state({ type: Boolean }) hidePopMenu = false;
+  @state() results: SearchGroup[] = [];
+  @state() query = "";
   @property({ type: Boolean }) setFocus = false;
   search(val) {
-    // if (!val || val.length < 3) {
-    //   this.hidePopMenu = true;
-    //   return null;
-    // } else this.hidePopMenu = false;
-    PublisherManager.get("searchSelection").selection = null;
-    const searchResult = fuzzysort.go(val, search, { key: "search" });
-    const resultForList: Array<any> = [];
-    const titlesToContent: Map<string, any> = new Map();
+    this.query = (val ?? "").toString();
+    if (!this.query.trim()) {
+      this.results = [];
+      (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
+      return;
+    }
+    const searchResult = fuzzysort.go(this.query, search, {
+      key: "search",
+      limit: 60,
+    });
+    const groups: Map<string, SearchGroup> = new Map();
+    const found = new Set<string>();
 
-    const found: Array<string> = [];
     for (const result of searchResult) {
       if (result.score < -100000) continue;
-
       const obj = result.obj;
-
       for (const file in obj.files) {
         for (const part in obj.files[file].hashes) {
+          if (found.has(file + ":" + part)) continue;
+          found.add(file + ":" + part);
           const hash = obj.files[file].hashes[part];
-          if (found.includes(file + ":" + part)) continue;
-          found.push(file + ":" + part);
           const title = obj.files[file].title;
-          const subItem = {
-            href: "#" + file + "/" + part,
-            part: hash.title || "...",
-            search:
-              hash.type == "page" ? "Page" : this.getResultSearchString(result),
-            index: search.indexOf(obj),
-            template: hash.type == "page" ? "page" : null,
-          };
-          if (!titlesToContent.has(title)) {
-            const item: any = {
-              title: title,
-              items: [subItem],
-            };
-            titlesToContent.set(title, item);
-            resultForList.push(item);
-          } else {
-            const item = titlesToContent.get(title);
-            item.items.push(subItem);
+          // file is e.g. docs/getting-started/start.md — public pathname routes
+          const publicPath = docsPagePath(file);
+          const baseName = publicPath.split("/").pop() || "";
+          const href =
+            hash.type === "page" || part === baseName
+              ? publicPath
+              : `${publicPath}#${part}`;
+          let group = groups.get(title);
+          if (!group) {
+            group = { title, href: null, items: [] };
+            groups.set(title, group);
+          }
+          if (hash.type == "page") {
+            group.href = href;
+            continue;
           }
+          group.items.push({
+            href,
+            part: hash.title || title,
+            search: this.getResultSearchString(result),
+            index: search.indexOf(obj),
+          });
         }
       }
     }
-    (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
-    // this.hidePopMenu = resultForList.length == 0;
-    for (const item of resultForList) {
-      item.items.sort((a, b) => a.index - b.index);
+    for (const group of groups.values()) {
+      group.items.sort((a, b) => a.index - b.index);
+      group.items = group.items.slice(0, MAX_ITEMS_PER_PAGE);
+      group.href ??= group.items[0]?.href ?? null;
     }
-    PublisherManager.get("searchResult").set(resultForList);
+    this.results = [...groups.values()];
+    (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
   }
+
+  /**
+   * Close the header search overlay after choosing a result.
+   * Capture phase: menu-item pushState calls stopPropagation on bubble.
+   * pushState itself does not fire popstate, so the header cannot rely on that.
+   */
+  private closeAfterNavigate = (e: Event) => {
+    const item = e.composedPath().find((n): n is HTMLElement => {
+      if (!(n instanceof HTMLElement) || n.tagName !== "SONIC-MENU-ITEM") {
+        return false;
+      }
+      const href = (n as HTMLElement & { href?: string }).href;
+      return Boolean(href || n.getAttribute("href"));
+    });
+    if (!item) return;
+    (this.shadowRoot?.querySelector("sonic-pop") as Pop | null)?.hide();
+    this.dispatchEvent(
+      new CustomEvent("docs-search-close", { bubbles: true, composed: true }),
+    );
+  };
+  /** Text around the first match, matched characters highlighted. */
   getResultSearchString(result: any) {
-    const p = result.p;
-    const str = result.target
-      .split("")
-      .map((value, index) =>
-        p.includes(index)
-          ? "<span class='font-bold' style='color:var(--sc-info)'>" +
-            value +
-            "</span>"
-          : value,
-      )
-      .join("");
-    return str;
+    const p: number[] = Array.from(
+      fuzzysort.indexes?.(result) ?? result.indexes ?? result.p ?? [],
+    );
+    const target: string = result.target.replace(/\s/g, " ");
+    const first = p.length ? Math.min(...p) : 0;
+    const from = Math.max(0, first - SNIPPET_RADIUS);
+    const to = Math.min(target.length, first + SNIPPET_RADIUS * 2);
+    // The index already holds HTML entities: only escape raw tags.
+    const escape = (c: string) => (c === "<" ? "&lt;" : c === ">" ? "&gt;" : c);
+    let str = "";
+    for (let i = from; i < to; i++) {
+      const c = escape(target[i]);
+      str += p.includes(i) ? `<mark>${c}</mark>` : c;
+    }
+    return (from > 0 ? "…" : "") + str + (to < target.length ? "…" : "");
   }
   connectedCallback() {
     PublisherManager.get("docsSearch").search.onAssign((v) => this.search(v));
+    this.addEventListener("click", this.closeAfterNavigate, true);
     super.connectedCallback();
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this.closeAfterNavigate, true);
+    super.disconnectedCallback();
+  }
+
   firstUpdated() {
     if (this.setFocus) {
       setTimeout(() => {
@@ -125,81 +181,57 @@ export class DocsSearch extends LitElement {
         ${this.hidePopMenu
           ? nothing
           : html`
-              <sonic-menu
+              <div
                 slot="content"
-                class="max-w-[30rem] lg:max-w-[35rem] max-h-[50svh] overflow-auto  custom-scroll !left-0 !top-0 !relative"
+                class="w-[30rem] lg:w-[35rem] max-w-[calc(100vw-2rem)] max-h-[60svh] overflow-auto custom-scroll py-2"
               >
-                <sonic-list displayContents dataProvider="searchResult">
-                  <template>
-                    <div class="my-4">
-                      <div class="ml-3 mr-3 mb-1">
-                        <sonic-value
-                          key="title"
-                          class="font-bold text-lg "
-                        ></sonic-value>
-                      </div>
-                      <sonic-list subDataProvider="items">
-                        <template data-value="page">
-                          <sonic-menu-item
-                            formDataProvider="searchSelection"
-                            data-keyboard-nav="search-results doc-search"
-                            class="mt-1"
-                          >
-                            <sonic-icon
-                              slot="prefix"
-                              size="lg"
-                              library="heroicons"
-                              name="book-open"
-                            ></sonic-icon>
-                            <div>
-                              <sonic-value
-                                key="search"
-                                class="block font-medium "
-                              ></sonic-value>
-                            </div>
-                            <sonic-icon
-                              slot="suffix"
-                              size="lg"
-                              library="heroicons"
-                              name="chevron-right"
-                              class="opacity-40"
-                            ></sonic-icon>
-                          </sonic-menu-item>
-                        </template>
-                        <template>
-                          <sonic-menu-item
-                            formDataProvider="searchSelection"
-                            data-keyboard-nav="search-results doc-search"
-                            class="mt-1"
-                          >
-                            <div>
-                              <sonic-badge size="xs" ellipsis class="mb-1">
-                                <sonic-value
-                                  key="part"
-                                  class="block "
-                                ></sonic-value>
-                              </sonic-badge>
-                              <sonic-value
-                                key="search"
-                                class="block text-sm  font-normal pl-[.75rem]"
-                              ></sonic-value>
-                            </div>
-                            <sonic-icon
-                              slot="suffix"
-                              size="lg"
-                              library="heroicons"
-                              name="chevron-right"
-                              class="opacity-40"
-                            ></sonic-icon>
-                          </sonic-menu-item>
-                        </template>
-                      </sonic-list>
-                    </div>
-                  </template>
-                </sonic-list>
-              </sonic-menu>
+                ${this.results.length
+                  ? this.results.map((group) => this.renderGroup(group))
+                  : this.query.trim()
+                    ? html`<p class="px-3 py-2 text-sm text-neutral-500">
+                        No results
+                      </p>`
+                    : html`<p class="px-3 py-2 text-sm text-neutral-500">
+                        Type to search the documentation.
+                      </p>`}
+              </div>
             `}
       </sonic-pop>
     `;
   }
+
+  renderGroup(group: SearchGroup) {
+    return html`
+      <section class="py-1">
+        <sonic-menu-item
+          pushState
+          href=${group.href ?? nothing}
+          data-keyboard-nav="search-results doc-search"
+          size="sm"
+          class="w-full font-semibold"
+          ><span class="font-semibold">${group.title}</span></sonic-menu-item
+        >
+        ${group.items.map(
+          (item) => html`
+            <sonic-menu-item
+              pushState
+              href=${item.href}
+              data-keyboard-nav="search-results doc-search"
+              size="sm"
+              class="w-full"
+            >
+              <span class="block min-w-0 pl-3 text-left font-normal">
+                <span class="block truncate text-xs text-neutral-500"
+                  >${item.part}</span
+                >
+                <span class="snippet block text-sm line-clamp-2"
+                  >${unsafeHTML(item.search)}</span
+                >
+              </span>
+            </sonic-menu-item>
+          `,
+        )}
+      </section>
+    `;
+  }
 }

package/src/docs/shiki/index.ts

@@ -0,0 +1,109 @@
+import { css } from "lit";
+import { createHighlighterCore, type HighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import bash from "shiki/langs/bash.mjs";
+import cssLang from "shiki/langs/css.mjs";
+import html from "shiki/langs/html.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import json from "shiki/langs/json.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import githubDark from "shiki/themes/github-dark.mjs";
+import githubLight from "shiki/themes/github-light.mjs";
+
+let highlighter: Promise<HighlighterCore> | null = null;
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [githubLight, githubDark],
+    langs: [html, typescript, javascript, json, bash, cssLang],
+    engine: createJavaScriptRegexEngine(),
+  });
+  return highlighter;
+}
+
+export function normalizeDocsCodeLanguage(language: string): string {
+  if (language === "html" || language === "markup") return "html";
+  if (language === "shell") return "bash";
+  if (language === "js") return "javascript";
+  return language;
+}
+
+function normalizeDocsSource(source: string): string {
+  // Drop blank edge lines only: trimming would also eat the first line's
+  // indentation and make the dedent below a no-op.
+  let text = source
+    .replace(/\r\n?/g, "\n")
+    .replace(/^(?:[\t ]*\n)+/, "")
+    .trimEnd();
+  const lines = text.split("\n");
+  const indents = lines
+    .filter((l) => l.trim())
+    .map((l) => l.match(/^[\t ]*/)?.[0].length ?? 0);
+  const min = Math.min(...indents);
+  if (min > 0) text = lines.map((l) => l.slice(min)).join("\n");
+  return text
+    .replaceAll('=""', "")
+    .replaceAll("&quot;", '"')
+    .replaceAll('"{', "'{")
+    .replaceAll('}"', "}'")
+    .replaceAll("&amp;", "&");
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export async function highlightDocsCode(
+  source: string,
+  language: string,
+): Promise<string> {
+  const code = normalizeDocsSource(source);
+  if (!code) return "";
+
+  const lang = normalizeDocsCodeLanguage(language);
+  const h = await getHighlighter();
+  if (!h.getLoadedLanguages().includes(lang)) return escapeHtml(code);
+
+  try {
+    return h.codeToHtml(code, {
+      lang,
+      themes: { light: "github-light", dark: "github-dark" },
+      defaultColor: false,
+      structure: "inline",
+    });
+  } catch {
+    return escapeHtml(code);
+  }
+}
+
+export const docsCodeCSS = css`
+  pre {
+    margin: 0;
+    padding: 1em;
+    overflow: auto;
+    font-size: 13px;
+    line-height: 1.55;
+    tab-size: 2;
+    color: var(--sc-base-content);
+    background: var(--sc-base-100);
+    border: 1px solid var(--sc-base-200);
+    border-radius: var(--sc-rounded, 0.5rem);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  code {
+    display: block;
+    font-family: inherit;
+  }
+
+  code span {
+    color: var(--shiki-light);
+  }
+
+  :host-context([data-concorde-theme="dark"]) code span {
+    color: var(--shiki-dark);
+  }
+`;

package/src/docs/tailwind/css/base/scrollbar.css

@@ -0,0 +1,22 @@
+/* CUSTOM SCROLL */
+.custom-scroll {
+  overflow: auto !important;
+}
+
+.custom-scroll:hover::-webkit-scrollbar-thumb {
+  box-shadow: /* taste-skill-ignore: scrollbar thumb fill, not an elevation */ inset 0 0 2rem 2rem var(--sc-base-900);
+}
+
+.custom-scroll::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+  border: solid 0.15rem transparent;
+  border-radius: var(--sc-rounded);
+  background: transparent;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: box-shadow 0.2s;
+  border: solid 0.15rem transparent;
+}

package/src/docs/tailwind/css/base/theme.css

@@ -0,0 +1,96 @@
+/* Concorde theme tokens for the docs (light / dark), switched by <sonic-docs-header> */
+/*
+ * Retro technical-manual look (IBM / Braun): one grotesk, stone paper, black ink,
+ * Braun signal orange reserved for the one action and the hero stage.
+ */
+:root {
+  --sc-headings-font-family: "Schibsted Grotesk", system-ui, sans-serif;
+  --sc-font-family-base: "Schibsted Grotesk", system-ui, sans-serif;
+  --sc-headings-font-weight: 800;
+  --sc-rounded: 0;
+  --sc-border-width: 2px;
+  /* 70s instrument palette: signal orange for the action, racing green and red for the rest */
+  --docs-signal: #ff6b1f;
+  --docs-signal-ink: #1b1a17;
+  --docs-green: #2f6b4f;
+  --docs-green-deep: #24503c;
+  --docs-green-ink: #1f4a36;
+  --docs-red: #d42a2f;
+  --docs-night: #1b1a17;
+  --docs-night-ink: #ece6da;
+}
+/* <sonic-theme> derives radii on its own host: square them there too */
+sonic-theme {
+  --sc-rounded: 0;
+  --sc-btn-rounded: 0;
+  --sc-input-rounded: 0;
+}
+
+/*duotone*/
+/* :root{
+  --sc-base: yellow;
+  --sc-base-content: red;
+  --sc-primary: blue;
+  --sc-primary-content: white;
+} */
+
+[data-concorde-theme="light"] {
+  --sc-base: #e6e0d4;
+  --sc-base-content: #1b1a17;
+  --sc-primary: #1b1a17;
+  --sc-primary-content: #e6e0d4;
+  --sc-base-50: #ddd6c8;
+  --sc-base-100: #d3cbbb;
+  --sc-base-200: #bdb4a2;
+  --sc-base-300: #a59c8a;
+  --sc-base-400: #877f6f;
+  --sc-base-500: #6c6558;
+  --sc-base-600: #524c42;
+  --sc-base-700: #39352e;
+  --sc-base-800: #26231f;
+  --sc-base-900: #1b1a17;
+  --sc-info: #1f5fd1;
+  --sc-info-content: #ffffff;
+  --sc-success: #2f6b4f;
+  --sc-success-content: #ffffff;
+  --sc-warning: #ff6b1f;
+  --sc-warning-content: #1b1a17;
+  --sc-danger: #d42a2f;
+  --sc-danger-content: #ffffff;
+}
+
+[data-concorde-theme="dark"] {
+  --sc-base: #161513;
+  --sc-base-content: #ece6da;
+  --sc-primary: #ece6da;
+  --sc-primary-content: #161513;
+  --sc-base-50: #1e1d1a;
+  --sc-base-100: #272522;
+  --sc-base-200: #38352f;
+  --sc-base-300: #4b4740;
+  --sc-base-400: #69645a;
+  --sc-base-500: #857f74;
+  --sc-base-600: #a8a196;
+  --sc-base-700: #c7c0b4;
+  --sc-base-800: #ddd6ca;
+  --sc-base-900: #ece6da;
+  --sc-info: #5b8ff0;
+  --sc-info-content: #161513;
+  --sc-success: #4f9b74;
+  --sc-success-content: #161513;
+  --sc-warning: #ff7a33;
+  --sc-warning-content: #161513;
+  --sc-danger: #ef4a4f;
+  --sc-danger-content: #161513;
+  --docs-signal: #ff7a33;
+  --docs-green: #4f9b74;
+  --docs-green-deep: #1f3f31;
+  --docs-green-ink: #79c39b;
+  --docs-red: #ef4a4f;
+  --docs-night: #0b0a09;
+}
+[data-concorde-theme="light"],
+[data-concorde-theme="dark"] {
+  --sc-input-bg: var(--sc-base-100);
+  --sc-input-border-color: var(--sc-base-100);
+}

package/src/docs/tailwind/css/base/typography.css

@@ -0,0 +1,4 @@
+/* Body copy: one grotesk everywhere (the page and every component that injects this sheet) */
+p {
+  text-wrap: pretty;
+}