Convert docs to GTS

docs/app/app.ts

@@ -2,26 +2,12 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
-import Prism from 'prismjs';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-handlebars';
-import 'prismjs/components/prism-markup-templating';
-// @ts-expect-error no types shipped from prismjs-glimmer
-import { setup } from 'prismjs-glimmer';
-
-import 'prismjs/themes/prism.css';
 
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-setup(Prism);
-
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;

docs/app/components/code-block.ts → docs/app/components/code-block.gts

@@ -1,12 +1,11 @@
 import Component from '@glimmer/component';
+import CodeInline from './code-inline';
 
 interface CodeBlockSignature {
   Element: HTMLElement;
   Args: {
     code: string;
     language?: string;
-    showLineNumbers?: boolean;
-    start?: string;
   };
 }
 
@@ -15,9 +14,13 @@ export default class CodeBlock extends Component<CodeBlockSignature> {
     return this.args.language ?? 'markup';
   }
 
-  get languageClass() {
-    return `language-${this.language}`;
-  }
+  <template>
+    <div class="code-block">
+      {{~! ~}}
+      <CodeInline ...attributes @code={{@code}} @language={{@language}} />
+      {{~! ~}}
+    </div>
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {

docs/app/components/code-example.gts

@@ -0,0 +1,142 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { eq, and } from 'ember-truth-helpers';
+import CodeBlock from './code-block';
+// @ts-expect-error Could not find a declaration file for module 'ember-code-snippet'.
+import { getCodeSnippet } from 'ember-code-snippet';
+
+interface CodeExampleSignature {
+  Element: HTMLElement;
+  Args: {
+    glimmerTs?: string;
+    hbs?: string;
+    hbs2?: string;
+    js?: string;
+    css?: string;
+    scss?: string;
+    activeTab?: string;
+    showResult?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class CodeExample extends Component<CodeExampleSignature> {
+  @tracked _activeTab: string = '';
+
+  get showResult() {
+    return this.args.showResult !== undefined ? this.args.showResult : true;
+  }
+
+  get activeTab() {
+    return (
+      this._activeTab ||
+      (this.showResult ? 'result' : this.args.activeTab || 'js')
+    );
+  }
+
+  @action
+  setActiveTab(value: string) {
+    this._activeTab = value;
+  }
+
+  <template>
+    <article class="code-example" ...attributes>
+      <nav class="code-example-tabs">
+        {{#if @glimmerTs}}
+          <div
+            class="code-example-tab
+              {{if (eq this.activeTab 'glimmer-ts') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "glimmer-ts")}}
+          >Template</div>
+        {{/if}}
+        {{#if @hbs}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'hbs') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "hbs")}}
+          >Template</div>
+        {{/if}}
+        {{#if @hbs2}}
+          <div
+            class="code-sample-tab {{if (eq this.activeTab 'hbs2') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "hbs2")}}
+          >Template 2</div>
+        {{/if}}
+        {{#if @js}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'js') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "js")}}
+          >Javascript</div>
+        {{/if}}
+        {{#if @scss}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'scss') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "scss")}}
+          >SCSS</div>
+        {{/if}}
+        {{#if @css}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'css') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "css")}}
+          >CSS</div>
+        {{/if}}
+        {{#if this.showResult}}
+          <div
+            class="code-example-tab
+              {{if (eq this.activeTab 'result') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "result")}}
+          >Result</div>
+        {{/if}}
+      </nav>
+      {{#if (and @glimmerTs (eq this.activeTab "glimmer-ts"))}}
+        {{#let (getCodeSnippet @glimmerTs) as |snippet|}}
+          <CodeBlock @language="gts" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @hbs (eq this.activeTab "hbs"))}}
+        {{#let (getCodeSnippet @hbs) as |snippet|}}
+          <CodeBlock @language="handlebars" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if @hbs2}}
+        {{#let (getCodeSnippet @hbs2) as |snippet|}}
+          <CodeBlock @language="handlebars" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @js (eq this.activeTab "js"))}}
+        {{#let (getCodeSnippet @js) as |snippet|}}
+          <CodeBlock @language="js" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @scss (eq this.activeTab "scss"))}}
+        {{#let (getCodeSnippet @scss) as |snippet|}}
+          <CodeBlock @language="scss" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @css (eq this.activeTab "css"))}}
+        {{#let (getCodeSnippet @css) as |snippet|}}
+          <CodeBlock @language="css" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and this.showResult (has-block))}}
+        <div
+          class="code-example-snippet result
+            {{if (eq this.activeTab 'result') 'active'}}"
+        >
+          {{yield}}
+        </div>
+      {{/if}}
+    </article>
+  </template>
+}

docs/app/components/code-inline.ts → docs/app/components/code-inline.gts

@@ -3,7 +3,8 @@ import { modifier } from 'ember-modifier';
 import { htmlSafe, type SafeString } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
-import Prism from 'prismjs';
+import { codeToHtml } from 'shiki';
+import { task } from 'ember-concurrency';
 
 interface CodeInlineSignature {
   Element: HTMLElement;
@@ -23,10 +24,6 @@ export default class CodeInline extends Component<CodeInlineSignature> {
       "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
       code !== undefined,
     );
-    if (Prism?.plugins['NormalizeWhitespace']) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-      return Prism.plugins['NormalizeWhitespace'].normalize(code) as string;
-    }
 
     return code;
   }
@@ -35,28 +32,27 @@ export default class CodeInline extends Component<CodeInlineSignature> {
     return this.args.language ?? 'markup';
   }
 
-  get languageClass() {
-    return `language-${this.language}`;
-  }
+  setup = modifier(() => {
+    void this.generateCode.perform();
+  });
 
-  setPrismCode = modifier((element: Element) => {
+  generateCode = task(async () => {
     const code = this.code;
     const language = this.language;
-    const grammar = Prism.languages[language];
-
-    if (code && language && grammar) {
-      this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
-    } else {
-      this.prismCode = '';
-    }
 
-    // Force plugin initialization, required for Prism.highlight usage.
-    // See https://github.com/PrismJS/prism/issues/1234
-    Prism.hooks.run('complete', {
-      code,
-      element,
+    const htmlCode = await codeToHtml(code, {
+      lang: language,
+      theme: 'github-light-default',
     });
+
+    this.prismCode = htmlSafe(htmlCode);
   });
+
+  <template>
+    <div ...attributes {{this.setup}}>
+      {{~! ~}}{{this.prismCode}}{{~! ~}}
+    </div>
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {

docs/app/components/snippets/animations-1.gts

@@ -0,0 +1,13 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Animate me</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel width-300 slide-fade">
+      <li>Miguel</li>
+      <li>Matthew</li>
+      <li>Dan</li>
+    </dd.Content>
+  </BasicDropdown>
+</template>