Convert docs to vite and gts & fix some typing issues in addon

docs/.ember-cli

@@ -3,5 +3,17 @@
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": true
+  "isTypeScriptProject": true,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "loose",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "loose"
 }

docs/.gitignore

@@ -1,3 +1,5 @@
+/tmp/
+
 # compiled output
 /dist/
 /declarations/

docs/app/app.ts

@@ -1,36 +1,26 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from 'docs/config/environment';
+import config from './config/environment';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 import { registerDateLibrary } from 'ember-power-calendar';
 import DateUtils from 'ember-power-calendar-moment';
-import Prism from 'prismjs';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-less';
-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';
+import compatModules from '@embroider/virtual/compat-modules';
+import 'moment/dist/locale/es';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/fr';
+import 'moment/dist/locale/pt';
 
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-setup(Prism);
-
 registerDateLibrary(DateUtils);
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

docs/app/components/calendar-nav-with-year-buttons.gts

@@ -0,0 +1,36 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import PowerCalendarNav from 'ember-power-calendar/components/power-calendar/nav';
+import { formatDate } from 'ember-power-calendar/utils';
+
+export default class CalendarNavWithYearButtons extends PowerCalendarNav {
+  <template>
+    {{#if @calendar.actions.moveCenter}}
+      <nav class="ember-power-calendar-nav">
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter -12 "month" @calendar)}}
+          type="button"
+        >«</button>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter -1 "month" @calendar)}}
+          type="button"
+        >‹</button>
+        <div class="ember-power-calendar-nav-title">
+          {{formatDate @calendar.center "MMMM YYYY"}}
+        </div>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter 1 "month" @calendar)}}
+          type="button"
+        >›</button>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter 12 "month" @calendar)}}
+          type="button"
+        >»</button>
+      </nav>
+    {{/if}}
+  </template>
+}

docs/app/components/code-block.gts

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import CodeInline from './code-inline';
+
+interface CodeBlockSignature {
+  Element: HTMLElement;
+  Args: {
+    fileName: string;
+    language?: string;
+    class?: string;
+  };
+}
+
+export default class CodeBlock extends Component<CodeBlockSignature> {
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  <template>
+    <div class="code-block {{@class}}">
+      {{~! ~}}
+      <CodeInline
+        ...attributes
+        @fileName={{@fileName}}
+        @language={{@language}}
+      />
+      {{~! ~}}
+    </div>
+  </template>
+}

docs/app/components/code-example.gts

@@ -0,0 +1,163 @@
+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';
+
+interface CodeExampleSignature {
+  Element: HTMLElement;
+  Args: {
+    glimmerTs?: string;
+    hbs?: string;
+    hbs2?: string;
+    js?: string;
+    css?: string;
+    scss?: string;
+    activeTab?: string;
+    showResult?: boolean;
+    codeBlockClass?: string;
+  };
+  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 @glimmerTs}}
+        {{#if (eq this.activeTab "glimmer-ts")}}
+          <CodeBlock
+            @language="gts"
+            @fileName={{@glimmerTs}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @hbs}}
+        {{#if (eq this.activeTab "hbs")}}
+          <CodeBlock
+            @language="handlebars"
+            @fileName={{@hbs}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @hbs2}}
+        <CodeBlock
+          @language="handlebars"
+          @fileName={{@hbs2}}
+          @class={{@codeBlockClass}}
+        />
+      {{/if}}
+      {{#if @js}}
+        {{#if (eq this.activeTab "js")}}
+          <CodeBlock
+            @language="js"
+            @fileName={{@js}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @scss}}
+        {{#if (eq this.activeTab "scss")}}
+          <CodeBlock
+            @language="scss"
+            @fileName={{@scss}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @css}}
+        {{#if (eq this.activeTab "css")}}
+          <CodeBlock
+            @language="css"
+            @fileName={{@css}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if (and this.showResult (has-block))}}
+        <div
+          class="code-example-snippet result
+            {{if (eq this.activeTab 'result') 'active'}}"
+        >
+          {{yield}}
+        </div>
+      {{/if}}
+    </article>
+  </template>
+}