@universal-ember/docs-support 0.8.0 → 0.9.0

package/src/icons.gts

@@ -0,0 +1,150 @@
+import type { TOC } from '@ember/component/template-only';
+
+/**
+ * Copied from font-awesome directly,
+ * but with the addition of fill="currentColor"
+ *
+ * Font Awesome Free 6.6.0 by @fontawesome
+ * - https://fontawesome.com License
+ * - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
+ */
+export const XTwitter: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-xtwitter" />
+  </svg>
+</template>;
+
+export const Discord: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-discord" />
+  </svg>
+</template>;
+
+export const Threads: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-threads" />
+  </svg>
+</template>;
+
+export const BlueSky: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-bluesky" />
+  </svg>
+</template>;
+
+export const Mastodon: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-mastodon" />
+  </svg>
+</template>;
+
+export const GitHub: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-github" />
+  </svg>
+</template>;
+
+export const Flask: TOC<{ Element: SVGElement }> = <template>
+  <svg
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 0 448 512"
+    ...attributes
+  >{{!! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. }}<path
+      d="M288 0H160 128C110.3 0 96 14.3 96 32s14.3 32 32 32V196.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512H378.6c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H288zM192 196.8V64h64V196.8c0 23.7 6.6 46.9 19 67.1L309.5 320h-171L173 263.9c12.4-20.2 19-43.4 19-67.1z"
+    /></svg>
+</template>;
+
+export const Menu: TOC<{ Element: SVGElement }> = <template>
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke-width="2"
+    stroke-linecap="round"
+    ...attributes
+  >
+    <path d="M4 7h16M4 12h16M4 17h16" />
+  </svg>
+</template>;
+
+export const Sun: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
+    />
+  </svg>
+</template>;
+
+export const Moon: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
+    />
+  </svg>
+</template>;
+
+export const LightBulb: TOC<{ Element: SVGElement }> = <template>
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 32 32"
+    fill="none"
+    class="[--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]"
+    ...attributes
+  >
+    <defs>
+      <radialGradient
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        id=":S6:-gradient"
+        gradientTransform="matrix(0 21 -21 0 20 11)"
+      >
+        <stop stop-color="#0EA5E9"></stop><stop stop-color="#22D3EE" offset=".527"></stop>
+        <stop stop-color="#818CF8" offset="1"></stop>
+      </radialGradient>
+      <radialGradient
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        id=":S6:-gradient-dark"
+        gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)"
+      >
+        <stop stop-color="#0EA5E9"></stop><stop stop-color="#22D3EE" offset=".527"></stop>
+        <stop stop-color="#818CF8" offset="1"></stop>
+      </radialGradient></defs>
+    <g class="dark:hidden">
+      <circle cx="20" cy="20" r="12" fill="url(#:S6:-gradient)"></circle>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
+        class="fill-[var(--icon-background)]"
+        fill-opacity="0.5"
+      ></path>
+      <path
+        d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
+        class="fill-[var(--icon-foreground)]"
+      ></path>
+      <path
+        d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
+        class="fill-[var(--icon-foreground)]"
+      ></path>
+    </g>
+    <g class="hidden dark:inline">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 2C10.002 2 5 6.507 5 12.23c0 3.144 1.523 6.411 3.877 8.691.75.727 1.363 1.52 1.734 2.353.185.415.574.726 1.028.726H12a1 1 0 0 0 1-1v-4.5a.5.5 0 0 0-.5-.5A3.5 3.5 0 0 1 9 14.5V14a3 3 0 1 1 6 0v9a1 1 0 1 0 2 0v-9a3 3 0 1 1 6 0v.5a3.5 3.5 0 0 1-3.5 3.5.5.5 0 0 0-.5.5V23a1 1 0 0 0 1 1h.36c.455 0 .844-.311 1.03-.726.37-.833.982-1.626 1.732-2.353 2.354-2.28 3.878-5.547 3.878-8.69C27 6.507 21.998 2 16 2Zm5 25a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1 3 3 0 0 0 3 3h4a3 3 0 0 0 3-3Zm-8-13v1.5a.5.5 0 0 1-.5.5 1.5 1.5 0 0 1-1.5-1.5V14a1 1 0 1 1 2 0Zm6.5 2a.5.5 0 0 1-.5-.5V14a1 1 0 1 1 2 0v.5a1.5 1.5 0 0 1-1.5 1.5Z"
+        fill="url(#:S6:-gradient-dark)"
+      ></path>
+    </g>
+  </svg>
+</template>;

