From de68dfcaab2050758d8c65d4d3d6473370083e7a Mon Sep 17 00:00:00 2001 From: pimlie Date: Mon, 11 Mar 2019 12:29:04 +0100 Subject: [PATCH] chore: spell & consistency check --- docs/README.md | 4 ++-- docs/api/README.md | 14 +++++++------- docs/faq/README.md | 4 ++-- docs/faq/performance.md | 6 +++--- docs/guide/README.md | 2 +- docs/guide/caveats.md | 2 +- docs/guide/special.md | 6 +++--- docs/guide/ssr.md | 2 +- docs/installation.md | 2 +- 9 files changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/README.md b/docs/README.md index dbf5d7f..dd33fe3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,8 +7,8 @@ We would like your help with this! Please visit the [Vue Meta v3.0 rfc](https:// ::: # Introduction -Vue Meta is a [Vue.js](https://vuejs.org) plugin that allows you to manage your app's metadata, much like [`react-helmet`](https://github.com/nfl/react-helmet) does for React. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the `metaInfo` property. +`vue-meta` is a [Vue.js](https://vuejs.org) plugin that allows you to manage your app's metadata, much like [`react-helmet`](https://github.com/nfl/react-helmet) does for React. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the `metaInfo` property. -These properties, when set on a deeply nested component, will cleverly overwrite their parent components' `metaInfo`, thereby enabling custom info for each top-level view as well as coupling meta info directly to deeply nested subcomponents for more maintainable code. +These properties, when set on a deeply nested component, will cleverly overwrite their parent components' `metaInfo`, thereby enabling custom info for each top-level view as well as coupling meta info directly to deeply nested sub components for more maintainable code. [Get started](/guide) or play with the [examples](https://github.com/nuxt/vue-meta/tree/master/examples) diff --git a/docs/api/README.md b/docs/api/README.md index 2d628e6..05e06a9 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -22,7 +22,7 @@ The name of the attribute vue-meta arguments on elements to know which it should - type `string` - default `data-vue-meta-server-rendered` -The name of the attribute that is aded to the `html` tag to inform `vue-meta` that the server has already generated the meta tags for the initial render +The name of the attribute that is added to the `html` tag to inform `vue-meta` that the server has already generated the meta tags for the initial render See [How to prevent update on page load](/faq/prevent-initial) @@ -30,7 +30,7 @@ See [How to prevent update on page load](/faq/prevent-initial) - type `string` - default `vmid` -The property that tells vue-meta to overwrite (instead of append) an item in a tag list. +The property that tells `vue-meta` to overwrite (instead of append) an item in a tag list. For example, if you have two `meta` tag list items that both have `vmid` of 'description', then vue-meta will overwrite the shallowest one with the deepest one. @@ -50,7 +50,7 @@ The key name for possible meta templates - type `boolean` - default `false` -When `true` then vue-meta will pause updates once page navigation starts and resumes updates when navigation finishes (resuming also triggers an update). +When `true` then `vue-meta` will pause updates once page navigation starts and resumes updates when navigation finishes (resuming also triggers an update). This could both be a performance improvement as a possible fix for 'flickering' when you are e.g. replacing stylesheets ## Plugin methods @@ -100,7 +100,7 @@ Resumes metadata updates after they have been paused. If `refresh` is `true` it ## metaInfo properties ::: tip Note -The documentation below uses `metaInfo` in the examples, please note that this keyName is [configurable](/api/#keyname) and could be different in your case +The documentation below uses `metaInfo` as `keyName` in the examples, please note that this is [configurable](/api/#keyname) and could be different in your case ::: ### title @@ -391,10 +391,10 @@ By default, `vue-meta` sanitizes HTML entities in _every_ property. You can disa - type `object` ::: warning -By disabling sanitization, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application. +By disabling sanitation, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application. ::: -Provides same functionality as `__dangerouslyDisableSanitizers` but you can specify which property for which `tagIDKeyName` sanitation should be disabled. It expects an object with the vmid's as key and an array with property keys as value: +Provides same functionality as `__dangerouslyDisableSanitizers` but you can specify which property for which `tagIDKeyName` sanitation should be disabled. It expects an object with the vmid as key and an array with property keys as value: ```js { @@ -446,7 +446,7 @@ The callback receives the following arguments: ### afterNavigation - type `Function` -A callback function which is called when `vue-meta` has updated the metadata after navigation occured. +A callback function which is called when `vue-meta` has updated the metadata after navigation occurred. This can be used to track page views with the updated document title etc. Adding a `afterNavigation` callback behaves the same as when [refreshOnceOnNavigation](/api/#refreshonceonnavigation) is `true` diff --git a/docs/faq/README.md b/docs/faq/README.md index 54e4842..1d83f2e 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -1,6 +1,6 @@ # How is `metaInfo` resolved? -You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component heirarchy: +You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component hierarchy: ```html @@ -73,4 +73,4 @@ This is not what we want, since the meta `description` needs to be unique for ev ``` -While solutions like `react-helmet` manage the occurrence order and merge behaviour for you automatically, it involves a lot more code and is therefore prone to failure in some edge-cases, whereas this method is _almost_ bulletproof because of its versatility; _at the expense of one tradeoff:_ these `vmid` properties will be rendered out in the final markup (`vue-meta` uses these client-side to prevent duplicating or overriding markup). If you are serving your content GZIP'ped, then the slight increase in HTTP payload size is negligible. +While solutions like `react-helmet` manage the occurrence order and merge behaviour for you automatically, it involves a lot more code and is therefore prone to failure in some edge-cases, whereas this method is _almost_ bulletproof because of its versatility; _at the expense of one tradeoff:_ these `vmid` properties will be rendered out in the final markup (`vue-meta` uses these client-side to prevent duplicating or overriding markup). If you are serving your content gzipped, then the slight increase in HTTP payload size is negligible. diff --git a/docs/faq/performance.md b/docs/faq/performance.md index 6f43293..7e427be 100644 --- a/docs/faq/performance.md +++ b/docs/faq/performance.md @@ -1,8 +1,8 @@ -# Any performance considarations? +# Any performance considerations? Short answer, no -On the client, `vue-meta` batches DOM updates using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). It needs to do this because it registers a Vue mixin that subscribes to the [`beforeMount`](https://vuejs.org/api/#beforeMount) lifecycle hook on all components in order to be notified that renders have occurred and data is ready. If `vue-meta` did not batch updates, the DOM meta info would be re-calculated and re-updated for every component on the page in quick-succession. +On the client, `vue-meta` batches DOM updates using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). It needs to do this because it registers a Vue mixin that subscribes to the [`beforeMount`](https://vuejs.org/api/#beforeMount) lifecycle hook on all components in order to be notified that renders have occurred and data is ready. If `vue-meta` did not batch updates, the DOM metadata would be re-calculated and re-updated for every component on the page in quick-succession. Thanks to batch updating, the update will only occurr once - even if the correct meta info has already been compiled by the server. If you don't want this behaviour, see below. @@ -11,6 +11,6 @@ Previous versions of vue-meta injected lifecycle hooks from the global mixin on Since v2.0 runtime performance should be improved due to: - the global mixin injects just a `beforeCreate` lifecycle hook, other hooks are only added for components which define `metaInfo` -- we track component branches with `vue-meta` components which means that when refreshing metadata we can skip branches without metaInfo +- we track component branches with `vue-meta` components which means that when refreshing metadata we can skip branches without `metaInfo` ::: diff --git a/docs/guide/README.md b/docs/guide/README.md index 9683f81..784b69f 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -3,7 +3,7 @@ This step is optional if you don't need SSR and `Vue` is available as a global variable. `vue-meta` will install itself in this case. ::: -In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your JS entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place: +In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place: **router.js:** ```js diff --git a/docs/guide/caveats.md b/docs/guide/caveats.md index 9a5b6ab..4e18fde 100644 --- a/docs/guide/caveats.md +++ b/docs/guide/caveats.md @@ -3,7 +3,7 @@ ## Reactive variables in template functions Both [title](/api/#titletemplate) as [meta](/api/#content-templates) support using template function. -Due to how Vue.js determines reactivity it is not possible to use reactive variables directly in template function +Due to how Vue determines reactivity it is not possible to use reactive variables directly in template function ```js { diff --git a/docs/guide/special.md b/docs/guide/special.md index 728aa9c..c8ab5bb 100644 --- a/docs/guide/special.md +++ b/docs/guide/special.md @@ -14,7 +14,7 @@ With content value we mean the following value of a `metaInfo` property: - the value of `[contentKeyName]` or `innerHTML` keys for `collection` types as [`meta`](/api/#meta) ::: -The following might be a bit-farfetched, but its just an example +The following might be a bit-far-fetched, but its just an example ```js // parent metaInfo: { @@ -99,10 +99,10 @@ methods: { ## Boolean attributes -`vue-meta` maintains a [list](https://github.com/nuxt/vue-meta/blob/master/src/shared/constants.js) of attributes which are boolean attributes according to the HTML specs (and some extra). Whatever value you will pass to these attributes, they will be rendered as a boolean attribute.* +`vue-meta` maintains a [list](https://github.com/nuxt/vue-meta/blob/master/src/shared/constants.js) of attributes which are Boolean attributes according to the HTML specs (and some extra). Whatever value you will pass to these attributes, they will be rendered as a Boolean attribute.* *Except for the special values `undefined` and `null`, see above :::tip Note -Prior to `v2.0` any attribute key with `undefined` as value was rendered as boolean attribute. This has been removed as packagers often remove object properties with an `undefined` value as given `a = {}` then `a.a === undefined` +Prior to `v2.0` any attribute key with `undefined` as value was rendered as Boolean attribute. This has been removed as bundlers often remove object properties with an `undefined` value as given `a = {}` then `a.a === undefined` ::: diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index e5749f6..2b46136 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -1,6 +1,6 @@ # Server Side Rendering -If you have an isomorphic/universal webapp, you'll likely want to render your metadata on the server side as well. Here's how. +If you have an isomorphic/universal web application, you'll likely want to render your metadata on the server side as well. Here's how. ## Add `vue-meta` to the context diff --git a/docs/installation.md b/docs/installation.md index 5002251..ea36d4f 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -9,7 +9,7 @@ For the latest version in the v1.x branch you can use:
Or you can replace `1` with the full version number you wish to use. -If you include vue-meta after vue it will install automatically +If you include vue-meta after Vue it will install automatically **Uncompressed:** ```html