Pluggable cities assets

README.md

@@ -125,3 +125,75 @@ Create a file e.g. `my-custom-theme.scss` and apply style imports accordingly
 
 Then change the `kerrokantasi-ui/src/index.js` style import from
 `import '../assets/sass/kerrokantasi.scss';` to `import 'PATH-TO-YOUR-FILE/my-custom-theme.scss';`
+
+## Using the whitelabel theme assets
+
+To have a non city specific theme, change the `city_config` config to `whitelabel`
+
+## Installing city specific assets
+
+Currently the process of using the theme is not super developer friendly as it does
+not support the use of `yarn link`. This means that to do development on the project
+it will have to be installed in the kerrokantasi-ui project and then edited within 
+the kerrokantasi-ui `node_modules/<theme_assets>` folder. If someone can find
+a solution to this, please fix.
+
+Development steps:
+0. Place the theme assets folder next to the `kerrokantasi-ui` folder
+    * The structure should look like this:
+      ```
+      /
+        /kerrokantasi-ui
+        /<theme-assets-folder>
+      ```
+1. In the `kerrokantasi-ui` project run `yarn add ../<theme-assets-folder>`
+2. Edit files in `kerrokantasi-ui/node_modules/<theme-assets-folder>` for changes to be reflected
+3. Set the `city_config` config to <theme-assets-folder>
+
+
+Production installation:
+1. Add the project to the local `kerrokantasi-ui` project either by installing it
+   the same way as in the dev environment, or from GitHub or if the package is published
+   to npm, then install it from there.
+2. Set the `city_config` config to <theme-assets-folder>
+
+## Creating city specific assets
+
+The assets of a city currently consists of the following things:
+1. Styling
+2. Favicons
+3. Logos
+4. Translation strings
+
+An example of how a theme assets project could look like, either check out the `cities/helsinki`
+folder in this project, or have a look already created theme assets such as:
+
+https://github.com/City-of-Turku/kerrokantasi-ui-turku
+
+### Aliases
+The following aliases are available to use in SCSS and JS files:
+* `kerrokantasi-ui`: Points to the root of this project
+* `kerrokantasi-ui-modules`: Points to the node_modules of this project
+* `@city-config`: Points to the root of the city specific assets
+* `@city-assets`: Points to the assets folder in the city specific assets
+* `@city-i18n`: Point to the i18n folder in the city specific assets
+* `@@city-images`: Point to the image folder in the city specific assets
+
+### Naming conventions
+The following naming conventions needs to be used in order to city assets to
+work.
+
+* `/assets/app.scss`: The base style file that is imported
+* `/i18n/[fi, sv, en].json`: Language files. If no string changes are to be made, only include `{}` in the files
+* `/assets/images/logo[fi, sv]-black.svg`: Black/Dark site logo
+* `/assets/images/logo[fi, sv]-white.svg`: White/Light site logo
+
+#### Favicons:
+The following favicons are recommended, but not mandatory to include.
+
+* `/assets/favicon/favicon.ico`
+* `/assets/favicon/favicon-32x32.png`
+* `/assets/favicon/favicon-16x16.png`
+* `/assets/favicon/manifest.json`
+* `/assets/favicon/safari-pinned-tab.svg`
+* `/assets/favicon/browserconfig.xml`

assets/favicon/browserconfig.xml

@@ -2,8 +2,14 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/assets/favicon/mstile-150x150.png"/>
-            <TileColor>#0072c6</TileColor>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+
         </tile>
+
     </msapplication>
+
 </browserconfig>

assets/favicon/manifest.json

@@ -1,18 +1,60 @@
 {
-    "name": "",
-    "icons": [
-        {
-            "src": "/assets/favicon/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/assets/favicon/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "Kerrokantasi",
+  "short_name": "Kerrokantasi",
+  "description": null,
+  "dir": "auto",
+  "lang": "fi-FI",
+  "display": "standalone",
+  "orientation": "any",
+  "scope": "/",
+  "start_url": "/",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
 }

assets/favicon/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "1.0",
+  "name": "Kerrokantasi",
+  "description": null,
+  "icons": {
+    "60": "firefox_app_60x60.png",
+    "128": "firefox_app_128x128.png",
+    "512": "firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "City of Helsinki",
+    "url": "https://github.com/City-of-Helsinki"
+  }
+}

assets/favicon/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0",
+  "api_version": 1,
+  "layout": {
+    "logo": "yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

assets/sass/kerrokantasi/kerrokantasi.scss

@@ -19,21 +19,21 @@
 @import "~alertifyjs/build/css/alertify.css";
 
 ///// Kerrokantasi styles
-@import "kerrokantasi/common";
-@import "kerrokantasi/home";
-@import "kerrokantasi/forms";
-@import "kerrokantasi/navigation";
-@import "kerrokantasi/hearing-page";
-@import "kerrokantasi/hearing-list";
-@import "kerrokantasi/hearing-form";
-@import "kerrokantasi/footer";
-@import "kerrokantasi/fullscreen-map-plugin";
-@import "kerrokantasi/fullwidth-hearing";
-@import "kerrokantasi/hearing-card";
-@import "kerrokantasi/hearing-card-list";
-@import "kerrokantasi/commentlist";
-@import "kerrokantasi/alertify";
-@import "kerrokantasi/carousel";
-@import "kerrokantasi/question-page";
-@import "kerrokantasi/hearing-attachment";
-@import "kerrokantasi/hearing-languages";
+@import "common";
+@import "home";
+@import "forms";
+@import "navigation";
+@import "hearing-page";
+@import "hearing-list";
+@import "hearing-form";
+@import "footer";
+@import "fullscreen-map-plugin";
+@import "fullwidth-hearing";
+@import "hearing-card";
+@import "hearing-card-list";
+@import "commentlist";
+@import "alertify";
+@import "carousel";
+@import "question-page";
+@import "hearing-attachment";
+@import "hearing-languages";

cities/helsinki/assets/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/favicon/mstile-150x150.png"/>
+            <TileColor>#0072c6</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

cities/helsinki/assets/favicon/manifest.json

@@ -0,0 +1,18 @@
+{
+    "name": "",
+    "icons": [
+        {
+            "src": "/assets/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}