@universal-ember/docs-support 0.9.3 → 0.9.4

package/src/icons.gts

@@ -90,13 +90,7 @@ export const Moon: TOC<{ Element: SVGElement }> = <template>
 </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
-  >
+  <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" class="lightbulb-icon" ...attributes>
     <defs>
       <radialGradient
         cx="0"
@@ -120,25 +114,25 @@ export const LightBulb: TOC<{ Element: SVGElement }> = <template>
         <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">
+    <g class="lightbulb-light">
       <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)]"
+        class="icon-bg-fill"
         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)]"
+        class="icon-fg-fill"
       ></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)]"
+        class="icon-fg-fill"
       ></path>
     </g>
-    <g class="hidden dark:inline">
+    <g class="lightbulb-dark">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"

package/src/index-page.gts

@@ -14,17 +14,20 @@ export const IndexPage: TOC<{
     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">
+  <Hero class="index-hero gradient-background">
+    <header class="index-hero__header">
       {{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">
+    <div class="index-hero__body">
+      <div
+        style="width: 66%; margin: 0 auto; transform: translateY(-20%);"
+        class="index-hero__grid"
+      >
         <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">
+        <p class="index-hero__tagline">
           {{yield to="tagline"}}
         </p>
       </div>
@@ -35,7 +38,67 @@ export const IndexPage: TOC<{
   {{yield to="content"}}
 
   <hr />
-  <footer style="padding: 3rem; width: 66%;" class="mx-auto gap-12 flex-wrap flex justify-between">
+  <footer style="padding: 3rem; width: 66%;" class="index-footer">
     {{yield to="footer"}}
   </footer>
+
+  <style scoped>
+    .index-hero {
+      box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.05);
+    }
+
+    .index-hero__header {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 50;
+      padding: 1rem;
+      display: flex;
+      align-items: center;
+    }
+
+    @media (min-width: 768px) {
+      .index-hero__header {
+        position: sticky;
+        top: 0;
+      }
+    }
+
+    .index-hero__body {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .index-hero__grid {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .index-hero__tagline {
+      font-style: italic;
+      color: white;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (min-width: 768px) {
+      .index-hero__tagline {
+        width: 50%;
+      }
+    }
+
+    .index-footer {
+      margin-left: auto;
+      margin-right: auto;
+      gap: 3rem;
+      flex-wrap: wrap;
+      display: flex;
+      justify-content: space-between;
+    }
+  </style>
 </template>;

package/src/links.gts

@@ -2,21 +2,11 @@ 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>
+  <a class="styled-link" href="#" ...attributes>
     {{yield}}
   </a>
 </template>;
@@ -25,7 +15,7 @@ export const Link: TOC<{
   Element: HTMLAnchorElement;
   Blocks: { default: [] };
 }> = <template>
-  <ExternalLink class={{linkClasses}} ...attributes>
+  <ExternalLink class="styled-link" ...attributes>
     {{yield}}
   </ExternalLink>
 </template>;

package/src/menu-layout.gts

@@ -13,7 +13,7 @@ const Toggle: TOC<{
   };
 }> = <template>
   <@toggle>
-    <Menu class="w-6 h-6 stroke-slate-500" />
+    <Menu style="width: 1.5rem; height: 1.5rem; stroke: #64748b;" />
   </@toggle>
 </template>;
 
@@ -34,10 +34,23 @@ export const ResponsiveMenuLayout: TOC<{
       <div class="outer-content">
         <SideNav />
 
-        <main class="relative grid justify-center flex-auto w-full mx-auto max-w-8xl">
+        <main class="page-main">
           {{yield to="content"}}
         </main>
       </div>
     </mmw.Content>
   </MenuWrapper>
+
+  <style scoped>
+    .page-main {
+      position: relative;
+      display: grid;
+      justify-content: center;
+      flex: 1 1 auto;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 88rem;
+    }
+  </style>
 </template>;

package/src/page-layout.gts

@@ -118,30 +118,16 @@ export const PageLayout: TOC<{
 }> = <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>
@@ -149,7 +135,7 @@ 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>
@@ -167,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>
@@ -183,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>
@@ -192,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

@@ -77,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
       >
@@ -100,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
       >
@@ -149,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
@@ -174,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,22 +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;
 }