Updates

universal-ember · Aug 16, 2024 · 558c04c · 558c04c
1 parent 6e966bc
commit 558c04c
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 38 deletions.
diff --git a/docs-app/app/components/icons.gts b/docs-app/app/components/icons.gts
@@ -104,6 +104,7 @@ export const Logo: TOC<{ Element: SVGElement }> = <template>
         fill-rule="nonzero"
         d="M412.6 171.6v-2.9h2.6l.7.3c.2 0 .4.2.5.4.2.1.2.4.2.7 0 .6-.2 1-.6 1.2a4 4 0 0 1-1.5.3zm-2.1-4.5v10.8h2.1v-4.6h1.4l2.6 4.6h2.2l-2.9-4.7 1.2-.3a2.6 2.6 0 0 0 .9-.5l.6-.9.2-1.2c0-1.2-.4-2-1.1-2.5-.7-.5-1.8-.7-3.2-.7zm-3.5 5.4a7.9 7.9 0 0 1 2.2-5.4 7 7 0 0 1 2.3-1.6 7.2 7.2 0 0 1 2.8-.6c1 0 2 .2 2.8.6a7.1 7.1 0 0 1 2.4 1.6 7.7 7.7 0 0 1 2.1 5.4 8 8 0 0 1-.6 3 7 7 0 0 1-1.5 2.4 7 7 0 0 1-2.4 1.6 7 7 0 0 1-2.8.6 7.2 7.2 0 0 1-2.8-.6 6.9 6.9 0 0 1-2.3-1.6 7.5 7.5 0 0 1-2.2-5.4zm-2.6 0a9.5 9.5 0 0 0 3 7 9.7 9.7 0 0 0 3.2 2 10.6 10.6 0 0 0 3.7.6 12 12 0 0 0 3.8-.6 9.7 9.7 0 0 0 3.1-2 9.5 9.5 0 0 0 3-7 9.5 9.5 0 0 0-3-7 9.7 9.7 0 0 0-3.1-2 10.4 10.4 0 0 0-3.8-.6 10.3 10.3 0 0 0-3.7.6 9.7 9.7 0 0 0-3.2 2 9.4 9.4 0 0 0-3 7z"
       />
