Add addressbar-colors docs (quasarframework#2981)

* Add addressbar-colors docs

* Update addressbar-color.md

Author: codenamezjames

docs/build/md-plugin-image.js

@@ -0,0 +1,12 @@
+/**
+ * Adds class 'doc-img' to images
+ */
+
+module.exports = function (md) {
+  md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+
+    token.attrSet('class', 'doc-img')
+    return self.renderToken(tokens, idx, options)
+  }
+}

docs/build/md.js

@@ -5,6 +5,7 @@ const
   mdPluginToken = require('./md-plugin-token'),
   mdPluginBlockquote = require('./md-plugin-blockquote'),
   mdPluginHeading = require('./md-plugin-heading'),
+  mdPluginImage = require('./md-plugin-image'),
   mdPluginContainers = require('./md-plugin-containers'),
   mdPluginTable = require('./md-plugin-table')
 
@@ -23,6 +24,7 @@ const md = markdownIt(opts)
   .use(mdPluginToken)
   .use(mdPluginBlockquote)
   .use(mdPluginHeading)
+  .use(mdPluginImage)
   .use(mdPluginContainers)
   .use(mdPluginTable)
 

docs/src/assets/mobile-address-bar-colors.jpg

@@ -75,3 +75,6 @@ body
 .doc-h6
   font-size 0.8rem
   margin 1rem 0
+
+.doc-img
+  max-width 100%

docs/src/css/app.styl

@@ -1,83 +1,55 @@
 ---
-title: Docs
+title: Mobile Addressbar Coloring
 ---
+Newer mobile browsers have the ability to specify a color for the addressbar, like in the example below.
 
-[Internal Link](/docs), [External Link](https://vuejs.org)
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
+::: warning
+**Note 1.** There isn't yet a Web standard for this so it won't work for all mobile browsers.  
+**Note 2.** This applies when building a website only. For coloring top bar on a mobile app (built with Cordova wrapper), please refer to [Cordova plugins](https://cordova.apache.org/plugins/).
+:::
 
-## Heading 2
-### Heading 3
-#### Heading 4
-##### Heading 5
-###### Heading 6
+![Mobile Addressbar Coloring](/assets/mobile-address-bar-colors.jpg "Mobile Addressbar Coloring")
 
-```
-const m = 'lala'
-```
+## Installation
+<doc-installation plugins="AddressbarColor" />
 
-```html
-<div>
-  <q-btn @click="doSomething">Do something</q-btn>
-  <q-icon name="alarm" />
-</div>
-```
+## Usage
 
-```vue
-<template>
-  <!-- you define your Vue template here -->
-</template>
+We create boot file to initialize its usage: `$ quasar new boot addressbar-color`. A file is created (`/src/boot/addressbar-color.js`). We edit it:
 
-<script>
-// This is where your Javascript goes
-// to define your Vue component, which
-// can be a Layout, a Page or your own
-// component used throughout the app.
+```js
+// file: /src/boot/addressbar-color.js
+import { AddressbarColor } from 'quasar'
 
-export default {
-  //
+export default () => {
+  AddressbarColor.set('#a2e3fa')
 }
-</script>
-
-<style>
-/* This is where your CSS goes */
-</style>
 ```
 
-| Table Example | Type | Description |
-| --- | --- | --- |
-| infinite | Boolean | Infinite slides scrolling |
-| size | String | Thickness of loading bar. |
-
-> Something...
+We then have to tell quasar to use this boot file we just created. To do this we edit the boot section of the quasar config:
+```js
+// file: /quasar.conf.js
+return {
+  boot: [
+    'addressbar-color'
+  ]
+}
+```
 
-::: tip
-Some tip
-:::
+What this does is that it injects some `<meta>` tags into your `index.html` at runtime.  
 
-::: warning
-Some tip
-:::
+Because the meta tag doesn't get injected until run time you can dynamically change this color multiple times, based on the page the user is on (by calling the `set` method in the `created()` lifecycle hook on the respective pages):
 
-::: danger
-Some tip
-:::
 
-::: warning CUSTOM TITLE
-Some tip
+```js
+// a .vue file representing a page
+export default {
+  // ...,
+  created () {
+    this.$q.addressbarColor.set('#a2e3fa')
+  }
+}
+```
+::: tip
+Calling `set()` with no parameters will use the primary color.
 :::
-
-* Something
-  * something
-  * else
-* Back
-  * wee
-
-## Installation
-<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
-
-## Usage
-<doc-example title="Standard" file="QBtn/Standard" />
-
-## API
-<doc-api file="QTh" />