Vuepress v2

.gitignore

@@ -1,3 +1,7 @@
 .DS_Store
 .idea/
 node_modules/
+
+.vuepress/.cache
+.vuepress/.temp
+.vuepress/dist

.vuepress/client.ts

@@ -0,0 +1,8 @@
+import { defineClientConfig } from 'vuepress/client';
+import Layout from './layouts/Layout.vue';
+
+export default defineClientConfig({
+    layouts: {
+        Layout,
+    },
+})

.vuepress/components/CarbonAds.vue

@@ -0,0 +1,80 @@
+<script>
+import {h} from 'vue';
+
+export default {
+  watch: {
+    '$route'(to, from) {
+      if (
+          to.path !== from.path
+          // Only reload if the ad has been loaded
+          // otherwise it's possible that the script is appended but
+          // the ads are not loaded yet. This would result in duplicated ads.
+          && this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = '';
+        this.load();
+      }
+    },
+  },
+  mounted() {
+    this.load();
+  },
+  methods: {
+    load() {
+      const s = document.createElement('script');
+      s.id = '_carbonads_js';
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CK7IC23N&placement=magicmirror`;
+      this.$el.appendChild(s);
+    },
+  },
+  render() {
+    return h('div', {class: 'carbon-ads'});
+  },
+};
+</script>
+
+<style lang="scss">
+.sidebar {
+  .carbon-ads {
+    a {
+      display: block;
+    }
+  }
+}
+.carbon-ads {
+  min-height: 130px;
+  padding: 1.5rem 1.5rem 0;
+  margin-bottom: -0.5rem;
+  font-size: 0.75rem;
+  border-bottom: 1px solid var(--c-border);
+  a {
+    color: #444;
+    font-weight: normal;
+    display: inline;
+  }
+  .carbon-img {
+    float: left;
+    margin-right: 1rem;
+    border: 1px solid var(--c-border);
+    img {
+      display: block;
+    }
+  }
+  .carbon-poweredby {
+    color: #999;
+    display: block;
+    margin-top: 0.5em;
+  }
+}
+.dark {
+  a.carbon-text {
+    color: var(--c-text-light);
+  }
+}
+@media (max-width: 719px) {
+  .carbon-ads .carbon-img img {
+    width: 100px;
+    height: 77px;
+  }
+}
+</style>

.vuepress/config.js

@@ -1,96 +1,94 @@
-module.exports = {
-  title: "MagicMirror² Documentation",
+import { defaultTheme } from '@vuepress/theme-default';
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics';
+import { docsearchPlugin } from '@vuepress/plugin-docsearch';
+import { viteBundler } from '@vuepress/bundler-vite';
+
+export default {
+  title: "MagicMirror² Docs",
   description: "The open source modular smart mirror platform.",
-  themeConfig: {
-    // logo: '/mm.png',
-    algolia: {
-      appId: "U3QOOOGLZR",
-      apiKey: "96d207343bbb5e45068a1e3c8d141bb4",
-      indexName: "docs-magicmirror-builders",
-    },
-    nav: [
+  bundler: viteBundler({}),
+  theme: defaultTheme({
+    contributors: false,
+    docsRepo: "MagicMirrorOrg/MagicMirror-Documentation",
+    docsBranch: "master",
+    editLinkText: "Help us improve this page!",
+    logo: 'logo.png',
+    navbar: [
       { text: "Donate", link: "https://magicmirror.builders/donate" },
       { text: "Forum", link: "https://forum.magicmirror.builders" },
     ],
+    repo: "MagicMirrorOrg/MagicMirror",
+    repoLabel: "GitHub",
     sidebar: [
       {
-        title: "Getting Started",
-        collapsable: true,
+        text: "Getting Started",
+        collapsible: true,
         children: [
           "/",
-          "getting-started/requirements",
-          "getting-started/installation",
-          "getting-started/upgrade-guide",
+          "/getting-started/requirements.md",
+          "/getting-started/installation.md",
+          "/getting-started/upgrade-guide",
         ],
       },
       {
-        title: "Configuration",
-        collapsable: true,
+        text: "Configuration",
+        collapsible: true,
         children: [
-          "configuration/introduction",
-          "configuration/autostart",
-          "configuration/raspberry",
+          "/configuration/introduction",
+          "/configuration/autostart",
+          "/configuration/raspberry",
         ],
       },
       {
-        title: "Modules",
-        collapsable: true,
+        text: "Modules",
+        collapsible: true,
         children: [
-          "modules/introduction",
-          "modules/configuration",
+          "/modules/introduction",
+          "/modules/configuration",
           {
-            title: "Default Modules",
-            collapsable: false,
+            text: "Default Modules",
+            collapsible: false,
             children: [
-              "modules/alert",
-              "modules/calendar",
-              "modules/clock",
-              "modules/compliments",
-              "modules/helloworld",
-              "modules/newsfeed",
-              "modules/updatenotification",
-              "modules/weather",
+              "/modules/alert",
+              "/modules/calendar",
+              "/modules/clock",
+              "/modules/compliments",
+              "/modules/helloworld",
+              "/modules/newsfeed",
+              "/modules/updatenotification",
+              "/modules/weather",
             ],
           },
-          "modules/customcss",
-          "modules/animate"
+          "/modules/animate"
         ],
       },
       {
-        title: "Module Development",
-        collapsable: true,
+        text: "Module Development",
+        collapsible: true,
         children: [
-          "development/introduction.md",
-          "development/core-module-file.md",
-          "development/node-helper.md",
-          "development/helper-methods.md",
-          "development/logger.md",
-          "development/notifications.md",
-          "development/weather-provider.md",
-          "development/documentation.md",
+          "/development/introduction.md",
+          "/development/core-module-file.md",
+          "/development/node-helper.md",
+          "/development/helper-methods.md",
+          "/development/logger.md",
+          "/development/notifications.md",
+          "/development/weather-provider.md",
+          "/development/documentation.md",
         ],
       },
       {
-        title: "About",
-        collapsable: true,
+        text: "About",
+        collapsible: true,
         children: [
-          "about/manifesto",
-          "about/contributing",
-          "about/donate",
-          "about/support",
-          "about/LICENSE",
+          "/about/manifesto",
+          "/about/contributing",
+          "/about/donate",
+          "/about/support",
+          "/about/LICENSE",
         ],
       },
     ],
-    repo: "MagicMirrorOrg/MagicMirror",
-    repoLabel: "GitHub",
-
-    docsRepo: "MagicMirrorOrg/MagicMirror-Documentation",
-    docsBranch: "master",
-    editLinks: true,
-    editLinkText: "Help us improve this page!",
-    lastUpdated: "Updated",
-  },
+  }),
   markdown: {
     toc: { includeLevel: [2, 3, 4] },
   },
@@ -100,13 +98,14 @@ module.exports = {
     },
   },
   plugins: [
-    ["@vuepress/back-to-top"],
-    ['check-md'],
-    [
-      "@vuepress/google-analytics",
-      {
-        ga: "UA-1219071-59", // UA-00000000-0
-      },
-    ],
+    googleAnalyticsPlugin({
+      id: "UA-1219071-59",
+    }),
+    docsearchPlugin({
+      apiKey: "96d207343bbb5e45068a1e3c8d141bb4",
+      appId: "U3QOOOGLZR",
+      indexName: "docs-magicmirror-builders",
+    }),
   ],
 };
+

.vuepress/layouts/Layout.vue

@@ -0,0 +1,13 @@
+<script setup>
+import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
+import CarbonAds from "../components/CarbonAds.vue";
+</script>
+
+<template>
+  <ParentLayout>
+    <template #sidebar-top>
+      <slot name="sidebar-top" />
+      <CarbonAds/>
+    </template>
+  </ParentLayout>
+</template>

.vuepress/styles/index.scss

@@ -0,0 +1,3 @@
+:root {
+  scroll-behavior: smooth;
+}