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/20 11:18:00 UTC

[incubator-weex-site] branch master updated: Update blog and LICENSE.vue (#482)

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 8553a82  Update blog and LICENSE.vue (#482)
8553a82 is described below

commit 8553a820ad95cc1a5e1a40544c0e7d76437e4991
Author: YorkShen <sh...@gmail.com>
AuthorDate: Tue Aug 20 19:17:55 2019 +0800

    Update blog and LICENSE.vue (#482)
---
 docs/.vuepress/config.js                    |   2 +
 docs/.vuepress/sub-components/License.vue   | 169 ++++++++++++++++++++++++++++
 docs/.vuepress/sub-components/Tab.vue       |  56 +++++++++
 docs/blog/weex-third-party-extensions.md    |  14 +++
 docs/zh/blog/weex-third-party-extensions.md |  13 +++
 5 files changed, 254 insertions(+)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index fa2c702..2bac55c 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -184,6 +184,7 @@ module.exports = {
           '/blog/': [
             ['write-a-blog', 'Write a Blog'],
             ['ios-weexcore.md', 'Adapt iOS WeexSDK to WeexCore']
+            ['weex-third-party-extensions','List of Third Party Plugin']
           ],
           '/download/':[
              ['download', "Source Download"] 
@@ -359,6 +360,7 @@ module.exports = {
             ['ios-weexcore.md', 'iOS WeexSDK 接入 WeexCore'],
             ['weexcore-multiprocess-evolution', 'WeexCore 多进程多线程架构演进'],
             ['interaction-optimization', '可交互时间的探索和首屏时间的改进之路']
+            ['weex-third-party-extensions','Weex 三方插件']
           ],
           '/zh/download/':[
             ['download', "源代码下载"] 
diff --git a/docs/.vuepress/sub-components/License.vue b/docs/.vuepress/sub-components/License.vue
new file mode 100644
index 0000000..ae0ab81
--- /dev/null
+++ b/docs/.vuepress/sub-components/License.vue
@@ -0,0 +1,169 @@
+<template>
+  <footer class="footer-container">
+    <div class="footer-body">
+      <img class="logo" src="/logo@2x.svg">
+      <img class="apache" src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png">
+      <div class="cols-container">
+        <div class="col col-12">
+          <h3>Disclaimer</h3>
+          <p>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the
+            Incubator. Incubation is required of all newly accepted projects until a further review indicates that the
+            infrastructure, communications, and decision making process have stabilized in a manner consistent with
+            other successful ASF projects. While incubation status is not necessarily a reflection of the completeness
+            or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p>
+        </div>
+        <div class="col col-4">
+          <dl><dt>ASF</dt>
+            <dd><a href="http://www.apache.org" target="_self">Foundation</a></dd>
+            <dd><a href="http://www.apache.org/licenses/" target="_self">License</a></dd>
+            <dd><a href="http://www.apache.org/events/current-event" target="_self">Events</a></dd>
+            <dd><a href="http://www.apache.org/foundation/sponsorship.html" target="_self">Sponsorship</a></dd>
+            <dd><a href="http://www.apache.org/foundation/thanks.html" target="_self">Thanks</a></dd>
+          </dl>
+        </div>
+        <div class="col col-4">
+          <dl><dt>Documentation</dt>
+            <dd><a href="/guide/develop/create-a-new-app.html" target="_self">Quick start</a></dd>
+            <dd><a href="/guide/develop/setup-develop-environment.html" target="_self">Developer guide</a></dd>
+          </dl>
+        </div>
+        <div class="col col-4">
+          <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="https://www.apache.org/security/" target="_self">Security</a></dd>
+          </dl>
+        </div>
+      </div>
+      <div class="copyright"><span>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather
+          logo are trademarks of The Apache Software Foundation.</span></div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer-container {
+    background: #F8F8F8;
+}
+
+.footer-container .footer-body {
+    max-width: 1280px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 40px 40px 0;
+}
+
+@media screen and (max-width: 640px) {
+    .footer-container .footer-body {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.footer-container .footer-body img {
+    width: 100px;
+    height: 40px;
+    margin-left: -10px;
+    margin-bottom: 28px;
+    vertical-align: middle;
+}
+
+.footer-container .footer-body .apache {
+    width: 50px;
+    height: 50px;
+    margin-left: 0;
+}
+
+.footer-container .footer-body .cols-container {
+    margin-bottom: 60px;
+}
+
+.footer-container .footer-body .cols-container .col {
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: top;
+}
+
+.footer-container .footer-body .cols-container .col-12 {
+    width: 50%;
+    padding-right: 125px;
+}
+
+.footer-container .footer-body .cols-container .col-6 {
+    width: 25%;
+}
+
+.footer-container .footer-body .cols-container .col-4 {
+    width: 16.666667%;
+}
+
+.footer-container .footer-body .cols-container h3 {
+    font-family: Avenir-Heavy;
+    font-size: 18px;
+    color: #333;
+    line-height: 18px;
+    margin-bottom: 20px;
+}
+
+.footer-container .footer-body .cols-container p {
+    font-family: Avenir-Medium;
+    font-size: 12px;
+    color: #999;
+    line-height: 18px;
+}
+
+.footer-container .footer-body .cols-container dl {
+    font-family: Avenir-Heavy;
+    line-height: 18px;
+}
+
+.footer-container .footer-body .cols-container dt {
+    font-weight: bold;
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.footer-container .footer-body .cols-container dd {
+    padding: 0;
+    margin: 0;
+}
+
+.footer-container .footer-body .cols-container dd a {
+    text-decoration: none;
+    display: block;
+    font-size: 14px;
+    color: #999;
+    margin: 10px 0;
+}
+
+.footer-container .footer-body .cols-container dd a:hover {
+    color: #2DACEC;
+}
+
+.footer-container .footer-body .copyright {
+    border-top: 1px solid #ccc;
+    min-height: 60px;
+    line-height: 20px;
+    text-align: center;
+    font-family: Avenir-Medium;
+    font-size: 12px;
+    color: #999;
+    display: flex;
+    align-items: center;
+}
+
+.footer-container .footer-body .copyright span {
+    display: inline-block;
+    margin: 0 auto;
+}
+
+@media screen and (max-width: 640px) {
+    .footer-container .footer-body .cols-container .col {
+        width: 100%;
+        text-align: center;
+        padding: 0;
+    }
+}
+</style>
+
diff --git a/docs/.vuepress/sub-components/Tab.vue b/docs/.vuepress/sub-components/Tab.vue
new file mode 100644
index 0000000..db1c305
--- /dev/null
+++ b/docs/.vuepress/sub-components/Tab.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="tabs">
+    <div :class="['tab', index === 0 ? 'active' : null]" @click="select(0)">{{lang === 'en-US' ? 'Latest' : '最新'}}</div>
+    <div :class="['tab', index === 1 ? 'active' : null]" @click="select(1)">{{lang === 'en-US' ? 'Topper' : '热门'}}</div>
+    <div :class="['tab', index === 2 ? 'active' : null]" @click="select(2)">{{lang === 'en-US' ? 'My Favorite' : '我的收藏'}}</div>
+    <div :class="['tab', index === 3 ? 'active' : null]" @click="select(3)">{{lang === 'en-US' ? 'My Works' : '我的发布'}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang'],
+  data() {
+    return {
+      index: 0
+    }
+  },
+  methods: {
+    select(index) {
+      this.index = index;
+      this.$emit('onChange', index)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.tabs {
+  background-color: #F3F5F8;
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+}
+.tab {
+  width: 112px;
+  text-align: center;
+  border-right: 1px solid #e9ebec;
+  cursor: pointer;
+  font-size: 14px;
+}
+.tab.active {
+  background-color: #fff;
+  color: #00b4ff;
+  position: relative;
+}
+.tab.active:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: '';
+  width: 100%;
+  height: 3px;
+  background-color: #00b4ff;
+}
+</style>
diff --git a/docs/blog/weex-third-party-extensions.md b/docs/blog/weex-third-party-extensions.md
new file mode 100644
index 0000000..85a8830
--- /dev/null
+++ b/docs/blog/weex-third-party-extensions.md
@@ -0,0 +1,14 @@
+In this article, we list some mature third-party plugins for Weex.
+
+<img src="https://img.alicdn.com/tfs/TB1o1ulg1GSBuNjSspbXXciipXa-579-134.svg" alt="drawing" width="200"/>
+
+BindingX is a new way to implement complex effect on Weex and React Native and Html5.
+The main idea is translate the user interaction into expression, then transfer those expressions into native environment. When the action occurs, all computing task will running on the native side, NO redundant js-bridge calls any more.
+
+[Visit BindingX](https://alibaba.github.io/bindingx/guide/introduce)
+
+# GCanvas
+
+GCanvas is a cross-platform rendering engine for mobile devices developed by Taobao. It is written with C++ based on OpenGL ES, so it can provide high performance 2D/WebGL rendering capabilities for Javascript runtime. It also has browser-like canvas APIs, so it's very convenient and flexiable for use, especially for web developers.
+
+[Visit GCanvas](https://github.com/alibaba/GCanvas)
\ No newline at end of file
diff --git a/docs/zh/blog/weex-third-party-extensions.md b/docs/zh/blog/weex-third-party-extensions.md
new file mode 100644
index 0000000..95f2aa0
--- /dev/null
+++ b/docs/zh/blog/weex-third-party-extensions.md
@@ -0,0 +1,13 @@
+这里罗列的是除 Weex 官方组件外,一些比较成熟的三方组件。
+
+<img src="https://img.alicdn.com/tfs/TB1o1ulg1GSBuNjSspbXXciipXa-579-134.svg" alt="drawing" width="200"/>
+
+BindingX 是解决 Weex 和 React Native 上富交互问题的一种解决方案。它提供了一种称之为 "Expression Binding" 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行,而不会导致卡顿,因而带来了更优秀的用户体验。
+
+[访问 BindingX 官网](https://alibaba.github.io/bindingx/guide/cn_introduce)
+
+# GCanvas
+
+GCanvas 是一个移动端的跨平台的渲染引擎,它基于 OpenGL ES,可以直接由 Javascript 驱动。
+
+[访问 GCanvas 官网](https://github.com/alibaba/GCanvas)
\ No newline at end of file