Start using Kolay

dev/package.json

@@ -25,10 +25,10 @@
     "@babel/core": "^7.23.9",
     "@babel/eslint-parser": "^7.23.10",
     "@nullvoxpopuli/eslint-configs": "^3.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "eslint": "^8.56.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "typescript": "^5.3.3"
   },
   "scripts": {

docs-app/.eslintrc.js

@@ -25,5 +25,11 @@ module.exports = {
         '@typescript-eslint/no-explicit-any': 'off',
       },
     },
+    {
+      files: ['*.{js,cjs}'],
+      rules: {
+        'n/no-unsupported-features': 'off',
+      },
+    },
   ],
 };

docs-app/.template-lintrc.js

@@ -4,5 +4,7 @@ module.exports = {
   extends: 'recommended',
   rules: {
     'no-forbidden-elements': 'off',
+    'no-shadowed-elements': 'off',
+    'no-inline-styles': 'off',
   },
 };

docs-app/app/components/nav.gts

@@ -2,13 +2,14 @@ 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 { isLink } from 'ember-primitives/proper-links';
+import { PageNav } from 'kolay/components';
 
 import type { TOC } from '@ember/component/template-only';
-import type DocsService from 'docs-app/services/docs';
-import type { Page } from 'docs-app/services/types';
 import type UI from 'docs-app/services/ui';
+import type { DocsService, Page } from 'kolay';
 
 /**
  * Converts 1-2-hyphenated-thing
@@ -18,23 +19,31 @@ import type UI from 'docs-app/services/ui';
 const titleize = (str: string) => {
   return (
     str
-      .split('-')
+      .split(/-|\s/)
+      .filter(Boolean)
       .filter((text) => !text.match(/^[\d]+$/))
       .map((text) => `${text[0]?.toLocaleUpperCase()}${text.slice(1, text.length)}`)
       .join(' ')
       .split('.')[0] || ''
   );
 };
 
+function nameFor(x: Page) {
+  // We defined componentName via json file
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if ('componentName' in x) {
+    return `${x.componentName}`;
+  }
+
+  return sentenceCase(x.name);
+}
+
 const asComponent = (str: string) => {
   return `<${str.split('.')[0]?.replaceAll(' ', '')} />`;
 };
 
-const isComponents = (str: string) => str === 'components';
-const isLoneIndex = (pages: Page[]) =>
-  (pages.length === 1 && pages[0]?.name === 'index.md') || pages[0]?.name === 'intro.md';
-
 const unExct = (str: string) => str.replace(/\.md$/, '');
+const isComponents = (str: string) => str === 'components';
 
 const SectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; name: string } }> =
   <template>
@@ -53,7 +62,7 @@ const SectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; name:
         {{#if (isComponents @name)}}
           {{asComponent (titleize @name)}}
         {{else}}
-          {{(titleize @name)}}
+          {{titleize @name}}
         {{/if}}
       </a>
     {{/let}}
@@ -64,7 +73,7 @@ const SubSectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; na
     {{#let (link (unExct @href)) as |l|}}
       <a
         href={{unExct @href}}
-        class="block w-full pl-3.5 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
+        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'
@@ -76,14 +85,14 @@ const SubSectionLink: TOC<{ Element: HTMLAnchorElement; Args: { href: string; na
         {{#if (isComponents @name)}}
           {{asComponent (titleize @name)}}
         {{else}}
-          {{(titleize @name)}}
+          {{titleize @name}}
         {{/if}}
       </a>
     {{/let}}
   </template>;
 
 export class Nav extends Component {
-  @service declare docs: DocsService;
+  @service('kolay/docs') declare docs: DocsService;
   @service declare ui: UI;
 
   get humanSelected() {
@@ -94,10 +103,6 @@ export class Nav extends Component {
     return path.split('/').filter(Boolean).map(titleize).join(' / ');
   }
 
-  isSelected = ({ path }: { path: string }) => {
-    return this.docs.selected?.path === path;
-  };
-
   closeNav = (event: Event) => {
     if (!isLink(event)) return;
 
@@ -117,47 +122,42 @@ export class Nav extends Component {
    *  The links themselves remain the actual interactive elements.
    */
   <template>
-    <div class="fixed inset-0 z-10 pointer-events-none lg:relative lg:block lg:flex-none">
+    <div class="relative inset-0 z-10 pointer-events-none lg:relative lg:block lg:flex-none">
       <div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden hidden lg:block" />
       <div
         class="absolute bottom-0 right-0 hidden w-px h-12 top-16 bg-gradient-to-t from-slate-800 dark:block"
       />
       <div class="absolute bottom-0 right-0 hidden w-px top-28 bg-slate-800 dark:block" />
+      {{! changed from sticky to relative because the CSS with sticky in this component is not cross-browser compatible }}
       <div
-        class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 pointer-events-auto overflow-y-auto overflow-x-hidden overscroll-contain py-8 lg:py-16 pl-8 pr-8 xl:w-72 xl:pr-16 bg-slate-50 dark:bg-slate-800 lg:bg-transparent dark:lg:bg-transparent shadow-xl lg:shadow-none lg:pl-0.5 transition-transform lg:translate-x-0
+        class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 pointer-events-auto overflow-y-auto overflow-x-hidden overscroll-contain py-4 lg:py-4 pl-4 pr-8 xl:w-72 xl:pr-16 bg-slate-50 dark:bg-slate-800 lg:bg-transparent dark:lg:bg-transparent shadow-xl lg:shadow-none lg:pl-0.5 transition-transform lg:translate-x-0
           {{if this.ui.isNavOpen 'translate-x-0' '-translate-x-full'}}"
       >
-        <nav aria-label="Main Navigation" class="text-base lg:text-sm">
-          <ul role="list" class="space-y-9">
-            {{#each-in this.docs.grouped as |group pages|}}
-              <li>
-                {{#if (isLoneIndex pages)}}
-                  {{#each pages as |page|}}
-                    <SectionLink @name={{group}} @href={{page.path}} {{on "click" this.closeNav}} />
-                  {{/each}}
-                {{else}}
-                  <h2 class="font-medium font-display text-slate-900 dark:text-white">
-                    {{titleize group}}
-                  </h2>
-                  <ul
-                    role="list"
-                    class="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800"
-                  >
-                    {{#each pages as |page|}}
-                      <li class="relative">
-                        <SubSectionLink
-                          @name={{page.name}}
-                          @href={{page.path}}
-                          {{on "click" this.closeNav}}
-                        />
-                      </li>
-                    {{/each}}
-                  </ul>
-                {{/if}}
-              </li>
-            {{/each-in}}
-          </ul>
-        </nav>
+        <aside>
+          <PageNav aria-label="Main Navigation">
+            <:page as |x|>
+              <SubSectionLink
+                @href={{x.page.path}}
+                @name={{nameFor x.page}}
+                {{on "click" this.closeNav}}
+              />
+            </:page>
+
+            <:collection as |x|>
+              {{#if x.index}}
+                <SectionLink
+                  @href={{unExct x.index.page.path}}
+                  @name={{titleize x.collection.name}}
+                  {{on "click" this.closeNav}}
+                />
+              {{else}}
+                <h2>
+                  {{titleize x.collection.name}}
+                </h2>
+              {{/if}}
+            </:collection>
+          </PageNav>
+        </aside>
       </div>
       <div class="opacity-25 bg-slate-900"></div>
     </div>