From 8e2d951c61c34de3cece8cdf8543f394ab608972 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 17 Nov 2024 23:19:29 +0100 Subject: [PATCH] Docs: update 'Making your own theme' --- Docs/Making_Your_Own_Theme.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/Docs/Making_Your_Own_Theme.md b/Docs/Making_Your_Own_Theme.md index 3db8fe6bf..ebc7e5061 100644 --- a/Docs/Making_Your_Own_Theme.md +++ b/Docs/Making_Your_Own_Theme.md @@ -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//.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 ` 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 ----------------