2.2 KiB

Raw Blame History

Contribute to the frontend

The Funkwhale frontend is a {abbr}SPA (Single Page Application) written in Typescript and Vue.js.

Troubleshooting

Network errors (405 and 404) in the console

If you are using Google Chrome, you may have to disable the network cache:

Go to the Dev Tools
Select the Network tab
In the toolbar under the Network tab, activate the checkmark "Disable Cache"

Edits don't appear when I check them in the browser

Reload the page with Ctrl+Shift+R (Mac: Cmd+Shift+R)

Make sure you have no add-ons in your browser that mess with the DOM. The best way to check is to open a private window/tab with Ctrl/Cmd+Shift+P (Firefox)

Styles

<--! TODO: Mermaid diagrams -->

Ui styles

graph TD
  /node_modules/bootstrap-icons/font/bootstrap-icons.css --> src/styles/font.scss
  src/styles/base/generic.scss --> src/styles/base/index.scss
  src/styles/base/index.scss --> src/styles/funkwhale.scss
  src/styles/font.scss --> src/styles/funkwhale.scss
  src/styles/colors.scss --> src/styles/funkwhale.scss
  src/styles/funkwhale.scss --> src/main.ts

App styles

graph TD
  _css_vars --> /themes/_...
  vendor/_media.scss --> _main.scss
  /globals/_... --> _main.scss
  /components/_... --> _main.scss
  /pages/_... --> _main.scss
  /themes/_... --> _main.scss
  _vars.scss --> /themes/_...

Components

Start the Ui Live Docs (vitepress) and follow the link:

yarn dev:docs

Example: Button component in the live docs
Find more details about the Ui library and how to contributein the live docs

Testing

Unit tests

The Funkwhale frontend contains some tests to catch errors before changes go live. The coverage is still fairly low, so we welcome any contributions.

To run the test suite, run the following command:

docker compose run --rm front yarn test:unit

To run tests as you make changes, launch the test suite with the -w flag:

docker compose run --rm front yarn test:unit -w

End-to-end testing and User testing

In addition, there are End-to-end tests (cyprus), and we are planning to do User tests in 2025.

2.2 KiB Raw Blame History