package/src/index-page.css

@@ -0,0 +1,22 @@
+.gradient-background {
+  background-image: linear-gradient(-45deg in oklch, #1252e3, #485de5, #7812e5, #3512c5);
+  background-size: 400% 400%;
+  animation: gradient-animation 16s ease infinite;
+}
+
+body.dark .gradient-background {
+  background-image: linear-gradient(-45deg in oklch, #110043, #182d75, #280065, #350076);
+}
+
+@keyframes gradient-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+

package/src/index-page.gts

@@ -0,0 +1,41 @@
+import './index-page.css';
+
+import { Hero } from 'ember-primitives/layout/hero';
+
+import type { TOC } from '@ember/component/template-only';
+
+export const IndexPage: TOC<{
+  Blocks: {
+    logo: [];
+    header: [];
+    tagline: [];
+    callToAction: [];
+    content: [];
+    footer: [];
+  };
+}> = <template>
+  <Hero class="shadow-xl shadow-slate-900/5 gradient-background">
+    <header class="absolute md:sticky right-0 bottom-0 md:top-0 z-50 p-4 flex items-center">
+      {{yield to="header"}}
+    </header>
+
+    <div class="h-full flex flex-col gap-8 justify-center items-center">
+      <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));">
+          {{yield to="logo"}}
+        </h1>
+        <p class="italic text-white w-full md:w-1/2 mx-auto">
+          {{yield to="tagline"}}
+        </p>
+      </div>
+      {{yield to="callToAction"}}
+    </div>
+  </Hero>
+
+  {{yield to="content"}}
+
+  <hr />
+  <footer style="padding: 3rem; width: 66%;" class="mx-auto gap-12 flex-wrap flex justify-between">
+    {{yield to="footer"}}
+  </footer>
+</template>;

package/{declarations/index.gts.d.ts → src/index.gts}

@@ -1,12 +1,11 @@
-export { H2 } from './h2.gts';
-export { Callout } from './callout.gts';
-export { Text } from './text.gts';
 export { Article } from './article.gts';
-export { Shell } from './shell.gts';
-export { IndexPage } from './index-page.gts';
-export { Link, InternalLink } from './links.gts';
+export { Callout } from './callout.gts';
 export { OopsError } from './errors.gts';
+export { H2 } from './h2.gts';
+export { IndexPage } from './index-page.gts';
+export { InternalLink,Link } from './links.gts';
 export { ResponsiveMenuLayout } from './menu-layout.gts';
 export { PageLayout, TopRight } from './page-layout.gts';
+export { Shell } from './shell.gts';
+export { Text } from './text.gts';
 export { ThemeToggle } from './theme-toggle.gts';
-//# sourceMappingURL=index.gts.d.ts.map

package/src/links.gts

@@ -0,0 +1,31 @@
+import { ExternalLink } from 'ember-primitives/components/external-link';
+
+import type { TOC } from '@ember/component/template-only';
+
+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={{linkClasses}} href="#" ...attributes>
+    {{yield}}
+  </a>
+</template>;
+
+export const Link: TOC<{
+  Element: HTMLAnchorElement;
+  Blocks: { default: [] };
+}> = <template>
+  <ExternalLink class={{linkClasses}} ...attributes>
+    {{yield}}
+  </ExternalLink>
+</template>;

package/src/menu-layout.gts