+
       <path
         fill="#fff"
         d="M572 122q-1.4 10.6-5.7 19.2-4.3 8.6-11 13t-15 4.2q-11-.3-17.3-7.8l-6.3 33.5h-15.5l17-97.5h14l-1 7.2q8-8.8 19.1-8.5 6.7 0 11.7 3.4 5 3.3 7.5 9.7 2.7 6.4 2.9 14.2 0 4-.5 9.5zm-15.3-1.3.3-4.8q.2-8.4-2.8-13-2.9-4.6-8.8-4.7-8.8-.3-15.1 8l-5.5 31.4q3 7.9 12 8.2 7.6.2 12.8-6 5.3-6.2 7.1-19.1zm68-19.7q-3-.6-6-.6-10.2-.3-16.2 8.4l-8.4 48.2h-15.5l12.2-70.4h14.6l-1.5 8q7.2-9.6 16.6-9.4 2.2 0 6 1zm15.6 56H625l12-70.4h15.5zm-1-88.5q0-3.5 2.4-6t6.3-2.7q3.8-.2 6.2 2.3 2.6 2.4 2.6 6t-2.5 6q-2.4 2.5-6.2 2.6-3.7.1-6.2-2.2-2.6-2.4-2.6-6zm44 18L682 94q8.7-9 20.8-8.7 6.6.1 11 3 4.4 3 6 7.8 9.8-11 22.4-10.8 10.3.2 15.2 7 5 6.8 3.8 19l-7.6 45.7h-15.4l7.6-45.7q.4-3 .1-5.3-1-7.6-9.6-7.8-9.6-.3-15.1 10.5l-.2 1.4-8.1 47h-15.5l7.7-45.6q.3-2.8 0-5.3-1-7.8-9.6-8-8.6-.2-14.4 7.7l-9 51.1h-15.4L669 86.6zM785.6 157h-15.4l12.2-70.4h15.4zm-1-88.5q0-3.5 2.4-6t6.3-2.7q3.7-.2 6.2 2.3 2.6 2.4 2.6 6t-2.5 6q-2.4 2.5-6.2 2.6-3.7.1-6.3-2.2-2.5-2.4-2.5-6zm51.9 1-3 17h12l-2 11.8h-12l-6.7 39.5q-.2 1.6 0 2.9.4 4.2 5.2 4.4 2.4 0 5.4-.6l-1 12.4q-4.8 1.4-9.7 1.4-8-.2-12.1-5.5-4-5.4-3.1-14.3l6.5-40.2h-11.2l2-11.7h11.3l3-17.1zm24.8 87.5H846l12.2-70.4h15.5zm-1-88.5q0-3.5 2.4-6 2.3-2.6 6.3-2.7 3.8-.2 6.3 2.3 2.5 2.4 2.5 6t-2.5 6q-2.4 2.5-6.2 2.6-3.7.1-6.2-2.2-2.6-2.4-2.6-6zm45.2 68.3 22.2-50.2h16.5L909.5 157H896l-13-70.4h15.6zm67.1 21.5q-9.2-.2-16-4.6-6.6-4.4-9.9-12.1-3.2-7.7-2.4-17.1l.2-2.7q1.2-10.7 6.2-19.3 5.2-8.6 12.8-13 7.6-4.4 16.5-4.2 13.3.2 19.8 9.8 6.7 9.6 5 25l-.9 6.7h-44.3q-.6 8.4 3.4 13.6 4 5.1 11 5.2 9.9.4 18.3-8.6l7.8 8.2q-4.4 6.3-11.7 9.8-7.2 3.5-15.8 3.3zm6.6-60.4q-12.2-.4-18.4 17.3h29.3l.2-1.3q.5-3 0-5.8-.6-4.7-3.6-7.3-2.9-2.7-7.5-2.9zm72.9 39.6q1.1-6.5-8.4-9-9.4-2.5-12.9-4-13.4-5.7-13-17.4.4-9.5 8.6-15.7 8.4-6.3 20-6.1 11.2.1 18.2 6.3t7 16.2h-15.3q0-5-2.7-7.7-2.8-2.8-7.7-3-5.1 0-8.8 2.6-3.7 2.6-4.3 6.7-.9 5.9 8.4 8.2 9.2 2.3 13.6 4.3 13 5.6 12.5 17.7-.4 6.7-4.5 11.7-4 5-10.8 7.6-6.9 2.6-14.6 2.4-11.5-.1-19-6.7-7.6-6.6-7.5-16.8h14.9q.1 5.7 3.4 8.6 3.2 3 8.9 3t9.5-2.3q3.8-2.4 4.5-6.6z"

