[add] TC39 Member page & ECMA General Assembly representatives (#8)

Author: TechQuery

package.json

@@ -25,7 +25,7 @@
     "mobx": "^5.15.7",
     "mobx-web-cell": "^0.3.5",
     "web-cell": "^2.3.0",
-    "web-utility": "^2.6.0"
+    "web-utility": "^2.6.2"
   },
   "devDependencies": {
     "@types/classnames": "^2.3.1",

source/data/members-china.json

@@ -2,31 +2,37 @@
   {
     "name": "三六零科技集团有限公司",
     "logo": "https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png",
-    "link": "https://www.360.cn/"
+    "link": "https://www.360.cn/",
+    "representatives": ["李智杰", "王先坤"]
   },
   {
     "name": "阿里巴巴（中国）有限公司",
     "logo": "https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png",
-    "link": "https://www.alibabagroup.com/"
+    "link": "https://www.alibabagroup.com/",
+    "representatives": ["郑叶飞"]
   },
   {
     "name": "腾讯",
     "logo": "https://www.tencent.com/img/index/tencent_logo.png",
-    "link": "https://www.tencent.com/"
+    "link": "https://www.tencent.com/",
+    "representatives": ["郑苏波"]
   },
   {
     "name": "华为技术有限公司",
     "logo": "https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png",
-    "link": "https://www.huawei.com/"
+    "link": "https://www.huawei.com/",
+    "representatives": ["侯凡", "王亚举"]
   },
   {
     "name": "Sujitech",
     "logo": "https://www.ecma-international.org/wp-content/uploads/Sujitech-logo.gif",
-    "link": "https://sujitech.com/"
+    "link": "https://sujitech.com/",
+    "representatives": ["刘怿斯"]
   },
   {
     "name": "北京字节跳动网络技术有限公司",
     "logo": "https://www.ecma-international.org/wp-content/uploads/beijing_bytedance-logo.gif",
-    "link": "https://www.bytedance.com/"
+    "link": "https://www.bytedance.com/",
+    "representatives": ["张荣剑"]
   }
 ]

source/page/Main.tsx

@@ -7,7 +7,7 @@ import { SpinnerBox } from 'boot-cell/source/Prompt/Spinner';
 import { Card, CardHeader } from 'boot-cell/source/Content/Card';
 import { Badge } from 'boot-cell/source/Reminder/Badge';
 
-import companies from '../data/members-china.json';
+import organizations from '../data/members-china.json';
 import { member, proposal, Member, Proposal } from '../model';
 
 const thisYear = new Date().getFullYear();
@@ -25,15 +25,15 @@ export class MainPage extends mixin() {
     super.connectedCallback();
   }
 
-  renderMember = ({
+  renderMember({
     avatar_url,
     username,
     url,
     name,
     company,
     location,
     bio,
-  }: Member) => {
+  }: Member) {
     return (
       <div className="col-12 col-sm-6 col-md-3 my-3">
         <Card
@@ -60,7 +60,7 @@ export class MainPage extends mixin() {
         </Card>
       </div>
     );
-  };
+  }
 
   renderProposal = ({
     link,
@@ -131,7 +131,7 @@ export class MainPage extends mixin() {
     return (
       <>
         <Jumbotron
-          className="mt-4 text-center"
+          className="my-5 text-center"
           title={
             <span className="text-nowrap">
               JavaScript&nbsp;
@@ -162,27 +162,32 @@ export class MainPage extends mixin() {
           </Button>
         </Jumbotron>
 
-        <h2 className="mt-4 text-center">TC39 中国会员</h2>
+        <h2 className="my-5 text-center">TC39 中国会员</h2>
 
         <section className="row">
-          {companies.map(({ link, logo, name }) => (
+          {organizations.map(({ link, logo, name }) => (
             <a
-              className="d-flex col-12 col-sm-4 col-md-3 my-3 justify-content-center align-items-center"
+              className="d-flex col-12 col-sm-4 col-md-3 my-3 flex-column justify-content-between align-items-center text-decoration-none"
               target="_blank"
               href={link}
             >
               <Image fluid title={name} src={logo} />
             </a>
           ))}
+          <footer className="col-12 text-center">
+            <Button size="sm" outline color="primary" href="members">
+              查看详情
+            </Button>
+          </footer>
         </section>
 
-        <h2 className="mt-4 text-center">JSCIG 成员</h2>
+        <h2 className="my-5 text-center">JSCIG 成员</h2>
 
         <SpinnerBox className="row" cover={member.loading}>
           {member.list.map(this.renderMember)}
         </SpinnerBox>
 
-        <h2 className="mt-4 text-center">TC39 既成提案</h2>
+        <h2 className="my-5 text-center">TC39 既成提案</h2>
 
         <SpinnerBox className="row" cover={proposal.loading}>
           {proposal.finishedList.map(this.renderProposal)}

source/page/Organization.tsx

@@ -0,0 +1,47 @@
+import { createCell, Fragment } from 'web-cell';
+import { Image } from 'boot-cell/source/Media/Image';
+import { Card, CardFooter } from 'boot-cell/source/Content/Card';
+
+import organizations from '../data/members-china.json';
+
+export function OrganizationPage() {
+  return (
+    <>
+      <h1 className="my-5 text-center">TC39 中国会员单位</h1>
+
+      <ul className="list-unstyled row">
+        {organizations.map(({ logo, link, name, representatives }) => (
+          <li className="col-12 col-sm-6 col-md-3 px-2 my-2 d-flex">
+            <Card
+              className="shadow-sm flex-fill"
+              image={
+                <Image
+                  fluid
+                  style={{
+                    height: '5rem',
+                    objectFit: 'contain',
+                    padding: '0.5rem',
+                  }}
+                  src={logo}
+                />
+              }
+              title={
+                <a
+                  className="text-decoration-none stretched-link"
+                  target="_blank"
+                  href={link}
+                >
+                  {name}
+                </a>
+              }
+            >
+              <CardFooter className="small">
+                ECMA 大会代表：{representatives.join('、')}
+              </CardFooter>
+            </Card>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

source/page/index.tsx

@@ -10,6 +10,7 @@ import {
 import { history } from '../model';
 import { MainPage } from './Main';
 import { ProposalPage } from './Proposal';
+import { OrganizationPage } from './Organization';
 
 interface NavMenu extends NavLinkProps {
   menu?: DropMenuItemProps[];
@@ -49,12 +50,14 @@ const menu: NavMenu[] = [
   routes: Route[] = [
     { paths: [''], component: MainPage },
     { paths: ['proposals'], component: ProposalPage },
+    { paths: ['members'], component: OrganizationPage },
   ];
 
 export function PageFrame() {
   return (
     <>
       <NavBar
+        fixed="top"
         narrow
         expand="md"
         theme="dark"
@@ -91,6 +94,11 @@ export function PageFrame() {
         routes={routes}
       />
       <footer className="text-center bg-light py-5">
+        <img
+          style={{ width: '2rem', margin: '0 0.25rem' }}
+          alt="WebCell logo"
+          src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+        />
         自豪地用
         <a className="mx-1" target="_blank" href="https://web-cell.dev/">
           WebCell v2