fix: add flag to reduce dom weight

+ use name instead of longname for linking

packages/core/signal.mjs

@@ -191,13 +191,6 @@ export const chooseInWith = (pat, xs) => {
  */
 export const choose = (...xs) => chooseWith(rand, xs);
 
-/**
- * Chooses from the given list of values (or patterns of values), according
- * to the pattern that the method is called on. The pattern should be in
- * the range 0 .. 1.
- * @param  {...any} xs
- * @returns {Pattern}
- */
 Pattern.prototype.choose = function (...xs) {
   return chooseWith(this, xs);
 };

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -43,6 +43,9 @@ const sidebar = SIDEBAR[langCode];
         </li>
       ))
     }
+    <li>
+      <a class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`} href={`${Astro.site?.pathname}ref`}> Reference</a>
+    </li>
   </ul>
 </nav>
 

website/src/components/LeftSidebar/ReferenceSidebar.astro

@@ -0,0 +1,66 @@
+---
+import { docs } from '../../../../doc.json';
+
+type Props = {
+  currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+const { BASE_URL } = import.meta.env;
+let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+---
+
+<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
+  <ul>
+    <li>
+      <a
+        class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`}
+        href={`${Astro.site?.pathname}workshop/getting-started`}>Back to Docs</a
+      >
+    </li>
+    <li>
+      <div class="nav-group pb-4">
+        <a class="hover:bg-lineHighlight w-full block" href={Astro.site?.pathname + 'ref'}><h2>Reference</h2></a>
+        <ul>
+          {
+            docs
+              .filter(
+                ({ tags }) =>
+                  !tags?.find((t) => t.title === 'noautocomplete') && !tags?.find((t) => t.title === 'superdirtonly'),
+              )
+              .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
+              // @ts-ignore
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map(({ name }) => {
+                const link = 'ref/' + name;
+                const url = Astro.site?.pathname + link;
+                return (
+                  <li class="">
+                    <a
+                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
+                        currentPageMatch === link ? ' bg-lineHighlight' : ''
+                      }`}
+                      href={url}
+                      aria-current={currentPageMatch === link ? 'page' : false}
+                    >
+                      {name}
+                    </a>
+                  </li>
+                );
+              })
+          }
+        </ul>
+      </div>
+    </li>
+  </ul>
+</nav>
+
+<script is:inline>
+window.addEventListener('DOMContentLoaded', () => {
+  var target = document.querySelector('[aria-current="page"]');
+  const nav = document.querySelector('.nav-groups');
+  if (nav && target && target.offsetTop > window.innerHeight - 100) {
+    nav.scrollTop = target.offsetTop;
+  }
+});
+</script>

website/src/components/PageContent/PageContent.astro

@@ -8,9 +8,10 @@ type Props = {
   frontmatter: Frontmatter;
   headings: MarkdownHeading[];
   githubEditUrl: string;
+  hideMoreMenu?: boolean;
 };
 
-const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
+const { frontmatter, headings, githubEditUrl, hideMoreMenu } = Astro.props as Props;
 const title = frontmatter.title;
 const currentPage = Astro.url.pathname;
 ---
@@ -22,9 +23,13 @@ const currentPage = Astro.url.pathname;
       <slot />
     </div>
   </section>
-  <nav class="block sm:hidden">
-    <MoreMenu editHref={githubEditUrl} />
-  </nav>
+  {
+    !hideMoreMenu && (
+      <nav class="block sm:hidden">
+        <MoreMenu editHref={githubEditUrl} />
+      </nav>
+    )
+  }
 </article>
 <style>
   .content {

website/src/config.ts

@@ -15,7 +15,7 @@ export const OPEN_GRAPH = {
 export type Frontmatter = {
   title: string;
   description: string;
-  layout: string;
+  layout?: string;
   image?: { src: string; alt: string };
   dir?: 'ltr' | 'rtl';
   ogLocale?: string;

website/src/layouts/ReferenceLayout.astro

@@ -0,0 +1,50 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
+import * as CONFIG from '../config';
+import type { MarkdownHeading } from 'astro';
+import '../docs/docs.css';
+import ReferenceSidebar from '../components/LeftSidebar/ReferenceSidebar.astro';
+
+type Props = {
+  frontmatter: CONFIG.Frontmatter;
+  headings: MarkdownHeading[];
+};
+
+const { frontmatter, headings } = Astro.props as Props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const currentPage = Astro.url.pathname;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
+---
+
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial dark">
+  <head>
+    <HeadCommon />
+    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+    <title>
+      {frontmatter.title ? `${frontmatter.title} 🌀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+    </title>
+  </head>
+
+  <body class="h-app-height text-gray-50 bg-background">
+    <div class="w-full h-full space-y-4 flex flex-col">
+      <header class="max-w-full fixed top-0 w-full z-[100]">
+        <Header currentPage={currentPage} />
+      </header>
+      <main class="relative pt-16">
+        <div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
+          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
+            <ReferenceSidebar currentPage={currentPage} />
+          </aside>
+          <PageContent hideMoreMenu={true} frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
+            <slot />
+          </PageContent>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>

website/src/pages/ref/[ref].astro

@@ -0,0 +1,40 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+import { docs } from '../../../../doc.json';
+import JsDoc from '../../docs/JsDoc.astro';
+
+export const getSynonyms = (doc) => {
+  const synonyms = doc.tags?.find((t) => t.title === 'synonyms');
+  if (synonyms) {
+    return synonyms.text?.split(', ');
+  }
+  return [];
+};
+
+export function getStaticPaths() {
+  let paths: any = [];
+  docs
+    .filter((doc) => !!doc.name)
+    .forEach((doc) => {
+      paths.push({ params: { ref: doc.name } });
+      const synonyms = getSynonyms(doc);
+      if (synonyms) {
+        synonyms.forEach((synonym) => {
+          paths.push({ params: { ref: synonym } });
+        });
+      }
+    });
+  return paths;
+}
+
+const { ref } = Astro.params;
+const entry = docs.find((d) => d.name === ref || getSynonyms(d).includes(ref));
+if (!entry) {
+  return;
+}
+---
+
+<ReferenceLayout frontmatter={{ title: entry.name || 'Reference', description: '' }} headings={[]}>
+  <h1>{entry!.name}</h1>
+  <JsDoc name={entry.longname} />
+</ReferenceLayout>

website/src/pages/ref/index.astro

@@ -0,0 +1,8 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+---
+
+<ReferenceLayout frontmatter={{ title: 'Reference', description: 'All functions' }} headings={[]}>
+  <h1>Reference</h1>
+  <p>Welcome to the Reference! Pick an Item on the left</p>
+</ReferenceLayout>