Add social image

Docs/Making_Your_Own_Theme.md

@@ -50,7 +50,7 @@ The preferred way to add your theme is via a Pull Request. A Pull Request is les
 1) Fork this repository
 2) Go to `assets/themes` and create a new directory `yourtheme`
 3) Create a new file `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: external assets can suddenly break and leak privacy
+4) 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. Attribution can be added at the bottom of this document
    - If an SVG version is available, use the SVG version
    - Make sure all the links in `yourtheme.json` are updated. You can use `./assets/themes/yourtheme/yourimage.svg` instead of the HTML link
@@ -58,9 +58,10 @@ The preferred way to add your theme is via a Pull Request. A Pull Request is les
     - Open [AllKnownLayouts.ts](https://github.com/pietervdvn/MapComplete/blob/master/Customizations/AllKnownLayouts.ts)
     - Add an import statement, e.g. `import * as yourtheme from "../assets/themes/yourtheme/yourthemes.json";`
     - Add your theme to the `LayoutsList`, by adding a line `new LayoutConfig(yourtheme)`
- 6) Test your theme: run the project as described [above](../README.md#Dev)
+ 6) 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) Happy with your theme? Time to open a Pull Request!
+ 7) Test your theme: run the project as described [above](../README.md#Dev)
- 8) Thanks a lot for improving MapComplete!
+ 8) Happy with your theme? Time to open a Pull Request!
+ 9) Thanks a lot for improving MapComplete!
  
  
  The .JSON-format

Models/Constants.ts

@@ -2,7 +2,7 @@ import { Utils } from "../Utils";
 
 export default class Constants {
     
-    public static vNumber = "0.6.6";
+    public static vNumber = "0.6.6a";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

index.html

@@ -21,10 +21,26 @@
     <meta property="og:type" content="website">
 
     <!-- THEME-SPECIFIC -->
+    <!-- Every theme gets their own html page, this is created by a script; this part will be removed except for the index -->
     <title>MapComplete</title>
     <link rel="manifest" href="./index.manifest">
     <link rel="icon" href="./assets/svg/add.svg" sizes="any" type="image/svg+xml">
-    <link rel="apple-touch-icon" sizes="180x180" href="./apple_touch_icon.png">
+    <meta property="og:image" content="./assets/SocialImage.png">
+    <meta property="og:title" content="MapComplete - editable, thematic maps with OpenStreetMap">
+    <meta property="og:description" content="MapComplete is a platform to visualize OpenStreetMap on a specific topic and to easily contribute data back to it.">`
+    
+    <link rel="apple-touch-icon" sizes="512x512" href="./assets/generated/svg_mapcomplete_logo512.png">
+    <link rel="apple-touch-icon" sizes="384x384" href="./assets/generated/svg_mapcomplete_logo384.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="./assets/generated/svg_mapcomplete_logo192.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/generated/svg_mapcomplete_logo180.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="./assets/generated/svg_mapcomplete_logo152.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="./assets/generated/svg_mapcomplete_logo144.png">
+    <link rel="apple-touch-icon" sizes="128x128" href="./assets/generated/svg_mapcomplete_logo128.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="./assets/generated/svg_mapcomplete_logo120.png">
+    <link rel="apple-touch-icon" sizes="96x96" href="./assets/generated/svg_mapcomplete_logo96.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="./assets/generated/svg_mapcomplete_logo72.png">
+
+
     <!-- THEME-SPECIFIC-END-->
 
     <style>