[12/13] incubator-weex-site git commit: [WEEX-455] Add examples page to the website (#166)

[hanks]

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/website/IndexPage.vue
----------------------------------------------------------------------
diff --git a/examples/website/IndexPage.vue b/examples/website/IndexPage.vue
new file mode 100644
index 0000000..bf012ad
--- /dev/null
+++ b/examples/website/IndexPage.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="article-wrapper">
+    <aside :class="['doc-nav', 'aside', language]">
+      <div class="github">
+        <a 
href="https://github.com/apache/incubator-weex-site/tree/master/examples"; 
target="_blank" class="repo-link">
+          <img class="github-logo" 
src="https://img.alicdn.com/tfs/TB1ciMDbwvD8KJjy0FlXXagBFXa-120-120.png"; 
alt="apache/incubator-weex-site">
+        </a>
+      </div>
+      <ul class="tab-list">
+        <li :class="['tab-item', currentTab === tab.type ? 'active-tab' : '']"
+          v-for="tab in tabs" :key="tab.type"
+          @click="toggleTab(tab.type)">
+          <span class="tab-title">{{tab.name | i18n}}</span>
+        </li>
+      </ul>
+    </aside>
+    <example-list class="article" :language="language" :type="currentTab" 
:category="selectedCategory"></example-list>
+  </div>
+</template>
+
+<script>
+  import getExamples from '../index'
+  import ExampleList from './ExampleList.vue'
+
+  const examples = getExamples({ filterTODO: false })
+  export default {
+    components: { ExampleList },
+    data () {
+      return {
+        currentTab: 'component',
+        language: Vue.config.language || 'en'
+      }
+    },
+    computed: {
+      tabs () {
+        if (!Array.isArray(examples)) {
+          return []
+        }
+        return examples.map(category => {
+          const item = Object.assign({}, category)
+          delete item.group
+          return item
+        })
+      },
+      selectedCategory () {
+        if (!Array.isArray(examples)) {
+          return {}
+        }
+        return examples.filter(tab => tab.type === this.currentTab)[0]
+      }
+    },
+    methods: {
+      toggleTab (tabType, hash) {
+        if (this.tabs.some(tab => tab.type === tabType) && tabType !== 
this.currentTab) {
+          this.currentTab = tabType
+          if (typeof location !== 'undefined') {
+            location.hash = `#${tabType}` + (hash ? `/${hash}` : '')
+          }
+        }
+      }
+    }
+  }
+</script>

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/website/entry.js
----------------------------------------------------------------------
diff --git a/examples/website/entry.js b/examples/website/entry.js
new file mode 100644
index 0000000..28d6c09
--- /dev/null
+++ b/examples/website/entry.js
@@ -0,0 +1,56 @@
+// import Vue from 'vue'
+import IndexPage from './IndexPage.vue'
+
+// window.Vue = Vue
+const language = window.currentLanguage || navigator.language
+Vue.config.language = language.match(/^zh[_-]?\w*$/i) ? 'zh' : 'en'
+
+function i18n (text) {
+  if (typeof text === 'string') {
+    return text
+  }
+  if (Object.prototype.toString.call(text) === '[object Object]') {
+    const lang = Vue.config.language || 'en'
+    return text[lang] || ''
+  }
+}
+
+function parseHash () {
+  if (typeof location === 'undefined' || !location.hash) {
+    return {}
+  }
+  const res = /^#(\w+)(\/([-_+\w]+))?/.exec(location.hash)
+  return { tab: res[1], hash: res[3] }
+}
+
+function relative (url) {
+  const targetURL = new URL(url)
+  if (targetURL.hostname === location.hostname) {
+    return targetURL.pathname
+  }
+  // return url
+  return targetURL.pathname
+}
+
+Vue.filter('i18n', i18n)
+Vue.filter('relative', relative)
+Vue.mixin({
+  methods: { i18n, parseHash },
+  watch: {
+    language () {
+      Vue.config.language = this.language
+      this.$forceUpdate()
+    }
+  }
+})
+
+IndexPage.el = '#root'
+const app = new Vue(IndexPage)
+
+const hashRE = /^#(\w+)(\/([-_+\w]+))?/
+function switchToTab () {
+  const { tab, hash } = parseHash()
+  app.toggleTab(tab, hash)
+}
+window.onhashchange = switchToTab
+switchToTab()

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/749cf999/examples/website/webpack.config.js
----------------------------------------------------------------------
diff --git a/examples/website/webpack.config.js 
b/examples/website/webpack.config.js
new file mode 100644
index 0000000..f0af75c
--- /dev/null
+++ b/examples/website/webpack.config.js
@@ -0,0 +1,28 @@
+const path = require('path')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+  mode: 'production',
+  entry: path.resolve(__dirname, 'entry.js'),
+  output: {
+    path: path.resolve(__dirname, '../../themes/weex/source/js'),
+    filename: 'examples.min.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }, {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new UglifyJSPlugin()
+  ]
+}