Upgrade vuepress (#167)

* Half-working

* Colors working

* Fixed lists and fine tuned Open API spec

* Cleaned up config

* fixed lint

* added support comment

* Set minimum node

* Create .nvmrc

Author: abergs

.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.temp
+.cache
+src/.vuepress/dist
+src/.vuepress/.temp
+src/.vuepress/.cache
+*.min.js

.nvmrc

@@ -0,0 +1 @@
+20.10.0

README.md

@@ -27,3 +27,7 @@ When contributing PRs, please do your best to follow these guidelines:
 - Always capitalize "Passwordless.dev" and "Bitwarden".
 - Feel free to use **bold** text to emphasize words or phrases, but please avoid italics or underlines.
 - Use numerals (e.g. 1, 2, 3) to represent numbers.
+
+## Support
+
+If you need help with your Passwordless.dev integration, please reach out to [email protected].

package-lock.json

@@ -8,26 +8,30 @@
     "email": "[email protected]"
   },
   "repository": "https://github.com/passwordless/docs",
+  "engines": {
+    "node": ">=20.10.0"
+  },
   "scripts": {
     "dev": "vuepress dev src",
     "build": "vuepress build src",
-    "lint": "vuepress check-md src --fix && prettier . --write && eslint \"**/*.{js,vue}\" --fix",
-    "lint:check": "vuepress check-md src && prettier . --check && eslint \"**/*.{js,vue}\""
+    "lint": "prettier . --write && eslint \"**/*.{js,ts,vue}\" --fix",
+    "lint:check": "prettier . --check && eslint \"**/*.{js,ts,vue}\""
   },
   "dependencies": {
     "@passwordlessdev/passwordless-client": "1.1.2",
     "swagger-ui-dist": "5.12.3"
   },
   "devDependencies": {
-    "@vuepress/plugin-docsearch": "2.0.0-rc.0",
-    "@vuepress/plugin-register-components": "2.0.0-rc.0",
+    "@vuepress/bundler-vite": "2.0.0-rc.26",
+    "@vuepress/plugin-docsearch": "2.0.0-rc.115",
+    "@vuepress/plugin-register-components": "2.0.0-rc.114",
+    "@vuepress/theme-default": "2.0.0-rc.115",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-vue": "9.20.1",
     "prettier": "3.2.4",
     "prettier-plugin-organize-imports": "4.0.0",
-    "vuepress": "2.0.0-rc.0",
-    "vuepress-plugin-code-switcher": "2.0.0",
-    "vuepress-plugin-md-enhance": "2.0.0-rc.12"
+    "sass-embedded": "^1.93.2",
+    "vuepress": "2.0.0-rc.26"
   }
 }

package.json

@@ -1,5 +1,5 @@
-import { defaultTheme } from 'vuepress';
-import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';
+import { viteBundler } from '@vuepress/bundler-vite';
+import { defaultTheme } from '@vuepress/theme-default';
 import { docsearchPlugin } from '@vuepress/plugin-docsearch';
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components';
 import * as path from 'path';
@@ -10,6 +10,7 @@ export default {
   title: 'Passwordless.dev Documentation',
   base: '/',
   description: description,
+  bundler: viteBundler(),
   head: [
     ['link', { rel: 'icon', href: '/icon.svg' }],
     ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
@@ -72,7 +73,7 @@ export default {
           },
           {
             collapsible: true,
-            link: '/guide/backend',
+            link: '/guide/backend/',
             text: 'Backend',
             children: [
               {
@@ -107,7 +108,7 @@ export default {
           },
           {
             collapsible: true,
-            link: '/guide/frontend',
+            link: '/guide/frontend/',
             text: 'Frontend',
             children: [
               {
@@ -189,19 +190,12 @@ export default {
 
   plugins: [
     docsearchPlugin({
+      appId: 'H4XQ4LY5NY',
       apiKey: '76fc9fe901fe62268368f74e492ccbd0',
       indexName: 'passwordless',
-      appId: 'H4XQ4LY5NY'
-    }),
-    mdEnhancePlugin({
-      breaks: true,
-      imgMark: true,
-      imgSize: true,
-      checkLinks: {
-        status: 'dev'
-      },
-      codetabs: true,
-      tabs: true
+      searchParameters: {
+        facetFilters: []
+      }
     }),
     registerComponentsPlugin({
       componentsDir: path.resolve(__dirname, './components')

src/.vuepress/config.ts

@@ -1,11 +1,23 @@
-@import 'docsearch';
+@use 'docsearch';
 
 :root {
-  // brand colors
+  // brand colors (VuePress 2.x uses --vp-c-accent for primary brand color)
+  --vp-c-accent: #175ddc;
+  --vp-c-accent-bg: #175ddc;
+  --vp-c-accent-hover: #1250c4;
+  --vp-c-accent-text: #ffffff;
+  --vp-c-accent-soft: rgba(23, 93, 220, 0.14);
+
+  // Legacy variable names for backward compatibility
   --c-brand: #175ddc;
   --c-brand-light: #175ddc;
 
-  // background colors
+  // background colors (VuePress 2.x naming)
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f3f4f5;
+  --vp-c-bg-elv: #ffffff;
+
+  // Legacy background colors
   --c-bg: #ffffff;
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eeeeee;
@@ -15,15 +27,24 @@
   --c-bg-sidebar: var(--c-bg);
   --c-bg-arrow: #cccccc;
 
-  // text colors
+  // text colors (VuePress 2.x naming)
+  --vp-c-text: #2c3e50;
+  --vp-c-text-mute: #4e6e8e;
+  --vp-c-text-subtle: #6a8bad;
+
+  // Legacy text colors
   --c-text: #2c3e50;
   --c-text-accent: var(--c-brand);
   --c-text-light: #3a5169;
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;
   --c-text-quote: #999999;
 
-  // border colors
+  // border colors (VuePress 2.x naming)
+  --vp-c-border: #eaecef;
+  --vp-c-divider: #dfe2e5;
+
+  // Legacy border colors
   --c-border: #eaecef;
   --c-border-dark: #dfe2e5;
 

src/.vuepress/styles/palette.scss

@@ -1 +1,5 @@
+# Open API
+
+This page embeds the Open API Swagger spec.
+
 <swagger-component></swagger-component>