From 688607e53ded5ea3df9ff4f75fc1b68eb39d0857 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 12:28:43 +0200
Subject: [PATCH 01/12] custom grammar docs

---
 docs-app/app/components/sidebar.gts     |  5 +++++
 docs-app/app/controllers/application.ts |  2 ++
 docs-app/app/templates/application.hbs  | 20 ++++++++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/docs-app/app/components/sidebar.gts b/docs-app/app/components/sidebar.gts
index 129d658..c7ea130 100644
--- a/docs-app/app/components/sidebar.gts
+++ b/docs-app/app/components/sidebar.gts
@@ -52,6 +52,7 @@ const Sidebar: TOC<{}> = <template>
         <SidebarItem @text='Glint types' />
         <SidebarItem @text='Configure (optional)' />
         <Separator />
+
         <SidebarTitle @text='Options' />
         <SidebarItem @text='Language' />
         <SidebarItem @text='Theme' />
@@ -62,6 +63,10 @@ const Sidebar: TOC<{}> = <template>
         <SidebarItem @text='Line highlighting' />
         <SidebarItem @text='Loading state' />
         <SidebarItem @text='Custom fonts' />
+        <Separator />
+
+        <SidebarTitle @text='Advanced' />
+        <SidebarItem @text='Custom grammar' />
       </ul>
 
       <p class="text-xs text-gray-500 mt-4">Built by
diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index a5bcb88..2af8842 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -158,6 +158,8 @@ function foo(x, y) {
   </Tab>
 </CodeGroup>`;
 
+  loadCustomGrammar = ``;
+
   changeTheme = (event: Event) => {
     this.theme = (event.target as HTMLSelectElement).value;
   };
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index e19fd06..139189e 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -340,6 +340,26 @@ function foo(x, y) {
       </div>
       <CodeBlock @code={{this.fontComicSans}} @language="hbs" />
 
+      <hr class="my-16 h-px border-0 bg-gray-700" />
+
+      <SectionTitle @text="Advanced" />
+      <SectionSubtitle @text="Custom grammar" />
+
+      <p>Shiki supports loading custom language grammar definitions. This can be
+        useful if a new language hasn't landed in the base package yet, or if
+        you want to customize the output.</p>
+
+      <p>A great use case for this is Ember's template syntax. Ember uses
+        Glimmer to render component with templates defined in a
+        <InlineCode>.hbs</InlineCode>
+        file. But Glimmer grammar is more extensive than handlebars. If you want
+        to opt into full Glimmer syntax parsing, you can load custom Glimmer
+        grammar for the
+        <InlineCode>handlebars</InlineCode>
+        language definition. Here's how you could do it:</p>
+
+      <CodeBlock @code={{this.loadCustomGrammar}} @language="js" />
+
       {{outlet}}
     </div>
   </article>

From cd3a7d1f22b6b5faa3f96f255dc1d0abe1ad5509 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 12:49:33 +0200
Subject: [PATCH 02/12] load custom glimmer hbs grammar

---
 docs-app/app/controllers/application.ts | 31 ++++++++++++++++++++++++-
 docs-app/app/routes/application.ts      | 21 ++++++++++++++++-
 docs-app/app/templates/application.hbs  |  8 +++++--
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index 2af8842..541bd91 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -158,7 +158,36 @@ function foo(x, y) {
   </Tab>
 </CodeGroup>`;
 
-  loadCustomGrammar = ``;
+  loadCustomGrammar = `import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ApplicationRoute extends Route {
+  @service shiki;
+
+  beforeModel() {
+    this.loadCustomGrammar();
+  }
+
+  async loadCustomGrammar() {
+    // Shiki has to be initialized before the highlighter is available
+    await this.shiki.initialize.perform();
+    // Get custom grammar
+    const grammarTextmateDefinition = 'https://raw.githubusercontent.com/IgnaceMaes/glimmer-textmate-grammar/main/handlebars.tmLanguage.json';
+    const glimmerHandlebarsGrammar = await fetch(grammarTextmateDefinition);
+    const glimmerHandlebars = {
+      id: 'handlebars',
+      path: '',
+      scopeName: 'text.html.handlebars',
+      grammar: await glimmerHandlebarsGrammar.json(),
+      aliases: ['hbs'],
+    };
+    // Load embedded languages first
+    await this.shiki.loadLanguageAndEmbedded('js');
+    await this.shiki.loadLanguageAndEmbedded('css');
+    // Finally, register the custom language to the Shiki highlighter
+    await this.shiki.highlighter?.loadLanguage(glimmerHandlebars);
+  }
+}`;
 
   changeTheme = (event: Event) => {
     this.theme = (event.target as HTMLSelectElement).value;
diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index 5e78491..24dbe97 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -5,7 +5,26 @@ import { ShikiService } from 'ember-shiki';
 export default class ApplicationRoute extends Route {
   @service declare shiki: ShikiService;
 
-  async beforeModel() {
+  beforeModel() {
+    // this.loadCustomGrammar();
+  }
+
+  async loadCustomGrammar() {
+    // Shiki has to be initialized before the highlighter is available
     await this.shiki.initialize.perform();
+    // Get custom grammar
+    const glimmerHandlebarsGrammar = await fetch('https://raw.githubusercontent.com/IgnaceMaes/glimmer-textmate-grammar/main/handlebars.tmLanguage.json');
+    const glimmerHandlebars = {
+      id: 'handlebars',
+      path: '',
+      scopeName: 'text.html.handlebars',
+      grammar: await glimmerHandlebarsGrammar.json(),
+      aliases: ['hbs'],
+    };
+    // Load embedded languages first
+    await this.shiki.loadLanguageAndEmbedded('js');
+    await this.shiki.loadLanguageAndEmbedded('css');
+    // Finally, register the custom language to the Shiki highlighter
+    await this.shiki.highlighter?.loadLanguage(glimmerHandlebars);
   }
 }
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 139189e..929ce63 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -356,9 +356,13 @@ function foo(x, y) {
         to opt into full Glimmer syntax parsing, you can load custom Glimmer
         grammar for the
         <InlineCode>handlebars</InlineCode>
-        language definition. Here's how you could do it:</p>
+        language definition. Here's an example of how you could do it:</p>
 
-      <CodeBlock @code={{this.loadCustomGrammar}} @language="js" />
+      <CodeBlock
+        @name="app/routes/application.js"
+        @code={{this.loadCustomGrammar}}
+        @language="js"
+      />
 
       {{outlet}}
     </div>

From cf21f92f4023ee2fab8edbee5780373c5a33e089 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 16:25:22 +0200
Subject: [PATCH 03/12] load custom theme

---
 docs-app/app/routes/application.ts     | 11 +++++++++++
 docs-app/app/templates/application.hbs |  1 +
 2 files changed, 12 insertions(+)

diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index 24dbe97..674fb9b 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -7,6 +7,7 @@ export default class ApplicationRoute extends Route {
 
   beforeModel() {
     // this.loadCustomGrammar();
+    this.loadCustomTheme();
   }
 
   async loadCustomGrammar() {
@@ -27,4 +28,14 @@ export default class ApplicationRoute extends Route {
     // Finally, register the custom language to the Shiki highlighter
     await this.shiki.highlighter?.loadLanguage(glimmerHandlebars);
   }
+
+  async loadCustomTheme() {
+    await this.shiki.initialize.perform();
+    const blackTheme = await fetch(
+      'https://raw.githubusercontent.com/Jaakkko/vscode-black-theme/master/themes/black.json',
+    );
+    const blackThemeJson = await blackTheme.json();
+    blackThemeJson.name = 'Black';
+    await this.shiki.highlighter?.loadTheme(blackThemeJson);
+  }
 }
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 929ce63..5023439 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -362,6 +362,7 @@ function foo(x, y) {
         @name="app/routes/application.js"
         @code={{this.loadCustomGrammar}}
         @language="js"
+        @theme="Black"
       />
 
       {{outlet}}

From 64772c36e9a7c53ce81d39d825d107074e03219b Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 19:58:10 +0200
Subject: [PATCH 04/12] document fastboot

---
 docs-app/app/controllers/application.ts | 24 +++++++++++++++++++++
 docs-app/app/routes/application.ts      |  6 +++---
 docs-app/app/templates/application.hbs  | 28 +++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index 541bd91..c8c02b3 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -189,6 +189,30 @@ export default class ApplicationRoute extends Route {
   }
 }`;
 
+  fastbootConfig = `module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        fetch: fetch,
+        AbortController,
+        ReadableStream:
+          typeof ReadableStream !== 'undefined'
+            ? ReadableStream
+            : require('node:stream/web').ReadableStream,
+        WritableStream:
+          typeof WritableStream !== 'undefined'
+            ? WritableStream
+            : require('node:stream/web').WritableStream,
+        TransformStream:
+          typeof TransformStream !== 'undefined'
+            ? TransformStream
+            : require('node:stream/web').TransformStream,
+        Headers: typeof Headers !== 'undefined' ? Headers : undefined,
+      });
+    },
+  };
+};`;
+
   changeTheme = (event: Event) => {
     this.theme = (event.target as HTMLSelectElement).value;
   };
diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index 674fb9b..a33cadb 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -5,9 +5,9 @@ import { ShikiService } from 'ember-shiki';
 export default class ApplicationRoute extends Route {
   @service declare shiki: ShikiService;
 
-  beforeModel() {
-    // this.loadCustomGrammar();
-    this.loadCustomTheme();
+  async beforeModel() {
+    await this.loadCustomGrammar();
+    await this.loadCustomTheme();
   }
 
   async loadCustomGrammar() {
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 5023439..5741dc2 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -365,6 +365,34 @@ function foo(x, y) {
         @theme="Black"
       />
 
+      <SectionSubtitle @text="Custom theme" />
+
+      <SectionSubtitle @text="Fastboot" />
+      <p>The
+        <InlineCode>CodeBlock</InlineCode>
+        component automatically detects Fastboot if it's used in the app and
+        makes sure the rendering awaits until the highlighting is completed.</p>
+
+      <p>Shiki does make use of
+        <InlineCode>fetch</InlineCode>
+        which is not available in the environment by default. To make it
+        available, set the globals in your fastboot config. Note that fetch is
+        only built into Node.js starting from v18. If you want to support older
+        versions you can import and install
+        <InlineCode>node-fetch</InlineCode>.</p>
+
+      <CodeBlock
+        @name="config/fastboot.js"
+        @code={{this.fastbootConfig}}
+        @language="js"
+      />
+      <p>Prember for pre-rendering the app to static html is also supported.
+        Make sure to use at least version
+        <InlineCode>^2.0.0</InlineCode>
+        so the
+        <InlineCode>fastboot.js</InlineCode>
+        config is correctly applied.</p>
+
       {{outlet}}
     </div>
   </article>

From c4baf751446cfea8e6fc77095a31ffc7e203c014 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 19:59:48 +0200
Subject: [PATCH 05/12] feat: add new items to sidebar

---
 docs-app/app/components/sidebar.gts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs-app/app/components/sidebar.gts b/docs-app/app/components/sidebar.gts
index c7ea130..e82434e 100644
--- a/docs-app/app/components/sidebar.gts
+++ b/docs-app/app/components/sidebar.gts
@@ -67,6 +67,8 @@ const Sidebar: TOC<{}> = <template>
 
         <SidebarTitle @text='Advanced' />
         <SidebarItem @text='Custom grammar' />
+        <SidebarItem @text='Custom theme' />
+        <SidebarItem @text='Fastboot' />
       </ul>
 
       <p class="text-xs text-gray-500 mt-4">Built by

From 269ef7626974d7a8ea26edac2a0374534db9bda8 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 21:02:55 +0200
Subject: [PATCH 06/12] docs: document custom theme

---
 docs-app/app/controllers/application.ts | 22 +++++++++++++++
 docs-app/app/templates/application.hbs  | 37 +++++++++++++++++--------
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index c8c02b3..d3d4d57 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -189,6 +189,28 @@ export default class ApplicationRoute extends Route {
   }
 }`;
 
