transform function files to book page

.gitignore

@@ -29,6 +29,7 @@ coverage
 
 *.tsbuildinfo
 
-
+components.d.ts
+index.json
 packages/.vitepress/cache
 packages/.vitepress/dist

meta/packages.ts

@@ -0,0 +1,21 @@
+import type { PackageManifest } from '@vueyous/metadata'
+
+export const packages: PackageManifest[] = [
+  {
+    name: 'metadata',
+    display: 'Metadata for VueYous functions',
+    manualImport: true,
+    iife: false,
+    utils: true,
+    target: 'node14',
+  },
+  {
+    name: 'shared',
+    display: 'Shared utilities',
+  },
+  {
+    name: 'core',
+    display: 'VueYous',
+    description: 'Collection of essential Vue Composition Utilities',
+  },
+]

package.json

@@ -13,16 +13,18 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "lint:text": "textlint .",
-    "docs:dev": "vitepress dev packages",
+    "docs:dev": "nr update && vitepress dev packages",
     "docs:build": "vitepress build packages",
-    "docs:preview": "vitepress preview packages"
+    "docs:preview": "vitepress preview packages",
+    "update": "nr -C packages/metadata update"
   },
   "dependencies": {
     "@vueuse/core": "^10.9.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.13.3",
+    "@antfu/ni": "^0.21.12",
     "@tsconfig/node20": "^20.1.2",
     "@types/fs-extra": "^11.0.4",
     "@types/jsdom": "^21.1.6",
@@ -31,14 +33,21 @@
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "@vueyous/core": "workspace:*",
+    "@vueyous/metadata": "workspace:*",
     "@vueyous/shared": "workspace:*",
     "eslint": "^8.49.0",
+    "esno": "^4.7.0",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
+    "gray-matter": "^4.0.3",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
+    "simple-git": "^3.24.0",
     "textlint": "^14.0.4",
     "textlint-rule-ja-space-between-half-and-full-width": "^2.3.1",
     "typescript": "~5.4.0",
+    "unocss": "^0.59.2",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.6",
     "vitepress": "^1.0.2",
     "vue-tsc": "^2.0.6"

packages/.vitepress/config.ts

@@ -0,0 +1,91 @@
+import { defineConfig } from 'vitepress'
+
+import { categoryNames, coreCategoryNames, metadata } from '../metadata/metadata'
+
+import viteConfig from './vite.config'
+
+const Guide = [
+  { text: 'はじめに', link: '/guide/' },
+  { text: 'VueUseとは', link: '/guide/what-is-vueuse' },
+  { text: '環境構築', link: '/guide/setup' },
+]
+
+const CoreCategories = coreCategoryNames.map(c => ({
+  text: c,
+  activeMatch: '___', // never active
+  link: `/functions#category=${c}`,
+}))
+
+const DefaultSideBar = [
+  { text: 'Guide', items: Guide },
+  { text: 'Core Functions', items: CoreCategories },
+]
+
+const FunctionsSideBar = getFunctionsSideBar()
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'VueYous',
+  description: 'Craft Your Own VueUse Composables From Scratch',
+
+  head: [['link', { rel: 'icon', href: '/logo.png' }]],
+
+  // https://vitepress.dev/reference/default-theme-config
+  themeConfig: {
+    search: { provider: 'local' },
+    logo: '/logo.png',
+    // https://vitepress.dev/reference/default-theme-config
+
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', items: Guide },
+      {
+        text: 'Functions',
+        items: [
+          {
+            text: '',
+            items: [
+              { text: 'All Functions', link: '/functions#' },
+            ],
+          },
+          { text: 'Core', items: CoreCategories },
+        ],
+      },
+    ],
+
+    sidebar: {
+      '/guide/': DefaultSideBar,
+      '/functions': FunctionsSideBar,
+      '/core/': FunctionsSideBar,
+      '/shared/': FunctionsSideBar,
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/pei-pay/VueYous' }],
+  },
+  // FIXME: any
+  vite: viteConfig as any,
+})
+
+function getFunctionsSideBar() {
+  const links: any = []
+
+  for (const name of categoryNames) {
+    if (name.startsWith('_'))
+      continue
+
+    const functions = metadata.functions.filter(i => i.category === name && !i.internal)
+
+    links.push({
+      text: name,
+      items: functions.map(i => ({
+        text: i.name,
+        link: i.external || `/${i.package}/${i.name}/`,
+      })),
+      link: name.startsWith('@')
+        ? (functions[0].external || `/${functions[0].package}/README`)
+        : undefined,
+    })
+  }
+
+  return links
+}

packages/.vitepress/config/en.ts

@@ -1,14 +1,60 @@
+import { categoryNames, coreCategoryNames, metadata } from '../../metadata/metadata'
 import type { i18nTheme } from '.'
 
