moving query-builder-vue-3 from package.json to utils, adding shiki to replace vue-code-highlight module

Author: prakhyatox

package-lock.json

@@ -38,8 +38,8 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.18.1",
     "moment": "^2.29.1",
-    "query-builder-vue-3": "^1.0.1",
     "roboto-fontface": "^0.10.0",
+    "shiki": "^4.1.0",
     "sigma": "^2.4.0",
     "simple-analytics-vue": "^3.0.2",
     "trace-unhandled": "^2.0.1",
@@ -48,7 +48,6 @@
     "vike-vue": "^0.9.11",
     "vue": "^3.4.35",
     "vue-3-sanitize": "^0.1.4",
-    "vue-code-highlight": "^0.7.8",
     "vue-country-flag-next": "^2.3.2",
     "vue-eslint-parser": "^9.4.3",
     "vue-gtag": "^2.1.0",

package.json

@@ -0,0 +1,95 @@
+<template>
+  <div class="code-block-wrapper">
+    <div class="code-header">
+      <span class="dot bg-red"></span>
+      <span class="dot bg-yellow"></span>
+      <span class="dot bg-green"></span>
+      <span class="lang-label">{{ lang }}</span>
+    </div>
+
+    <div v-safe-html="highlightedHtml" class="shiki-container"></div>
+
+    <div ref="sourceElement" style="display: none"><slot></slot></div>
+  </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted, ref} from "vue";
+import {codeToHtml} from "shiki";
+
+const props = defineProps({
+  lang: { type: String, default: "javascript" },
+  theme: { type: String, default: "tokyo-night" },
+});
+
+const sourceElement = ref(null);
+const highlightedHtml = ref("");
+
+onMounted(async () => {
+  await nextTick();
+  // Extract text content after Vue fills variables like {{ loginUrl }}
+  let rawCode =
+    sourceElement.value?.innerText || sourceElement.value?.textContent || "";
+
+  // Clean up initial and trailing whitespace artifacts from <pre> tags
+  rawCode = rawCode.replace(/^\s*[\r\n]/, "").trimEnd();
+
+  try {
+    highlightedHtml.value = await codeToHtml(rawCode, {
+      lang: props.lang,
+      theme: props.theme,
+    });
+  }
+  catch (err) {
+    console.error("Shiki highlighting failed:", err);
+    highlightedHtml.value = `<pre><code>${rawCode}</code></pre>`;
+  }
+});
+</script>
+
+<style scoped>
+.code-block-wrapper {
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.code-header {
+  background: #16161e;
+  padding: 0.6rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid #24283b;
+}
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+.red {
+  background: #ff5f56;
+}
+.yellow {
+  background: #ffbd2e;
+}
+.green {
+  background: #27c93f;
+}
+.lang-label {
+  margin-left: auto;
+  color: #565f89;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-family: monospace;
+  font-weight: bold;
+}
+:deep(.shiki) {
+  margin: 0 !important;
+  padding: 1.2rem !important;
+  overflow-x: auto;
+  font-family: "Fira Code", Consolas, Monaco, monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+</style>

src/components/Static/APIDoc/CodeBlock.vue

@@ -1,18 +1,14 @@
 /* Directives & Plugins Imports */
-import "vue-code-highlight/themes/prism-twilight.css";
-import "vue-code-highlight/themes/window.css";
 import linkify from "vue-3-linkify";
 import {createMetaManager} from "vue-meta";
 import Vue3Sanitize from "vue-3-sanitize";
 import DOMPurify from "dompurify";
-
-/* App Core Imports - CHANGE THESE TO FACTORY FUNCTIONS */
 import {createMyRouter} from "@/router";
 import {createMyStore} from "@/store";
 import createVuetify from "@/plugins/vuetify";
 import {bootstrapApp, globalFilters} from "@/utils/setupUtils";
-
 /* Styles */
+import CodeBlock from "@/components/Static/APIDoc/CodeBlock.vue";
 import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 import "vue-json-pretty/lib/styles.css";
@@ -21,7 +17,7 @@ export default async (pageContext) => {
   const { app } = pageContext;
   const isServer = typeof window === "undefined";
 
-  // 1. Create unique, isolated instances for this specific request
+  // Create unique, isolated instances for this specific request
   const store = createMyStore();
   const router = createMyRouter(store);
 
@@ -30,15 +26,19 @@ export default async (pageContext) => {
 
   await bootstrapApp(store, router);
 
-  // 2. Safely sync the unique router instance to the current URL
+  // Safely sync the unique router instance to the current URL
   if (isServer) {
     router.push(pageContext.urlPathname);
   }
 
   // 3. Plugins that are SAFE for both Server and Client
-  app.use(createVuetify).use(createMetaManager()).use(Vue3Sanitize);
+  const vuetifyPlugin =
+    typeof createVuetify === "function" ? createVuetify() : createVuetify;
+  app.use(vuetifyPlugin).use(createMetaManager()).use(Vue3Sanitize);
+
+  app.component("CodeBlock", CodeBlock);
 
-  // 4. Plugins that MUST ONLY run in the Browser (Client)
+  // Plugins that MUST ONLY run in the Browser (Client)
   if (!isServer) {
     const { default: HighchartsVue } = await import("highcharts-vue");
     const { default: Highcharts } = await import("highcharts");
@@ -47,7 +47,6 @@ export default async (pageContext) => {
     );
     const { default: SimpleAnalytics } = await import("simple-analytics-vue");
     // const { default: VueGtag } = await import("vue-gtag");
-    const { default: VueCodeHighlight } = await import("vue-code-highlight");
     const { default: VueScrollTo } = await import("vue-scrollto");
     const { default: Particles } = await import("@tsparticles/vue3");
     const { loadFull } = await import("tsparticles");
@@ -63,7 +62,6 @@ export default async (pageContext) => {
       })
       .use(HighchartsVue)
       .use(VueScrollTo)
-      .use(VueCodeHighlight)
       // .use(VueGtag, {
       //   config: { id: import.meta.env.VUE_APP_ANALYTICS_ID },
       // })
@@ -81,6 +79,6 @@ export default async (pageContext) => {
   // Global Properties
   app.config.globalProperties.$filters = globalFilters;
 
-  // 5. Await the isolated router so the server waits for route components to resolve
+  // Await the isolated router so the server waits for route components to resolve
   await router.isReady();
 };

src/pages/+onCreateApp.js

@@ -5,7 +5,8 @@ export const Record = () => import("@/views/Records/Record");
 export const Records = () => import("@/views/Records/Records");
 export const NewRecord = () => import("@/views/CreateRecord/NewRecord");
 export const Editor = () => import("@/views/CreateRecord/Editor");
-export const Login = () => import("@/views/Users/Login/Login");
+// export const Login = () => import("@/views/Users/Login/Login");
+export { default as Login } from "@/views/Users/Login/Login.vue";
 export const Signup = () => import("@/views/Users/Signup");
 export const ConfirmAccount = () => import("@/views/Users/ConfirmAccount.vue");
 export const ResendConfirmation = () =>

src/router/routes.js

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rudolf Tucek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/utils/query-builder-vue-3/LICENSE

@@ -0,0 +1,50 @@
+[![CI Testing](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-testing.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-testing.yml)
+[![CI Build](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-build.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-build.yml)
+[![Lint](https://github.com/rtucek/vue-query-builder/actions/workflows/lint.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/lint.yml)
+[![npm version](https://img.shields.io/npm/v/query-builder-vue-3)](https://www.npmjs.com/package/query-builder-vue-3)
+[![MIT LICENSE](https://img.shields.io/npm/l/query-builder-vue-3)](https://github.com/rtucek/vue-query-builder/blob/master/LICENSE)
+
+# Vue 3 Query Builder
+
+A query-builder for Vue ported to Vue 3.
+
+
+## Demos
+
+Plenty of samples and use cases are covered in the
+[documentation](https://rtucek.github.io/vue-query-builder/demos.html).
+
+
+## Features
+
+Key features:
+
+- Re-ordering of rules and groups with drag'n'drop.
+- Emphasizing groups with configurable colors.
+- Control maximum depth of nested groups.
+- Easy to customize with pure CSS and slots.
+- Layout can be serialized and restored.
+- Vuex compatible.
+- TypeScript support.
+
+
+## Installation
+
+```bash
+yarn add query-builder-vue-3
+npm install query-builder-vue-3
+```
+
+Follow the docs for [minimum
+configuration](https://rtucek.github.io/vue-query-builder/getting-started.html#usage).
+
+
+## Contribution
+
+[Contribution guidelines](https://rtucek.github.io/vue-query-builder/contributing.html) are located
+in the documentation.
+
+## Major Props To
+
+- https://github.com/rtucek/vue-query-builder/pull/93
+- @kwesterfeld2