add Proposal data & Web-site framework (#1)

* [add] ECMAScript Proposal crawler
* [add] PWA framework based on WebCell v2
* [add] Main & Proposal pages
* [add] TC39 Members of China
* [add] JSCIG members

Co-authored-by: Septs <[email protected]>

Author: TechQuery

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: CI & CD
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+jobs:
+  Build-and-Deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: '12'
+      - name: Install & build
+        run: |
+          npm install
+          npm run build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: ./dist
+          personal_token: ${{ secrets.GITHUB_TOKEN }}
+          force_orphan: true

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+package-lock.json
+yarn.lock
+.cache/
+dist/
+.vscode/

README.md

@@ -1,5 +1,25 @@
 # JavaScript Chinese Interest Group
 
-JavaScript中文讨论组致力于提供一个加强中国JavaScript社区对JavaScript语言标准（ECMAScript）工作的参与的平台。本讨论组主要侧重于确定中国JavaScript开发者的需求、帮助Ecma的中国成员熟悉TC39标准流程、讨论可能提交给TC39的提案、标准的测试、实现以及和JavaScript相关的标准化机会，同时协助中国JavaScript社区对JavaScript语言的发展进行参与和贡献。
+[![NPM Dependency](https://david-dm.org/JSCIG/jscig.github.io.svg)][1]
+[![CI & CD](https://github.com/JSCIG/jscig.github.io/workflows/CI%20&%20CD/badge.svg)][2]
+
+JavaScript 中文讨论组致力于提供一个加强中国 JavaScript 社区对 JavaScript 语言标准（ECMAScript）工作的参与的平台。
+
+本讨论组主要侧重于确定中国 JavaScript 开发者的需求、帮助 Ecma 的中国成员熟悉 TC39 标准流程、讨论可能提交给 TC39 的提案、标准的测试、实现以及和 JavaScript 相关的标准化机会，同时协助中国 JavaScript 社区对 JavaScript 语言的发展进行参与和贡献。
 
 - [讨论](https://github.com/JSCIG/es-discuss/issues)
+
+## 官网开发
+
+本网站是一个基于 [WebCell v2](https://web-cell.dev/) 的纯 Web 前端项目，参与开发的基本命令如下：
+
+```shell
+cd ~/Desktop
+git clone https://github.com/JSCIG/jscig.github.io.git ./JSCIG
+cd ./JSCIG
+npm install
+npm start
+```
+
+[1]: https://david-dm.org/JSCIG/jscig.github.io
+[2]: https://github.com/JSCIG/jscig.github.io/actions

package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@jscig/ows",
+  "version": "0.5.0",
+  "private": true,
+  "license": "UNLICENSED",
+  "description": "Official Web site of JavaScript Chinese Interest Group",
+  "author": "[email protected]",
+  "homepage": "https://jscig.github.io/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JSCIG/jscig.github.io.git"
+  },
+  "bugs": {
+    "url": "https://github.com/JSCIG/jscig.github.io/issues"
+  },
+  "main": "source/index.html",
+  "dependencies": {
+    "boot-cell": "^1.1.1",
+    "bootstrap-icons": "^1.0.0",
+    "browser-unhandled-rejection": "^1.0.2",
+    "cell-router": "^2.0.1",
+    "classnames": "^2.2.6",
+    "koajax": "^0.6.2",
+    "mobx": "^5.15.7",
+    "mobx-web-cell": "^0.3.2",
+    "web-cell": "^2.2.0",
+    "web-utility": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.10",
+    "autoprefixer": "^9.8.6",
+    "husky": "^4.3.0",
+    "less": "^3.12.2",
+    "lint-staged": "^10.4.0",
+    "parcel": "^1.12.4",
+    "postcss-modules": "^3.2.2",
+    "prettier": "^2.1.2",
+    "typescript": "^4.0.3",
+    "workbox-cli": "^4.3.1"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.{html,md,css,less,json,yml,js,ts,tsx}": [
+      "prettier --write"
+    ]
+  },
+  "postcss": {
+    "modules": true,
+    "plugins": {
+      "autoprefixer": {
+        "grid": true
+      }
+    }
+  },
+  "scripts": {
+    "test": "lint-staged",
+    "start": "workbox generateSW  &&  parcel source/index.html --open",
+    "pack-dist": "parcel build source/index.html --public-url .",
+    "pack-sw": "rm -f dist/sw.js.map  &&  workbox generateSW",
+    "build": "rm -rf dist/  &&  npm run pack-dist  &&  npm run pack-sw"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test",
+      "pre-push": "npm run build"
+    }
+  }
+}

source/component/FilterLink.tsx

@@ -0,0 +1,26 @@
+import { createCell } from 'web-cell';
+
+import { BadgeProps, Badge } from 'boot-cell/source/Reminder/Badge';
+
+export interface FilterLinkProps extends BadgeProps {
+  type?: 'anchor' | 'badge';
+  path: string;
+  filter: string;
+  value: any;
+}
+
+export function FilterLink({
+  type = 'anchor',
+  filter,
+  value,
+  defaultSlot,
+  ...rest
+}: FilterLinkProps) {
+  const Link = type === 'anchor' ? 'a' : Badge;
+
+  return (
+    <Link {...rest} href={`proposals?${filter}=${value}`}>
+      {defaultSlot[0] ? defaultSlot : value}
+    </Link>
+  );
+}

source/data/crawler.js

@@ -0,0 +1,33 @@
+//    >>> ECMAScript Proposal crawler <<<
+//
+//  [Data source]  https://github.com/tc39/proposals
+//
+//  [Example code]  copy(JSON.stringify(getProposals(3, $0), null, 4))
+//
+//    (c)2020  @TechQuery @JSCIG
+
+function getNames({ childNodes }) {
+  return Array.from(
+    childNodes,
+    ({ nodeType, nodeValue }) => nodeType === 3 && nodeValue
+  ).filter(Boolean);
+}
+
+function getProposals(stage, { children }) {
+  return Array.from(children, ({ children }) => {
+    const repository = children[0].firstElementChild,
+      timestamp = (stage === 3 ? children[4] : children[3])?.firstElementChild;
+
+    return {
+      stage,
+      name: repository.textContent,
+      link: repository.href,
+      authors: getNames(children[1]),
+      champions: getNames(children[2]),
+      test_link: stage === 3 ? children[3].firstElementChild.href : undefined,
+      meeting_link: timestamp?.href,
+      updated_at: timestamp?.textContent,
+      published_at: stage === 4 ? children[4].textContent : undefined
+    };
+  });
+}

source/data/members-china.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "360 技术集团",
+    "logo": "https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png",
+    "link": "https://www.360.cn/"
+  },
+  {
+    "name": "阿里巴巴集团",
+    "logo": "https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png",
+    "link": "https://www.alibabagroup.com/"
+  },
+  {
+    "name": "腾讯",
+    "logo": "https://www.tencent.com/img/index/tencent_logo.png",
+    "link": "https://www.tencent.com/"
+  },
+  {
+    "name": "华为技术",
+    "logo": "https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png",
+    "link": "https://www.huawei.com/"
+  },
+  {
+    "name": "Sujitech",
+    "logo": "https://www.ecma-international.org/images/members/SPC/Sujitech%20logo.gif",
+    "link": "https://sujitech.com/"
+  }
+]

source/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.less' {
+  const map: Record<string, string>;
+  export default map;
+}

