You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ky...@apache.org on 2019/08/21 09:49:53 UTC
[incubator-weex-site] branch master updated: Add weex-thanks and
other static resource. (#484)
This is an automated email from the ASF dual-hosted git repository.
kyork pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push:
new 6a6560a Add weex-thanks and other static resource. (#484)
6a6560a is described below
commit 6a6560ae915caa5a925bf5ebc98565acd53f55c1
Author: YorkShen <sh...@gmail.com>
AuthorDate: Wed Aug 21 17:49:49 2019 +0800
Add weex-thanks and other static resource. (#484)
---
docs/.vuepress/components/IPhoneImg.vue | 32 +++
docs/.vuepress/components/IndexEn.vue | 13 ++
docs/.vuepress/components/IndexPage.vue | 223 +++++++++++++++++++++
docs/.vuepress/components/IndexZh.vue | 13 ++
docs/.vuepress/components/SourceCode.vue | 114 -----------
docs/.vuepress/data/lang-en.js | 36 ----
docs/.vuepress/data/lang-zh.js | 35 ----
docs/.vuepress/public/Android@2x.png | Bin 0 -> 951 bytes
docs/.vuepress/public/BroadcastChannel.png | Bin 0 -> 50463 bytes
docs/.vuepress/public/bubbling-capturing.png | Bin 0 -> 13671 bytes
docs/.vuepress/public/css-boxmodel.png | Bin 0 -> 12581 bytes
docs/.vuepress/public/css-flexbox-align.jpg | Bin 0 -> 35005 bytes
docs/.vuepress/public/css-flexbox-justify.svg | 59 ++++++
docs/.vuepress/public/iOS@2x.png | Bin 0 -> 892 bytes
docs/.vuepress/public/iPhone.svg | 30 +++
docs/.vuepress/public/image-resize-property.png | Bin 0 -> 730054 bytes
docs/.vuepress/public/logo@2x.svg | 35 ++++
docs/.vuepress/public/native-component.png | Bin 0 -> 82080 bytes
docs/.vuepress/public/sauce_labs_red.svg | 1 +
.../public/tool-playground-android-icon.png | Bin 0 -> 777 bytes
.../public/tool-playground-apple-icon.png | Bin 0 -> 858 bytes
docs/.vuepress/public/tool-playground-qrcode.png | Bin 0 -> 20076 bytes
docs/.vuepress/public/toolkit-preview.png | Bin 0 -> 180414 bytes
docs/.vuepress/public/vue-rax.png | Bin 0 -> 120960 bytes
docs/.vuepress/public/weex-example-yo.png | Bin 0 -> 200510 bytes
docs/.vuepress/sub-components/License.vue | 1 +
docs/README.md | 10 +-
docs/thanks.md | 4 +
docs/zh/README.md | 10 +-
29 files changed, 417 insertions(+), 199 deletions(-)
diff --git a/docs/.vuepress/components/IPhoneImg.vue b/docs/.vuepress/components/IPhoneImg.vue
new file mode 100644
index 0000000..88fff91
--- /dev/null
+++ b/docs/.vuepress/components/IPhoneImg.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="wrapper">
+ <div class="iPhone-img">
+ <img src="/iPhone.svg" width="323">
+ <img class="img" :src="$withBase(imgSrc)" width="284" height="505">
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['imgSrc']
+}
+</script>
+
+<style>
+.wrapper {
+ position: relative;
+ height: 644px;
+}
+.iPhone-img {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+}
+.img {
+ position: absolute;
+ left: 17px;
+ top: 81px;
+}
+</style>
diff --git a/docs/.vuepress/components/IndexEn.vue b/docs/.vuepress/components/IndexEn.vue
new file mode 100644
index 0000000..30a74e9
--- /dev/null
+++ b/docs/.vuepress/components/IndexEn.vue
@@ -0,0 +1,13 @@
+<template>
+ <IndexPage lang="en-US" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+ components: {
+ IndexPage
+ }
+}
+</script>
diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue
new file mode 100644
index 0000000..08b4428
--- /dev/null
+++ b/docs/.vuepress/components/IndexPage.vue
@@ -0,0 +1,223 @@
+<template>
+ <div>
+ <div class="wrap">
+ <div class="banner">
+ <img class="weex-img" src="https://img.alicdn.com/tfs/TB1C_xcqMHqK1RjSZJnXXbNLpXa-974-980.png" width="35%" height="100%" />
+ <div class="weex-desc">
+ <h1>{{weex.desc}}</h1>
+ <a class="quick-start" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}} <img src="https://img.alicdn.com/tfs/TB1_hg2qCzqK1RjSZFpXXakSXXa-15-12.svg" /></a>
+ </div>
+ </div>
+ <div class="character">
+ <div class="c-desc">
+ <h3>{{weex.charc1Title}}</h3>
+ <div>{{weex.charc1Content}}</div>
+ </div>
+ <img src="https://img.alicdn.com/tfs/TB1M2MYqzTpK1RjSZKPXXa3UpXa-1152-912.png" width="50%" height="100%" />
+ </div>
+
+ <div class="character-o">
+ <img class="pc" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+ <div class="c-desc pr">
+ <h3>{{weex.charc2Title}}</h3>
+ <div>{{weex.charc2Content}}</div>
+ </div>
+ <img class="mobile" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+ </div>
+
+ <div class="character">
+ <div class="c-desc">
+ <h3>{{weex.charc3Title}}</h3>
+ <div>{{weex.charc3Content}}</div>
+ </div>
+ <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" />
+ </div>
+
+ <div class="character-o">
+ <img class="pc" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+ <div class="c-desc pr">
+ <h3>{{weex.charc4Title}}</h3>
+ <div>{{weex.charc4Content}}</div>
+ </div>
+ <img class="mobile" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+ </div>
+
+ <div class="eagle">
+ <div>{{weex.startText}}</div>
+ <a class="start-btn" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}}</a>
+ </div>
+ </div>
+ <License v-show="isApache" />
+ </div>
+</template>
+
+<script>
+
+import langZH from '../data/lang-zh';
+import langEN from '../data/lang-en';
+import License from '../sub-components/License.vue';
+
+export default {
+ data() {
+ if (this.lang == 'en-US') {
+ return {
+ weex: langEN.weex,
+ isApache: window.location.href.indexOf('weex.apache.org') !== -1
+ }
+ }
+ return {
+ weex: langZH.weex,
+ isApache: window.location.href.indexOf('weex.apache.org') !== -1
+ }
+ },
+ props: ['lang'],
+
+ components: {
+ License
+ }
+}
+</script>
+
+
+<style scoped>
+.wrap {
+ padding-left: 10%;
+ padding-right: 10%;
+ background: url(https://img.alicdn.com/tfs/TB1hqc7qrvpK1RjSZFqXXcXUVXa-2880-1792.png) 0 0 / 100% no-repeat;
+}
+.banner {
+ display: flex;
+}
+.weex-img {
+ margin-top: 8%;
+}
+.weex-desc {
+ padding-top: 5%;
+ padding-left: 5%;
+}
+.weex-desc > h1 {
+ line-height: 56px;
+ font-size: 40px;
+ color: #FFFFFF;
+}
+.quick-start {
+ display: inline-block;
+ width: 176px;
+ height: 48px;
+ line-height: 46px;
+ box-sizing: border-box;
+ text-align: center;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 18px;
+}
+.c-desc {
+ width: 30%;
+}
+.c-desc > h3 {
+ line-height: 40px;
+ font-size: 28px;
+ color: #373D41;
+}
+.c-desc > div {
+ line-height: 24px;
+ font-size: 14px;
+ color: #373D41;
+ line-height: 24px;
+}
+.eagle {
+ height: 500px;
+ background: url(https://img.alicdn.com/tfs/TB1tQQ7qxTpK1RjSZFMXXbG_VXa-604-498.svg) center no-repeat;
+ text-align: center;
+ overflow: hidden;
+}
+.eagle > div {
+ margin-top: 223px;
+ margin-bottom: 28px;
+ line-height: 40px;
+ font-size: 32px;
+ color: #373D41;
+}
+.eagle > .start-btn {
+ display: inline-block;
+ width: 240px;
+ height: 48px;
+ line-height: 48px;
+ background: #00B4FF;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 16px;
+}
+@media screen and (max-width: 1200px) {
+ .weex-desc > h1 {
+ font-size: 24px;
+ line-height: 36px;
+ }
+ .quick-start {
+ width: 146px;
+ height: 38px;
+ line-height: 36px;
+ font-size: 14px;
+ }
+ .c-desc > h3 {
+ font-size: 24px;
+ }
+}
+@media screen and (max-width: 720px) {
+ .weex-desc > h1 {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ .quick-start {
+ width: 80px;
+ height: 26px;
+ line-height: 24px;
+ font-size: 12px;
+ }
+ .quick-start > img {
+ display: none;
+ }
+
+}
+@media screen and (max-width: 820px) {
+ .pc {
+ display: none;
+ }
+ .character, .character-o {
+ text-align: center;
+ }
+ .c-desc {
+ width: 100%;
+ }
+ .c-desc > h3 {
+ margin-top: 30px;
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .c-desc > div {
+ text-align: left;
+ }
+}
+@media screen and (min-width: 820px) {
+ .mobile {
+ display: none;
+ }
+ .character {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+ .character-o {
+ position: relative;
+ }
+ .c-desc.pr {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 50px;
+ }
+}
+
+</style>
+
diff --git a/docs/.vuepress/components/IndexZh.vue b/docs/.vuepress/components/IndexZh.vue
new file mode 100644
index 0000000..3e7fd76
--- /dev/null
+++ b/docs/.vuepress/components/IndexZh.vue
@@ -0,0 +1,13 @@
+<template>
+ <IndexPage lang="zh-CN" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+ components: {
+ IndexPage
+ }
+}
+</script>
diff --git a/docs/.vuepress/components/SourceCode.vue b/docs/.vuepress/components/SourceCode.vue
deleted file mode 100644
index 8063d1c..0000000
--- a/docs/.vuepress/components/SourceCode.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
- <div class="wrapper">
- <iframe class="iframe"
- ref="iframe"
- :src="url"
- :style="{ height }"
- @load="onLoad"
- frameborder="0"></iframe>
- <div class="controls" v-if="showControls">
- <div class="btn" @click="openURL">
- <span class="btn-text">Open</span>
- </div>
- </div>
- </div>
-</template>
-
-<script>
- const baseURL = 'https://editor.weex.alibaba-inc.com'
- function setParams (url, params) {
- const querys = []
- for (const key in params) {
- if (Object.prototype.hasOwnProperty.call(params, key) && params[key]) {
- querys.push({ name: key, value: params[key] })
- }
- }
- if (url && querys.length) {
- url += ('?' + querys.map(x => `${x.name}=${x.value}`).join('&'))
- }
- return url
- }
- export default {
- props: ['hash', 'file', 'line', 'mode', 'buttons'],
- data () {
- return {
- url: this.createURL(),
- showControls: false,
- height: 'auto'
- }
- },
- created () {
- if (this.line) {
- this.height = this.calculateHeight() + 'px'
- }
- },
- methods: {
- createURL () {
- let url = this.src ? this.src : `${baseURL}/source/${this.hash}`
- const params = []
- if (this.file) {
- url += `/${this.file}`
- }
- return setParams(url, { line: this.line })
- },
- onLoad () {
- // const $iframe = this.$refs.iframe
- if (this.buttons !== 'none') {
- this.showControls = true
- }
- },
- calculateHeight () {
- const lineHeight = 19
- if (this.line) {
- var pair = this.line.split(/\-|\~/i)
- var begin = parseInt(pair[0], 10)
- var end = parseInt(pair[1], 10) || begin
- return (end - begin + 1) * lineHeight + 20
- }
- },
- openURL () {
- try {
- const url = setParams(`${baseURL}/vue/${this.hash}`, {
- file: this.file,
- line: this.line
- })
- window.open(url)
- } catch (e) {}
- }
- }
- }
-</script>
-
-<style scoped>
- .wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- padding: 10px 2%;
- box-sizing: border-box;
- }
- .iframe {
- width: 100%;
- height: auto;
- }
- .controls {
- position: absolute;
- top: 18px;
- right: 3%;
- }
- .controls .btn {
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid #5f5f5f;
- border-radius: 5px;
- background-color: rgba(255,255,255,.1);
- color: #969696;
- cursor: pointer;
- padding: 3px 8px;
- font-size: 13px;
- }
- .controls .btn:hover {
- box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
- }
-</style>
diff --git a/docs/.vuepress/data/lang-en.js b/docs/.vuepress/data/lang-en.js
deleted file mode 100644
index 2ad9290..0000000
--- a/docs/.vuepress/data/lang-en.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
- weex: {
- desc: 'Weex is a framework for building performant mobile apps with modern web technology.',
- getStartedBtn: 'Get Started',
- startText: 'Start building your weex app',
- charc1Title: 'High Performance',
- charc1Content:
- 'Weex is using native components and native modules to take advantage of native rendering performance and platform capabilities. Both components and modules are pluggable and extendable.',
- charc2Title: 'Cross Platforms',
- charc2Content:
- 'You can use a single codebase to generate different bundle files to running on both Webs, Android and iOS platforms. Native components and modules have a different implementation on each platform, but they all exposed the same API.',
- charc3Title: 'Front-end Friendly',
- charc3Content:
- 'Weex embraces the existing Web ecosystem, you can use modern front-end technology to develop your mobile apps. Weex supports most commonly used CSS properties and most popular front-end frameworks, such as Vue and Rax, maybe more in the future.',
- charc4Title: 'Large-scale Used in Production',
- charc4Content:
- 'Weex has been large-scale used in many super apps for a long time, served almost billions of people in total. Weex also derived many engineering products and platforms for industry development.'
- },
- info: {
- solutionTitle: 'Solutions',
- demoTitle: 'Demos',
- searchTag: 'Search Tags',
- hotTags: 'Hot Tags',
- searchBtn: 'Search',
- placeholder: 'Select tags or input tags then press the Enter key',
- solutionFavoriteNone:
- "You don't have any favorite solution. Start collecting the first one now!",
- solutionWorksNone: "You don't write any solution. Start writing one now!",
- demoFavoriteNone: "You don't have any favorite demo. Start collecting the first one now!",
- demoWorksNone: "You don't write any demo. Start writing one now!",
- startWriting: 'startWriting',
- noData: 'No Data',
- pv: 'pv',
- favor: 'favor'
- }
-};
diff --git a/docs/.vuepress/data/lang-zh.js b/docs/.vuepress/data/lang-zh.js
deleted file mode 100644
index 49211c6..0000000
--- a/docs/.vuepress/data/lang-zh.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default {
- weex: {
- desc: 'Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。',
- getStartedBtn: '快速开始',
- startText: '开始构建你的 weex 应用',
- charc1Title: '高性能',
- charc1Content:
- 'Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。',
- charc2Title: '跨平台',
- charc2Content:
- '你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的接口。',
- charc3Title: '贴近前端生态',
- charc3Content:
- 'Weex 拥抱已有的 Web 生态，你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架，如 Vue 和 Rax，在未来或许还可以支持更多。',
- charc4Title: '被大规模的使用',
- charc4Content:
- 'Weex 已经在许多超级 App 中大规模使用，一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台，以供 工业生产使用。'
- },
- info: {
- solutionTitle: '干货集中营-解决方案',
- demoTitle: '干货集中营-代码案例',
- searchTag: '标签筛选',
- hotTags: '热门标签',
- searchBtn: '筛选',
- palceholder: '请选择标签或者输入关键词后回车',
- solutionFavoriteNone: '你还没有收藏解决方案，赶快点击按钮开始收藏你的第一个解决方案吧~',
- solutionWorksNone: '你还没有编写解决方案，赶快去编写你的第一个解决方案吧~',
- demoFavoriteNone: '你还没有收藏代码案例，赶快点击按钮开始收藏你的第一个代码案例吧~',
- demoWorksNone: '你还没有编写代码案例，赶快去编写你的第一个代码案例吧~',
- startWriting: 'GO-编写去',
- noData: '暂无数据~',
- pv: '浏览',
- favor: '收藏'
- }
-};
diff --git a/docs/.vuepress/public/Android@2x.png b/docs/.vuepress/public/Android@2x.png
new file mode 100644
index 0000000..ceb2a45
Binary files /dev/null and b/docs/.vuepress/public/Android@2x.png differ
diff --git a/docs/.vuepress/public/BroadcastChannel.png b/docs/.vuepress/public/BroadcastChannel.png
new file mode 100644
index 0000000..050e043
Binary files /dev/null and b/docs/.vuepress/public/BroadcastChannel.png differ
diff --git a/docs/.vuepress/public/bubbling-capturing.png b/docs/.vuepress/public/bubbling-capturing.png
new file mode 100644
index 0000000..1a92811
Binary files /dev/null and b/docs/.vuepress/public/bubbling-capturing.png differ
diff --git a/docs/.vuepress/public/css-boxmodel.png b/docs/.vuepress/public/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
Binary files /dev/null and b/docs/.vuepress/public/css-boxmodel.png differ
diff --git a/docs/.vuepress/public/css-flexbox-align.jpg b/docs/.vuepress/public/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
Binary files /dev/null and b/docs/.vuepress/public/css-flexbox-align.jpg differ
diff --git a/docs/.vuepress/public/css-flexbox-justify.svg b/docs/.vuepress/public/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/docs/.vuepress/public/css-flexbox-justify.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
+ <defs>
+ <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
+ <rect x='0' y='0' width='10' height='10' fill='#eee' />
+ <rect x='10' y='10' width='10' height='10' fill='#eee' />
+ <rect x='0' y='10' width='10' height='10' fill='#ccc' />
+ <rect x='10' y='0' width='10' height='10' fill='#ccc' />
+ </pattern>
+ </defs>
+ <style>
+ text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
+ rect { stroke-width: 2px; stroke: #888; }
+ g > rect:nth-child(1) { fill: #888 }
+ g > rect:nth-child(2) { fill: #fcc; }
+ g > rect:nth-child(3) { fill: #cfc; }
+ g > rect:nth-child(4) { fill: #ccf; }
+ g > rect:nth-child(5) { fill: transparent; }
+ </style>
+ <g transform="translate(2,2)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='100' y='0' width='80' height='50' />
+ <rect x='180' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-start</text>
+ </g>
+ <g transform="translate(2,56)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='120' y='0' width='100' height='50' />
+ <rect x='220' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-end</text>
+ </g>
+ <g transform="translate(2,110)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='60' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='240' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>center</text>
+ </g>
+ <g transform="translate(2,164)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-between</text>
+ </g>
+ <g transform="translate(2,218)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='20' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='280' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-around</text>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/iOS@2x.png b/docs/.vuepress/public/iOS@2x.png
new file mode 100644
index 0000000..6ef2f96
Binary files /dev/null and b/docs/.vuepress/public/iOS@2x.png differ
diff --git a/docs/.vuepress/public/iPhone.svg b/docs/.vuepress/public/iPhone.svg
new file mode 100644
index 0000000..43d1f16
--- /dev/null
+++ b/docs/.vuepress/public/iPhone.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 435.2 895.2" style="enable-background:new 0 0 435.2 895.2;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#66B2FF;}
+ .st1{fill:none;}
+ .st2{fill:#BBDDFF;}
+</style>
+<path class="st0" d="M364.3,895.2H70.9C31.8,895.2,0,863.4,0,824.3V70.8C0,31.7,31.8-0.1,70.9-0.1h293.4c39.1,0,70.9,31.8,70.9,70.9
+ v753.4C435.2,863.3,403.4,895.2,364.3,895.2z M70.9,0.7C32.2,0.7,0.8,32.2,0.8,70.8v753.4c0,38.7,31.5,70.1,70.1,70.1h293.4
+ c38.7,0,70.1-31.5,70.1-70.1V70.8c0-38.7-31.5-70.1-70.1-70.1C364.3,0.7,70.9,0.7,70.9,0.7z"/>
+<path class="st0" d="M406.6,790.9H22.5V108.3h384.1V790.9z M23.2,790.1h382.6V109H23.2V790.1z"/>
+<path class="st1" d="M187.4,55c-2.5,0-4.6,2.1-4.6,4.6s2.1,4.6,4.6,4.6h60.3c2.5,0,4.6-2.1,4.6-4.6s-2.1-4.6-4.6-4.6H187.4z"/>
+<rect x="162.4" y="34.5" class="st1" width="110.4" height="50.1"/>
+<g>
+ <path class="st2" d="M247.6,64.1h-59.9c-2.2,0-4-1.8-4-4v-0.2c0-2.2,1.8-4,4-4h59.9c2.2,0,4,1.8,4,4v0.2
+ C251.6,62.3,249.8,64.1,247.6,64.1z"/>
+ <path class="st0" d="M247.5,64.5h-59.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h59.7c2.5,0,4.5,2,4.5,4.5S249.9,64.5,247.5,64.5z
+ M187.7,56.3c-2.1,0-3.7,1.7-3.7,3.7s1.7,3.7,3.7,3.7h59.7c2.1,0,3.7-1.7,3.7-3.7s-1.7-3.7-3.7-3.7H187.7z"/>
+</g>
+<g>
+ <circle class="st2" cx="167.8" cy="60" r="5.5"/>
+ <path class="st0" d="M167.8,65.8c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8C173.6,63.2,171.1,65.8,167.8,65.8z
+ M167.8,54.9c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5.1-2.3,5.1-5.1S170.6,54.9,167.8,54.9z"/>
+</g>
+<ellipse transform="matrix(0.4641 -0.8858 0.8858 0.4641 -623.9302 640.7924)" class="st2" cx="217.6" cy="836" rx="34.2" ry="34.2"/>
+<path class="st0" d="M217.6,870.6c-19.1,0-34.6-15.5-34.6-34.6s15.5-34.6,34.6-34.6s34.6,15.5,34.6,34.6S236.7,870.6,217.6,870.6z
+ M217.6,802.1c-18.7,0-33.9,15.2-33.9,33.9s15.2,33.9,33.9,33.9s33.9-15.2,33.9-33.9S236.3,802.1,217.6,802.1z"/>
+</svg>
diff --git a/docs/.vuepress/public/image-resize-property.png b/docs/.vuepress/public/image-resize-property.png
new file mode 100644
index 0000000..c3b17a2
Binary files /dev/null and b/docs/.vuepress/public/image-resize-property.png differ
diff --git a/docs/.vuepress/public/logo@2x.svg b/docs/.vuepress/public/logo@2x.svg
new file mode 100644
index 0000000..0001e0a
--- /dev/null
+++ b/docs/.vuepress/public/logo@2x.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="39px" viewBox="0 0 78 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
+ <title>TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+ <polygon id="path-1" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+ <polygon id="path-3" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+ </defs>
+ <g id="weex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="工具-1" transform="translate(-26.000000, -12.000000)">
+ <g id="Group-5">
+ <g id="TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59" transform="translate(26.000000, 12.000000)">
+ <path d="M40.0783352,21.721519 C40.2240214,21.721519 40.3703494,21.8143021 40.3908867,21.9613664 L40.8491245,26.3291139 C40.8696618,26.5310907 40.9325572,26.6787862 41.0159898,26.6787862 C41.0994225,26.6787862 41.1828551,26.5317219 41.2033924,26.3291139 L41.7039883,21.9613664 C41.7450628,21.8143021 41.8079582,21.721519 41.9542863,21.721519 L44.0786099,21.721519 C44.1832217,21.721519 44.3083706,21.8143021 44.3289079,21.9247581 L44.8705784,26.3291139 C44.8917574,26.5310 [...]
+ <g id="Group">
+ <g id="Clipped">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <g id="a"></g>
+ <path d="M22.4171013,14.2682266 C21.4668893,14.2420836 20.7099483,13.4512059 20.7099483,12.4845351 C20.7099483,11.5178643 21.4668893,10.7269865 22.4171013,10.7008436 C23.3673132,10.7269865 24.1242542,11.5178643 24.1242542,12.4845351 C24.1242542,13.4512059 23.3673132,14.2420836 22.4171013,14.2682266 M35.6517266,7.53940871 C34.6207689,6.2594658 33.3662469,5.18414224 31.9512684,4.36753143 C22.4556076,-2.67847415 9.17092405,-0.676145033 2.08961013,8.81468612 C4.68 [...]
+ </g>
+ <g id="Clipped">
+ <mask id="mask-4" fill="white">
+ <use xlink:href="#path-3"></use>
+ </mask>
+ <g id="a"></g>
+ <path d="M23.0877532,11.3822098 C23.4752416,11.3819766 23.8334181,11.5919876 24.0273609,11.9331336 C24.2213037,12.2742795 24.2215483,12.6947323 24.0280026,13.0361115 C23.834457,13.3774906 23.4765252,13.5879325 23.0890367,13.5881656 C22.4900315,13.5885261 22.0041544,13.0949983 22.0038,12.4858404 C22.0034456,11.8766825 22.4887479,11.3825703 23.0877532,11.3822098" id="Shape" fill="#515151" fill-rule="nonzero" mask="url(#mask-4)"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/native-component.png b/docs/.vuepress/public/native-component.png
new file mode 100644
index 0000000..9dd5550
Binary files /dev/null and b/docs/.vuepress/public/native-component.png differ
diff --git a/docs/.vuepress/public/sauce_labs_red.svg b/docs/.vuepress/public/sauce_labs_red.svg
new file mode 100644
index 0000000..98e31a9
--- /dev/null
+++ b/docs/.vuepress/public/sauce_labs_red.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 166 54"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.15;mix-blend-mode:multiply;}.cls-3{fill:#e1251b;}.cls-4,.cls-5{fill:#fff;}.cls-5{font-size:6.14px;font-family:MuseoSans-500, Museo Sans;letter-spacing:0.18em;}.cls-6{letter-spacing:0.18em;}.cls-7{letter-spacing:0.17em;}.cls-8{letter-spacing:0.18em;}</style></defs><title>Powered by Sauce Labs badges red</title><g class="cls-1"><g i [...]
\ No newline at end of file
diff --git a/docs/.vuepress/public/tool-playground-android-icon.png b/docs/.vuepress/public/tool-playground-android-icon.png
new file mode 100644
index 0000000..2691e57
Binary files /dev/null and b/docs/.vuepress/public/tool-playground-android-icon.png differ
diff --git a/docs/.vuepress/public/tool-playground-apple-icon.png b/docs/.vuepress/public/tool-playground-apple-icon.png
new file mode 100644
index 0000000..70c1ea4
Binary files /dev/null and b/docs/.vuepress/public/tool-playground-apple-icon.png differ
diff --git a/docs/.vuepress/public/tool-playground-qrcode.png b/docs/.vuepress/public/tool-playground-qrcode.png
new file mode 100644
index 0000000..bdfd4b2
Binary files /dev/null and b/docs/.vuepress/public/tool-playground-qrcode.png differ
diff --git a/docs/.vuepress/public/toolkit-preview.png b/docs/.vuepress/public/toolkit-preview.png
new file mode 100644
index 0000000..5046052
Binary files /dev/null and b/docs/.vuepress/public/toolkit-preview.png differ
diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png
new file mode 100644
index 0000000..1e6e57e
Binary files /dev/null and b/docs/.vuepress/public/vue-rax.png differ
diff --git a/docs/.vuepress/public/weex-example-yo.png b/docs/.vuepress/public/weex-example-yo.png
new file mode 100644
index 0000000..81e78c1
Binary files /dev/null and b/docs/.vuepress/public/weex-example-yo.png differ
diff --git a/docs/.vuepress/sub-components/License.vue b/docs/.vuepress/sub-components/License.vue
index ae0ab81..e229a5f 100644
--- a/docs/.vuepress/sub-components/License.vue
+++ b/docs/.vuepress/sub-components/License.vue
@@ -31,6 +31,7 @@
<dl><dt>Resources</dt>
<dd><a href="/blog/write-a-blog.html" target="_self">Blog</a></dd>
<dd><a href="/community/" target="_self">Community</a></dd>
+ <dd><a href="thanks" target="_self">Thanks (Weex)</a></dd>
<dd><a href="https://www.apache.org/security/" target="_self">Security</a></dd>
</dl>
</div>
diff --git a/docs/README.md b/docs/README.md
index 59f7ff8..78878ef 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
- created(){
- this.$router.push('/guide/')
- }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexEn
+---
\ No newline at end of file
diff --git a/docs/thanks.md b/docs/thanks.md
new file mode 100644
index 0000000..90ee2c8
--- /dev/null
+++ b/docs/thanks.md
@@ -0,0 +1,4 @@
+# Thanks
+Weex could not exist without the continued generous support from the community, We would like to take this opportunity to thank our sponsors.
+
+* [Sauce Labs](https://saucelabs.com): A Cross-browser Testing Platform.
\ No newline at end of file
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 748fe9b..78a3c62 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
- created(){
- this.$router.push('/zh/guide/')
- }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexZh
+---
\ No newline at end of file