@universal-ember/docs-support 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-ember/docs-support",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -13,9 +13,6 @@
       "types": "./declarations/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./tailwind": {
-      "import": "./tailwind.mjs"
-    },
     "./*": {
       "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
@@ -31,7 +28,6 @@
   },
   "files": [
     "addon-main.cjs",
-    "tailwind.mjs",
     "declarations",
     "dist",
     "src"
@@ -39,40 +35,39 @@
   "dependencies": {
     "@embroider/addon-shim": "^1.10.2",
     "@fontsource/lexend": "^5.2.11",
-    "@tailwindcss/typography": "^0.5.15",
     "change-case": "^5.4.4",
-    "decorator-transforms": "^2.3.0",
+    "decorator-transforms": "2.3.1",
     "ember-mobile-menu": "^6.0.0",
-    "ember-modifier": "^4.2.2",
+    "ember-modifier": "^4.3.0",
     "ember-resources": "^7.0.7",
     "inter-ui": "^4.0.2",
-    "kolay": "^4.1.0",
+    "kolay": "^5.1.2",
     "package-up": "^5.0.0",
     "read-package-up": "^12.0.0",
     "should-handle-link": "^1.2.2",
-    "tailwindcss": "^3.4.14",
-    "ember-primitives": "^0.53.0"
+    "ember-primitives": "^0.54.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/plugin-transform-typescript": "^7.28.5",
-    "@babel/runtime": "^7.28.4",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-typescript": "^7.28.6",
+    "@babel/runtime": "^7.28.6",
     "@ember/library-tsconfig": "^2.0.0",
-    "@embroider/addon-dev": "^8.2.0",
+    "@embroider/addon-dev": "^8.3.0",
     "@glimmer/component": "^2.0.0",
-    "@glint/ember-tsc": "^1.0.9",
-    "@glint/template": "^1.7.3",
-    "@glint/tsserver-plugin": "^2.0.9",
+    "@glint/ember-tsc": "^1.1.1",
+    "@glint/template": "1.7.4",
+    "@glint/tsserver-plugin": "^2.1.0",
     "@nullvoxpopuli/eslint-configs": "^5.5.0",
     "@rollup/plugin-babel": "^6.1.0",
-    "babel-plugin-ember-template-compilation": "^3.0.1",
+    "babel-plugin-ember-template-compilation": "^4.0.0",
     "concurrently": "^9.2.1",
-    "ember-source": "^6.10.0",
+    "ember-scoped-css": "^2.0.4",
+    "ember-source": "^6.10.1",
     "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",
-    "prettier": "^3.7.4",
-    "prettier-plugin-ember-template-tag": "^2.1.2",
-    "rollup": "^4.55.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-ember-template-tag": "^2.1.3",
+    "rollup": "^4.57.1",
     "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.9.3"
   },
@@ -92,12 +87,14 @@
   "scripts": {
     "build": "rollup --config",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
-    "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:'",
+    "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:' && pnpm format",
     "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "ember-tsc --noEmit",
+    "lint:prettier": "prettier --check .",
+    "format": "prettier --write .",
     "dev": "rollup --config --watch --no-watch.clearScreen",
     "start": "rollup --config --watch --no-watch.clearScreen"
   }

package/src/article.gts

@@ -1,42 +1,7 @@
 import type { TOC } from '@ember/component/template-only';
 
-/**
- * TODO: use CSS, this is silly.
- */
-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={{proseClasses}} ...attributes>
+  <article class="prose" ...attributes>
     {{yield}}
   </article>
 </template>;

package/src/callout.gts

@@ -3,16 +3,56 @@ import { LightBulb } from './icons.gts';
 import type { TOC } from '@ember/component/template-only';
 
 export const Callout: TOC<{ Blocks: { default: [] } }> = <template>
-  <div
-    class="flex p-6 my-8 rounded-3xl bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10"
-  >
-    <LightBulb class="flex-none w-8 h-8" />
-    <div class="flex-auto min-w-0 ml-4">
-      <div
-        class="text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 dark:text-slate-50 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-      >
+  <div class="callout">
+    <LightBulb class="callout__icon" />
+    <div class="callout__body">
+      <div class="callout__content">
         {{yield}}
       </div>
     </div>
   </div>
+
+  <style scoped>
+    .callout {
+      display: flex;
+      padding: 1.5rem;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      border-radius: 1.5rem;
+      background-color: #f0f9ff;
+    }
+
+    :is(html[style*="color-scheme: dark"]) .callout {
+      background-color: rgb(30 41 59 / 0.6);
+      outline: 1px solid rgb(203 213 225 / 0.1);
+    }
+
+    .callout__icon {
+      flex: none;
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .callout__body {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin-left: 1rem;
+    }
+
+    .callout__content {
+      color: #075985;
+    }
+
+    .callout__content > *:first-child {
+      margin-top: 0;
+    }
+
+    .callout__content > *:last-child {
+      margin-bottom: 0;
+    }
+
+    :is(html[style*="color-scheme: dark"]) .callout__content {
+      color: #f8fafc;
+    }
+  </style>
 </template>;

package/src/errors.gts

@@ -1,19 +1,30 @@
+import { PageError } from './page-layout.gts';
+
 import type { TOC } from '@ember/component/template-only';
 
 export const OopsError: TOC<{
-  Args: { error: string };
+  Args: { error: any };
   Blocks: { default: [] };
 }> = <template>
   <div
     data-page-error
-    class="dark:text-white text:slate-900"
+    class="adaptive-text"
     style="border: 1px solid red; padding: 1rem; word-break: break-all;"
   >
     <h1>Oops!</h1><br />
-    {{@error}}
+    <PageError @error={{@error}} />
 
     <br />
     <br />
     {{yield}}
   </div>
+
+  <style scoped>
+    .adaptive-text {
+      color: #0f172a;
+    }
+    :is(html[style*="color-scheme: dark"]) .adaptive-text {
+      color: white;
+    }
+  </style>
 </template>;

package/src/h2.gts

@@ -1,5 +1,5 @@
 import type { TOC } from '@ember/component/template-only';
 
 export const H2: TOC<{ Blocks: { default: [] } }> = <template>
-  <h2 class="text-3xl">{{yield}}</h2>
+  <h2 style="font-size: 1.875rem; line-height: 2.25rem;">{{yield}}</h2>
 </template>;

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.css

@@ -19,4 +19,3 @@ body.dark .gradient-background {
     background-position: 0% 50%;
   }
 }
-

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/index.gts

@@ -3,9 +3,9 @@ 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 { InternalLink, Link } from './links.gts';
 export { ResponsiveMenuLayout } from './menu-layout.gts';
-export { PageLayout, TopRight } from './page-layout.gts';
+export { hasReason, PageError, PageLayout, PageLoader, TopRight } from './page-layout.gts';
 export { Shell } from './shell.gts';
 export { Text } from './text.gts';
 export { ThemeToggle } from './theme-toggle.gts';

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>;