From fd356ee2ff883c8a2232481e5df329bb18693bb6 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Fri, 8 Mar 2024 12:37:38 -0500 Subject: [PATCH 1/3] Progress on docs --- docs-app/app/index.html | 26 + docs-app/app/routes/application.ts | 46 +- docs-app/app/templates/application.gjs | 1 + docs-app/app/templates/nav.gts | 25 +- docs-app/app/templates/page.gjs | 12 +- docs-app/package.json | 9 +- docs-app/public/docs/usage/setup.md | 46 +- package.json | 8 +- pnpm-lock.yaml | 790 +++++++++++++------------ ui/docs/components/api-docs.json | 3 + ui/docs/components/logs.md | 14 +- ui/docs/components/meta.jsonc | 3 + ui/package.json | 9 +- ui/src/components/logs.gts | 26 +- ui/src/components/logs/scroller.gts | 37 ++ ui/src/highlight.ts | 65 -- ui/src/index.ts | 1 - ui/src/markdown/import-map.ts | 2 - ui/src/markdown/typedoc/renderer.gts | 3 +- ui/src/markdown/typedoc/utils.gts | 4 +- ui/src/services/kolay/docs.ts | 80 ++- ui/src/services/kolay/selected.ts | 3 + 22 files changed, 694 insertions(+), 519 deletions(-) create mode 100644 ui/docs/components/api-docs.json create mode 100644 ui/docs/components/meta.jsonc create mode 100644 ui/src/components/logs/scroller.gts delete mode 100644 ui/src/highlight.ts diff --git a/docs-app/app/index.html b/docs-app/app/index.html index 3511222b..8f858ce0 100644 --- a/docs-app/app/index.html +++ b/docs-app/app/index.html @@ -16,6 +16,27 @@ {{content-for "head-footer"}} + + @@ -24,6 +45,11 @@ +
+ Kolay +
+
+ {{content-for "body-footer"}} diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts index 17063058..4de649d1 100644 --- a/docs-app/app/routes/application.ts +++ b/docs-app/app/routes/application.ts @@ -1,19 +1,57 @@ import Route from '@ember/routing/route'; import { service } from '@ember/service'; +import rehypeShikiFromHighlighter from '@shikijs/rehype/core'; +import { colorScheme, sync } from 'ember-primitives/color-scheme'; +import { getHighlighterCore } from 'shiki/core'; +import getWasm from 'shiki/wasm'; + +sync(); + import type { DocsService, Manifest } from 'kolay'; export default class ApplicationRoute extends Route { @service('kolay/docs') declare docs: DocsService; async model(): Promise<{ manifest: Manifest }> { + const highlighter = await getHighlighterCore({ + themes: [import('shiki/themes/github-dark.mjs'), import('shiki/themes/github-light.mjs')], + langs: [ + import('shiki/langs/javascript.mjs'), + import('shiki/langs/typescript.mjs'), + import('shiki/langs/bash.mjs'), + import('shiki/langs/css.mjs'), + import('shiki/langs/html.mjs'), + import('shiki/langs/glimmer-js.mjs'), + import('shiki/langs/glimmer-ts.mjs'), + ], + langAlias: { + 'gjs': 'glimmer-js', + 'gts': 'glimmer-ts', + }, + loadWasm: getWasm, + }); + await this.docs.setup({ - apiDocs: await import('kolay/api-docs:virtual'), - manifest: await import('kolay/manifest:virtual'), + apiDocs: import('kolay/api-docs:virtual'), + manifest: import('kolay/manifest:virtual'), resolve: { - 'ember-primitives': await import('ember-primitives'), - kolay: await import('kolay'), + 'ember-primitives': import('ember-primitives'), + kolay: import('kolay'), }, + rehypePlugins: [ + [ + rehypeShikiFromHighlighter, + highlighter, + { + defaultColor: colorScheme.current === 'dark' ? 'dark' : 'light', + themes: { + light: 'github-light', + dark: 'github-dark', + }, + }, + ], + ], }); return { manifest: this.docs.manifest }; diff --git a/docs-app/app/templates/application.gjs b/docs-app/app/templates/application.gjs index 0caff2f9..63e50da5 100644 --- a/docs-app/app/templates/application.gjs +++ b/docs-app/app/templates/application.gjs @@ -26,6 +26,7 @@ export default Route( ); diff --git a/docs-app/app/templates/nav.gts b/docs-app/app/templates/nav.gts index 05a8a308..e078befb 100644 --- a/docs-app/app/templates/nav.gts +++ b/docs-app/app/templates/nav.gts @@ -1,6 +1,8 @@ import Component from '@glimmer/component'; import { service } from '@ember/service'; +import { pascalCase } from 'change-case'; + import type { TOC } from '@ember/component/template-only'; import type RouterService from '@ember/routing/router-service'; import type { Collection, DocsService, Page } from 'kolay'; @@ -9,10 +11,13 @@ export class Nav extends Component { @service('kolay/docs') declare docs: DocsService; } @@ -20,6 +25,20 @@ function isCollection(x: Page | Collection): x is Collection { return 'pages' in x; } +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}`; + } + + if (x.path.includes('/components/')) { + return `<${pascalCase(x.name)} />`; + } + + return x.name; +} + const Pages: TOC<{ Args: { item: Page | Collection } }> =