@universal-ember/docs-support 0.9.2 → 0.9.4

package/src/page-layout.gts

@@ -15,7 +15,6 @@ function removeLoader() {
   document.querySelector('#initial-loader')?.remove();
 }
 
- 
 function resetScroll(..._args: unknown[]) {
   document.querySelector('html')?.scrollTo(0, 0);
 }
@@ -35,40 +34,100 @@ const onWindowScroll = modifier(() => {
   };
 });
 
+export const PageLoader: TOC<{
+  Blocks: {
+    defaultl: [];
+  };
+}> = <template>
+  <div class="loading-page" role="status">
+    {{yield}}
+  </div>
+
+  <style>
+    @keyframes shimmer {
+      0% {
+        background-position: -1000px 0;
+      }
+      100% {
+        background-position: 1000px 0;
+      }
+    }
+
+    .loading-page {
+      position: fixed;
+      top: 0rem;
+      padding: 0.5rem 1rem;
+      background: linear-gradient(
+        90deg,
+        rgba(40, 40, 50, 0.9),
+        rgba(60, 60, 70, 0.9),
+        rgba(40, 40, 50, 0.9)
+      );
+      background-size: 1000px 100%;
+      animation: shimmer 2s infinite;
+      filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.8));
+      color: white;
+      right: 0;
+      width: 100%;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .loading-page {
+        animation: shimmer 10s infinite;
+      }
+    }
+  </style>
+</template>;
+
+export function hasReason(error: unknown): error is { reason: string; original: Error } {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'reason' in error &&
+    typeof error.reason === 'string'
+  );
+}
+
+export const PageError: TOC<{
+  Args: {
+    error: string | { reason: string; original: Error };
+  };
+}> = <template>
+  <div class="error" data-page-error role="alert">
+    {{#if (hasReason @error)}}
+      {{@error.reason}}
+      <details>
+        <summary>Original error</summary>
+        <pre>{{@error.original.stack}}</pre>
+      </details>
+    {{else}}
+      {{@error}}
+    {{/if}}
+  </div>
+</template>;
+
 export const PageLayout: TOC<{
   Blocks: {
     logoLink: [];
     topRight: [];
     editLink: [typeof EditLink];
-    error: [error: string];
+    error: [error: string | { reason: string; original: Error }];
   };
 }> = <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">
+      <header class="page-header {{if isScrolled.current 'is-scrolled'}}" {{onWindowScroll}}>
+        <div class="outer-content page-header__inner">
+          <div class="page-header__toggle">
             <Toggle />
           </div>
-          <div class="relative flex items-center flex-grow basis-0">
+          <div class="page-header__logo">
             <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>
@@ -76,15 +135,13 @@ export const PageLayout: TOC<{
       </header>
     </:header>
     <:content>
-      <section data-main-scroll-container class="flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none">
+      <section data-main-scroll-container class="page-content">
         <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'"
-              >
+              <PageLoader>
                 Loading, Compiling, etc
-              </div>
+              </PageLoader>
             </:pending>
 
             <:error as |error|>
@@ -96,15 +153,6 @@ export const PageLayout: TOC<{
             <: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>
@@ -112,7 +160,7 @@ export const PageLayout: TOC<{
 
         {{#if (has-block "editLink")}}
 
-          <div class="flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800">
+          <div class="edit-link-container">
 
             {{yield EditLink to="editLink"}}
           </div>
@@ -121,17 +169,120 @@ export const PageLayout: TOC<{
     </:content>
 
   </ResponsiveMenuLayout>
+
+  <style scoped>
+    .page-header {
+      position: sticky;
+      top: 0;
+      z-index: 50;
+      transition: all 0.5s;
+      box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.05);
+      background-color: rgb(255 255 255 / 0.95);
+    }
+
+    :is(html[style*="color-scheme: dark"]) .page-header {
+      box-shadow: none;
+      background-color: rgb(2 2 14 / 0.95);
+    }
+
+    :is(html[style*="color-scheme: dark"]) .page-header.is-scrolled {
+      backdrop-filter: blur(12px);
+    }
+
+    @supports (backdrop-filter: blur(0)) {
+      :is(html[style*="color-scheme: dark"]) .page-header.is-scrolled {
+        background-color: rgb(2 2 14 / 0.75);
+      }
+    }
+
+    .page-header__inner {
+      display: flex;
+      flex: none;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    .page-header__toggle {
+      display: flex;
+      margin-right: 1.5rem;
+    }
+
+    @media (min-width: 1024px) {
+      .page-header__toggle {
+        display: none;
+      }
+    }
+
+    .page-header__logo {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+
+    .page-content {
+      flex: 1 1 auto;
+      max-width: 42rem;
+      min-width: 0;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    @media (min-width: 1024px) {
+      .page-content {
+        max-width: none;
+      }
+    }
+
+    .edit-link-container {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 1.5rem;
+      margin-top: 3rem;
+      border-top: 1px solid #e2e8f0;
+    }
+
+    :is(html[style*="color-scheme: dark"]) .edit-link-container {
+      border-color: #1e293b;
+    }
+  </style>
 </template>;
 
 const EditLink: TOC<{ Args: { href: string }; Blocks: { default: [] } }> = <template>
-  <Link class="edit-page flex" href={{@href}}>
+  <Link class="edit-page" style="display: 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">
+  <div class="top-right">
     <ThemeToggle />
     {{yield}}
   </div>
+
+  <style scoped>
+    .top-right {
+      position: relative;
+      display: flex;
+      justify-content: flex-end;
+      gap: 1.5rem;
+      flex-basis: 0;
+    }
+
+    @media (min-width: 640px) {
+      .top-right {
+        gap: 2rem;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .top-right {
+        flex-grow: 1;
+      }
+    }
+  </style>
 </template>;

package/src/shell.gts

@@ -1,17 +1,10 @@
 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 './site-css/prose.css';
 
 import { colorScheme } from 'ember-primitives/color-scheme';
 

package/src/side-nav.gts

@@ -4,7 +4,6 @@ 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';
 
@@ -78,12 +77,7 @@ const SectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; name:
     {{#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'
-          }}"
+        class="section-link {{if l.isActive 'is-active'}}"
         {{on "click" l.handleClick}}
         ...attributes
       >
@@ -101,12 +95,7 @@ const SubSectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; na
     {{#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'
-          }}"
+        class="subsection-link {{if l.isActive 'is-active'}}"
         {{on "click" l.handleClick}}
         ...attributes
       >
@@ -125,19 +114,8 @@ export class SideNav extends Component<{
     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;
   }
@@ -161,7 +139,7 @@ export class SideNav extends Component<{
    *  The links themselves remain the actual interactive elements.
    */
   <template>
-    <aside class="bg-white dark:bg-slate-900" ...attributes>
+    <aside class="side-nav" ...attributes>
       <PageNav aria-label="Main Navigation">
         <:page as |x|>
           <SubSectionLink
@@ -186,5 +164,101 @@ export class SideNav extends Component<{
         </:collection>
       </PageNav>
     </aside>
+
+    <style scoped>
+      .side-nav {
+        background-color: white;
+      }
+
+      .side-nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .side-nav h2 {
+        font-size: 1rem;
+        font-weight: 500;
+        font-family: var(--font-display, "Helvetica", "Arial", sans-serif);
+        color: #0f172a;
+        margin: 0;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .side-nav h2 {
+        color: white;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .side-nav {
+        background-color: #02020e;
+      }
+
+      .section-link {
+        font-weight: 500;
+        font-family: var(--font-display, "Helvetica", "Arial", sans-serif);
+        color: #0f172a;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .section-link {
+        color: white;
+      }
+
+      .section-link:hover {
+        color: #475569;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .section-link:hover {
+        color: #cbd5e1;
+      }
+
+      .section-link.is-active {
+        color: #0ea5e9;
+      }
+
+      .subsection-link {
+        display: block;
+        width: 100%;
+        position: relative;
+        color: #64748b;
+      }
+
+      .subsection-link::before {
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        left: -0.25rem;
+        top: 50%;
+        height: 0.375rem;
+        width: 0.375rem;
+        transform: translateY(-50%);
+        border-radius: 9999px;
+        background-color: #cbd5e1;
+        display: none;
+      }
+
+      .subsection-link:hover {
+        color: #475569;
+      }
+
+      .subsection-link:hover::before {
+        display: block;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .subsection-link {
+        color: #94a3b8;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .subsection-link::before {
+        background-color: #334155;
+      }
+
+      :is(html[style*="color-scheme: dark"]) .subsection-link:hover {
+        color: #cbd5e1;
+      }
+
+      .subsection-link.is-active {
+        font-weight: 600;
+        color: #0ea5e9;
+      }
+    </style>
   </template>
 }

package/src/site-css/components.css

@@ -1,23 +1,103 @@
+/* Lightbulb icon (callout) */
+.lightbulb-icon {
+  --icon-foreground: #0f172a;
+  --icon-background: white;
+}
+
+.icon-bg-fill {
+  fill: var(--icon-background);
+}
+
+.icon-fg-fill {
+  fill: var(--icon-foreground);
+}
+
+.lightbulb-light {
+  display: block;
+}
+
+.lightbulb-dark {
+  display: none;
+}
+
+:is(html[style*="color-scheme: dark"]) .lightbulb-light {
+  display: none;
+}
+
+:is(html[style*="color-scheme: dark"]) .lightbulb-dark {
+  display: inline;
+}
+
 .edit-page:after {
   content: "➚";
-  @apply pl-1;
+  padding-left: 0.25rem;
 }
 
 .prose details {
-  @apply px-6 py-3 mb-6 -mt-0 border rounded-xl dark:border-slate-800;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+
+  :is(html[style*="color-scheme: dark"]) & {
+    border-color: #1e293b;
+  }
 }
 
 .prose summary {
-  @apply font-medium cursor-default select-none text-slate-900 dark:text-slate-200;
+  font-weight: 500;
+  cursor: default;
+  user-select: none;
+  color: #0f172a;
+
+  :is(html[style*="color-scheme: dark"]) & {
+    color: #e2e8f0;
+  }
 }
 
 .prose summary h1,
 .prose summary h2,
 .prose summary h3 {
-  @apply inline m-0;
+  display: inline;
+  margin: 0;
 }
 
 .prose pre {
   max-height: 520px;
 }
 
+/* Styled links used in Links component */
+.styled-link {
+  --link-prose-background: #fff;
+  --link-prose-underline: #7dd3fc;
+  --link-prose-underline-size: 4px;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow:
+    inset 0 -2px 0 0 var(--link-prose-background),
+    inset 0 calc(-1 * (var(--link-prose-underline-size) + 2px)) 0 0 var(--link-prose-underline);
+}
+
+.styled-link:hover {
+  --link-prose-underline-size: 6px;
+}
+
+:is(html[style*="color-scheme: dark"]) .styled-link {
+  --link-prose-background: #0f172a;
+  --link-prose-underline: #075985;
+
+  color: #38bdf8;
+  box-shadow: inset 0 calc(-1 * var(--link-prose-underline-size, 2px)) 0 0
+    var(--link-prose-underline);
+}
+
+:is(html[style*="color-scheme: dark"]) .styled-link:hover {
+  --link-prose-underline-size: 6px;
+}

package/src/site-css/featured-demo.css

@@ -1,9 +1,15 @@
 .featured-demo .glimdown-render,
 .featured-demo .repl-sdk__demo {
-  @apply w-full max-w-full p-20 bg-gradient-to-r from-violet-600 to-indigo-600 rounded-xl max-h-80 text-slate-50;
+  width: 100%;
+  max-width: 100%;
+  padding: 5rem;
+  background: linear-gradient(to right, #7c3aed, #4f46e5);
+  border-radius: 0.75rem;
+  max-height: 20rem;
+  color: #f8fafc;
 }
 
 .featured-demo.auto-height .glimdown-render,
 .featured-demo.auto-height .repl-sdk__demo {
-  @apply max-h-none;
+  max-height: none;
 }