refactor: import node:process and add vitepress

.eslintignore

@@ -3,3 +3,5 @@ public
 
 packages/valaxy/index.d.ts
 packages/valaxy/client.d.ts
+
+cache

docs/.gitignore

@@ -0,0 +1 @@
+.vitepress/cache

docs/.vitepress/config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Valaxy Docs',
+  description: 'Docs for Valaxy',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Examples', link: '/markdown-examples' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: 'Runtime API Examples', link: '/api-examples' },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+    ],
+  },
+})

docs/.vitepress/theme/index.ts

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

docs/.vitepress/theme/style.css

@@ -0,0 +1,91 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand: #646cff;
+  --vp-c-brand-light: #747bff;
+  --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-lightest: #bcc0ff;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * 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(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+

docs/index.md

@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Valaxy Docs"
+  text: "Docs for Valaxy"
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: Markdown Examples
+      link: /markdown-examples
+    - theme: alt
+      text: API Examples
+      link: /api-examples
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+

docs/package.json

@@ -7,7 +7,10 @@
     "build:ssg": "valaxy build --ssg",
     "dev": "nodemon -w \"../packages/valaxy/dist/*.cjs\" --exec \"valaxy .\"",
     "rss": "valaxy rss",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "docs:dev": "vitepress dev",
+    "docs:build": "vitepress build",
+    "docs:preview": "vitepress preview"
   },
   "dependencies": {
     "valaxy": "link:../packages/valaxy",
@@ -15,6 +18,7 @@
     "valaxy-theme-press": "link:../packages/valaxy-theme-press"
   },
   "devDependencies": {
-    "nodemon": "^2.0.22"
+    "nodemon": "^2.0.22",
+    "vitepress": "1.0.0-beta.5"
   }
 }

docs/valaxy.config.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { defineValaxyConfig } from 'valaxy'
 import type { PressTheme } from 'valaxy-theme-press'
 import { addonAlgolia } from 'valaxy-addon-algolia'

packages/create-valaxy-theme/index.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
 
+const process = require('node:process')
+
 const argv = require('minimist')(process.argv.slice(2))
 const prompts = require('prompts')
 const execa = require('execa')

packages/create-valaxy/index.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
 
+const process = require('node:process')
 const fs = require('node:fs')
 const path = require('node:path')
 const argv = require('minimist')(process.argv.slice(2))

packages/valaxy/client/composables/outline/anchor.ts

@@ -47,14 +47,15 @@ export function useActiveAnchor(
     const scrollY = window.scrollY
     const innerHeight = window.innerHeight
     const offsetHeight = container.value.offsetHeight
-    const isBottom = scrollY + innerHeight === offsetHeight
+    const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1
 
     // console.log(scrollY, innerHeight, offsetHeight)
     // console.log(isBottom)
 
     // page bottom - highlight last one
     if (anchors.length && isBottom) {
-      activateLink(null)
+      activateLink(anchors[anchors.length - 1].hash)
+      // activateLink(null)
       return
     }
 

packages/valaxy/client/composables/outline/index.ts

@@ -1,2 +1,4 @@
+// ref vitepress theme-default/composables/outline.ts
+
 export * from './headers'
 export * from './anchor'

packages/valaxy/client/composables/sidebar.ts

@@ -1,118 +1,7 @@
-import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useFrontmatter } from './common'
 import { useLayout } from './layout'
 