+  loadCustomTheme = `import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ApplicationRoute extends Route {
+  @service shiki;
+
+  async beforeModel() {
+    await this.loadCustomTheme();
+  }
+
+  async loadCustomTheme() {
+    await this.shiki.initialize.perform();
+    const blackTheme = await fetch(
+      'https://raw.githubusercontent.com/Jaakkko/vscode-black-theme/master/themes/black.json',
+    );
+    const blackThemeJson = await blackTheme.json();
+    // Make sure the theme config has a name as this is what should be passed to the CodeBlock component
+    blackThemeJson.name = 'Black';
+    await this.shiki.highlighter?.loadTheme(blackThemeJson);
+  }
+}`;
+
   fastbootConfig = `module.exports = function () {
   return {
     buildSandboxGlobals(defaultGlobals) {
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 5741dc2..5d74872 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -345,15 +345,16 @@ function foo(x, y) {
       <SectionTitle @text="Advanced" />
       <SectionSubtitle @text="Custom grammar" />
 
-      <p>Shiki supports loading custom language grammar definitions. This can be
-        useful if a new language hasn't landed in the base package yet, or if
-        you want to customize the output.</p>
+      <p>Shiki supports loading custom language grammar definitions in the
+        TextMate format. This can be useful if a new language hasn't landed in
+        the base package yet, or if you want to use a custom definition for an
+        existing language.</p>
 
       <p>A great use case for this is Ember's template syntax. Ember uses
         Glimmer to render component with templates defined in a
         <InlineCode>.hbs</InlineCode>
-        file. But Glimmer grammar is more extensive than handlebars. If you want
-        to opt into full Glimmer syntax parsing, you can load custom Glimmer
+        file. Glimmer grammar, however, is more extensive than handlebars. If
+        you want to opt into Glimmer syntax parsing, you can load custom Glimmer
         grammar for the
         <InlineCode>handlebars</InlineCode>
         language definition. Here's an example of how you could do it:</p>
@@ -362,10 +363,24 @@ function foo(x, y) {
         @name="app/routes/application.js"
         @code={{this.loadCustomGrammar}}
         @language="js"
-        @theme="Black"
       />
 
       <SectionSubtitle @text="Custom theme" />
+      <p>Shiki ships with 29 themes available by default, but any VS Code theme
+        can be loaded dynamically. Simply register the theme config JSON and
+        pass the theme name to the
+        <InlineCode>CodeBlock</InlineCode>
+        component.</p>
+
+      <p>The following example shows a custom theme <InlineCode>Black</InlineCode>:</p>
+
+      <CodeBlock
+        @name="app/routes/application.js"
+        @code={{this.loadCustomTheme}}
+        @language="js"
+        @theme="Black"
+        style="--ember-shiki-background-color: #000"
+      />
 
       <SectionSubtitle @text="Fastboot" />
       <p>The
@@ -373,12 +388,12 @@ function foo(x, y) {
         component automatically detects Fastboot if it's used in the app and
         makes sure the rendering awaits until the highlighting is completed.</p>
 
-      <p>Shiki does make use of
+      <p>Shiki makes use of
         <InlineCode>fetch</InlineCode>
-        which is not available in the environment by default. To make it
-        available, set the globals in your fastboot config. Note that fetch is
-        only built into Node.js starting from v18. If you want to support older
-        versions you can import and install
+        which is not available in the runtime environment of Fastboot by
+        default. To make it available, set the globals in your fastboot config.
+        Note that fetch is only built into Node.js starting from v18. If you
+        want to support older versions you can install and import
         <InlineCode>node-fetch</InlineCode>.</p>
 
       <CodeBlock

From 1c6898a46bf251acd370f09baa3b21dca84185fe Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 21:18:53 +0200
Subject: [PATCH 07/12] docs: use night owl

---
 docs-app/app/routes/application.ts     | 11 ++++++-----
 docs-app/app/templates/application.hbs |  6 +++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index a33cadb..965e4fd 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -6,15 +6,16 @@ export default class ApplicationRoute extends Route {
   @service declare shiki: ShikiService;
 
   async beforeModel() {
-    await this.loadCustomGrammar();
-    await this.loadCustomTheme();
+    await Promise.all([this.loadCustomGrammar(), this.loadCustomTheme()]);
   }
 
   async loadCustomGrammar() {
     // Shiki has to be initialized before the highlighter is available
     await this.shiki.initialize.perform();
     // Get custom grammar
-    const glimmerHandlebarsGrammar = await fetch('https://raw.githubusercontent.com/IgnaceMaes/glimmer-textmate-grammar/main/handlebars.tmLanguage.json');
+    const glimmerHandlebarsGrammar = await fetch(
+      'https://raw.githubusercontent.com/IgnaceMaes/glimmer-textmate-grammar/main/handlebars.tmLanguage.json',
+    );
     const glimmerHandlebars = {
       id: 'handlebars',
       path: '',
@@ -32,10 +33,10 @@ export default class ApplicationRoute extends Route {
   async loadCustomTheme() {
     await this.shiki.initialize.perform();
     const blackTheme = await fetch(
-      'https://raw.githubusercontent.com/Jaakkko/vscode-black-theme/master/themes/black.json',
+      'https://raw.githubusercontent.com/sdras/night-owl-vscode-theme/main/themes/Night%20Owl-color-theme.json',
     );
     const blackThemeJson = await blackTheme.json();
-    blackThemeJson.name = 'Black';
+    blackThemeJson.name = 'Night Owl';
     await this.shiki.highlighter?.loadTheme(blackThemeJson);
   }
 }
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 5d74872..037fa31 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -372,14 +372,14 @@ function foo(x, y) {
         <InlineCode>CodeBlock</InlineCode>
         component.</p>
 
-      <p>The following example shows a custom theme <InlineCode>Black</InlineCode>:</p>
+      <p>The following example shows a custom theme <InlineCode>Night Owl</InlineCode>:</p>
 
       <CodeBlock
         @name="app/routes/application.js"
         @code={{this.loadCustomTheme}}
         @language="js"
-        @theme="Black"
-        style="--ember-shiki-background-color: #000"
+        @theme="Night Owl"
+        style="--ember-shiki-background-color: #011627"
       />
 
       <SectionSubtitle @text="Fastboot" />

From 93ca29d234856ff5c905d8bbdf609b480e29d476 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 21:21:34 +0200
Subject: [PATCH 08/12] fix: update doc namings

---
 docs-app/app/controllers/application.ts | 14 ++++++++------
 docs-app/app/routes/application.ts      |  8 ++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index d3d4d57..a73d625 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -200,14 +200,16 @@ export default class ApplicationRoute extends Route {
   }
 
   async loadCustomTheme() {
+    // Shiki has to be initialized before the highlighter is available
     await this.shiki.initialize.perform();
-    const blackTheme = await fetch(
-      'https://raw.githubusercontent.com/Jaakkko/vscode-black-theme/master/themes/black.json',
+    // Fetch custom theme
+    const nightOwlTheme = await fetch(
+      'https://raw.githubusercontent.com/sdras/night-owl-vscode-theme/main/themes/Night%20Owl-color-theme.json',
     );
-    const blackThemeJson = await blackTheme.json();
-    // Make sure the theme config has a name as this is what should be passed to the CodeBlock component
-    blackThemeJson.name = 'Black';
-    await this.shiki.highlighter?.loadTheme(blackThemeJson);
+    const nightOwlThemeJson = await nightOwlTheme.json();
+    // Make sure the name is set, as this is the value to be passed to the CodeBlock theme argument
+    nightOwlThemeJson.name = 'Night Owl';
+    await this.shiki.highlighter?.loadTheme(nightOwlThemeJson);
   }
 }`;
 
diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index 965e4fd..a973510 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -32,11 +32,11 @@ export default class ApplicationRoute extends Route {
 
   async loadCustomTheme() {
     await this.shiki.initialize.perform();
-    const blackTheme = await fetch(
+    const nightOwlTheme = await fetch(
       'https://raw.githubusercontent.com/sdras/night-owl-vscode-theme/main/themes/Night%20Owl-color-theme.json',
     );
-    const blackThemeJson = await blackTheme.json();
-    blackThemeJson.name = 'Night Owl';
-    await this.shiki.highlighter?.loadTheme(blackThemeJson);
+    const nightOwlThemeJson = await nightOwlTheme.json();
+    nightOwlThemeJson.name = 'Night Owl';
+    await this.shiki.highlighter?.loadTheme(nightOwlThemeJson);
   }
 }

From acb7a78d9b7762f2f586ac0f50e4616a0b4594e2 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 21:26:54 +0200
Subject: [PATCH 09/12] docs: don't load custom grammar

---
 docs-app/app/routes/application.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
index a973510..d7d8348 100644
--- a/docs-app/app/routes/application.ts
+++ b/docs-app/app/routes/application.ts
@@ -6,7 +6,7 @@ export default class ApplicationRoute extends Route {
   @service declare shiki: ShikiService;
 
   async beforeModel() {
-    await Promise.all([this.loadCustomGrammar(), this.loadCustomTheme()]);
+    await this.loadCustomTheme();
   }
 
   async loadCustomGrammar() {

From bcd69275d0d5b845e8ceb48ab59787ede1e2e63a Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 21:57:00 +0200
Subject: [PATCH 10/12] docs: add disclaimers

---
 docs-app/app/controllers/application.ts | 4 ++--
 docs-app/app/templates/application.hbs  | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs-app/app/controllers/application.ts b/docs-app/app/controllers/application.ts
index a73d625..95b76b3 100644
--- a/docs-app/app/controllers/application.ts
+++ b/docs-app/app/controllers/application.ts
@@ -164,8 +164,8 @@ import { service } from '@ember/service';
 export default class ApplicationRoute extends Route {
   @service shiki;
 
-  beforeModel() {
-    this.loadCustomGrammar();
+  async beforeModel() {
+    await this.loadCustomGrammar();
   }
 
   async loadCustomGrammar() {
diff --git a/docs-app/app/templates/application.hbs b/docs-app/app/templates/application.hbs
index 037fa31..ac655ab 100644
--- a/docs-app/app/templates/application.hbs
+++ b/docs-app/app/templates/application.hbs
@@ -364,6 +364,7 @@ function foo(x, y) {
         @code={{this.loadCustomGrammar}}
         @language="js"
       />
+      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Custom theme" />
       <p>Shiki ships with 29 themes available by default, but any VS Code theme
@@ -381,6 +382,7 @@ function foo(x, y) {
         @theme="Night Owl"
         style="--ember-shiki-background-color: #011627"
       />
+      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Fastboot" />
       <p>The

From 05982af48d4e8a0a02cadc3d987416c0363d95f9 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Fri, 1 Sep 2023 22:01:43 +0200
Subject: [PATCH 11/12] ci: use wyvox action setup pnpm

---
 .github/workflows/ci.yml      | 6 +++---
 .github/workflows/release.yml | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 189d50b..2712d6c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: NullVoxPopuli/action-setup-pnpm@v2
+      - uses: wyvox/action-setup-pnpm@v2
         with:
           node-version: 16
       - name: Lint
@@ -34,7 +34,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: NullVoxPopuli/action-setup-pnpm@v2
+      - uses: wyvox/action-setup-pnpm@v2
         with:
           node-version: 16
           no-lockfile: true
@@ -61,7 +61,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: NullVoxPopuli/action-setup-pnpm@v2
+      - uses: wyvox/action-setup-pnpm@v2
         with:
           node-version: 16
       - name: Run Tests
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f05cccc..83680b4 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup pnpm and Node.js 16
-        uses: NullVoxPopuli/action-setup-pnpm@v2
+        uses: wyvox/action-setup-pnpm@v2
         with:
           node-version: 16
 

From 89832a2e717dc181439c269640a11f17680f9212 Mon Sep 17 00:00:00 2001
From: ignace <ignace@otainsight.com>
Date: Sun, 3 Sep 2023 11:50:06 +0200
Subject: [PATCH 12/12] ci: remove no-lockfile

---
 .github/workflows/ci.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2712d6c..d9883e1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -37,7 +37,6 @@ jobs:
       - uses: wyvox/action-setup-pnpm@v2
         with:
           node-version: 16
-          no-lockfile: true
       - name: Run Tests
         run: pnpm test