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..fddca79e 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 } }> =