Use correct paths for docs examples

docs/src/.vitepress/components/DynamicLayout.vue

@@ -1,11 +1,18 @@
 <script setup>
-import { useRoute } from 'vitepress';
-import DefaultTheme from 'vitepress/theme';
-import ExampleLayout from './ExampleLayout.vue';
+import { useRoute } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import ExampleLayout from "./ExampleLayout.vue";
+import FooterLogo from "../components/FooterLogo.vue";
+import { h } from "vue";
 
 const route = useRoute();
-if (route.path.startsWith('/craft/examples')) {
+
+if (route.path.startsWith("/examples")) {
   DefaultTheme.Layout = ExampleLayout;
+} else {
+  DefaultTheme.Layout = h(DefaultTheme.Layout, null, {
+    "aside-bottom": () => h(FooterLogo),
+  });
 }
 </script>
 

docs/src/.vitepress/components/ExampleLayout.vue

@@ -1,23 +1,23 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from "vue";
 
 const el = ref();
 
 onMounted(() => {
-  document.querySelectorAll('head style, head link, head script').forEach((extra) => {
+  document.querySelectorAll("head style, head link, head script").forEach((extra) => {
     extra.remove();
   });
-  import('/public/examples/.vite/manifest.json').then((manifest) => {
+  import("/public/examples/.vite/manifest.json").then((manifest) => {
     // use code
-    const linkTag = document.createElement('link');
-    linkTag.rel = 'stylesheet';
-    linkTag.href = '../examples/' + manifest.default['frontend/js/site.ts'].css;
-    document.head.insertAdjacentElement('beforeend', linkTag);
+    const linkTag = document.createElement("link");
+    linkTag.rel = "stylesheet";
+    linkTag.href = "../examples/" + manifest.default["frontend/js/site.ts"].css;
+    document.head.insertAdjacentElement("beforeend", linkTag);
 
-    const scriptTag = document.createElement('script');
-    scriptTag.src = '../examples/' + manifest.default['frontend/js/site.ts'].file;
-    scriptTag.type = 'module';
-    document.head.insertAdjacentElement('beforeend', scriptTag);
+    const scriptTag = document.createElement("script");
+    scriptTag.src = "../examples/" + manifest.default["frontend/js/site.ts"].file;
+    scriptTag.type = "module";
+    document.head.insertAdjacentElement("beforeend", scriptTag);
   });
 });
 </script>

docs/src/.vitepress/components/FooterLogo.vue

@@ -1,25 +1,15 @@
 <template>
   <div class="footer-logo">
     <div>Brought to you by:</div>
-    <a
-        href="https://www.statik.be"
-        target="_blank"
-        rel="noopener"
-    >
-      <img
-          src="./../../images/logo.svg"
-          alt=""
-      />
+    <a href="https://www.statik.be" target="_blank" rel="noopener">
+      <img src="./../../images/logo.svg" alt="" />
     </a>
   </div>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style scoped>
-
-
 .footer-logo {
   font-size: 0.8rem;
   div {
@@ -29,10 +19,18 @@
 }
 
 .footer-logo img {
+  /* background-color: #fff;
+  padding-inline: 0.4rem; */
   box-sizing: border-box;
   max-width: 200px;
   height: 80px;
   display: block;
-  margin: 0 auto;
+  margin: 0.4rem auto 0;
+}
+
+.dark {
+  .footer-logo img {
+    filter: brightness(0) invert(1);
+  }
 }
-</style>
+</style>

docs/src/.vitepress/theme/index.ts

@@ -1,15 +1,7 @@
-import Theme from 'vitepress/theme'
-import './style.css';
-import DynamicLayout from '../components/DynamicLayout.vue';
-import FooterLogo from '../components/FooterLogo.vue';
-import {h} from "vue";
+import type { Theme } from "vitepress";
+import "./style.css";
+import DynamicLayout from "../components/DynamicLayout.vue";
 
 export default {
-    ...Theme,
-    Layout() {
-        return h(Theme.Layout, null, {
-                'aside-bottom': () => h(FooterLogo)
-            }
-        )
-    }
-}
+  Layout: DynamicLayout,
+} satisfies Theme;

docs/src/examples/autocomplete_single.md

@@ -1,3 +1,7 @@
+---
+layout: false
+---
+
 <select name="singleSelect" id="singleSelect" data-autocomplete class="border-1">
     <option value="">Select an option</option>
     <option value="1">Option 1</option>