Merge pull request #27 from geoadmin/PB-1887-build-issues

PB-1887: adress warnings after build script

Author: pedroslvieira

.vitepress/config.mts

@@ -7,6 +7,12 @@ export default defineConfig({
   description: "Technical Documentation about *.geo.admin.ch",
   head: [["link", { rel: "icon", href: "/static/favicon.ico" }]],
   ignoreDeadLinks: "localhostLinks",
+  vite: {
+    build: {
+      // We add this to avoid the warning "(!) Some chunks are larger than 500 kB after minification."
+      chunkSizeWarningLimit: 1000,
+    },
+  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
 

.vitepress/theme/index.ts

@@ -6,21 +6,23 @@ import ExampleCodeBlock from "../../components/ExampleCodeBlock.vue";
 import { createHighlighter } from "shiki";
 import type { HighlighterGeneric, BundledLanguage, BundledTheme } from "shiki";
 
+// Create a global instance of the highlighter as Shiki is supposed to be used as a singleton
+const highlighterPromise = createHighlighter({
+  themes: ["github-dark"],
+  langs: ["javascript", "json", "sh", "html", "http"],
+});
+
 export default {
   extends: DefaultTheme,
   async enhanceApp({ app }) {
-    // register your custom global components
+    // register custom global components
     app.component("ApiCodeBlock", ApiCodeBlock);
     app.component("ExampleCodeBlock", ExampleCodeBlock);
 
-    // Initialize the highlighter asynchronously
     const highlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
-      await createHighlighter({
-        themes: ["github-dark"],
-        langs: ["javascript", "json", "sh", "html", "http"],
-      });
+      await highlighterPromise;
 
-    // Provide the highlighter globally
+    // Provide the highlighter globally (it can later be used in any component)
     app.provide("highlighter", highlighter);
   },
 } satisfies Theme;

components/ApiCodeBlock.vue

@@ -11,9 +11,8 @@
     method?: string;
   }>();
 
-  const highlighter:
-    | HighlighterGeneric<BundledLanguage, BundledTheme>
-    | undefined = inject("highlighter");
+  const highlighter =
+    inject<HighlighterGeneric<BundledLanguage, BundledTheme>>("highlighter");
 
   const html = highlighter?.codeToHtml(props.url, {
     lang: "http",