This is a collection of most of the freestyle tricks, for people to keep a better overview of all the tricks.
The link to the page is: https://highline-freestyle.com
Help us out develop an awesome app!
Open an issue and describe what is you want to see different
[!IMPORTANT] We are in the middle of a rewrite. Check and use the rewrite branch for anything beyond small fixes to the app in its current state.
Following is gives a brief introduction into the development.
Checkout the good first issue tag, if you don't know where to start.
clone the repository (or download as an ZIP archive)
run git clone https://github.com/bastislack/highline-freestyle.git && cd highline-freestyle
install node modules
Open a terminal and in the root folder (highline-freestyle) run npm install --legacy-peer-deps
start the development server
run npm run dev
To run the production environment (needed to use features of the service worker -> offline usage)
run
npm run serve
sometimes after updating you have to delete your indexDB in your browser, through the development tools (Storage in firefox, Application in chrome)
Tests are written with the jest package and can be run with npm test
.
We are working on the develop branch and merging to main once we consider a milestone to be complete.
At the time of writing we support two separate languages; English and Spanish. This is implemented using a package called Lingui.js which is well documented. It's really worth reading the documentation to understand everything that's possible (e.g. handling plurals). The basic flow for adding a new piece of translated text is:
<Trans>
tag and give it a meaningful id, so example to translate
becomes <Trans id="example.somethingToTranslate">example to translate</Trans>
.npm run extract
.src/locales/es/messages.po
and fill in the missing translation.The id helps to keep the translations organised where a general rule would be to have a categor (e.g. links or languages) followed by a full-stop and then something describing the text. This also helps to avoid having multiple translations with the same key.
So far the best way I'm aware of for providing translations for enums is to convert them to a javascript object and use <Trans>
as mentioned above. See src/links.js
for an example.
Trans
Lingui.js supports automatic id generation but in my experience this kind of behaviour is messy. An example is if the translated text is changed, Lingui.js has no way to know that the translation was changed and instead will keep the old one and add a new one.