Move to vue-doc-gen + vitepress instead of styleguide

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: susnux

.gitignore

@@ -20,6 +20,12 @@ yarn-error.log*
 # Unit test / coverage reports
 coverage
 
+# vitepress stuff
+styleguide/package-lock.json
+
+# genereated file
+docs/components
+
 # Docs compiled build
 styleguide/build/
 styleguide/index.html

docgen.config.js

@@ -0,0 +1,24 @@
+const { defineConfig } = require('vue-docgen-cli')
+const fs = require('fs')
+
+const generatePages = () => {
+	const path = 'src/components'
+	return fs.readdirSync(path)
+		.filter(file => fs.statSync(`${path}/${file}`).isDirectory())
+		.map(file => {
+			return {
+				components: `${file}/*.vue`,
+				outFile: `${file}.md`,
+			}
+		})
+}
+
+module.exports = defineConfig({
+	componentsRoot: 'src/components',
+	docsRepo: 'nextcloud/nextcloud-vue',
+	docsBranch: 'master',
+	editLinkLabel: 'Fork me on GitHub',
+	outDir: 'docs/components',
+
+	pages: generatePages(),
+})

docs/components.md

@@ -17,17 +17,17 @@
 		"dev": "vite build --mode development",
 		"watch": "vite build --watch --mode development",
 		"l10n:extract": "node build/extract-l10n.js",
-		"lint": "eslint --ext .js,.vue src",
+		"lint": "eslint --ext .mjs,.js,.vue src styleguide",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"test": "vitest run",
 		"test:coverage": "vitest run --coverage",
 		"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
 		"stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
-		"styleguide": "vue-styleguidist server",
-		"styleguide:build": "vue-styleguidist build",
-		"cypress": "cypress run-ct",
-		"cypress:gui": "cypress open-ct",
-		"cypress:update-snapshots": "cypress run-ct --env type=base --config screenshotsFolder=cypress/snapshots/base"
+		"styleguide": "concurrently \"vue-docgen --watch\" \"cd styleguide && npx vitepress dev\"",
+		"styleguide:build": "vue-docgen && cd styleguide && npx vitepress build",
+		"cypress": "cypress run --component",
+		"cypress:gui": "cypress open --component",
+		"cypress:update-snapshots": "cypress run --component --env type=base --config screenshotsFolder=cypress/snapshots/base"
 	},
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
@@ -94,7 +94,7 @@
 		"@vue/compiler-sfc": "^2.7.14",
 		"@vue/test-utils": "^1.3.3",
 		"browserslist-to-esbuild": "^1.2.0",
-		"css-loader": "~6.7.1",
+		"concurrently": "^7.6.0",
 		"cypress": "^9.7.0",
 		"cypress-visual-regression": "^1.5.0",
 		"eslint-plugin-cypress": "^2.11.1",
@@ -107,6 +107,7 @@
 		"sass": "^1.56.1",
 		"vite": "^3.2.4",
 		"vitest": "^0.25.3",
+		"vue-docgen-cli": "^4.51.0",
 		"vue-eslint-parser": "^9.1.0"
 	},
 	"browserslist": [

package.json

@@ -28,7 +28,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
 <docs>
 ### Single action
 
-```
+```vue
 <template>
 	<NcActions>
 		<NcActionButton @click="actionDelete">
@@ -57,7 +57,7 @@ export default {
 
 ### Multiple actions
 
-```
+```vue
 <template>
 	<NcActions>
 		<NcActionButton @click="showMessage('Edit')">

src/components/NcActions/NcActions.vue

@@ -0,0 +1,96 @@
+import * as path from "path";
+import * as fs from 'fs'
+import { fileURLToPath } from "url";
+import { defineConfig } from "vitepress";
+import { SearchPlugin } from 'vitepress-plugin-search'
+import PackageJSON from '../../package.json'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const version = PackageJSON.version
+const docsPath = path.resolve(__dirname, '../docs')
+
+/**
+ * Generate list of all components grouped by functionality for sidebar menu
+ * 
+ * @returns {import('vitepress').DefaultTheme.SidebarItem[]}
+ */
+function getComponents() {
+  const sections = {}
+
+  fs.readdirSync(path.resolve(docsPath, 'components'))
+    .forEach(file => {
+      const name = file.replace('.md', '')
+      const words = name.split(/(?=[A-Z])/)
+      const section = words
+        .slice(0, (words[1] === 'App' && words.length >= 3 ? 3 : 2))
+        .join('')
+        .replace(/s$/, '') // fix NcActions
+      if (!(section in sections)) sections[section] = []
+      sections[section].push(name)
+    })
+
+  return Object.keys(sections)
+    .sort()
+    .map(section => {
+      // Get base component as first entry, sort is not enogh because of `NcActions` vs `NcActionX`
+      const first = sections[section].sort((p,q) => p.length - q.length)[0]
+      const other = sections[section].filter(p => p !== first).sort()
+      return {
+        text: section,
+        items: [
+          first,
+          ...other
+        ].map(file => ({text: file, link: `/components/${file}`}))
+      }
+    })
+}
+
+export default defineConfig({
+  title: '@nextcloud/vue',
+  description: 'Vue.js components for Nextcloud app development',
+
+  ignoreDeadLinks: true,
+
+  themeConfig: {
+    logo: 'https://nextcloud.com/wp-content/uploads/2022/10/nextcloud-logo-blue-transparent.svg',
+    nav: [
+      { text: `${version}`, items: [
+        { text: 'Changelog', link: `https://github.com/nextcloud/nextcloud-vue/blob/v${version}/CHANGELOG.md` },
+      ]},
+    ],
+    sidebar: [
+      {
+        text: 'Components',
+        collapsible: true,
+        collapsed: true,
+        items: getComponents(),
+      },
+      {
+        items: [{
+          text: 'Directives',
+          link: '/directives'
+        }]
+      },
+    ],
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/nextcloud/nextcloud-vue'
+      }
+    ],
+  },
+
+  srcDir: '../docs',
+
+  markdown: {
+    highlight: (str, language, attr) => hljs.highlight(str, { language: language === 'vue' ? 'xml' : language}).value
+  },
+
+  vite: {
+    root: docsPath,
+    plugins: [ SearchPlugin() ],
+
+  }
+})