funkwhale/front/ui-docs/index.md

88 lines
2.0 KiB
Markdown

<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 { 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
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).
## Develop Ui components and Views
**Prerequisites:** If you are using vscode, [enable `Vue` code hints in the `.md`
docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support):
> **.vscode/settings.json**
>
> ```json
> "vue.server.includeLanguages": ["vue", "markdown"]
> ```
<!-- <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 />
<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>
::: 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]]