From f9b5f5d3c2a72274dcab7821ff522e3c598a2289 Mon Sep 17 00:00:00 2001
From: elevatebart <bart@cypress.io>
Date: Mon, 28 Aug 2023 18:33:14 +0200
Subject: [PATCH] trying a different view

---
 docs/docgen/docgen.config.react.cjs |  6 +++---
 docs/docgen/docgen.config.vue.cjs   | 10 ++++++----
 docs/src/main.ts                    | 13 ++++++++++++-
 docs/src/utils/docsPages.ts         |  5 +++--
 docs/vite.config.ts                 |  1 -
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/docs/docgen/docgen.config.react.cjs b/docs/docgen/docgen.config.react.cjs
index 9c0d95848..73acaf6b1 100644
--- a/docs/docgen/docgen.config.react.cjs
+++ b/docs/docgen/docgen.config.react.cjs
@@ -7,7 +7,7 @@ const tsconfigPath = path.resolve(
   __dirname,
   '..',
   '..',
-  './tsconfig.react.json'
+  './tsconfig.react.json',
 )
 const parser = withCustomConfig(tsconfigPath, {
   shouldRemoveUndefinedFromOptional: true,
@@ -33,7 +33,7 @@ function getTags(tags) {
       acc[k] = [{ title: k, content: v }]
       return acc
     },
-    {}
+    {},
   )
 }
 
@@ -41,7 +41,7 @@ module.exports = defineConfig({
   components: './*/react/[A-Z]*.tsx',
   getDestFile: (componentPath, { outDir }) => {
     const name = componentPath.split('/').pop() || 'unknown'
-    return path.join(outDir, 'react', name.replace(/\.(tsx|ts)$/, '.md'))
+    return path.join(outDir, name.replace(/\.(tsx|ts)$/, ''), '/react.md')
   },
   propsParser(componentPath) {
     const props = parser.parse(componentPath)
diff --git a/docs/docgen/docgen.config.vue.cjs b/docs/docgen/docgen.config.vue.cjs
index 975bdb7ac..7af78ea3d 100644
--- a/docs/docgen/docgen.config.vue.cjs
+++ b/docs/docgen/docgen.config.vue.cjs
@@ -12,7 +12,7 @@ module.exports = defineConfig({
   components: './*/vue/[A-Z]*.{vue,ts}',
   getDestFile: (componentPath, { outDir }) => {
     const name = componentPath.split('/').pop() || 'unknown'
-    return path.join(outDir, 'vue', name.replace(/\.(vue|ts)$/, '.md'))
+    return path.join(outDir, name.replace(/\.(vue|ts)$/, ''), '/vue.md')
   },
   propsParser: async function (componentPath, _, event) {
     if (event === 'add') {
@@ -49,7 +49,9 @@ module.exports = defineConfig({
 
       const events = meta.events.length
         ? meta.events.map((e) => {
-            const event = docgen.events.find((d) => d.name === e.name) ?? {}
+            const event = docgen?.events?.find((d) => d.name === e.name) ?? {
+              properties: [],
+            }
 
             const typeArray =
               e.type === 'any[]' ? [] : e.type.slice(1, -1).split(',')
@@ -58,7 +60,7 @@ module.exports = defineConfig({
               properties: e.schema.map((s, i) => {
                 const name = typeArray[i]?.split(':')[0].trim()
                 const propDef = event.properties?.find(
-                  (p) => p.name === name
+                  (p) => p.name === name,
                 ) ?? { name }
 
                 return {
@@ -72,7 +74,7 @@ module.exports = defineConfig({
 
       const slots = meta.slots.length
         ? meta.slots.map(({ name, schema }) => {
-            const slot = docgen.slots.find((d) => d.name === name) ?? { name }
+            const slot = docgen?.slots?.find((d) => d.name === name) ?? { name }
             return {
               ...slot,
               bindings: extractBindings(schema, slot?.bindings),
diff --git a/docs/src/main.ts b/docs/src/main.ts
index ad83c7214..92c35d4f8 100644
--- a/docs/src/main.ts
+++ b/docs/src/main.ts
@@ -2,6 +2,7 @@ import './assets/theme.css'
 import './assets/markdown.scss'
 import './assets/fonts/fonts.css'
 import { ViteSSG } from 'vite-ssg'
+import { ref } from 'vue'
 import { setupLayouts } from 'virtual:generated-layouts'
 import Tooltip from '@cypress-design/vue-tooltip'
 
@@ -10,7 +11,17 @@ import VueLiveWithLayout from './components/vue-live/vue-live.vue'
 import DemoWrapper from './components/DemoWrapper.vue'
 import generatedRoutes from '~pages'
 
-const routes = setupLayouts(generatedRoutes)
+const routesRaw = setupLayouts(generatedRoutes)
+import { getDocsPages } from './utils/docsPages'
+
+const { routeMap } = getDocsPages(ref(''))
+
+const routes = routesRaw.map((route) => {
+  if (routeMap[route.path]) {
+    route.path = routeMap[route.path]
+  }
+  return route
+})
 
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
diff --git a/docs/src/utils/docsPages.ts b/docs/src/utils/docsPages.ts
index caf77ba51..22ebd4eeb 100644
--- a/docs/src/utils/docsPages.ts
+++ b/docs/src/utils/docsPages.ts
@@ -9,6 +9,7 @@ export function getDocsPages(routePath: Ref<string>) {
       const serverRoute = p
         .replace(/^\.\.\/\.\.\/\.\./, '')
         .replace(/\/(\w+)\/ReadMe.md$/, '/$1.md')
+        .toLowerCase()
 
       const clientRoute = serverRoute.replace(/\.md$/, '')
 
@@ -26,7 +27,7 @@ export function getDocsPages(routePath: Ref<string>) {
   )
 
   const routeMap = Object.keys(docsPages).reduce((acc, p) => {
-    const serverRoute = p.replace(/^\.\.\/pages/, '')
+    const serverRoute = p.replace(/^\.\.\/pages/, '').toLowerCase()
 
     const clientRoute = serverRoute
       .replace(/\.md$/, '')
@@ -55,5 +56,5 @@ export function getDocsPages(routePath: Ref<string>) {
       }
     }),
   )
-  return { items, routeMap, routeMapComponent }
+  return { items, routeMap }
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index c8fcfa53d..28e832fd2 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -30,7 +30,6 @@ export default defineConfig({
     // https://github.com/antfu/vite-plugin-vue-markdown
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
     Markdown({
-      wrapperClasses: 'prose prose-sm m-auto text-left',
       headEnabled: true,
       markdownItSetup(md) {
         // https://prismjs.com/