docs: new theme (#1142)

Co-authored-by: wheat <[email protected]>

.gitpod.yml

@@ -2,5 +2,5 @@ tasks:
   - init: npm i -g pnpm && pnpm install && pnpm run build
     command: pnpm run dev
 ports:
-  - port: 6006
+  - port: 3000
     onOpen: open-preview

.vscode/settings.json

@@ -16,7 +16,6 @@
     "prepublish",
     "vue"
   ],
-  "volar.tsPlugin": true,
   "vite.vitepress": true,
   "vite.vitepressBase": "packages",
   "vite.vitepressAutoRouting": true,

meta/function-indexes.ts

@@ -3,11 +3,27 @@ import type { PackageIndexes } from './types'
 
 const indexes = _indexes as PackageIndexes
 
-export default indexes
+export { indexes }
+
+export const categoriesOrder = [
+  'Browser',
+  'Sensors',
+  'Animation',
+  'State',
+  'Elements',
+  'Component',
+  'Watch',
+  'Network',
+  'Utilities',
+  'Misc',
+]
 
 export const functions = indexes.functions
 export const functionNames = indexes.functions.map(f => f.name)
 export const getFunction = (name: string) => indexes.functions.find(f => f.name === name)
 
-export const categories = indexes.categories
 export const packages = indexes.packages
+
+export const categories = Array.from(indexes.categories)
+  .sort((a, b) => categoriesOrder.indexOf(a) - categoriesOrder.indexOf(b))
+  .sort((a, b) => a.startsWith('@') ? 1 : b.startsWith('@') ? -1 : 0)

meta/types.ts