-export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<HTMLElement>) {
-  const onScroll = throttleAndDebounce(setActiveLink, 200)
-
-  function setActiveLink(): void {
-    const sidebarLinks = [].slice.call(
-      document.querySelectorAll('.va-toc a.toc-link-item'),
-    ) as HTMLAnchorElement[]
-
-    const anchors = [].slice
-      .call(document.querySelectorAll('main .header-anchor'))
-      .filter((anchor: HTMLAnchorElement) =>
-        sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
-      ) as HTMLAnchorElement[]
-
-    for (let i = 0; i < anchors.length; i++) {
-      const anchor = anchors[i]
-      const nextAnchor = anchors[i + 1]
-
-      const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
-
-      if (isActive) {
-        history.replaceState(history.state, document.title, hash || ' ')
-        activateLink(hash)
-        return
-      }
-    }
-  }
-
-  let prevActiveLink: HTMLAnchorElement | null = null
-
-  function activateLink(hash: string | null): void {
-    deactiveLink(prevActiveLink)
-
-    const activeLink = (prevActiveLink
-      = hash == null
-        ? null
-        : container.value.querySelector(`.va-toc a[href="${hash}"]`) as HTMLAnchorElement)
-
-    // marker animation
-    if (marker.value) {
-      if (activeLink) {
-        activeLink.classList.add('active')
-        marker.value.style.opacity = '1'
-        marker.value.style.top = `${activeLink.offsetTop + 2}px`
-      }
-      else {
-        marker.value.style.opacity = '0'
-        marker.value.style.top = '54px'
-      }
-    }
-  }
-
-  function deactiveLink(link: HTMLAnchorElement | null): void {
-    link && link.classList.remove('active')
-  }
-
-  onMounted(() => {
-    requestAnimationFrame(setActiveLink)
-    window.addEventListener('scroll', onScroll)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('scroll', onScroll)
-  })
-}
-
-function getAnchorTop(anchor: HTMLAnchorElement): number {
-  return anchor.parentElement!.offsetTop - 50
-}
-
-function isAnchorActive(
-  index: number,
-  anchor: HTMLAnchorElement,
-  nextAnchor: HTMLAnchorElement,
-): [boolean, string | null] {
-  const scrollTop = window.scrollY
-
-  if (index === 0 && scrollTop === 0)
-    return [true, null]
-
-  if (scrollTop < getAnchorTop(anchor))
-    return [false, null]
-
-  if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor))
-    return [true, decodeURIComponent(anchor.hash)]
-
-  return [false, null]
-}
-
-function throttleAndDebounce(fn: () => void, delay: number): () => void {
-  let timeout: ReturnType<typeof setTimeout>
-  let called = false
-
-  return () => {
-    if (timeout)
-      clearTimeout(timeout)
-
-    if (!called) {
-      fn()
-      called = true
-      setTimeout(() => {
-        called = false
-      }, delay)
-    }
-    else {
-      timeout = setTimeout(fn, delay)
-    }
-  }
-}
-
 /**
  * helper for sidebar
  */

packages/valaxy/node/cli.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import { exec } from 'node:child_process'
+import process from 'node:process'
 import fs from 'fs-extra'
 import yargs from 'yargs'
 import type { InlineConfig, LogLevel } from 'vite'

packages/valaxy/node/cli/utils/constants.ts

