flathub.org

This is the source code for the website, both backend and frontend. That's running on https://flathub.org.

Code contribution

First of all thanks for considering contributing to this project!

Pull requests are welcome. Please, create an issue first explaining what you want to do and how.

If you want to contribute translations, please check out the instructions below.

Overview

This overview is supposed to give you a quick grasp, of what we have and how it works. There are subtle differences between local/prod - this is an approximation.

block-beta
    columns 3

    block:external:1
        columns 1

        dl.flathub.org:1

        hub.flathub.org/stats:1
    end

    block:group2
        columns 3

        fastly:3

        down4<[" "]>(down):3

        nginx:3

        down1<[" "]>(down):3

        frontend:3

        down2<[" "]>(down):3

        hub.flathub.org/stats-->backend
        dl.flathub.org-->backend worker backend_node

        down3<[" "]>(down):3

        db1[("postgres")] db2[("redis")] db3[("meilisearch")]

    end

    block:external2:1
        columns 1

        smtp:1

        backend_node-->smtp
    end

Development

You'll need git, pnpm, docker and docker-compose-plugin.

Go to the folder where you manage your projects and checkout this project.

Then start the backend:

cd backend
docker compose up

You might need to use --build to rebuild the images, when dependencies change.

Use another terminal session to run the following or use your browser to go to https://localhost:8000/docs and use the UI to run the /update endpoint. This will populate the database with the latest data from Flathub.

curl -X POST localhost:8000/update

Then open a terminal and go to the frontend folder. If it's the first time you run it, run

pnpm install

Then you should be able to start the dev server and see changes to the code:

pnpm dev

Generating api client

We're generating the api client from the openapi spec. To do so, make sure the backend is running and then run:

pnpm openapi-codegen

Storybook

You can also start the storybook via:

pnpm storybook

Or view the current state of our storybook

More backend instructions

You can find more backend instructions in the README in the backend folder.

Translations

Contribute UI translations through Weblate.

When contributing code, edit only the English source files in frontend/public/locales/en/. Weblate manages all other locale files. Submit changes to those translations through Weblate.

Use a new message key when changing what a placeholder contains. For example, replacing a raw number with a formatted percentage needs a new key to prevent existing translations from adding a second percent sign. Missing translations fall back to English.

There are some translations, that get reused from Appstreams Translations for e.g. age ratings.

Stripe payment testing

In both staging and development environments, Stripe is running in test mode (all data is fake). To test payment, card details can be used from https://stripe.com/docs/testing.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.