chore: add a website (#99)

* use demoboard for website

* tweaks

* update demoboard

Author: egoist

README.md

@@ -70,7 +70,7 @@ The default locale name.
 
 A `converter` that formats regular dates in `xxx ago` or `in xxx` style.
 
-Check out our [default converter](./src/converter.js) which uses [date-fns/distance_in_words_to_now](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) under the hood.
+Check out our [default converter](https://github.com/egoist/vue-timeago/blob/master/src/converter.js) which uses [date-fns/distance_in_words_to_now](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) under the hood.
 
 ### converterOptions
 

example/AutoUpdate.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="box" data-title="Date">
+      <input v-model="date" type="text" name="" id="">
+    </div>
+    <div class="box" data-title="Output" v-if="date">
+      <timeago :datetime="date" :autoUpdate="1" :converterOptions="{ includeSeconds: true }" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: new Date()
+    }
+  }
+}
+</script>
+
+<readme>
+Code used by this demo:
+
+```html
+<timeago
+  :datetime="date"
+  :autoUpdate="1"
+  :converterOptions="{ includeSeconds: true }"
+/>
+```
+
+You can use `autoUpdate` prop to control how often this component should be updated, for example if you set it to `true`, it will be updated every 60 seconds.
+</readme>

example/BasicUsage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="box" data-title="Date">
+      <input v-model="date" type="date" name="" id="">
+    </div>
+    <div class="box" data-title="Output" v-if="date">
+      <timeago :datetime="date" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '2019-02-12'
+    }
+  }
+}
+</script>
+
+<readme>
+First you need to use the plugin:
+
+```js
+import Timeago from 'vue-timeago'
+
+Vue.use(Timeago)
+```
+
+Then use the `<timeago>` component in your Vue component like this:
+
+```html
+<template>
+  <div>
+    <timeago :datetime="date" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '2018-03-12'
+    }
+  }
+}
+</script>
+```
+</readme>

example/CustomConverter.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="box" data-title="Date">
+      <input v-model="date" type="date" />
+    </div>
+    <div class="box" data-title="Output" v-if="date">
+      <timeago :datetime="date" :converter="isFutureOrPastConverter" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '2022-01-11'
+    }
+  },
+
+  methods: {
+    isFutureOrPastConverter(date, locale, options) {
+      return new Date(date) > Date.now() ? 'Date is Future' : 'Date is Past'
+    }
+  }
+}
+</script>
+
+<readme>
+You can use a custom converter to control how machine time is converted to human-readable time:
+
+```html
+<template>
+  <timeago :datetime="date" :converter="isFutureOrPastConverter" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '2022-01-11'
+    }
+  },
+  methods: {
+    isFutureOrPastConverter(date) {
+      return new Date(date) > Date.now() ? 'Date is Future' : 'Date is Past'
+    }
+  }
+}
+</script>
+```
+</readme>

example/index.js

@@ -1,7 +1,13 @@
+import './style.css'
 import Vue from 'vue'
+import { create, mount } from 'demoboard'
+import toReact from '@egoist/vue-to-react'
 import Timeago from '../src'
-import App from './app.vue'
 import converter from '../src/converter'
+import BasicUsage from './BasicUsage.vue'
+import AutoUpdate from './AutoUpdate.vue'
+import CustomConverter from './CustomConverter.vue'
+import readme from '!raw-loader!../README.md'
 
 const r = require.context('date-fns/locale', true, /^\.\/([\w\_]+)\/index\.js/)
 const locales = {}
@@ -16,12 +22,23 @@ Vue.use(Timeago, {
   converter
 })
 
-new Vue({
-  el: '#app',
-  render: h =>
-    h(App, {
-      props: {
-        localeNames: Object.keys(locales)
-      }
-    })
+const demoboard = create()
+
+demoboard.section('Examples').add('Basic Usage', {
+  component: toReact(BasicUsage),
+  readme: BasicUsage.$readme,
+  code: BasicUsage.$code
+}).add('Auto Update', {
+  component: toReact(AutoUpdate),
+  readme: AutoUpdate.$readme,
+  code: AutoUpdate.$code
+}).add('Custom Converter', {
+  component: toReact(CustomConverter),
+  readme: CustomConverter.$readme,
+  code: CustomConverter.$code
+})
+
+mount(demoboard, '#app', {
+  title: 'Vue Timeago',
+  readme
 })

example/style.css

@@ -0,0 +1,21 @@
+.box {
+  border: 1px solid #e2e2e2;
+  border-radius: 3px;
+  padding: 20px;
+  position: relative;
+  margin-bottom: 20px;
+  max-width: 800px;
+}
+
+.box:before {
+  display: block;
+  content: attr(data-title);
+  position: absolute;
+  top: 0;
+  left: 20px;
+  transform: translateY(-50%);
+  background: white;
+  color: #999;
+  padding: 0 5px;
+  font-size: 14px;
+}

example/vue-readme-loader.js

@@ -0,0 +1,5 @@
+module.exports = source => {
+  return `export default function (Component) {
+    Component.options.$readme = ${JSON.stringify(source.trim())}
+  }`
+}

package.json

@@ -30,9 +30,11 @@
     "filter"
   ],
   "devDependencies": {
+    "@egoist/vue-to-react": "^1.1.0",
     "bili": "^4.7.0",
     "commitizen": "^3.0.7",
     "cz-conventional-changelog": "^2.1.0",
+    "demoboard": "^0.3.1",
     "eslint-config-prettier": "^4.1.0",
     "eslint-config-rem": "^4.0.0",
     "eslint-plugin-prettier": "^3.0.1",
@@ -42,6 +44,7 @@
     "poi": "^12.5.6",
     "postcss-nested": "^4.1.2",
     "prettier": "^1.16.4",
+    "raw-loader": "^3.0.0",
     "semantic-release": "^15.13.3",
     "vue": "^2.6.9",
     "vue-template-compiler": "^2.6.9",

poi.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          resourceQuery: /blockType=readme/,
+          loader: require.resolve('./example/vue-readme-loader')
+        }
+      ]
+    }
+  }
+}