[optimize] update Data & UI of Case page

Author: TechQuery

package.json

@@ -32,7 +32,7 @@
         "web-utility": "^1.9.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.3",
+        "@babel/core": "^7.12.7",
         "@types/classnames": "^2.2.11",
         "autoprefixer": "^9.8.6",
         "husky": "^4.3.0",

source/index.tsx

@@ -1,7 +1,7 @@
 import { serviceWorkerUpdate } from 'web-utility';
 import { documentReady, render, createCell } from 'web-cell';
 
-import { PageFrame } from './page/Router';
+import { PageFrame } from './page';
 
 const { serviceWorker } = window.navigator;
 

source/page/Case.tsx

@@ -5,13 +5,6 @@ import { Embed } from 'boot-cell/source/Media/Embed';
 import style from './Case.module.less';
 import { cases } from './data';
 
-const list = cases.reduce((list, item, index) => {
-    if (index % 2 === 0) list.push([item]);
-    else list.slice(-1)[0].push(item);
-
-    return list;
-}, [] as typeof cases[]);
-
 function Case({
     name,
     description,
@@ -21,7 +14,7 @@ function Case({
     return (
         <section
             className={
-                'flex-md-grow-1 mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center position-relative ' +
+                'col-12 col-md-6 my-3 my-md-0 pt-3 px-3 pt-md-5 px-md-5 text-center position-relative ' +
                 (reverse ? 'bg-light' : 'bg-dark text-white')
             }
         >
@@ -51,20 +44,14 @@ export function CasePage() {
             <h2 className="display-4 text-center pt-5">用户案例</h2>
             <p className="lead text-center">User cases</p>
 
-            {list.map((row, index) => {
-                const odd = index % 2;
+            <div className="row w-100 m-0">
+                {cases.map((item, index) => {
+                    const odd = index % 2;
+                    const order = Math.ceil((index + 1) / 2) % 2 ? !!odd : !odd;
 
-                return (
-                    <div className="d-md-flex w-100 my-md-3 pl-md-3">
-                        {row.map((item, index) => {
-                            const right = index % 2;
-                            const order = odd ? !!right : !right;
-
-                            return <Case {...item} reverse={order} />;
-                        })}
-                    </div>
-                );
-            })}
+                    return <Case {...item} reverse={order} />;
+                })}
+            </div>
         </>
     );
 }

source/page/Main.tsx

@@ -10,6 +10,32 @@ import { scaffold, feature } from './data';
 import style from './Main.module.less';
 import { WebCell_1 } from '../image';
 
+function Feature({
+    reverse,
+    title,
+    summary,
+    link,
+    logo
+}: typeof feature[0] & { reverse: boolean }) {
+    return (
+        <section
+            className={classNames(
+                'row',
+                'align-items-end',
+                reverse && 'flex-row-reverse'
+            )}
+        >
+            <div className="col-md-10">
+                <h2 className={style['featurette-heading']}>{title}</h2>
+                <p className="lead">{summary}</p>
+            </div>
+            <a className="col-md-2" target="_blank" href={link}>
+                <Image fluid className={style['featurette-logo']} src={logo} />
+            </a>
+        </section>
+    );
+}
+
 export function MainPage() {
     return (
         <>
@@ -59,29 +85,9 @@ export function MainPage() {
             <div className="container">
                 <h2 className="text-center display-4 mb-5">核心特性</h2>
 
-                {feature.map(({ title, summary, link, logo }, index) => (
+                {feature.map((item, index) => (
                     <>
-                        <section
-                            className={classNames(
-                                'row',
-                                'align-items-end',
-                                index % 2 && 'flex-row-reverse'
-                            )}
-                        >
-                            <div className="col-md-10">
-                                <h2 className={style['featurette-heading']}>
-                                    {title}
-                                </h2>
-                                <p className="lead">{summary}</p>
-                            </div>
-                            <a className="col-md-2" target="_blank" href={link}>
-                                <Image
-                                    fluid
-                                    className={style['featurette-logo']}
-                                    src={logo}
-                                />
-                            </a>
-                        </section>
+                        <Feature {...item} reverse={!(index % 2)} />
 
                         {index + 1 < feature.length ? (
                             <hr

source/page/data.ts

@@ -1,4 +1,5 @@
 import { DropMenuItemProps } from 'boot-cell/source/Navigator/DropMenu';
+
 import { WebCell_0 } from '../image';
 
 export const footer = [
@@ -278,6 +279,16 @@ export const cases = [
         description: 'JavaScript Chinese Interest Group',
         url: 'https://jscig.github.io/'
     },
+    {
+        name: '中国 Python 开发者大会',
+        description: 'PyCon China',
+        url: 'https://cn.pycon.org/'
+    },
+    {
+        name: '中国开源年会',
+        description: 'China Open Source Conference',
+        url: 'http://coscon.kaiyuanshe.cn/'
+    },
     {
         name: '成都 Web 开发者大会',
         description: 'Web developer conference of ChengDu',
@@ -288,11 +299,6 @@ export const cases = [
         description: 'COVID-19 Epidemic information platform',
         url: 'https://wuhan2020.kaiyuanshe.cn/'
     },
-    {
-        name: '中国开源年会',
-        description: 'China Open Source Conference',
-        url: 'http://coscon.kaiyuanshe.cn/'
-    },
     {
         name: '开放黑客松平台',
         description: 'Open Hackathon platform',
@@ -301,11 +307,11 @@ export const cases = [
     {
         name: '23.5° 文化传播',
         description: '23.5° Culture Co., Ltd',
-        url: 'https://in235.com/'
+        url: 'https://www.in235.com/'
     },
     {
         name: 'Shopify 采集平台',
         description: 'Shopify Crawler platform',
-        url: 'https://shopifycopy.com/'
+        url: 'http://shopifycopy.com/'
     }
 ];

source/page/Router.tsx renamed to source/page/index.tsx

@@ -24,7 +24,11 @@ function Copyright() {
             />
             <small className="d-block mb-3 text-muted">
                 &copy; 2018 - {new Date().getFullYear()}
-                <a target="_blank" href="https://github.com/EasyWebApp">
+                <a
+                    className="d-block"
+                    target="_blank"
+                    href="https://github.com/EasyWebApp"
+                >
                     EasyWebApp team
                 </a>
             </small>