diff --git a/docs-app/app/templates/index.gts b/docs-app/app/templates/index.gts
@@ -17,13 +17,20 @@ export default Route(
       </header>
 
       <div class="h-full flex flex-col gap-8 justify-center items-center">
-        <h1 style="transform: translateY(-50%); width: 66%; margin: 0 auto; filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));">
-          <Logo />
-        </h1>
-        <InternalLink href="/1-get-started/index.md" class="text-2xl" style="color: white; text-shadow: 0px 3px 0px black;
-  font-size: 2.125rem;">
+        <div style="width: 66%; margin: 0 auto; transform: translateY(-20%);" class="grid gap-4">
+          <h1 style="filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));">
+            <Logo />
+          </h1>
+          <p class="italic text-white w-full md:w-1/2 mx-auto">
+            headless, stylessless, accessibility focused implementations of components, patterns, and utilities to help make building apps faster.
+          <br>
+          <strong>picking up where the framework left off.</strong>
+          </p>
+        </div>
+        <InternalLink href="/1-get-started/index.md" style="color: white; text-shadow: 0px 2px 0px black; transform: scale(2.5);">
           Get Started ➤
         </InternalLink>
+
       </div>
     </Hero>
 
@@ -57,38 +64,120 @@ export default Route(
     <br><br>
 
     <div class="flex justify-center items-center">
-      <InternalLink href="/1-get-started/index.md" class="text-2xl" style="font-size: 2.125rem;">
-        Get Started ➤
-      </InternalLink>
+      <GetStarted />
     </div>
 
-    <br><br>
     <br><br>
 
-    <footer style="padding: 3rem; width: 66%;" class="mx-auto gap-12 flex-wrap flex justify-between">
-      <div>
-        <span class="dark:text-white text:slate-900">Related Projects</span>
-        <nav>
+    <div class="mx-auto" style="width: 66%">
+      <Article class="flex flex-wrap gap-12 justify-around" >
+
+        <div>
+          <H2>Building on the backs of giants.</H2>
+
+          <ul class="dark:text-white text:slate-900">
+            <li>
+              <strong><em style="text-transform: uppercase; letter-spacing: 0.5rem;">The Platform</em></strong><br>
+              When possible, the platform should be used instead of custom implementations. When applicable, the docs call out what and how to use each relevant part of the platform.
+            </li>
+            <li>
+              <Link href="https://floating-ui.com/">@floating-ui/dom</Link><br>
+              Used for positioning floating elements. Will be replaced by <Link href="https://w3c.github.io/csswg-drafts/css-anchor-position/">CSS Anchor Position</Link> when that lands.
+            </li>
+            <li>
+              <Link href="https://tabster.io/">tabster</Link><br>
+              Used for managing roving focus in menus or menu-like patterns.
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <H2>Inspiration and code adapted from</H2>
+
           <ul>
             <li>
-              <Link href="https://github.com/universal-ember/test-support">
-                @universal-ember/test-support
+              <Link href="https://primitives.solidjs.community/">
+                Solid primitives
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.radix-ui.com/primitives/docs/overview/introduction">
+                radix primitives
+              </Link>
+            </li>
+            <li>
+              <Link href="https://kobalte.dev/docs/core/overview/introduction">
+                Kobalte
+              </Link>
+            </li>
+            <li>
+              <Link href="https://svelte-ux.techniq.dev/">
+                Svelte UX
+              </Link>
+            </li>
+            <li>
+              <Link href="https://quasar.dev/">
+                Quasar
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.bits-ui.com/docs/introduction">
+                Bits UI
+              </Link>
+            </li>
+            <li>
+              <Link href="https://ariakit.org/">
+                AriaKit
               </Link>
             </li>
+            <li>
+              <Link href="https://react-spectrum.adobe.com/react-aria/">
+                React Aria
+              </Link>
+            </li>
+            <li>
+              <Link href="https://ui.shadcn.com/docs/components/accordion">
+                ShadCN
+              </Link>
+            </li>
+          </ul>
+        </div>
+
+      </Article>
+    </div>
+
+    <br><br>
+    <br><br>
+
+    <hr>
+    <footer style="padding: 3rem; width: 66%;" class="mx-auto gap-12 flex-wrap flex justify-between">
+      <div>
+        <span class="dark:text-white text:slate-900">Dependencies / Projects used by ember-primitives that are worth looking at.</span>
+        <nav class="dark:text-white text:slate-900">
+          <ul>
             <li>
               <Link href="https://github.com/universal-ember/reactiveweb">
                 reactiveweb
-              </Link>
+              </Link><br>
+              Reactive utilities used in some components.
             </li>
             <li>
               <Link href="https://github.com/nullVoxPopuli/form-data-utils">
                 form-data-utils
-              </Link>
+              </Link><br>
+            Utilities for working with <Link href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</Link>.
             </li>
             <li>
               <Link href="https://github.com/NullVoxPopuli/should-handle-link">
                 should-handle-link
-              </Link>
+              </Link><br>
+              Utilities for managing native link clicks in single-page-apps.
+            </li>
+            <li>
+              <Link href="https://github.com/universal-ember/test-support">
+                @universal-ember/test-support
+              </Link><br>
+              Extra helpers for testing.
             </li>
          </ul>
         </nav>
@@ -103,12 +192,15 @@ export default Route(
 
 const Socials = <template>
   <div class="flex gap-3">
-    <ExternalLink href="https://x.com/nullvoxpopuli">
-      <XTwitter class="dark:fill-white fill-slate-900 h-6 w-6" />
-    </ExternalLink>
     <ExternalLink href="https://github.com/NullVoxPopuli/">
       <GitHub class="dark:fill-white fill-slate-900  h-6 w-6" />
     </ExternalLink>
+    <ExternalLink href="http://discord.gg/cTvtmJhFNY">
+      <Discord class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="https://x.com/nullvoxpopuli">
+      <XTwitter class="dark:fill-white fill-slate-900 h-6 w-6" />
+    </ExternalLink>
     <ExternalLink href="https://mastodon.coffee/@nullvoxpopuli">
       <Mastodon class="dark:fill-white fill-slate-900  h-6 w-6" />
     </ExternalLink>
@@ -118,12 +210,15 @@ const Socials = <template>
     <ExternalLink href="https://www.threads.net/@nullvoxpopuli">
       <Threads class="dark:fill-white fill-slate-900  h-6 w-6" />
     </ExternalLink>
-    <ExternalLink href="http://discord.gg/cTvtmJhFNY">
-      <Discord class="dark:fill-white fill-slate-900  h-6 w-6" />
-    </ExternalLink>
   </div>
 </template>;
 
+const GetStarted = <template>
+  <InternalLink href="/1-get-started/index.md" style="transform: scale(2.5);">
+    Get Started ➤
+  </InternalLink>
+</template>;
+
 const Content = <template>
     <br><br>
 
@@ -152,7 +247,8 @@ const Content = <template>
           <H2>Goals</H2>
 
           <ul>
-            <li>import only what you need</li>
+            <li>high-quality components and utilities</li>
+            <li>pay for only what you import</li>
             <li>pure data derivation</li>
             <li>no extra rendering</li>
             <li>no unneeded DOM</li>

diff --git a/docs-app/app/templates/page.gts b/docs-app/app/templates/page.gts
@@ -95,30 +95,62 @@ const ReportingAnIssue = <template>
   </ExternalLink>
 </template>;
 
+const proseClasses = `
+  prose prose-slate max-w-none
+  dark:prose-invert dark:text-slate-400
+  prose-th:table-cell
+  prose-headings:inline-block
+  prose-headings:scroll-mt-28
+  prose-headings:font-display
+  prose-headings:font-normal
+  lg:prose-headings:scroll-mt-[8.5rem]
+  prose-h1:text-3xl
+
+  prose-lead:text-slate-500
+  dark:prose-lead:text-slate-400
+
+  prose-a:font-semibold
+  dark:prose-a:text-sky-400
+  prose-a:no-underline
+  prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
+  hover:prose-a:[--tw-prose-underline-size:3px]
+  dark:[--tw-prose-background:theme(colors.slate.900)]
+  dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
+  dark:hover:prose-a:[--tw-prose-underline-size:6px]
+  prose-pre:rounded-xl prose-pre:bg-slate-900
+  prose-pre:shadow-lg
+  dark:prose-pre:bg-slate-800/60
+  dark:prose-pre:shadow-none
+  dark:prose-pre:ring-1
+  dark:prose-pre:ring-slate-300/10
+  dark:prose-hr:border-slate-800
+  dark:prose-code:text-slate-50
+`;
+
 export const Article: TOC<{ Element: HTMLElement; Blocks: { default: [] }}> = <template>
-  <article
-    class="prose prose-slate max-w-none dark:prose-invert dark:text-slate-400 prose-headings:inline-block prose-th:table-cell prose-headings:scroll-mt-28 prose-h1:text-3xl prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-semibold dark:prose-a:text-sky-400 prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px] prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 dark:prose-hr:border-slate-800 dark:prose-code:text-slate-50"
-    ...attributes
-  >
+  <article class={{proseClasses}} ...attributes>
     {{yield}}
   </article>
 </template>;
 
+const linkClasses = `
+  text-sm font-semibold
+  dark:text-sky-400
+  no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
+  hover:[--tw-prose-underline-size:6px]
+  dark:[--tw-prose-background:theme(colors.slate.900)]
+  dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
+  dark:hover:[--tw-prose-underline-size:6px]
+`;
+
 export const InternalLink: TOC<{ Element: HTMLAnchorElement, Blocks: { default: [] }}> = <template>
-  <a
-    class="text-sm font-semibold dark:text-sky-400 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:[--tw-prose-underline-size:6px]"
-    href="#"
-    ...attributes
-  >
+  <a class={{linkClasses}} href="#" ...attributes>
     {{yield}}
   </a>
 </template>;
 
 export const Link: TOC<{ Element: HTMLAnchorElement, Blocks: { default: [] }}> = <template>
-  <ExternalLink
-    class="text-sm font-semibold dark:text-sky-400 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:[--tw-prose-underline-size:6px]"
-    ...attributes
-  >
+  <ExternalLink class={{linkClasses}} ...attributes>
     {{yield}}
   </ExternalLink>
 </template>;