updated vuepress; added mermaid

docs/.vuepress/components/myHomeFeatures.vue

@@ -1,23 +1,66 @@
 <script setup lang="ts">
-import {usePageFrontmatter} from '@vuepress/client';
-import {isArray} from '@vuepress/shared';
-import {computed} from 'vue';
-import type {DefaultThemeHomePageFrontmatter} from '@vuepress/theme-default/lib/client/components/../../shared/index.js';
+import { computed } from 'vue';
+import { usePageFrontmatter } from 'vuepress/client';
+import type { DefaultThemeHomePageFrontmatter } from '../../shared/index.js';
 
 const frontmatter = usePageFrontmatter<DefaultThemeHomePageFrontmatter>();
-const features = computed(() => {
-  if (isArray(frontmatter.value.features)) {
-    return frontmatter.value.features;
-  }
-  return [];
-});
+
+const features = computed(() => frontmatter.value.features ?? []);
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="features.length" class="features">
-    <div v-for="feature in features" :key="feature.title" class="feature">
+  <div v-if="features.length" class="vp-features">
+    <div v-for="feature in features" :key="feature.title" class="vp-feature">
       <h2>{{ feature.title }}</h2>
       <div v-html="feature.details"></div>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+@use '@vuepress/theme-default/lib/client/styles/variables' as *;
+
+.vp-features {
+  display: flex;
+  flex-wrap: wrap;
+  place-content: stretch space-between;
+  align-items: flex-start;
+
+  margin-top: 2.5rem;
+  padding: 1.2rem 0;
+  border-top: 1px solid var(--vp-c-gutter);
+
+  transition: border-color var(--vp-t-color);
+
+  @media (max-width: $MQMobile) {
+    flex-direction: column;
+  }
+}
+
+.vp-feature {
+  flex-grow: 1;
+  flex-basis: 30%;
+  max-width: 30%;
+
+  @media (max-width: $MQMobile) {
+    max-width: 100%;
+    padding: 0 2.5rem;
+  }
+
+  h2 {
+    padding-bottom: 0;
+    border-bottom: none;
+    font-weight: 500;
+    font-size: 1.4rem;
+
+    @media (max-width: $MQMobileNarrow) {
+      font-size: 1.25rem;
+    }
+  }
+
+  p {
+    color: var(--vp-c-text-mute);
+  }
+}
+</style>

docs/.vuepress/components/myNavbarBrand.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import { useDarkMode } from '@theme/useDarkMode';
+import { useThemeLocaleData } from '@theme/useThemeData';
+import type { FunctionalComponent } from 'vue';
+import { computed, h } from 'vue';
 import {
   ClientOnly,
+  RouteLink,
   useRouteLocale,
   useSiteLocaleData,
   withBase,
-} from '@vuepress/client';
-import {computed, h} from 'vue';
-import type {FunctionalComponent} from 'vue';
-import {
-  useDarkMode,
-  useThemeLocaleData,
-} from '@vuepress/theme-default/lib/client/composables/index.js';
+} from 'vuepress/client';
 import Versions from './versions.vue';
+
 const routeLocale = useRouteLocale();
 const siteLocale = useSiteLocaleData();
 const themeLocale = useThemeLocaleData();
@@ -27,12 +27,20 @@ const navbarBrandLogo = computed(() => {
   }
   return themeLocale.value.logo;
 });
