feat(ui-docs): document contributing to Ui components

front/ui-docs/.vitepress/config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vitepress'
 
 export default defineConfig({
-  title: 'Funkwhale Vue Components',
+  title: 'Funkwhale Ui',
   cleanUrls: true,
   cacheDir: './.vitepress/.vite',
   themeConfig: {
@@ -10,8 +10,14 @@ export default defineConfig({
       { text: 'Gitlab', link: 'https://dev.funkwhale.audio/funkwhale/ui' },
     ],
     sidebar: [
+      {text:'Contributing', link:'/contributing'},
+      {
+        text: 'Using Color', link: '/using-color'
+      },
+      {
+        text: 'Using Components', link: '/using-components'
+      },
       {
-        text: 'Components',
         items: [
           { text: 'Activity', link: '/components/ui/activity' },
           { text: 'Alert', link: '/components/ui/alert' },

front/ui-docs/contributing.md

@@ -0,0 +1,31 @@
+# Contributing
+
+[[toc]]
+
+## Setting up your IDE
+
+If you are using vscode, [enable `Vue` code hints in the `.md`
+docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support):
+
+```json
+// .vscode/settings.json
+"vue.server.includeLanguages": ["vue", "markdown"]
+```
+
+## Adding new Ui components
+
+::: tip Prerequisites
+
+✔ I am using the same pattern in many different places in the app
+
+✔ The pattern is not coupled with any funkwhale types
+
+✔ It's a conventional Ui pattern
+
+:::
+
+1. Create a file `Xyz.vue` at `src/components/ui` and code the component
+2. Add a file `xyz.md` at `ui-docs/components` with exhaustive examples
+3. In `ui-docs/.vitepress/config.ts`, add the component to the sidebar links
+
+Make sure to follow the [anatomy of a Component](./using-components#anatomy-of-a-component-file)!

front/ui-docs/index.md

@@ -3,6 +3,10 @@ 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'
@@ -27,19 +31,31 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
 
 # Funkwhale design component library
 
-Welcome to the Funkwhale design component library. This repository contains a collection of reusable components written
-in [Vue.js](https://vuejs.org) and [Sass](https://sass-lang.com).
+## Contribute
 
-## Develop Ui components and Views
+- [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)
 
-**Prerequisites:** If you are using vscode, [enable `Vue` code hints in the `.md`
-docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support):
+## Use
 
-> **.vscode/settings.json**
->
-> ```json
-> "vue.server.includeLanguages": ["vue", "markdown"]
-> ```
+<Layout flex>
+  <Card to='./using-components' title="Components" style="width:min-content"/>
+
+  <a href="./using-components">
+    <Card title="Components" style="width:min-content"/>
+  </a>
+
+  <a href="./using-color">
+    <Card title="Colors" style="width:min-content" />
+  </a>
+
+  <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>
@@ -53,17 +69,13 @@ docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support):
   <RouterView />
 </main> -->
 
+<Spacer />
+
 ---
 
 <Spacer />
 
-<Layout stack>
-
-  <a href="https://design.funkwhale.audio" style="text-decoration: none">
-    <Card title="Looking for the designs?">
-      Check out the design system on our Penpot.
-    </Card>
-  </a>
+<Layout flex>
 
 ::: warning Deprecation of Activity, AlbumCard
 

front/ui-docs/using-color.md

@@ -0,0 +1 @@
+# Using Color

front/ui-docs/vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
   },
 
   css: {
+    devSourcemap: true,
     preprocessorOptions: {
       scss: {
         additionalData: `