@@ -20,6 +20,7 @@ export interface PackageManifest {
 export interface VueUseFunction {
   name: string
   package: string
+  lastUpdated: number
   category?: string
   description?: string
   docs?: string
@@ -39,3 +40,21 @@ export interface PackageIndexes {
   categories: string[]
   functions: VueUseFunction[]
 }
+
+export interface CommitInfo {
+  functions: string[]
+  version?: string
+  hash: string
+  date: string
+  message: string
+  refs?: string
+  body?: string
+  author_name: string
+  author_email: string
+}
+
+export interface ContributorInfo {
+  name: string
+  count: number
+  hash: string
+}

package.json

@@ -14,8 +14,8 @@
     "clean": "rimraf dist types packages/*/dist",
     "dev": "nr update && nr docs",
     "docs": "vitepress dev packages",
-    "docs:serve": "vitepress serve packages",
     "docs:build": "nr update:full && vitepress build packages && nr build:redirects && esno scripts/post-docs.ts",
+    "docs:serve": "vitepress serve packages",
     "lint": "eslint --ext=js,ts,tsx,vue,md,json .",
     "lint:fix": "nr lint --fix",
     "publish:ci": "esno scripts/publish.ts",
@@ -47,12 +47,15 @@
     "@rollup/plugin-replace": "^3.0.1",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
+    "@types/md5": "^2.3.1",
     "@types/node": "^17.0.8",
     "@types/prettier": "^2.4.2",
     "@types/semver": "^7.3.9",
     "@vitest/ui": "^0.0.132",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/composition-api": "^1.4.3",
+    "@vue/test-utils": "^1.3.0",
+    "@vue/theme": "^0.1.30",
     "axios": "^0.24.0",
     "bumpp": "^7.1.1",
     "consola": "^2.15.3",
@@ -66,11 +69,13 @@
     "fast-glob": "^3.2.7",
     "firebase": "^8.10.0",
     "fs-extra": "^10.0.0",
+    "fuse.js": "^6.5.3",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.1.5",
     "markdown-table": "^3.0.2",
+    "md5": "^2.3.0",
     "msw": "^0.36.3",
     "node-fetch": "^3.1.0",
     "pnpm": "^6.24.4",
@@ -88,6 +93,7 @@
     "unplugin-icons": "^0.13.0",
     "unplugin-vue-components": "^0.17.11",
     "vite": "^2.7.10",
+    "vite-plugin-inspect": "^0.3.11",
     "vite-plugin-pwa": "^0.11.12",
     "vite-plugin-windicss": "^1.6.1",
     "vitepress": "^0.20.10",

packages/.vitepress/changelog.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite'
+import { getChangeLog } from '../../scripts/changelog'
+
+const ID = '/virtual-changelog'
+
+export function ChangeLog(): Plugin {
+  return {
+    name: 'vueuse-changelog',
+    resolveId(id) {
+      return id === ID ? ID : null
+    },
+    async load(id) {
+      if (id !== ID) return null
+      return `export default ${JSON.stringify(await getChangeLog(400))}`
+    },
+  }
+}

packages/.vitepress/components.d.ts

@@ -0,0 +1,48 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BooleanDisplay: typeof import('./theme/components/BooleanDisplay.vue')['default']
+    'Carbon:camera': typeof import('~icons/carbon/camera')['default']
+    'Carbon:headphones': typeof import('~icons/carbon/headphones')['default']
+    'Carbon:microphone': typeof import('~icons/carbon/microphone')['default']
+    CarbonCafe: typeof import('~icons/carbon/cafe')['default']
+    CarbonCheckmark: typeof import('~icons/carbon/checkmark')['default']
+    CarbonClosedCaption: typeof import('~icons/carbon/closed-caption')['default']
+    CarbonContrast: typeof import('~icons/carbon/contrast')['default']
+    CarbonFilterRemove: typeof import('~icons/carbon/filter-remove')['default']
+    CarbonMeter: typeof import('~icons/carbon/meter')['default']
+    CarbonMeterAlt: typeof import('~icons/carbon/meter-alt')['default']
+    CarbonMoon: typeof import('~icons/carbon/moon')['default']
+    CarbonPause: typeof import('~icons/carbon/pause')['default']
+    CarbonPlay: typeof import('~icons/carbon/play')['default']
+    CarbonPopup: typeof import('~icons/carbon/popup')['default']
+    CarbonRepeat: typeof import('~icons/carbon/repeat')['default']
+    CarbonSearch: typeof import('~icons/carbon/search')['default']
+    CarbonSettings: typeof import('~icons/carbon/settings')['default']
+    CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonVolumeMute: typeof import('~icons/carbon/volume-mute')['default']
+    CarbonVolumeUp: typeof import('~icons/carbon/volume-up')['default']
+    Changelog: typeof import('./theme/components/Changelog.vue')['default']
+    Contributors: typeof import('./theme/components/Contributors.vue')['default']
+    DemoContainer: typeof import('./theme/components/DemoContainer.vue')['default']
+    FunctionBadge: typeof import('./theme/components/FunctionBadge.vue')['default']
+    FunctionInfo: typeof import('./theme/components/FunctionInfo.vue')['default']
+    FunctionsList: typeof import('./theme/components/FunctionsList.vue')['default']
+    Home: typeof import('./theme/components/Home.vue')['default']
+    HomeFeatures: typeof import('./theme/components/HomeFeatures.vue')['default']
+    HomeFooter: typeof import('./theme/components/HomeFooter.vue')['default']
+    HomeHero: typeof import('./theme/components/HomeHero.vue')['default']
+    LearnMoreComponents: typeof import('./theme/components/LearnMoreComponents.vue')['default']
+    MdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
+    Note: typeof import('./theme/components/Note.vue')['default']
+    OcticonGitCommit16: typeof import('~icons/octicon/git-commit16')['default']
+    OcticonGitPullRequestDraft16: typeof import('~icons/octicon/git-pull-request-draft16')['default']
+    OcticonRocket16: typeof import('~icons/octicon/rocket16')['default']
+    ReloadPrompt: typeof import('./theme/components/ReloadPrompt.vue')['default']
+  }
+}
+
+export { }