@@ -0,0 +1,43 @@
+// @ts-expect-error - no types are provided for ember-mobile-menu
+import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
+
+import { Menu } from './icons.gts';
+import { SideNav } from './side-nav.gts';
+
+import type { TOC } from '@ember/component/template-only';
+import type { ComponentLike, WithBoundArgs } from '@glint/template';
+
+const Toggle: TOC<{
+  Args: {
+    toggle: ComponentLike<{ Blocks: { default: [] } }>;
+  };
+}> = <template>
+  <@toggle>
+    <Menu class="w-6 h-6 stroke-slate-500" />
+  </@toggle>
+</template>;
+
+export const ResponsiveMenuLayout: TOC<{
+  Blocks: {
+    content: [];
+    header: [toggle: WithBoundArgs<typeof Toggle, 'toggle'>];
+  };
+}> = <template>
+  <MenuWrapper as |mmw|>
+    <mmw.MobileMenu @mode="push" @maxWidth={{300}} as |mm|>
+      <SideNav @onClick={{mm.actions.close}} />
+    </mmw.MobileMenu>
+
+    <mmw.Content>
+      {{yield (component Toggle toggle=mmw.Toggle) to="header"}}
+
+      <div class="outer-content">
+        <SideNav />
+
+        <main class="relative grid justify-center flex-auto w-full mx-auto max-w-8xl">
+          {{yield to="content"}}
+        </main>
+      </div>
+    </mmw.Content>
+  </MenuWrapper>
+</template>;

package/src/page-layout.gts

