funkwhale/front/ui-docs/index.md

<script setup lang="ts">
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)
- [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"/>

  <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>
  {{ $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]]