+const Guide = [
+  { text: 'Getting Started', link: '/guide/' },
+  { text: 'What is VueUse?', link: '/guide/what-is-vueuse' },
+  { text: 'Setup', link: '/guide/setup' },
+]
+
+const CoreCategories = coreCategoryNames.map(c => ({
+  text: c,
+  activeMatch: '___', // never active
+  link: `/functions#category=${c}`,
+}))
+
+const DefaultSideBar = [
+  { text: 'Guide', items: Guide },
+  { text: 'Core Functions', items: CoreCategories },
+]
+
+const FunctionsSideBar = getFunctionsSideBar()
+
 const nav: i18nTheme['nav'] = [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
+  { text: 'Functions', link: '/functions' },
 ]
 
-const sidebar: i18nTheme['sidebar'] = [
-  { text: 'Getting Started', link: '/guide/' },
-  { text: 'What is VueUse?', link: '/guide/what-is-vueuse' },
-  { text: 'Setup', link: '/guide/setup' },
-]
+const sidebar: i18nTheme['sidebar'] = {
+  '/guide/': DefaultSideBar,
+  '/functions': FunctionsSideBar,
+  '/core/': FunctionsSideBar,
+  '/shared/': FunctionsSideBar,
+}
 
 export const en: i18nTheme = { nav, sidebar }
+
+function getFunctionsSideBar() {
+  const links: any = []
+
+  for (const name of categoryNames) {
+    if (name.startsWith('_'))
+      continue
+
+    const functions = metadata.functions.filter(i => i.category === name && !i.internal)
+
+    links.push({
+      text: name,
+      items: functions.map(i => ({
+        text: i.name,
+        link: i.external || `/${i.package}/${i.name}/`,
+      })),
+      link: name.startsWith('@')
+        ? (functions[0].external || `/${functions[0].package}/README`)
+        : undefined,
+    })
+  }
+
+  return links
+}

packages/.vitepress/config/ja.ts

@@ -1,14 +1,61 @@
+import { categoryNames, coreCategoryNames, metadata } from '../../metadata/metadata'
 import type { i18nTheme } from '.'
 
+const Guide = [
+  { text: 'はじめに', link: '/ja/guide/' },
+  { text: 'VueUseとは', link: '/ja/guide/what-is-vueuse' },
+  { text: '環境構築', link: '/ja/guide/setup' },
+]
+
+const CoreCategories = coreCategoryNames.map(c => ({
+  text: c,
+  activeMatch: '___', // never active
+  link: `/functions#category=${c}`,
+}))
+
+const DefaultSideBar = [
+  { text: 'Guide', items: Guide },
+  { text: 'Core Functions', items: CoreCategories },
+]
+
+const FunctionsSideBar = getFunctionsSideBar()
+
 const nav: i18nTheme['nav'] = [
   { text: 'Home', link: '/ja/' },
   { text: 'Guide', link: '/ja/guide/' },
+  { text: 'Functions', link: 'ja/functions' },
 ]
 
-const sidebar: i18nTheme['sidebar'] = [
-  { text: 'はじめに', link: '/ja/guide/' },
-  { text: 'VueUseとは', link: '/ja/guide/what-is-vueuse' },
-  { text: '環境構築', link: '/ja/guide/setup' },
-]
+const sidebar: i18nTheme['sidebar'] = {
+  'ja/guide/': DefaultSideBar,
+  'ja/functions': FunctionsSideBar,
+  // TODO: ja
+  'ja/core/': FunctionsSideBar,
+  'ja/shared/': FunctionsSideBar,
+}
 
 export const ja: i18nTheme = { nav, sidebar }
+
+function getFunctionsSideBar() {
+  const links: any = []
+
+  for (const name of categoryNames) {
+    if (name.startsWith('_'))
+      continue
+
+    const functions = metadata.functions.filter(i => i.category === name && !i.internal)
+
+    links.push({
+      text: name,
+      items: functions.map(i => ({
+        text: i.name,
+        link: i.external || `/${i.package}/${i.name}/`,
+      })),
+      link: name.startsWith('@')
+        ? (functions[0].external || `/${functions[0].package}/README`)
+        : undefined,
+    })
+  }
+
+  return links
+}

packages/.vitepress/config/shared.ts

@@ -1,5 +1,7 @@
 import type { DefaultTheme, UserConfig } from 'vitepress'
 
+import viteConfig from '../vite.config'
+
 // https://vitepress.dev/reference/site-config
 export const sharedConfig: UserConfig<DefaultTheme.Config> = {
   title: 'VueYous',
@@ -12,4 +14,6 @@ export const sharedConfig: UserConfig<DefaultTheme.Config> = {
     logo: '/logo.png',
     socialLinks: [{ icon: 'github', link: 'https://github.com/pei-pay/VueYous' }],
   },
+  // FIXME: any
+  vite: viteConfig as any,
 } as const