Merge pull request #1214 from vuejs/sync-5c154aa1

Sync 5c154aa1

Author: Justineo

.circleci/config.yml

@@ -40,6 +40,7 @@ jobs:
             git init
             git config user.email "[email protected]"
             git config user.name "Jinjiang"
+            # TODO: update when v3 becomes the main docsite
             git remote add origin https://jinjiang:[email protected]/vuejs/cn.vuejs.org.git
             git add .
             git commit -m "generated docs"

.gitignore

@@ -1,3 +1,4 @@
+# General
 .DS_Store
 Thumbs.db
 db.json
@@ -8,3 +9,10 @@ public/
 src/_drafts
 package-lock.json
 .avoscloud/
+
+# Temporary
+tmp/
+temp/
+TODOs.md
+draft.md
+

README.md

@@ -4,7 +4,7 @@ _注：Vue 3.0 的中文文档请移步至 https://github.com/vuejs-translations
 
 该站点基于 [Hexo](https://hexo.io/) 构建而成。网站内容在 `src` 文件夹内，格式为 Markdown。欢迎 issue 或 pull request。
 
-英文原版仓库地址：https://github.com/vuejs/vuejs.org
+英文原版仓库地址：https://github.com/vuejs/v2.vuejs.org
 
 ## 开发
 
@@ -19,13 +19,14 @@ $ npm start # 开发服务器地址为 http://localhost:4000
 
 ## 如何参与贡献
 
-目前网站处于维护状态，我们会定期同步英文版的更新，包括[文档内容](https://github.com/vuejs/vuejs.org/tree/master/src)和[前端代码](https://github.com/vuejs/vuejs.org/tree/master/themes/vue)等。欢迎大家：
+目前网站处于维护状态，我们会定期同步英文版的更新，包括[文档内容](https://github.com/vuejs/v2.vuejs.org/tree/master/src)和[前端代码](https://github.com/vuejs/v2.vuejs.org/tree/master/themes/vue)等。欢迎大家：
 
 * 同步英文站点最新的改动到这里
 * 修复错别字或错误的书写格式
 * 发 issue 讨论译法或书写格式
 * 发 issue 讨论部署或协作流程上的问题
 
+<!-- TODO: update when v3 becomes the main docsite -->
 有劳在翻译之前移步 [wiki](https://github.com/vuejs/cn.vuejs.org/wiki) 了解相关注意事项。
 
 **注意：**
@@ -35,8 +36,10 @@ $ npm start # 开发服务器地址为 http://localhost:4000
 
 ## 致谢
 
+<!-- TODO: update when v3 becomes the main docsite -->
 网站在创立之初得到了很多朋友们的帮助，大家一起分工协作完成了整站的翻译工作。[这个页面](https://cn.vuejs.org/about/)集中记录了大家这段时期的努力和付出，以表谢意！
 
 **感谢所有参与翻译的朋友们！**
 
+<!-- TODO: update when v3 becomes the main docsite -->
 目前网站已处于维护状态，最新的文档/翻译贡献情况可以参阅 GitHub 提供的 [contributors](https://github.com/vuejs/cn.vuejs.org/graphs/contributors) 页面。

_config.yml

@@ -12,6 +12,7 @@ language: zh-CN
 
 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
+# TODO: update when v3 becomes the main docsite
 url: https://cn.vuejs.org
 root: /
 permalink: :year/:month/:day/:title/
@@ -102,48 +103,49 @@ markdown:
 # Offline
 ## Config passed to sw-precache
 ## https://github.com/JLHwung/hexo-offline
-offline:
-  maximumFileSizeToCacheInBytes: 10485760
-  staticFileGlobs:
-    - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2,json,xml}
-  stripPrefix: public
-  verbose: true
-  runtimeCaching:
-    # Ad Sources - should be networkFirst
-    - urlPattern: /*
-      handler: networkFirst
-      options:
-        origin: sendgrid.sp1.convertro.com
-    - urlPattern: /*
-      handler: networkFirst
-      options:
-        origin: ad.doubleclick.net
-    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
-    - urlPattern: /*
-      handler: cacheFirst
-      options:
-        origin: cdn.jsdelivr.net
-    - urlPattern: /*
-      handler: cacheFirst
-      options:
-        origin: fonts.googleapis.com
-    - urlPattern: /*
-      handler: cacheFirst
-      options:
-        origin: fonts.gstatic.com
-    - urlPattern: /*
-      handler: cacheFirst
-      options:
-        origin: cdnjs.cloudflare.com
-    - urlPattern: /*
-      handler: cacheFirst
-      options:
-        origin: maxcdn.bootstrapcdn.com
+# offline:
+#   maximumFileSizeToCacheInBytes: 10485760
+#   staticFileGlobs:
+#     - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2,json,xml}
+#   stripPrefix: public
+#   verbose: true
+#   runtimeCaching:
+#     # Ad Sources - should be networkFirst
+#     - urlPattern: /*
+#       handler: networkFirst
+#       options:
+#         origin: sendgrid.sp1.convertro.com
+#     - urlPattern: /*
+#       handler: networkFirst
+#       options:
+#         origin: ad.doubleclick.net
+#     # CDNs - should be cacheFirst, since they should be used specific versions so should not change
+#     - urlPattern: /*
+#       handler: cacheFirst
+#       options:
+#         origin: cdn.jsdelivr.net
+#     - urlPattern: /*
+#       handler: cacheFirst
+#       options:
+#         origin: fonts.googleapis.com
+#     - urlPattern: /*
+#       handler: cacheFirst
+#       options:
+#         origin: fonts.gstatic.com
+#     - urlPattern: /*
+#       handler: cacheFirst
+#       options:
+#         origin: cdnjs.cloudflare.com
+#     - urlPattern: /*
+#       handler: cacheFirst
+#       options:
+#         origin: maxcdn.bootstrapcdn.com
 
 # Deployment
 ## Docs: https://hexo.io/docs/one-command-deployment
 deploy:
   type: git
+  # TODO: update when v3 becomes the main docsite
   repository: [email protected]:vuejs/cn.vuejs.org.git
   branch: gh-pages
 

_scripts/pre-deploy.js

@@ -0,0 +1,61 @@
+// udpate to latest built files of Vue
+require('./sync-sponsors')
+
+const fs = require('fs')
+const zlib = require('zlib')
+const axios = require('axios')
+const execSync = require('child_process').execSync
+
+const themeconfPath = 'themes/vue/_config.yml'
+const installPath = 'src/v2/guide/installation.md'
+const themeconfig = fs.readFileSync(themeconfPath, 'utf-8')
+const installation = fs.readFileSync(installPath, 'utf-8')
+
+// get latest Vue version
+console.log(`Checking latest Vue version...`)
+const localVersion = themeconfig.match(/vue_version: (.*)/)[1]
+const version = execSync('npm view vue@v2-latest version').toString().trim()
+
+if (localVersion === version) {
+  console.log(`Version is up-to-date.`)
+  process.exit(0)
+}
+
+console.log(`Latest version: ${version}. Downloading dist files...`)
+
+// replace version in theme config
+fs.writeFileSync(
+  themeconfPath,
+  themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version)
+)
+
+// grab it from unpkg
+Promise.all([download(`vue.js`), download(`vue.min.js`)])
+  .then(([devSize, prodSize]) => {
+    // replace installation page version and size
+    fs.writeFileSync(
+      installPath,
+      installation
+        .replace(/vue_version: .*/, 'vue_version: ' + version)
+        .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`)
+        .replace(/\/vue@[\d\.]+/g, `/vue@${version}`)
+    )
+    console.log(
+      `\nSuccessfully updated Vue version (${version}) and gzip file size (${prodSize}kb).\n`
+    )
+  })
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
+
+function download(file) {
+  return axios({
+    url: `http://unpkg.com/vue@${version}/dist/${file}`,
+    method: 'get'
+  }).then((res) => {
+    fs.writeFileSync(`themes/vue/source/js/${file}`, res.data)
+    const zipped = zlib.gzipSync(Buffer.from(res.data))
+    return (zipped.length / 1024).toFixed(2)
+  })
+}

_scripts/sync-sponsors.js

@@ -0,0 +1,18 @@
+// sync latest data from sponsor.vuejs.org
+const fs = require('fs')
+const path = require('path')
+const axios = require('axios')
+const yaml = require('js-yaml')
+
+const configPath = path.resolve(__dirname, '../themes/vue/_config.yml')
+
+;(async () => {
+  const { data } = await axios(`https://sponsors.vuejs.org/data.json`)
+  const yml = yaml.dump(data)
+  const config = fs.readFileSync(configPath, 'utf-8')
+  const updated = config.replace(
+    /(# START SPONSORS)[^]*(# END SPONSORS)/,
+    `$1\n${yml}$2`
+  )
+  fs.writeFileSync(configPath, updated)
+})()

package.json

@@ -1,20 +1,22 @@
 {
+  "TODO": "TODO: update when v3 becomes the main docsite",
   "name": "cn.vuejs.org",
   "private": true,
   "hexo": {
     "version": "3.9.0"
   },
   "scripts": {
-    "start": "hexo server",
+    "dev": "node _scripts/sync-sponsors.js && hexo server",
+    "build": "node _scripts/pre-deploy.js && hexo clean && hexo generate",
+    "deploy": "npm run build && hexo deploy",
     "lint": "zhlint 'src/v2/{guide,api,style-guide}/*.md'",
-    "lint:fix": "zhlint 'src/v2/{guide,api,style-guide}/*.md' --fix",
-    "build": "node pre-deploy.js && hexo clean && hexo generate",
-    "deploy": "npm run build && hexo deploy"
+    "lint:fix": "zhlint 'src/v2/{guide,api,style-guide}/*.md' --fix"
   },
   "engines": {
     "node": ">=12.0.0"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "hexo": "^3.6.0",
     "hexo-deployer-git": "0.3.1",
     "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git",
@@ -29,7 +31,7 @@
     "hexo-renderer-stylus": "^0.3.3",
     "hexo-server": "^0.3.1",
     "hoek": "^6.1.2",
-    "request": "^2.85.0",
+    "js-yaml": "^4.1.0",
     "zhlint": "^0.2.2"
   }
-}
+}

pre-deploy.js

@@ -24,7 +24,7 @@ export default {
 Or even used via `<script>` tag in the browser directly:
 
 ```html
-  <script src="https://unpkg.com/vue"></script>
+  <script src="https://unpkg.com/vue@2"></script>
   <script src="https://unpkg.com/my-component"></script>
   ...
   <my-component></my-component>

src/v2/cookbook/packaging-sfc-for-npm.md

@@ -6,4 +6,4 @@ order: 1
 
 > 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/commits.md

@@ -6,4 +6,4 @@ order: 9
 
 > 这个例子使用 [deepstreamHub](https://deepstreamhub.com/) 在客户端之间实时同步数据、发送事件、远程程序调用 (你可以多开几个浏览器窗口试一试)。
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/deepstream.md

@@ -4,4 +4,4 @@ type: examples
 order: 7
 ---
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/elastic-header.md

@@ -6,4 +6,4 @@ order: 10
 
 > 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步 (你可以在多个浏览器窗口去打开它来验证)。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 过渡。
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/firebase.md

@@ -6,4 +6,4 @@ order: 3
 
 > 本示例创建了一个可复用组件，可结合外部数据来使用它。
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/grid-component.md

@@ -6,4 +6,4 @@ order: 0
 
 > 蠢萌的 Markdown 编辑器。
 
-<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>