More Docs, Polish, etc

docs-app/app/index.html

@@ -47,7 +47,7 @@
 
     <div id="kolay__loading">
       Kolay
-      <article aria-busy="true"></article>
+      <div aria-busy="true"></div>
     </div>
 
     {{content-for "body-footer"}}

docs-app/app/routes/application.ts

@@ -24,6 +24,7 @@ export default class ApplicationRoute extends Route {
         import('shiki/langs/html.mjs'),
         import('shiki/langs/glimmer-js.mjs'),
         import('shiki/langs/glimmer-ts.mjs'),
+        import('shiki/langs/handlebars.mjs'),
       ],
       langAlias: {
         gjs: 'glimmer-js',

docs-app/app/templates/application.gjs

@@ -25,8 +25,8 @@ export default Route(
 
     </div>
     <style>
-      .application__layout { display: grid; grid-template-columns: max-content 1fr; gap: 2rem; }
-      header { filter: drop-shadow(0 10px 0.75rem #000000); }
+      .application__layout { display: grid; grid-template-columns: max-content 1fr; gap: 2rem;
+      padding-top: 1rem; } header { border-bottom: 1px solid currentColor; }
     </style>
   </template>
 );

docs-app/app/templates/nav.gts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 
-import { pascalCase } from 'change-case';
+import { pascalCase, sentenceCase } from 'change-case';
 
 import type { TOC } from '@ember/component/template-only';
 import type RouterService from '@ember/routing/router-service';
@@ -36,7 +36,7 @@ function nameFor(x: Page) {
     return `<${pascalCase(x.name)} />`;
   }
 
-  return x.name;
+  return sentenceCase(x.name);
 }
 
 const Pages: TOC<{ Args: { item: Page | Collection } }> = <template>
@@ -45,7 +45,7 @@ const Pages: TOC<{ Args: { item: Page | Collection } }> = <template>
       {{#each @item.pages as |page|}}
         <li>
           {{#if (isCollection page)}}
-            {{page.name}}
+            {{sentenceCase page.name}}
           {{/if}}
 
           <Pages @item={{page}} />

docs-app/app/templates/page.gjs

@@ -1,25 +1,26 @@
-import { service } from 'ember-primitives/helpers';
 import Route from 'ember-route-template';
+import { Page } from 'kolay/components';
 
 function removeLoader() {
   document.querySelector('#kolay__loading')?.remove();
 }
 
 export default Route(
   <template>
-    {{#let (service "kolay/docs") as |docs|}}
-      <div data-prose class="prose p-4">
-        {{#if docs.selected.hasError}}
+    <div>
+      <Page>
+        <:error as |error|>
           <div style="border: 1px solid red; padding: 1rem;">
-            {{docs.selected.error}}
+            {{error}}
           </div>
-        {{/if}}
+        </:error>
 
-        {{#if docs.selected.prose}}
-          <docs.selected.prose />
+        <:success as |Prose|>
+          <Prose />
           {{(removeLoader)}}
-        {{/if}}
-      </div>
-    {{/let}}
+        </:success>
+
+      </Page>
+    </div>
   </template>
 );

docs-app/ember-cli-build.js

@@ -20,7 +20,7 @@ module.exports = async function (defaults) {
     staticHelpers: true,
     staticModifiers: true,
     staticComponents: true,
-    staticEmberSource: true,
+    staticEmberSource: false,
     skipBabel: [
       {
         package: 'qunit',

docs-app/package.json

@@ -23,7 +23,7 @@
     "lint:prettier": "prettier . --check",
     "lint:prettier:fix": "prettier . --write",
     "start": "concurrently 'ember serve' 'pnpm _syncPnpm --watch' --names 'serve,sync'",
-    "_syncPnpm": "pnpm sync-dependencies-meta-injected",
+    "_syncPnpm": "DEBUG=* pnpm sync-dependencies-meta-injected",
     "test:ember": "ember test"
   },
   "devDependencies": {
@@ -98,7 +98,7 @@
   "dependencies": {
     "@shikijs/rehype": "^1.1.7",
     "@universal-ember/kolay-ui": "workspace:^",
-    "@universal-ember/test-support": "^0.1.1",
+    "@universal-ember/test-support": "^0.2.0",
     "change-case": "^5.4.3",
     "ember-async-data": "^1.0.3",
     "ember-cached-decorator-polyfill": "^1.0.2",

docs-app/public/docs/usage/rendering-pages.md

@@ -0,0 +1,71 @@
+## Rendering Pages
+
+The way this the docs app for Kolay renders pages looks like this:
+
+```gjs
+// app/templates/page.gjs
+import Route from "ember-route-template";
+import { Page } from "kolay/components";
+
+// Removes the App Shell / welcome UI
+// before initial rending and chunk loading finishes
+function removeLoader() {
+  document.querySelector("#kolay__loading")?.remove();
+}
+
+export default Route(
+  <template>
+    <div>
+      <Page>
+
+        <:error as |error|>
+          <div style="border: 1px solid red; padding: 1rem;">
+            {{error}}
+          </div>
+        </:error>
+
+        <:success as |prose|>
+          <prose />
+          {{(removeLoader)}}
+        </:success>
+
+      </Page>
+    </div>
+  </template>,
+);
+```
+
+If you want to render a page within a page, you can do that with the `Compiled` helper. This will use your site-wide configuration so all the remark plugins, rehype plugins, extra modules, etc will all be used when you use `Compiled`.
+
+```gjs live preview no-shadow
+import { Compiled } from "kolay";
+
+// Maybe you got this content from an API
+const page = `
+  Hello World!
+
+  Let's install Rust!
+
+  \`\`\`bash
+  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+  \`\`\`
+
+  As recommended from [rust-lang.org](https://www.rust-lang.org/tools/install)
+`;
+
+<template>
+  <fieldset><legend>Demo</legend>
+
+    {{#let (Compiled page) as |compiled|}}
+      {{#if compiled.component}}
+        <compiled.component />
+      {{/if}}
+    {{/let}}
+
+  </fieldset>
+
+  <style>
+    fieldset { border: 1px solid #ccc; padding: 1rem; }
+  </style>
+</template>
+```

docs-app/tests/kolay/markdown/rendering-test.gjs

@@ -6,6 +6,8 @@ import { setupRenderingTest } from 'ember-qunit';
 import { use } from 'ember-resources';
 import { Compiled } from 'kolay';
 
+import { getService } from '@universal-ember/test-support';
+
 module('Markdown | Rendering', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -80,10 +82,10 @@ module('Markdown | Rendering', function (hooks) {
       '<hr>\n' +
       '```\n';
 
+    getService('kolay/docs').additionalTopLevelScope = { Response };
+
     class Demo {
-      @use doc = Compiled(() => doc, {
-        topLevelScope: { Response },
-      });
+      @use doc = Compiled(doc);
     }
 
     let state = new Demo();

package.json

@@ -25,6 +25,11 @@
       "import": "./src/browser/re-exports.js",
       "default": "./src/browser/re-exports.js"
     },
+    "./components": {
+      "types": "./src/browser/components.d.ts",
+      "import": "./src/browser/components.js",
+      "default": "./src/browser/components.js"
+    },
     "./build": {
       "types": "./declarations/plugins/index.d.ts",
       "import": "./src/plugins/index.js"
@@ -184,7 +189,7 @@
     "ember-primitives": "^0.11.3",
     "ember-repl": "^4.1.1",
     "ember-resources": "^7.0.0",
-    "ember-source": "~5.5.0",
+    "ember-source": ">= 5.7.0",
     "reactiveweb": "^1.2.1",
     "tracked-built-ins": "^3.3.0"
   }