feat(ui-docs): activate global router

front/ui-docs/.vitepress/theme/index.ts

@@ -4,7 +4,12 @@ import DefaultTheme from 'vitepress/theme'
 import en from '../../../src/locales/en_US.json'
 
 import Layout from './Layout.vue'
-// import '~/../dist/style.css'
+
+import { createRouter, createWebHistory } from 'vue-router'
+
+import routesV2 from '../../../src/ui/routes'
+
+const routes = routesV2
 
 export default {
   ...DefaultTheme,
@@ -17,12 +22,33 @@ export default {
       messages: { en }
     })
 
-    // app.use(Funkwhale)
+    const router = createRouter({
+      history: createWebHistory('/'),
+      linkActiveClass: 'active',
+      routes,
+
+      scrollBehavior (to, _, savedPosition) {
+        if (to.meta.preserveScrollPosition) {
+          return savedPosition ?? { left: 0, top: 0 }
+        }
+
+        return new Promise(resolve => {
+          setTimeout(() => {
+            if (to.hash) {
+              resolve({ el: to.hash, behavior: 'smooth' })
+            }
+
+            resolve(savedPosition ?? { left: 0, top: 0 })
+          }, 100)
+        })
+      }
+    })
 
     // Simsalabim: Incantation for a confused i18n... Thank you s-ol https://github.com/vikejs/vike/discussions/1778#discussioncomment-10192261
     if (!('__VUE_PROD_DEVTOOLS__' in globalThis)) {
       (globalThis as any).__VUE_PROD_DEVTOOLS__ = false;
     }
     app.use(i18n)
+    app.use(router)
   }
 }

front/ui-docs/index.md

@@ -2,98 +2,31 @@
 import Layout from '../src/components/ui/Layout.vue'
 import Card from '../src/components/ui/Card.vue'
 import Spacer from '../src/components/ui/layout/Spacer.vue'
-
-import {useRouter} from 'vitepress'
-
-const docsRouter = useRouter()
-
-// import { RouterLink, RouterView } from "vue-router";
-
-// import { createWebHistory, createRouter } from 'vue-router'
-
-// import HomeView from './components/ui/layout.md'
-// import AboutView from './components/ui/card.md'
-
-// const routes = [
-//   { path: '/', component: HomeView },
-//   { path: '/about', component: AboutView },
-// ]
-
-// const router = createRouter({
-//   history: createWebHistory(),
-//   routes,
-// })
-
-// enhanceApp({app}) {
-//   app.use(router);
-// }
 </script>
 
 # Funkwhale design component library
 
 ## Contribute
 
-- [Improve the component library!](./contributing)
+- [Improve the component library](./contributing)
 - [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20)
 
 ## Use
 
 <Layout flex>
-  <Card to='./using-components' title="Components" style="width:min-content"/>
+  <Card to='using-components'
+  title="Components"
+  style="width:min-content"
+  />
 
-  <a href="./using-components">
+<Card to="using-color"
-    <Card title="Components" style="width:min-content"/>
+  title="Colors"
-  </a>
+  style="width:min-content"
+  />
 
-  <a href="./using-color">
+<Card to="https://design.funkwhale.audio"
-    <Card title="Colors" style="width:min-content" />
+    title="Designs" style="width:max-content">
-  </a>
+Check out the design system on our Penpot.
-
+</Card>
-  <a href="https://design.funkwhale.audio">
-    <Card title="Designs" style="width:max-content">
-      Check out the design system on our Penpot.
-    </Card>
-  </a>
 
 </Layout>
-
-<!-- <p>
-  <strong>Current route path:</strong>
-  {{ $route.fullPath }}
-</p> -->
-<!-- <nav>
-  <RouterLink to="/">Go to Home</RouterLink>
-  <RouterLink to="/about">Go to About</RouterLink>
-</nav> -->
-<!-- <main>
-  <RouterView />
-</main> -->
-
-<Spacer />
-
----
-
-<Spacer />
-
-<Layout flex>
-
-::: warning Deprecation of Activity, AlbumCard
-
-We are moving some components into the main funkwhale repository. These components will not receive any updates
-because they are coupled
-with the API:
-
-- Activity
-- Album Card
-- Artist Card
-- Playlist Card
-- Podcast Card
-- Radio Card
-
-Do not use these components in new projects!
-
-:::
-
-</Layout>
-
-[[toc]]