+const navbarBrandLogoAlt = computed(
+  () => themeLocale.value.logoAlt ?? navbarBrandTitle.value,
+);
+const navBarLogoAltMatchesTitle = computed(
+  () =>
+    navbarBrandTitle.value.toLocaleUpperCase().trim() ===
+    navbarBrandLogoAlt.value.toLocaleUpperCase().trim(),
+);
 const NavbarBrandLogo: FunctionalComponent = () => {
   if (!navbarBrandLogo.value) return null;
   const img = h('img', {
-    class: 'logo',
+    class: 'vp-site-logo',
     src: withBase(navbarBrandLogo.value),
-    alt: navbarBrandTitle.value,
+    alt: navbarBrandLogoAlt.value,
   });
   if (themeLocale.value.logoDark === undefined) {
     return img;
@@ -44,24 +52,39 @@ const NavbarBrandLogo: FunctionalComponent = () => {
 </script>
 
 <template>
-  <div class="nb-navbar-brand">
-    <RouterLink :to="navbarBrandLink">
-      <NavbarBrandLogo />
-    </RouterLink>
-    <Versions />
-  </div>
+  <RouteLink :to="navbarBrandLink">
+    <NavbarBrandLogo />
+  </RouteLink>
+  <Versions />
 </template>
 
-<style>
-@media only screen and (max-width: 400px) {
-  .nb-navbar-brand .logo {
-    width: 70px;
-  }
-  .nb-navbar-brand span {
-    font-size: 0.8em;
-  }
-  .navbar .navbar-items-wrapper {
-    padding-left: 0 !important;
+<style lang="scss">
+@use '@vuepress/theme-default/lib/client/styles/variables' as *;
+
+.vp-site-logo {
+  vertical-align: top;
+  height: var(--navbar-line-height);
+  margin-right: var(--navbar-padding-v);
+}
+
+.vp-site-name {
+  position: relative;
+  color: var(--vp-c-text);
+  font-weight: 600;
+  font-size: 1.3rem;
+
+  @media screen and (max-width: $MQMobile) {
+    display: block;
+
+    overflow: hidden;
+
+    // 5.5rem for navbar padding-inline
+    // 4.5rem for ColorModeSwitch and SearchBox
+    // 1rem for gap
+    width: calc(100vw - 11rem);
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 </style>

docs/.vuepress/config.js

@@ -1,14 +1,17 @@
-import codeCopyPlugin from '@snippetors/vuepress-plugin-code-copy';
+import { viteBundler } from '@vuepress/bundler-vite';
 import { docsearchPlugin } from '@vuepress/plugin-docsearch';
+import { defaultTheme } from '@vuepress/theme-default';
 import { getDirname, path } from '@vuepress/utils';
 import markdownItInclude from 'markdown-it-include';
-import { defaultTheme, defineUserConfig } from 'vuepress';
+import { defineUserConfig } from 'vuepress';
+import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';
 import packageJson, { description } from '../../package';
-
 const __dirname = getDirname(import.meta.url);
 
 const base = `/NotifyBC${process.env.notifyBCDocVersion_PATH || '/'}`;
 export default defineUserConfig({
+  bundler: viteBundler(),
+
   base,
   /**
    * Ref：https://v1.vuepress.vuejs.org/config/#title
@@ -42,11 +45,11 @@ export default defineUserConfig({
   ],
 
   alias: {
-    '@theme/NavbarBrand.vue': path.resolve(
+    '@theme/VPNavbarBrand.vue': path.resolve(
       __dirname,
       './components/myNavbarBrand.vue',
     ),
-    '@theme/HomeFeatures.vue': path.resolve(
+    '@theme/VPHomeFeatures.vue': path.resolve(
       __dirname,
       './components/myHomeFeatures.vue',
     ),
@@ -61,7 +64,10 @@ export default defineUserConfig({
       indexName: 'notifybc',
       indexBase: '/NotifyBC/',
     }),
-    codeCopyPlugin(),
+    mdEnhancePlugin({
+      // Enable mermaid
+      mermaid: true,
+    }),
   ],
 
   extendsMarkdown: (md) => {

docs/docs/miscellaneous/disaster-recovery.md

@@ -4,16 +4,18 @@ permalink: /docs/disaster-recovery/
 
 # Disaster Recovery
 
-_NotifyBC_ api server consists of three runtime components
+_NotifyBC_ consists of three runtime components
 
-1. app server
-2. MongoDB server
-3. Redis server
+```mermaid
+flowchart TD
+    A(API server) --> B(MongoDB)
+    A --> C(Redis)
+```
 
 Each runtime component is horizontally scalable to form a high-availability cluster. Such HA cluster is resilient to the failure of individual node.
 
 Under disastrous circumstances, however, entire HA cluster may fail. Recovery should be performed in this order
 
-1. MongoDB server
-2. Redis server
-3. app server
+1. MongoDB
+2. Redis
+3. API server

docs/index.md

@@ -43,7 +43,7 @@ head:
 ---
 
 <style>
-.home .hero img {
+.vp-home .vp-hero img {
   margin-top: 0;
   height: 100%;
 }