source/index.html

@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="icon" href="https://github.com/JSCIG.png" />
+    <title>JavaScript 中文兴趣组</title>
+    <meta name="description" content="JavaScript Chinese Interest Group" />
+    <meta name="author" content="[email protected]" />
+
+    <link rel="manifest" href="index.webmanifest" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    />
+    <script
+      crossorigin
+      src="https://polyfill.app/api/polyfill?features=es.string.match-all,es.array.flat,es.object.from-entries"
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-bundle.min.js"></script>
+
+    <script src="index.tsx" async></script>
+  </head>
+  <body></body>
+</html>

source/index.tsx

@@ -0,0 +1,33 @@
+import { auto } from 'browser-unhandled-rejection';
+import { serviceWorkerUpdate } from 'web-utility';
+import { documentReady, render, createCell } from 'web-cell';
+
+import { PageFrame } from './page';
+
+auto();
+
+self.addEventListener('unhandledrejection', event => {
+  const { message } = event.reason;
+
+  if (!message) return;
+
+  event.preventDefault();
+
+  self.alert(message);
+});
+
+const { serviceWorker } = window.navigator;
+
+serviceWorker
+  ?.register('sw.js')
+  .then(serviceWorkerUpdate)
+  .then(worker => {
+    if (window.confirm('检测到新版本，是否立即启用？'))
+      worker.postMessage({ type: 'SKIP_WAITING' });
+  });
+
+serviceWorker?.addEventListener('controllerchange', () =>
+  window.location.reload()
+);
+
+documentReady.then(() => render(<PageFrame />));