@@ -1,3 +1,5 @@
+import process from 'node:process'
+
 export const userRoot = process.cwd()
 
 export const defaultPostTemplate = `---

packages/valaxy/node/config/utils.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import type { LoadConfigSource } from 'unconfig'
 import { loadConfig } from 'unconfig'
 import { normalizePath } from 'vite'

packages/valaxy/node/options.ts

@@ -1,4 +1,5 @@
 import { dirname, resolve } from 'node:path'
+import process from 'node:process'
 import fs from 'fs-extra'
 import _debug from 'debug'
 import fg from 'fast-glob'

packages/valaxy/node/server.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import type { InlineConfig } from 'vite'
 import { createServer as createViteServer, mergeConfig as mergeViteConfig } from 'vite'
 

packages/valaxy/node/utils/addons.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path'
+import process from 'node:process'
 import fs from 'fs-extra'
 import defu from 'defu'
 import { cyan, yellow } from 'kolorist'

packages/valaxy/node/utils/cli.ts

@@ -1,6 +1,7 @@
 import * as readline from 'node:readline'
 import path from 'node:path'
 import os from 'node:os'
+import process from 'node:process'
 
 import { blue, bold, cyan, dim, gray, green, underline, yellow } from 'kolorist'
 import consola from 'consola'

packages/valaxy/node/utils/config.ts

@@ -1,10 +1,11 @@
 import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
+import process from 'node:process'
 import { mergeConfig as mergeViteConfig } from 'vite'
 import { createDefu } from 'defu'
 import { isFunction } from '@antfu/utils'
-
 import { cyan, dim } from 'kolorist'
+
 import type { ResolvedValaxyOptions, ValaxyEntryOptions } from '../options'
 import type { ValaxyAddonFn, ValaxyAddonResolver, ValaxyConfigFn, ValaxyNodeConfig } from '../types'
 import { loadConfigFromFile } from '../config/utils'

packages/valaxy/node/utils/env.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { logger } from '../logger'
 
 export function isProd() {

pnpm-lock.yaml

@@ -963,11 +963,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helper-string-parser@7.21.5:
-    resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
   /@babel/helper-string-parser@7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
@@ -1026,14 +1021,6 @@ packages:
       '@babel/types': 7.21.4
     dev: false
 
-  /@babel/parser@7.22.4:
-    resolution: {integrity: sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.4
-    dev: false
-
   /@babel/parser@7.22.7:
     resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==}
     engines: {node: '>=6.0.0'}
@@ -1959,15 +1946,6 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
-  /@babel/types@7.22.4:
-    resolution: {integrity: sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.21.5
-      '@babel/helper-validator-identifier': 7.19.1
-      to-fast-properties: 2.0.0
-    dev: false
-
   /@babel/types@7.22.5:
     resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
     engines: {node: '>=6.9.0'}
@@ -2065,7 +2043,7 @@ packages:
     resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
     dependencies:
       '@esbuild-kit/core-utils': 3.1.0
-      get-tsconfig: 4.5.0
+      get-tsconfig: 4.6.2
     dev: true
 
   /@esbuild-kit/core-utils@3.1.0:
@@ -2079,7 +2057,7 @@ packages:
     resolution: {integrity: sha512-Qwfvj/qoPbClxCRNuac1Du01r9gvNOT+pMYtJDapfB1eoGN1YlJ1BixLyL9WVENRx5RXgNLdfYdx/CuswlGhMw==}
     dependencies:
       '@esbuild-kit/core-utils': 3.1.0
-      get-tsconfig: 4.5.0
+      get-tsconfig: 4.6.2
     dev: true
 
   /@esbuild/android-arm64@0.17.19:
@@ -3945,15 +3923,15 @@ packages:
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
-      '@babel/parser': 7.22.4
+      '@babel/parser': 7.22.7
       '@vue/compiler-core': 3.3.4
       '@vue/compiler-dom': 3.3.4
       '@vue/compiler-ssr': 3.3.4
       '@vue/reactivity-transform': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.0
-      postcss: 8.4.24
+      magic-string: 0.30.1
+      postcss: 8.4.25
       source-map-js: 1.0.2
     dev: false
 
@@ -4007,11 +3985,11 @@ packages:
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
-      '@babel/parser': 7.22.4
+      '@babel/parser': 7.22.7
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.0
+      magic-string: 0.30.1
     dev: false
 
   /@vue/reactivity@3.3.4:
@@ -5541,7 +5519,7 @@ packages:
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
       is-core-module: 2.12.1
-      resolve: 1.22.3
+      resolve: 1.22.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6387,10 +6365,6 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
-  /get-tsconfig@4.5.0:
-    resolution: {integrity: sha512-MjhiaIWCJ1sAU4pIQ5i5OfOuHHxVo1oYeNsWTON7jxYkod8pHocXeh+SSbmu5OZZZK73B6cbJ2XADzXehLyovQ==}
-    dev: true
-
   /get-tsconfig@4.6.2:
     resolution: {integrity: sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==}
     dependencies:
@@ -9718,7 +9692,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.4(@types/node@20.4.2)
+      vite: 4.4.4(@types/node@20.4.2)(sass@1.63.6)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -9847,42 +9821,6 @@ packages:
       - utf-8-validate
     dev: false
 
-  /vite@4.4.4(@types/node@20.4.2):
-    resolution: {integrity: sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 20.4.2
-      esbuild: 0.18.11
-      postcss: 8.4.25
-      rollup: 3.26.2
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.4.4(@types/node@20.4.2)(sass@1.63.6):
     resolution: {integrity: sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -9971,7 +9909,7 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.5.0
       tinypool: 0.6.0
-      vite: 4.4.4(@types/node@20.4.2)
+      vite: 4.4.4(@types/node@20.4.2)(sass@1.63.6)
       vite-node: 0.33.0(@types/node@20.4.2)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:

scripts/release.ts

@@ -1,8 +1,8 @@
+import process from 'node:process'
 import prompts from 'prompts'
 import semver from 'semver'
 import { yellow } from 'kolorist'
 import consola from 'consola'
-
 import { $ } from 'zx'
 
 import minimist from 'minimist'

test/addon.test.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { describe, expect, it } from 'vitest'
 import { getAddonRoot, readAddonModule } from '../packages/valaxy/node/utils/addons'
 

tsconfig.json

@@ -38,5 +38,5 @@
     "./packages/**/*.ts",
     "./packages/**/*.vue"
   ],
-  "exclude": ["**/dist/**", "node_modules", "cypress"]
+  "exclude": ["**/dist/**", "node_modules", "cypress", "cache"]
 }