@@ -0,0 +1,137 @@
+import { modifier } from 'ember-modifier';
+import { cell } from 'ember-resources';
+import { Page } from 'kolay/components';
+
+import { Article } from './article.gts';
+import { Link } from './links.gts';
+import { ResponsiveMenuLayout } from './menu-layout.gts';
+import { ThemeToggle } from './theme-toggle.gts';
+
+import type { TOC } from '@ember/component/template-only';
+
+// Removes the App Shell / welcome UI
+// before initial rending and chunk loading finishes
+function removeLoader() {
+  document.querySelector('#initial-loader')?.remove();
+}
+
+ 
+function resetScroll(..._args: unknown[]) {
+  document.querySelector('html')?.scrollTo(0, 0);
+}
+
+const isScrolled = cell(false);
+
+const onWindowScroll = modifier(() => {
+  function onScroll() {
+    isScrolled.current = window.scrollY > 0;
+  }
+
+  onScroll();
+  window.addEventListener('scroll', onScroll, { passive: true });
+
+  return () => {
+    window.removeEventListener('scroll', onScroll);
+  };
+});
+
+export const PageLayout: TOC<{
+  Blocks: {
+    logoLink: [];
+    topRight: [];
+    editLink: [typeof EditLink];
+    error: [error: string];
+  };
+}> = <template>
+  <ResponsiveMenuLayout>
+    <:header as |Toggle|>
+      <header
+        class="sticky top-0 z-50 transition duration-500 shadow-md shadow-slate-900/5 dark:shadow-none bg-white/95
+          {{if
+            isScrolled.current
+            'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
+            'dark:bg-slate-900/95'
+          }}"
+        {{onWindowScroll}}
+      >
+        <div class="outer-content flex flex-none flex-wrap items-center justify-between py-4">
+          <div class="flex mr-6 lg:hidden">
+            <Toggle />
+          </div>
+          <div class="relative flex items-center flex-grow basis-0">
+            <a href="/" aria-label="Home page">
+              {{yield to="logoLink"}}
+            </a>
+          </div>
+          {{!
+            If we ever have a search bar
+              <div class="mr-6 -my-5 sm:mr-8 md:mr-0">
+                  input here
+              </div>
+            }}
+          <TopRight>
+            {{yield to="topRight"}}
+          </TopRight>
+        </div>
+      </header>
+    </:header>
+    <:content>
+      <section data-main-scroll-container class="flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none">
+        <Article>
+          <Page>
+            <:pending>
+              <div
+                class="fixed top-12 p-4 rounded z-50 transition border border-slate-800 duration-500 shadow-xl shadow-slate-900/5 bg-white/95 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'"
+              >
+                Loading, Compiling, etc
+              </div>
+            </:pending>
+
+            <:error as |error|>
+              <section>
+                {{yield error to="error"}}
+              </section>
+            </:error>
+
+            <:success as |prose|>
+              <prose />
+              {{(removeLoader)}}
+              {{! this is probably really bad, and anti-patterny
+                  but ember doesn't have a good way to have libraries
+                  tie in to the URL without a bunch of setup -- which is maybe fine?
+                  needs some experimenting -- there is a bit of a disconnect with
+                  deriving data from the URL, and the timing of the model hooks.
+                  It might be possible to have an afterModel hook wait until the page is
+                  compiled.
+                  (that's why we have async state, because we're compiling, not loading)
+              }}
+              {{resetScroll prose}}
+            </:success>
+          </Page>
+        </Article>
+
+        {{#if (has-block "editLink")}}
+
+          <div class="flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800">
+
+            {{yield EditLink to="editLink"}}
+          </div>
+        {{/if}}
+      </section>
+    </:content>
+
+  </ResponsiveMenuLayout>
+</template>;
+
+const EditLink: TOC<{ Args: { href: string }; Blocks: { default: [] } }> = <template>
+  <Link class="edit-page flex" href={{@href}}>
+    {{yield}}
+  </Link>
+</template>;
+
+export const TopRight: TOC<{ Blocks: { default: [] } }> = <template>
+  <div class="relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow">
+    <ThemeToggle />
+    {{yield}}
+  </div>
+</template>;

package/src/shell.gts

@@ -0,0 +1,37 @@
+import 'ember-mobile-menu/themes/android';
+/**
+ * NOTE: while this project uses tailwind,
+ *   CSS is better than tailwind for
+ *   - global styles
+ *   - styling some recursive structures generated by other libraries.
+ *
+ * Using both together is *very nice* 🎉
+ */
+import './site-css/site.css';
+import './site-css/components.css';
+import './site-css/featured-demo.css';
+import './site-css/shiki.css';
+import './site-css/shell.css';
+
+import { colorScheme } from 'ember-primitives/color-scheme';
+
+import type { TOC } from '@ember/component/template-only';
+
+export const Shell: TOC<{ Blocks: { default: [] } }> = <template>
+  {{(syncBodyClass)}}
+  {{yield}}
+</template>;
+
+function syncBodyClass() {
+  if (colorScheme.isDark) {
+    document.body.classList.add('dark');
+    document.body.classList.add('theme-dark');
+    document.body.classList.remove('theme-light');
+    document.body.classList.remove('light');
+  } else {
+    document.body.classList.remove('theme-dark');
+    document.body.classList.remove('dark');
+    document.body.classList.add('theme-light');
+    document.body.classList.add('light');
+  }
+}

package/src/side-nav.gts

@@ -0,0 +1,190 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+
+import { sentenceCase } from 'change-case';
+import { link } from 'ember-primitives/helpers';
+import { selected } from 'kolay';
+import { PageNav } from 'kolay/components';
+import { getAnchor } from 'should-handle-link';
+
+import type { TOC } from '@ember/component/template-only';
+import type RouterService from '@ember/routing/router-service';
+import type { Page } from 'kolay';
+
+type CustomPage = Page & {
+  title?: string;
+};
+
+function fixWords(text: string) {
+  switch (text.toLowerCase()) {
+    case 'ui':
+      return 'UI';
+    case 'iframe':
+      return 'IFrame';
+    default:
+      return text;
+  }
+}
+
+const joinUrl = (...strs: string[]) => {
+  const prefix = strs[0]?.startsWith('/') ? '/' : '';
+
+  return (
+    prefix +
+    strs
+      .map((s) => s.replace(/^\//, '').replace(/\/$/, ''))
+      .filter((x) => !!x)
+      .join('/')
+  );
+};
+
+/**
+ * Converts 1-2-hyphenated-thing
+ * to
+ *   Hyphenated Thing
+ */
+const titleize = (str: string) => {
+  return (
+    str
+      .split(/-|\s/)
+      .filter(Boolean)
+      .filter((text) => !text.match(/^[\d]+$/))
+      .map((text) => `${text[0]?.toLocaleUpperCase()}${text.slice(1, text.length)}`)
+      .map((text) => fixWords(text))
+      .join(' ')
+      .split('.')[0] || ''
+  );
+};
+
+function nameFor(x: Page): string {
+  if ('componentName' in x) {
+    return String(x.componentName);
+  }
+
+  const page = x as CustomPage;
+
+  return page.title ? page.title : sentenceCase(page.name);
+}
+
+const asComponent = (str: string) => {
+  return `<${str.split('.')[0]?.replaceAll(' ', '')} />`;
+};
+
+const isComponents = (str: string) => str === 'components';
+
+const SectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; name: string } }> =
+  <template>
+    {{#let (link @href) as |l|}}
+      <a
+        href={{@href}}
+        class="font-medium font-display
+          {{if
+            l.isActive
+            'text-sky-500'
+            'text-slate-900 hover:text-slate-600 dark:text-white  dark:hover:text-slate-300'
+          }}"
+        {{on "click" l.handleClick}}
+        ...attributes
+      >
+        {{#if (isComponents @name)}}
+          {{asComponent (titleize @name)}}
+        {{else}}
+          {{titleize @name}}
+        {{/if}}
+      </a>
+    {{/let}}
+  </template>;
+
+const SubSectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; name: string } }> =
+  <template>
+    {{#let (link @href) as |l|}}
+      <a
+        href={{@href}}
+        class="block w-full before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full
+          {{if
+            l.isActive
+            'font-semibold text-sky-500 before:bg-sky-500'
+            'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
+          }}"
+        {{on "click" l.handleClick}}
+        ...attributes
+      >
+        {{#if (isComponents @name)}}
+          {{asComponent (titleize @name)}}
+        {{else}}
+          {{titleize @name}}
+        {{/if}}
+      </a>
+    {{/let}}
+  </template>;
+
+export class SideNav extends Component<{
+  Element: HTMLElement;
+  Args: {
+    onClick?: () => void;
+  };
+}> {
+  get #selected() {
+    return selected(this);
+  }
+  @service('router') declare router: RouterService;
+
+  get humanSelected() {
+    const path = this.#selected?.path;
+
+    if (!path) return undefined;
+
+    return path.split('/').filter(Boolean).map(titleize).join(' / ');
+  }
+
+  get rootUrl() {
+    return this.router.rootURL;
+  }
+
+  closeNav = (event: Event) => {
+    if (!getAnchor(event)) return;
+
+    this.args.onClick?.();
+  };
+
+  /**
+   *
+   * This nav needs an aria-label to get around
+   *  "Ensure landmarks are unique"
+   *  because some demos render navs, and it's important that those
+   *  demos are as simple as possible.
+   *
+   *
+   *  nav isn't actually made in to an interactive element,
+   *  it's an event delegation handler.
+   *  The links themselves remain the actual interactive elements.
+   */
+  <template>
+    <aside class="bg-white dark:bg-slate-900" ...attributes>
+      <PageNav aria-label="Main Navigation">
+        <:page as |x|>
+          <SubSectionLink
+            @href={{joinUrl this.rootUrl x.page.path}}
+            @name={{nameFor x.page}}
+            {{on "click" this.closeNav}}
+          />
+        </:page>
+
+        <:collection as |x|>
+          {{#if x.index}}
+            <SectionLink
+              @href={{joinUrl this.rootUrl x.index.page.path}}
+              @name={{titleize x.collection.name}}
+              {{on "click" this.closeNav}}
+            />
+          {{else}}
+            <h2>
+              {{titleize x.collection.name}}
+            </h2>
+          {{/if}}
+        </:collection>
+      </PageNav>
+    </aside>
+  </template>
+}