docs: add homepage

docs: upgrade to vuepress v1

change pkg description to HTML metadata

README.md

@@ -5,7 +5,7 @@
 </p>
 
 <h5 align="center">
-  Manage page metadata in Vue.js components with SSR support
+  Manage HTML metadata in Vue.js components with SSR support
 </h5>
 
 <p align="center">

docs/.vuepress/config.js

@@ -1,4 +1,12 @@
 module.exports = {
+  plugins: {
+    '@vuepress/google-analytics': {
+      ga: 'UA-88662854-1',
+    },
+    '@vuepress/plugin-pwa': {
+      serviceWorker: true
+    }
+  },
   locales: {
     '/': {
       lang: 'en-US',
@@ -6,8 +14,6 @@ module.exports = {
       description: 'Metadata manager for Vue.js'
     },
   },
-  ga: 'UA-88662854-1',
-  serviceWorker: true,
   themeConfig: {
     repo: 'nuxt/vue-meta',
     docsDir: 'docs',
@@ -16,16 +22,11 @@ module.exports = {
         label: 'English',
         selectText: 'Languages',
         editLinkText: 'Edit this page on GitHub',
-        nav: [{
+        nav: [
-          text: 'Guide',
+          { text: 'Guide', link: '/guide/' },
-          link: '/guide/'
+          { text: 'API', link: '/api/' },
-        }, {
+          { text: 'Release Notes', link: 'https://github.com/nuxt/vue-meta/releases' }
-          text: 'API',
+        ],
-          link: '/api/'
-        }, {
-          text: 'Release Notes',
-          link: 'https://github.com/nuxt/vue-meta/releases'
-        }],
         sidebar: [
           '/',
           {

docs/README.md

@@ -1,14 +1,41 @@
-<img src="vue-meta.png" alt="vue-meta"/>
+---
-
+home: true
-::: tip We need your help
+heroImage: /vue-meta.png
+heroText: vue-meta
+tagline: HTML Metadata manager for Vue.js
+actionText: Get Started →
+actionLink: /guide/
+features:
+- title: What
+  details: vue-meta is a plugin for Vue.js which helps you to manage your app's metadata using Vue's built-in reactivity
+- title: How
+  details: Just export the special property `metaInfo` in any or all your components
+- title: So?
+  details: Nested components can overwrite each others values, allowing you to easily add or remove metadata where and when you need it
+footer:
+  MIT License | Created by Declan de Wet, currently developed with ❤ by Nuxt.js core-team & contributors
+---
+::: tip We need your help!
 We are working on defining the RFC for Vue Meta v3.0. It will be a ground-breaking release built from the ground up.
 
 We would like your help with this! Please visit the [Vue Meta v3.0 rfc](https://github.com/nuxt/rfcs/issues/19) and let us know your thoughts.
 :::
 
-# Introduction
+```js
-`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.
+// Component.vue
+{
+  metaInfo: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  }
+}
+```
+```html
+<!-- Rendered HTML tags in your page -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
 
-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 metadata directly to deeply nested sub components for more maintainable code.
+See the [examples](https://github.com/nuxt/vue-meta/tree/master/examples) for more inspiration!
-
-[Get started](/guide) or play with the [examples](https://github.com/nuxt/vue-meta/tree/master/examples)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-meta",
   "version": "2.0.0-rc.2",
-  "description": "Manage page metadata in Vue.js components with ssr support",
+  "description": "Manage HTML metadata in Vue.js components with ssr support",
   "keywords": [
     "attribute",
     "google",
@@ -30,6 +30,9 @@
     },
     {
       "name": "Sebastien Chopin (@Atinux)"
+    },
+    {
+      "name": "Pim (@pimlie)"
     }
   ],
   "files": [
@@ -74,6 +77,8 @@
     "@nuxtjs/eslint-config": "^0.0.1",
     "@vue/server-test-utils": "^1.0.0-beta.29",
     "@vue/test-utils": "^1.0.0-beta.29",
+    "@vuepress/plugin-google-analytics": "^1.0.0",
+    "@vuepress/plugin-pwa": "^1.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
@@ -102,7 +107,7 @@
     "node-env-file": "^0.1.8",
     "puppeteer-core": "^1.17.0",
     "rimraf": "^2.6.3",
-    "rollup": "^1.14.2",
+    "rollup": "^1.14.4",
     "rollup-plugin-buble": "^0.19.6",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-json": "^4.0.0",
@@ -119,7 +124,7 @@
     "vue-router": "^3.0.6",
     "vue-server-renderer": "^2.6.10",
     "vue-template-compiler": "^2.6.10",
-    "vuepress": "^0.14.11",
+    "vuepress": "^1.0.0",
     "vuepress-theme-vue": "^1.1.0",
     "webpack": "^4.33.0"
   }