midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Docs: update 'Making your own theme'

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-11-17 23:19:29 +01:00
parent a0feed3695
commit 8e2d951c61
1 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Docs/Making_Your_Own_Theme.md
View file

@ -260,23 +260,22 @@ contributor). If that is not possible, send the JSON file and assets, e.g. as a
1) Fork this repository
2) Go to `assets/themes` and create a new directory named `yourtheme`
3) Create a new file named `yourtheme.json`, paste the theme configuration in there. You can find your theme configuration in
the customThemeBuilder (the tab with the *Floppy disk* icon)
4) Copy all the images into this new directory. **No external sources are allowed!** External image sources leak privacy
the customThemeBuilder (the tab with the *Floppy disk* icon
4) Individual layers go into `assets/layers/<layername>/<layername>.json`.
5) Copy all the images into this new directory. **No external sources are allowed!** External image sources leak privacy
or can break.
- Make sure the license is suitable, preferable a Creative Commons license or CC0-license.
- If an SVG version is available, use the SVG version
- Make sure all the links in `yourtheme.json` are updated. You can use a relative link like `./assets/themes/yourtheme/yourimage.svg`
instead of an HTML link
- Create the file `license_info.json` in the theme directory, which contains metadata on every artwork source
5) Add your theme to the code base: add it into `assets/themes` and make sure all the images are there too. Running `
ts-node scripts/fixTheme <path to your theme>` will help downloading the images and attempts to get the licenses if
on Wikimedia.
6) Add some finishing touches, such as a social image.
- Make sure all the links in `yourtheme.json` are updated. You can use a relative link like `./assets/themes/yourtheme/yourimage.svg` (or `./assets/layers/yourlayer/yourimage.svg` if you placed in the layers directory)
6) Run `npm run query:licenses` and input the relevant information about asset sources.
- Alternatively (if the script doesn't work), create the file `license_info.json` in the theme directory, which contains metadata on every artwork source
7) OPTIONAL: Add some finishing touches, such as a social image.
See [this blog post](https://www.h3xed.com/web-and-internet/how-to-use-og-image-meta-tag-facebook-reddit) for some
hints.
7) Test your theme: run the project as described in [development_deployment](Development_deployment.md)
8) Happy with your theme? Time to open a Pull Request!
9) Thanks a lot for improving MapComplete!
8) Test your theme: run the project as described in [development_deployment](Development_deployment.md)
If you can't figure this out, just open the PR. The continuous integration will test for you.
9) Happy with your theme? Time to open a Pull Request!
10) Thanks a lot for improving MapComplete!
The theme JSON format
----------------