Permalink
Browse files

feat(meta): ios specific options

  • Loading branch information...
pi0 committed Sep 21, 2017
1 parent b54d5e5 commit 54a143565e4a803ab02de86d3c1f2ac9452dca10
Showing with 37 additions and 24 deletions.
  1. +26 −16 modules/meta/README.md
  2. +11 −8 modules/meta/index.js
@@ -6,7 +6,9 @@
This module is compatible with [manifest](../manifest) module.
## Setup
- Add `@nuxtjs/meta` dependency using yarn or npm to your project
- Add `@nuxtjs/meta` to `modules` section of `nuxt.config.js`
```js
{
@@ -15,27 +17,35 @@ This module is compatible with [manifest](../manifest) module.
]
}
````
- You can optionally override meta using `manifest` section of `nuxt.config.js`
- You can optionally override meta using either `manifest` or `meta` section of `nuxt.config.js`
```js
{
manifest: {
meta: {
// ...
}
}
```
## What's included ?
Meta / Link | Customize With | Default value
---------------------------------------|----------------------|-------------------
`charset` | `charset` | `utf-8`
`viewport` | `viewport` | `width=device-width, initial-scale=1, minimal-ui`
`mobile-web-app-capable` | `mobileApp` | `true`
`apple-mobile-web-app-status-bar-style`| `appleStatusBarStyle`| `default`
`shortcut icon` + `apple-touch-icon` | `favicon` | options.icons[0].src
`title` | `name` | npm_package_name
`description` | `description` | npm_package_description
`theme-color` | `theme_color` | options.loading.color
`lang` | `lang` | `en`
`og:type` | `ogType` | `website`
`og:title` | `ogTitle` | same as options.name
`og:description` | `ogDescription` | same as options.description
Meta / Link | Customize With | Default value
---------------------------------------|-----------------------|-------------------
`charset` | `charset` | `utf-8`
`viewport` | `viewport` | `width=device-width, initial-scale=1, minimal-ui`
`mobile-web-app-capable` | `mobileApp` | `true`
`apple-mobile-web-app-capable` | `mobileAppIOS`* | **`false`**
`apple-mobile-web-app-status-bar-style`| `appleStatusBarStyle`*| `black-translucent` (only when `mobileAppIOS` is `true`)
`shortcut icon` + `apple-touch-icon` | `favicon` | options.icons[0].src
`title` | `name` | npm_package_name
`description` | `description` | npm_package_description
`theme-color` | `theme_color` | options.loading.color
`lang` | `lang` | `en`
`og:type` | `ogType` | `website`
`og:title` | `ogTitle` | same as options.name
`og:description` | `ogDescription` | same as options.description
* Please read this resources before setting IOS specific options:
- https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
- https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb
@@ -1,5 +1,3 @@
const path = require('path')
const find = (arr, key, val) => arr.find(obj => val ? obj[key] === val : obj[key])
module.exports = function nuxtMeta (_options) {
@@ -11,7 +9,8 @@ module.exports = function nuxtMeta (_options) {
viewport: 'width=device-width, initial-scale=1, minimal-ui',
mobileApp: true,
favicon: true,
appleStatusBarStyle: 'default',
mobileAppIOS: false,
appleStatusBarStyle: 'black-translucent',
theme_color: this.options.loading && this.options.loading.color,
lang: 'en',
ogType: 'website',
@@ -20,7 +19,7 @@ module.exports = function nuxtMeta (_options) {
}
// Combine sources
const options = Object.assign({}, defaults, this.options.manifest, _options)
const options = Object.assign({}, defaults, this.options.manifest, this.options.meta, _options)
// Charset
if (options.charset && !find(this.options.head.meta, 'charset')) {
@@ -37,12 +36,17 @@ module.exports = function nuxtMeta (_options) {
this.options.head.meta.push({ name: 'mobile-web-app-capable', content: 'yes' })
}
// statusBarStyle
if (options.appleStatusBarStyle && !find(this.options.head.meta, 'name', 'apple-mobile-web-app-status-bar-style')) {
// mobileApp (IOS)
if (options.mobileAppIOS && !find(this.options.head.meta, 'name', 'apple-mobile-web-app-capable')) {
this.options.head.meta.push({ name: 'apple-mobile-web-app-capable', content: 'yes' })
}
// statusBarStyle (IOS)
if (options.mobileAppIOS && options.appleStatusBarStyle && !find(this.options.head.meta, 'name', 'apple-mobile-web-app-status-bar-style')) {
this.options.head.meta.push({ name: 'apple-mobile-web-app-status-bar-style', content: options.appleStatusBarStyle })
}
// Favicon
// FavIcon
if (options.favicon === true) {
options.favicon = options.icons && options.icons.length > 0 && options.icons[0].src
options.applefavicon = options.icons && options.icons.length > 0 && options.icons[3].src
@@ -100,7 +104,6 @@ module.exports = function nuxtMeta (_options) {
if (options.ogDescription && !find(this.options.head.meta, 'name', 'og:description')) {
this.options.head.meta.push({ name: 'og:description', content: options.ogDescription })
}
}
module.exports.meta = require('./package.json')

0 comments on commit 54a1435

Please sign in to comment.