Funkwhale UI

Appearance

Contributing ​

Jump to chapter:

Setting up your development environment ​

If you are using vscode, enable Vue code hints in the .md docs:

json
// .vscode/settings.json
"vue.server.includeLanguages": ["vue", "markdown"]

I (flupsi) recommend the quick, free editor zed with the default Vue extension.

DX and reproducibility ​

To set up a reproducible environment independent from your system's installed software packages, use docker or mise.

Read the funkwhale docs about docker here.

To quickly run tests, linters, etc. locally, you don't need to install node or yarn globally.

  1. Install mise
  2. Run mise use yarn to enable the yarn command in your current shell
  3. Now you can run all commands documented in package.json without installing any funkwhale-specific tools or starting containers on your system globally.

Feedback loop ​

Make sure to run yarn dev:docs while editing your components to see changes on-the-fly. Run yarn lint periodically or set up your editor to get eslint annotations while editing your code.

Discussing and proposing changes ​

Getting started [Funkwhale Docs]

How to edit the UI strings [Funkwhale Docs] - How to add translations [Funkwhale Docs]

Adding new UI components ​

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

Step by step

Make sure to follow the anatomy of a Component, avoid unnecessary barriers to funkwhale users [MDN] and keep them accessible.