User Guide and DevGuide source migration to Stable v4_3 (#10882)

* User guide migration to QGC source

* Add google analytics - but need [GA4] Find your Google tag ID

* Update (most) notes to use vitepress note syntax

* Convert remaining notes, tips, warnings

* Prettier all the files

* Lower case and compress all images

* Lower case filenames

* docs_deploy1

* Disable platform builds on commit to docs (only)

* Test deployment script 1 (#10893)

* docs_deploy1

* Disable platform builds on commit to docs (only)

* docs_deploy2

* lower case waypoint file

* Lower case console.jpg

* Add duplicate index as fallback

* Get path from process

* fix upload

* Disable running workflows for changes in the actions

* Attempt update via github workflow

* Attempt workflow update

* A bit more deployment debugging

* MOdify yaml to use personal access token

* Lower case the support.md

* Fix up pattern

* Add UI design - ignored by github

* Fix up plugins name

* Fix up toolbar

* Fix up the Support path

* Fix up support link to go to the NEW target

* Only build this on commit

* Add docs stablev4 3 (#10894)

* docs_deploy1

* Disable platform builds on commit to docs (only)

* docs_deploy2

* lower case waypoint file

* Lower case console.jpg

* Add duplicate index as fallback

* Get path from process

* fix upload

* Disable running workflows for changes in the actions

* Attempt update via github workflow

* Attempt workflow update

* A bit more deployment debugging

* MOdify yaml to use personal access token

* Lower case the support.md

* Fix up pattern

* Add UI design - ignored by github

* Fix up plugins name

* Fix up toolbar

* Fix up the Support path

* Fix up support link to go to the NEW target

* Only build this on commit

* Remove unused files

.github/workflows/android_release.yml

@@ -8,10 +8,16 @@ on:
       - 'Stable*'
     tags:
       - 'v*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
   pull_request:
     branches:
     - '*'
-
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
+      
 defaults:
   run:
     shell: bash

.github/workflows/docs_deploy.yml

@@ -0,0 +1,79 @@
+name: Deploy Docs
+
+on:
+  push:
+    branches:
+      - 'master'
+      - 'Stable*'
+    tags:
+      - 'v*'
+    paths:
+      - docs/**
+  pull_request:
+    branches:
+      - '*'
+    paths:
+      - docs/**
+
+  workflow_dispatch:
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with VitePress
+        run: |
+          npm run docs:build
+          touch docs/.vitepress/dist/.nojekyll
+
+      - name: Upload artifact
+        if: ${{ github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged) }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: qgc_docs_build
+          path: docs/.vitepress/dist/
+          retention-days: 1
+
+  deploy:
+    if: ${{ github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged) }}
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Download Artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: qgc_docs_build
+          path: ~/_book
+        
+      - name: Deploy
+        run: |
+          git clone https://${{ secrets.PX4BUILDBOT_USER }}:${{ secrets.PX4BUILDBOT_ACCESSTOKEN }}@github.com/mavlink/docs.qgroundcontrol.com.git
+          rm -rf docs.qgroundcontrol.com/${BRANCH_NAME}
+          mkdir -p docs.qgroundcontrol.com/${BRANCH_NAME}
+          cp -r ~/_book/* docs.qgroundcontrol.com/${BRANCH_NAME}/
+          cd docs.qgroundcontrol.com
+          git config user.email "bot@px4.io"
+          git config user.name "PX4BuildBot"
+          git add ${BRANCH_NAME}
+          git commit -a -m "QGC docs build update `date`"
+          git push origin master
+          
+        env:
+          GIT_USER: ${{ secrets.PX4BUILDBOT_USER }}
+          GIT_PASS: ${{ secrets.PX4BUILDBOT_PASS }}

.github/workflows/linux_debug.yml

@@ -4,9 +4,15 @@ on:
   push:
     branches:
     - 'master'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
   pull_request:
     branches:
     - '*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
 
 defaults:
   run:

.github/workflows/linux_release.yml

@@ -7,9 +7,15 @@ on:
       - 'Stable*'
     tags:
       - 'v*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
   pull_request:
     branches:
     - '*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
 
 defaults:
   run:

.github/workflows/macos_release.yml

@@ -7,9 +7,15 @@ on:
       - 'Stable*'
     tags:
       - 'v*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
   pull_request:
     branches:
-      - '*'
+    - '*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
 
 defaults:
   run:

.github/workflows/windows_release.yml

@@ -7,9 +7,15 @@ on:
       - 'Stable*'
     tags:
       - 'v*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
   pull_request:
     branches:
     - '*'
+    paths-ignore:
+      - 'docs/**'
+      - '.github/workflows/**'
 
 defaults:
   run:

.gitignore

@@ -86,3 +86,8 @@ src/latex/
 Qt*-linux*.tar.*
 
 .vs/
+
+# vitepress - user guide
+node_modules/
+docs/.vitepress/cache/
+docs/.vitepress/dist/

docs/.vitepress/config.mjs

@@ -0,0 +1,163 @@
+const getSidebar = require("./get_sidebar.js");
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "QGC Guide (4.3)",
+  description:
+    "How to use and develop QGroundControl for PX4 or ArduPilot powered vehicles.",
+  ignoreDeadLinks: true, // Do this for stable, where we don't yet have all translations
+  base: process.env.BRANCH_NAME ? "/" + process.env.BRANCH_NAME + "/" : "",
+
+  head: [
+    [
+      "script",
+      {
+        async: "",
+        src: "https://www.googletagmanager.com/gtag/js?id=UA-33658859-3",
+      },
+    ],
+    [
+      "script",
+      {},
+      `window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-33658859-3');`,
+    ],
+  ],
+
+  locales: {
+    en: {
+      label: "English",
+      //lang: "en",
+      themeConfig: {
+        sidebar: getSidebar.sidebar({ lang: "en" }),
+
+        editLink: {
+          pattern:
+            "https://github.com/mavlink/qgroundcontrol/edit/master/docs/:path",
+          text: "Edit on GitHub",
+        },
+      },
+    },
+    zh: {
+      label: "中文 (Chinese)",
+      lang: "zh-CN", // optional, will be added  as `lang` attribute on `html` tag
+      themeConfig: {
+        sidebar: getSidebar.sidebar({ lang: "zh" }),
+      },
+      // other locale specific properties...
+    },
+    ko: {
+      label: "한국어 (Korean)",
+      lang: "ko-KR", // optional, will be added  as `lang` attribute on `html` tag
+      themeConfig: {
+        sidebar: getSidebar.sidebar({ lang: "ko" }),
+      },
+
+      // other locale specific properties...
+    },
+    tr: {
+      label: "Türkçe (Turkish)",
+      lang: "tr-TR", // optional, will be added  as `lang` attribute on `html` tag
+      themeConfig: {
+        sidebar: getSidebar.sidebar({ lang: "tr" }),
+      },
+
+      // other locale specific properties...
+    },
+  },
+
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: "qgc_icon.png",
+    //sidebar: getSidebar.sidebar({ lang: "en" }),
+    search: {
+      provider: "local",
+    },
+
+    nav: [
+      {
+        text: "QGroundControl",
+        items: [
+          {
+            text: "Website",
+            link: "http://qgroundcontrol.com/",
+            ariaLabel: "QGC website link",
+          },
+          {
+            text: "Source Code",
+            link: "https://github.com/mavlink/qgroundcontrol",
+          },
+          {
+            text: "Docs Source Code",
+            link: "https://github.com/mavlink/qgroundcontrol/tree/master/doc",
+          },
+        ],
+      },
+      {
+        text: "Flight Stacks",
+        items: [
+          {
+            text: "PX4",
+            link: "https://docs.px4.io/en/",
+            ariaLabel: "PX4 docs link",
+          },
+          {
+            text: "ArduPilot",
+            link: "http://ardupilot.org",
+            ariaLabel: "ArduPilot site link",
+          },
+        ],
+      },
+      {
+        text: "Dronecode",
+        items: [
+          {
+            text: "PX4",
+            link: "https://px4.io/",
+            ariaLabel: "PX4 website link",
+          },
+          {
+            text: "QGroundControl",
+            link: "http://qgroundcontrol.com/",
+          },
+          {
+            text: "MAVSDK",
+            link: "https://mavsdk.mavlink.io/",
+          },
+          {
+            text: "MAVLINK",
+            link: "https://mavlink.io/en/",
+          },
+          {
+            text: "Dronecode Camera Manager",
+            link: "https://camera-manager.dronecode.org/en/",
+          },
+        ],
+      },
+      {
+        text: "Support",
+        link: "https://docs.qgroundcontrol.com/master/en/support/support.html",
+      },
+      {
+        text: "Version",
+        items: [
+          {
+            text: "master",
+            link: "https://docs.qgroundcontrol.com/master/en/",
+          },
+          {
+            text: "v4.3",
+            link: "https://docs.qgroundcontrol.com/Stable_V4.3/en/",
+          },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/mavlink/qgroundcontrol" },
+    ],
+  },
+});

docs/.vitepress/get_sidebar.js

@@ -0,0 +1,269 @@
+// .vuepress/get_sidebar.js
+
+import path from "path";
+import fs from "fs";
+import readline from "readline";
+
+function getEntryArray(parent) {
+  let returnEntryArray = null;
+  //console.log("getEntryArray(): parent");
+  //console.log(parent);
+  //Gets returns the child array
+  //if (parent === "undefined") {
+  //  return [];
+  //}
+
+  if (Array.isArray(parent)) {
+    //This parent is an array, so return it (it is the sidebar top level)
+    returnEntryArray = parent;
+    //console.log("isArray");
+  }
+  parent.items = parent?.items ? parent.items : [];
+  //console.log("isNotArray");
+  //console.log("returnEntryArray:");
+  returnEntryArray = parent.items;
+  //console.log(returnEntryArray);
+  return returnEntryArray;
+}
+
+function parseGitbookSidebarToVuepress(sidebarContent, lang, section) {
+  const lines = sidebarContent.split("\n");
+
+  const newSidebar = [];
+
+  let first_iteration = true;
+  let indent_divider = 0;
+
+  const parents = [];
+  //console.log("parents - empty after creaton");
+  //console.log(parents);
+
+  const topLevelParent = {
+    title: "DUMMY",
+    path: "DUMMY",
+    //level: "0",
+    //items: [],
+  };
+  topLevelParent.items = [];
+  //console.log("topLevelParent - empty after creaton");
+  //console.log(topLevelParent);
+
+  parents.push(topLevelParent); // So last item is always the sidebar
+  //console.log("parents after pushing topLevelParent:");
+  //console.log(parents);
+
+  let current_parent;
+
+  let lastlevel = 0;
+  let last_item;
+
+  //let currentSection;
+  //let currentLevel = 0;
+
+  lines.forEach((line) => {
+    if (line.startsWith("#") || line.trim() === "") {
+      // Ignore lines that start with "#" or are empty
+      // Note, we should perhaps create sections for these. TBD.
+      return;
+    }
+
+    //console.log("DEBUG: Line: " + line);
+
+    let regex = /(\s*?)[\*-]\s\[(.*?)\]\((.*?)\)/g;
+
+    let indent_level = "";
+    let link_title = "";
+    let link_url = "";
+    let link_path = "";
+
+    try {
+      //console.log(`DEBUG: Lastitem at start:  ${JSON.stringify(last_item)}`);
+      let match = regex.exec(line);
+      //console.log('0: '+ match[0])
+      indent_level = match[1].length;
+      link_title = match[2];
+      link_url = match[3].trim();
+      link_path = link_url;
+    } catch (err) {
+      //Just skip empty lines that don't match
+      console.log(err);
+      console.log("DEBUG: Couldn't match line, skip line using return");
+      return;
+    }
+
+    try {
+      /*
+      if (link_url.endsWith("README.md")) {
+        link_url = link_url.replace("README.md", "");
+      }
+      */
+      if (link_url.endsWith(".md")) {
+        link_url = link_url.replace(".md", ".html");
+        //link_path = link_path.replace(".md", ".html");
+      }
+
+      if (!link_url.startsWith("http")) {
+        if (lang) {
+          link_url = `/${lang}/${link_url}`;
+        } else {
+          link_url = `/${link_url}`;
+        }
+      }
+
+      //Tidy up some of the title escaping that isn't used by VuePress
+      link_title = link_title.replace("\\(", "(");
+      link_title = link_title.replace("\\)", ")");
+      link_title = link_title.replace("\\_", "_");
+
+      //set indent_divider level (easier to think in levels, numbers of zero prefixes)
+      if ((indent_divider == 0) & (indent_level > 0.0)) {
+        indent_divider = indent_level;
+      }
+      if (indent_divider > 0) {
+        indent_level = indent_level / indent_divider;
+      }
+
+      let entry = {
+        text: link_title,
+        link: link_url,
+        //collapsed: true,
+        //link_path,
+        //level: indent_level,
+        //collapsible: true,
+      };
+      //console.log("entry:");
+      //console.log(entry);
+
+      //console.log("parents:");
+      //console.log(parents);
+      //console.log("current_parent - before pop");
+      //console.log(current_parent);
+      current_parent = parents.pop();
+      //console.log("current_parent - after pop");
+      //console.log(current_parent);
+
+      //console.log(`XX ST: indent: ${indent_level} lastlevel: ${lastlevel}`);
+      if (indent_level == lastlevel) {
+        //console.log(`XX EQ:`);
+        //console.log(current_parent);
+        const parentArray = getEntryArray(current_parent);
+        parentArray.push(entry);
+        //console.log("current_parent after pushing last entry");
+        //console.log(current_parent);
+
+        //console.log("eq parents before pushing back current parent");
+        //console.log(parents);
+        parents.push(current_parent);
+        //console.log("EQ parents after pushing current parent");
+        //console.log(parents);
+
+        //console.log("XX EQ3");
+      } else if (indent_level > lastlevel) {
+        //console.log("XX NEST");
+        //console.log(
+        //  `  DEBUG:NEST: lastlev: ${lastlevel}/indent lev: ${indent_level}`
+        // );
+        // This is a child of the last element added to current parent
+
+        //console.log(current_parent);
+        //console.log("NEST: current_parent - after pop");
+        //console.log("NEST: parents before");
+        //console.log(parents);
+
+        const parentArray = getEntryArray(current_parent);
+
+        //console.log(
+        //  "parentArray - we want to add entry to last entry in this array."
+        //);
+        //console.log(parentArray);
+
+        //Get the last element
+        //console.log(`how many elements in array ${parentArray.length}`);
+        //
+        const lastElement = parentArray.pop();
+        lastElement.collapsed = true;
+        //console.log(`NEST: last element in array:`);
+        //console.log(lastElement);
+        const lastElementArray = getEntryArray(lastElement);
+        //console.log(`NEST: last element array:`);
+        lastElementArray.push(entry);
+        //console.log(`NEST: last element after pushing event:`);
+        //console.log(lastElement);
+        // Push the last element back on to the parentArray
+        parentArray.push(lastElement);
+        //push current parent onto the parents array
+        parents.push(current_parent);
+        // push the element we just edited back onto the array so it can be current parent.
+        parents.push(lastElement);
+        //console.log("NEST: parents after");
+        //console.log(parents);
+      } else if (indent_level < lastlevel) {
+        // gone up a level
+        //console.log(`XX UP`);
+        while (indent_level < lastlevel--) {
+          //console.log(`pop ${lastlevel}`);
+          //Here we have no item. Group has finished (with a group)
+          //So add the current parent (finished) to its parent.
+          //console.log('DEBUG: Gone UP from level: '+ indent_level + ' TO: ' + lastlevel)
+
+          current_parent = parents.pop();
+        }
+        const parentArray = getEntryArray(current_parent);
+        parentArray.push(entry);
+        //console.log("current_parent after pushing last entry");
+        //console.log(current_parent);
+
+        //console.log("eq parents before pushing back current parent");
+        //console.log(parents);
+        parents.push(current_parent);
+      }
+
+      //console.log("AFTER ADDING Entry:");
+      //console.log("entry:");
+      //console.log(entry);
+      //console.log("parents:");
+      //console.log(parents);
+    } catch (err) {
+      console.log(err);
+      console.log(` DEBUG SOME ACTUAL PROBLEMXX2: ${err}`);
+    }
+
+    //last_item = entry;
+
+    lastlevel = indent_level; //reset
+    //console.log(`END OF ONE LINE:${indent_level} lastlevel: ${lastlevel}`);
+    //console.log("PARENTS");
+    //console.log(JSON.stringify(parents));
+  });
+
+  //all lines done
+  //console.log("All lines done parents:");
+  //console.log(JSON.stringify(parents));
+
+  //console.log("topLevelParent");
+  //console.log(topLevelParent);
+  return topLevelParent.items;
+}
+
+module.exports = {
+  sidebar: function ({ lang = "", section = "" }) {
+    const summaryfile_path = path.resolve(__dirname, "..", lang, "SUMMARY.md");
+    //console.log("DEBUG: summaryfile_path: " + summaryfile_path);
+    let data = "";
+
+    try {
+      // read contents of the file
+      data = fs.readFileSync(summaryfile_path, "UTF-8");
+    } catch (err) {
+      console.log(
+        `DEBUG: ${lang} (${summaryfile_path}) - SIDEBAR  DEFINITION NOT FOUND`,
+      );
+    }
+
+    const module_sidebar = parseGitbookSidebarToVuepress(data, lang);
+    //console.log(`DEBUG: Before`);
+    //console.log(`DEBUG: ${JSON.stringify(module_sidebar)}`);
+    //console.log(`DEBUG: After`);
+    return module_sidebar;
+  },
+};

docs/.vitepress/theme/index.js

@@ -0,0 +1,17 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    });
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  },
+};

docs/.vitepress/theme/style.css

@@ -0,0 +1,138 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}