update gatsby 5

好耶

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.github/workflows/node.js.buildtest.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present

.gitignore

@@ -1,32 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+node_modules/
-
+.cache/
-# dependencies
+public
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel

README.md

@@ -1,34 +1,57 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<p align="center">
+  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
+    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+  </a>
+</p>
+<h1 align="center">
+  Gatsby minimal starter
+</h1>
 
-## Getting Started
 
-First, run the development server:
+好耶！ ![Github CI](https://github.com/heimoshuiyu/social-ojo.org/actions/workflows/node.js.buildtest.yml/badge.svg) ![AWS CD](https://codebuild.ap-southeast-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiM0J2ZDJNWklZVkxBYy9pNXBQUGhTMWZzRmoxK3ZmRVdPcDlCWGwxdy85eExpblJ2NmJBTWdLNHJ3SkcxT1BoYXJLK1h3UUJodDNoaXB2WkRxd05OcldNPSIsIml2UGFyYW1ldGVyU3BlYyI6Ik9EVG9UbDY3amk5bHJiYVciLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main) 
 
-```bash
+## 🚀 Quick start
-npm run dev
-# or
-yarn dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+1.  **Create a Gatsby site.**
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+    Use the Gatsby CLI to create a new site, specifying the minimal starter.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+    ```shell
+    # create a new Gatsby site using the minimal starter
+    npm init gatsby
+    ```
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+2.  **Start developing.**
 
-## Learn More
+    Navigate into your new site’s directory and start it up.
 
-To learn more about Next.js, take a look at the following resources:
+    ```shell
+    cd my-gatsby-site/
+    npm run develop
+    ```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+3.  **Open the code and start customizing!**
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+    Your site is now running at http://localhost:8000!
 
-## Deploy on Vercel
+    Edit `src/pages/index.js` to see your site update in real-time!
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+4.  **Learn more**
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+## 🚀 Quick start (Gatsby Cloud)
+
+Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
+
+[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)

buildspec.yml

@@ -0,0 +1,16 @@
+version: 0.2
+phases:
+    install:
+        commands:
+            - 'touch .npmignore'
+            - 'rm ./package-lock.json'
+    pre_build:
+        commands:
+            - 'npm install'
+    build:
+        commands:
+            - 'npm run build'
+artifacts:
+    base-directory: public
+    files:
+        - '**/*'

components/ClickForMore.js

@@ -1,12 +0,0 @@
-export default function ClickForMore() {
-  return (
-    <span
-      style={{
-        textDecorationLine: "underline",
-        color: "red",
-      }}
-    >
-      {"点击阅读更多..."}
-    </span>
-  );
-}

components/Copyright.js

@@ -1,5 +0,0 @@
-function Copyright({ Component, pageProps }) {
-  return "©";
-}
-
-export default Copyright;

components/Footer.js

@@ -1,15 +0,0 @@
-import Link from "next/link";
-
-import styles from '../styles/Footer.module.css';
-
-export default function Footer() {
-  return (
-    <>
-      <footer className={styles.footer}>
-        <small>
-          ©2022-2023 Social OjO. All Rights Reserved.
-        </small>
-      </footer>
-    </>
-  );
-}

components/Header.js

@@ -1,33 +0,0 @@
-import styles from "../styles/Header.module.css";
-import Link from "next/link";
-
-// images
-import headerBackground from "../public/typhoon.png";
-
-export default function Header({ titleText }) {
-  return (
-    <>
-      <nav className={styles.toolbar}>
-        <strong>
-          <Link href="/">Social OjO</Link>
-        </strong>
-        <div className={styles.nav}>
-          <span>
-            <Link href="/">主页</Link>
-          </span>
-          <span>
-            <Link href="/posts/init">关于</Link>
-          </span>
-        </div>
-      </nav>
-      <h1 className={styles.title}>{titleText || "Social OjO"}</h1>
-      <header
-        className={styles.header}
-        style={{
-          backgroundImage: `url('${headerBackground.src}')`,
-        }}
-      >
-      </header>
-    </>
-  );
-}

gatsby-browser.js

@@ -0,0 +1 @@
+import "./src/styles/globals.css"

gatsby-config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  siteMetadata: {
+    title: `Social OjO`,
+    siteUrl: `https://www.yourdomain.tld`
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src`,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-google-gtag',
+      options: {
+        trackingIds: [
+          "G-TVTHN7455T",
+        ],
+      },
+    },
+    "gatsby-plugin-image",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+  ]
+};

gatsby-node.js

@@ -0,0 +1,13 @@
+exports.createPages = ({actions}) => {
+  const lawPages = require('./src/data/law')
+  const {createPage} = actions
+  lawPages.forEach(element => {
+    createPage({
+      path: `/posts/law/${element.path}`,
+      component: require.resolve("./src/templates/law.js"),
+      context: {
+        element,
+      }
+    })
+  })
+}

next.config.js

@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig

package.json

@@ -1,20 +1,28 @@
 {
-  "name": "social-ojo",
+  "name": "social-oj-o",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
+  "description": "social-oj-o",
+  "author": "heimoshuiyu",
+  "keywords": [
+    "gatsby"
+  ],
   "scripts": {
-    "dev": "next dev",
+    "develop": "gatsby develop",
-    "build": "next build",
+    "start": "gatsby develop",
-    "start": "next start",
+    "build": "gatsby build",
-    "lint": "next lint"
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
   },
   "dependencies": {
-    "next": "12.1.6",
+    "gatsby": "^5.1.0",
-    "react": "18.1.0",
+    "gatsby-plugin-google-analytics": "^5.1.0",
-    "react-dom": "18.1.0"
+    "gatsby-plugin-google-gtag": "^5.1.0",
-  },
+    "gatsby-plugin-image": "^3.1.0",
-  "devDependencies": {
+    "gatsby-plugin-sharp": "^5.1.0",
-    "eslint": "8.15.0",
+    "gatsby-source-filesystem": "^5.1.0",
-    "eslint-config-next": "12.1.6"
+    "gatsby-transformer-sharp": "^5.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

pages/_app.js

@@ -1,8 +0,0 @@
-import '../styles/globals.css'
-import Footer from '../components/Footer';
-
-function MyApp({Component, pageProps}) {
-  return <><Component {...pageProps} /><Footer /></>
-}
-
-export default MyApp

pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
-}

pages/index.js

@@ -1,39 +0,0 @@
-import Head from "next/head";
-import Link from "next/link";
-import Header from "../components/Header";
-import ClickForMore from "../components/ClickForMore";
-
-// styles
-import styles from "../styles/Home.module.css";
-
-export default function Home() {
-  return (
-    <div>
-      <Head>
-        <title>主页 - Social OjO</title>
-        <meta name="description" content="Social OjO 官方网站" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <Header></Header>
-
-      <main className={styles.container}>
-        <Link href="/posts/init" passHref>
-          <section className={styles.postPreview}>
-            <h2>Social OjO 正式成立</h2>
-            <p>平台介绍、期望及使命</p>
-            <small>发布于 2022-05-12</small>{" | "}<ClickForMore />
-          </section>
-        </Link>
-        <hr />
-        <Link href="/posts/map" passHref>
-          <section className={styles.postPreview}>
-            <h2>全国灾害统计地图</h2>
-            <small>发布于 2022-05-12</small>{" | "}<ClickForMore />
-          </section>
-        </Link>
-      </main>
-    </div>
-  );
-}
-

pages/posts/map.js

@@ -1,136 +0,0 @@
-import Head from "next/head";
-import Link from "next/link";
-import Header from "../../components/Header";
-import Copyright from "../../components/Copyright";
-import Image from "next/image";
-
-import styles from "../../styles/Post.module.css";
-import homeStyles from "../../styles/Home.module.css";
-
-import typhoonMapPreview from "../../public/typhoon.png";
-import doughtMapPreview from "../../public/dought.png";
-import snowMapPreview from "../../public/snow.jpg";
-import workInjureMapPreview from "../../public/workInjury.png";
-import geologicalDisasterMapPreview from '../../public/geological.png';
-import earthquakeMapPreview from '../../public/earthquake.png';
-import forestFireMapPreview from '../../public/forestFire.png';
-import floodsAndDroughtsMapPreview from '../../public/floodsAndDroughts.png';
-import trafficAccidentsMapPreview from '../../public/traffic.png';
-
-export default function Init() {
-  return (
-    <div>
-      <Head>
-        <title>Social OjO 正式成立 - Social OjO</title>
-        <meta name="description" content="Social OjO 官方网站" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Header></Header>
-      <main className={homeStyles.container}>
-        <section className={styles.post}>
-          <h2>全国灾害统计地图</h2>
-          <small>发布于 2022-05-12</small>
-          <hr />
-          <div className={styles.grid}>
-            <Link
-              href="https://umap.openstreetmap.fr/zh/map/map_761199#4/36.24/122.08"
-              passHref
-            >
-              <div>
-                <h3>各省受台风影响地图</h3>
-                <small>
-                  <Copyright />
-                  吴懿鹏 林思源
-                </small>
-                <Image src={typhoonMapPreview} />
-              </div>
-            </Link>
-            <Link
-              href="https://umap.openstreetmap.fr/zh/map/drought-disasters-in-chinas-provinces-from-2014-to_758463#5/34.940/109.248"
-              passHref
-            >
-              <div>
-                <h3>各省干旱灾害地图</h3>
-                <small>
-                  <Copyright />
-                  郑可儿  郑梦佳
-                </small>
-                <Image src={doughtMapPreview} />
-              </div>
-            </Link>
-            <Link href="#" passHref>
-              <div>
-                <h3>各省低温冰雪灾害地图</h3>
-                <small>
-                  <Copyright />
-                  陈熙瑶 郭舒怡 尚阳
-                </small>
-                <Image src={snowMapPreview} />
-              </div>
-            </Link>
-            <Link href="https://umap.openstreetmap.fr/en/map/gis_756551#5/37.020/103.623" passHref>
-              <div>
-                <h3>各省工伤统计地图</h3>
-                <small>
-                  <Copyright />
-                  姚婉谊 战云英 易佳莹
-                </small>
-                <Image src={workInjureMapPreview} />
-              </div>
-            </Link>
-            <Link href="https://umap.openstreetmap.fr/zh/map/geological-disasters-in-mainland-china_758447#4/39.44/104.15" passHref>
-              <div>
-                <h3>各省突发地质灾害地图</h3>
-                <small>
-                  <Copyright />
-                  孙晓盈 邓忻玥 庞颖彤
-                </small>
-                <Image src={geologicalDisasterMapPreview} />
-              </div>
-            </Link>
-            <Link href="https://umap.osm.ch/en/map/map_4637#4/41.44/118.21" passHref>
-              <div>
-                <h3>新中国成立后各省地震数据</h3>
-                <small>
-                  <Copyright />
-                  周鲲鹏 刘梦蝶 陈九如
-                </small>
-                <Image src={earthquakeMapPreview} />
-              </div>
-            </Link>
-            <Link href="https://umap.openstreetmap.fr/en/map/forest-fires-data-map-of-china-2015-2020_753341#4/35.89/104.24" passHref>
-              <div>
-                <h3>各省森林火灾地图</h3>
-                <small>
-                  <Copyright />
-                  施适雨 黄珏晞 易欣宇
-                </small>
-                <Image src={forestFireMapPreview} />
-              </div>
-            </Link>
-            <Link href="https://umap.openstreetmap.fr/en/map/untitled-map_758141#4/41.97/106.83" passHref>
-              <div>
-                <h3>各省洪涝灾害地图</h3>
-                <small>
-                  <Copyright />
-                  杨思怡 张芷晴 马玉
-                </small>
-                <Image src={floodsAndDroughtsMapPreview} />
-              </div>
-            </Link>
-            <Link href="http://umap.openstreetmap.fr/en/map/traffic-accidents_756060#4/40.38/107.58" passHref>
-              <div>
-                <h3>各省交通事故地图</h3>
-                <small>
-                  <Copyright />
-                  朱诗琪 李昕玥 苗诗扬
-                </small>
-                <Image src={trafficAccidentsMapPreview} />
-              </div>
-            </Link>
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-}

src/components/ClickForMore.js

@@ -0,0 +1,11 @@
+import * as React from "react"
+
+const ClickForMore = () => {
+  return (
+    <span style={{textDecoration: "underline", color: "red"}}>
+      点击阅读更多...
+    </span>
+  )
+}
+
+export default ClickForMore

src/components/Copyright.js

@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const Copyright = () => {
+  return "©";
+}
+
+export default Copyright

src/components/DownloadReport.js

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+const DownloadReport = ({URL}) => {
+  return (
+    <p>
+      <a href={URL}>
+        <button>Report (ENG)</button>
+      </a>
+    </p>
+  )
+}
+
+export default DownloadReport

src/components/Footer.js

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as styles from "../styles/Footer.module.css"
+import {useStaticQuery, graphql} from "gatsby"
+
+const Footer = () => {
+  const data = useStaticQuery(graphql`
+query {
+  siteBuildMetadata {
+    buildTime(formatString: "LLLL")
+  }
+}
+
+  `)
+  console.log('data', data)
+  const {buildTime} = data.siteBuildMetadata
+  return (
+    <footer className={styles.footer}>
+      <small>
+        Website built with Gatsby.js at {buildTime}. ©2022-2023 Social OjO. All Rights Reserved.
+      </small>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Header.js

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as styles from "../styles/Header.module.css"
+import {Link} from "gatsby"
+
+const Header = ({titleText, Background}) => {
+  return (
+    <header>
+      <div style={{display: "grid"}}>
+        {Background}
+        <div
+          style={{
+            gridArea: "1/1",
+            position: "relative",
+            display: "grid",
+          }}
+        >
+          <nav className={styles.toolbar} style={{zIndex: "2"}}>
+            <strong>
+              <Link to="/" style={{textDecoration: "none"}}>Social OjO</Link>
+            </strong>
+            <div className={styles.nav}>
+              <span><Link to="/" style={{textDecoration: "none"}}>主页</Link></span>
+              <span><Link to="/posts/init" style={{textDecoration: "none"}}>关于</Link></span>
+            </div>
+          </nav>
+        </div>
+        <div
+          style={{
+            gridArea: "1/1",
+            position: "relative",
+            placeItems: "center",
+            display: "grid",
+          }}
+        >
+          <h1 className={styles.title}>{titleText || "Social OjO"}</h1>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/Image.js

@@ -0,0 +1,26 @@
+import {getImage} from "gatsby-plugin-image"
+import {useStaticQuery, graphql} from "gatsby"
+
+const Image = (name) => {
+  const { images: { edges: images } } = useStaticQuery(graphql`
+query {
+  images: allFile(filter: {relativeDirectory: {eq: "images"}}) {
+    edges {
+      node {
+        relativePath
+        childImageSharp {
+          gatsbyImageData(placeholder: BLURRED, jpgOptions: {}, quality: 90)
+        }
+        name
+      }
+    }
+  }
+}
+  `)
+  const propName = name
+  const imageData = images.find(({node: {name}}) => name === propName)
+  const image = getImage(imageData.node)
+  return image
+}
+
+export default Image

src/components/PostPreview.js

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as styles from "../styles/Home.module.css"
+import ClickForMore from "./ClickForMore"
+import {Link} from "gatsby"
+
+const PostPreview = ({title, description, date, href, bg}) => {
+  return (
+    <Link to={href} style={{color: "unset", textDecoration: "unset"}}>
+      <section className={styles.postPreviewWrap}>
+        <div className={styles.postPreview}>
+          <h2>{title}</h2>
+          <p>{description}</p>
+          <small>发布于 {date}</small>
+          {" | "}
+          <ClickForMore />
+        </div>
+        <div style={{width: "39%", maxWidth: "20rem"}}>
+          {bg}
+        </div>
+      </section>
+    </Link>
+  )
+}
+
+export default PostPreview

src/data/law.js

@@ -0,0 +1,72 @@
+module.exports = [
+  {
+    path: "1",
+    title: "残疾人劳工案例分析",
+    titleEn: "Disabled Labor Case Study",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0003_c.mp4",
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/1.mp4",
+    ],
+  },
+  {
+    path: "2",
+    title: "杀人犯潜逃的重婚案例",
+    titleEn: "The Case Analysis of Bigamy of Fugitive",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0004_c.mp4",
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/2.mp4",
+    ],
+  },
+  {
+    path: "3",
+    title: "离婚案例分析",
+    titleEn: "Divorce Case Analysis",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0005_c.mp4",
+      "https://social-ojo-1301796003.cos.ap-guangzhou.myqcloud.com/videos/2/3.mp4",
+    ],
+  },
+  {
+    path: "4",
+    title: "针对未成年人的性侵犯案件分析",
+    titleEn: "Analysis of Sexual Assault Case against Minors",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0006_c.mp4",
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/4.mp4",
+    ],
+  },
+  {
+    path: "5",
+    title: "精神病患者的离婚案例分析",
+    titleEn: "Divorce Case Analysis of Mentally Ill Patients",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0007_c.mp4",
+    ],
+  },
+  {
+    path: "6",
+    title: "离婚法",
+    titleEn: "Marriage Law Case Analysis",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0008_c.mp4",
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/6.mp4",
+    ],
+  },
+  {
+    path: "7",
+    title: "婚内配偶同性恋行为导致的离婚纠纷案例分析",
+    titleEn:
+      "Analysis of Divorce Disputes caused by Homosexual Behavior of Spouses in Marriage",
+    date: "发布于 2022-07-06",
+    videos: [
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/1/c0009_c.mp4",
+      "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/videos/2/7.mp4",
+    ],
+  },
+];

src/pages/404.js

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry 😔, we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage
+
+export const Head = () => <title>Not found</title>

src/pages/index.js

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as styles from "../styles/Home.module.css"
+import {StaticImage} from "gatsby-plugin-image"
+import Header from "../components/Header"
+import PostPreview from "../components/PostPreview"
+import Footer from "../components/Footer"
+
+const IndexPage = () => {
+  return (
+    <>
+      <Header Background={
+        <StaticImage placeholder="blurred"
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          alt="header background"
+          src="../images/mainbg.webp"
+        />
+      } />
+
+      <main className={styles.container}>
+        <PostPreview
+          href="/posts/init"
+          title="Social OjO 正式成立"
+          description="平台介绍、期望及使命"
+          date="2022-05-12"
+        />
+        <hr />
+        <PostPreview
+          href="/posts/law"
+          title="社会管理法律 (Social Management Law)"
+          description="小组研讨真实法律案件的案情和判决 Groups discuss facts and verdicts of real regal cases"
+          date="2022-07-06"
+          bg={
+            <StaticImage placeholder="blurred" src="../images/486.webp" alt="486 conferences photo" />
+          }
+        />
+        <hr />
+        <PostPreview
+          href="/posts/map"
+          title="全国灾害统计地图 (Disasters Map of China)"
+          description=""
+          date="2022-05-12"
+          bg={
+            <StaticImage placeholder="blurred" src="../images/typhoon.png" alt="Typhonon map preview" />
+          }
+        />
+      </main>
+
+      <Footer />
+    </>
+  )
+}
+
+export default IndexPage
+
+export const Head = () => <title>Home Page</title>

src/pages/posts/init.js

@@ -1,19 +1,26 @@
-import Head from "next/head";
+import * as React from "react"
-import Header from "../../components/Header";
+import * as styles from "../../styles/Post.module.css"
+import * as homeStyles from "../../styles/Home.module.css"
+import Header from "../../components/Header"
+import Footer from "../../components/Footer"
+import {StaticImage} from "gatsby-plugin-image"
 
-import styles from "../../styles/Post.module.css";
+const InitPage = () => {
-import homeStyles from "../../styles/Home.module.css";
+  const title = "Social OjO 正式成立"
-
-export default function Init() {
-  const title = "Social OjO 正式成立";
   return (
-    <div>
+    <>
-      <Head>
+      <Header Background={
-        <title>{title} - Social OjO</title>
+        <StaticImage
-        <meta name="description" content="Social OjO 官方网站" />
+          style={{
-        <link rel="icon" href="/favicon.ico" />
+            gridArea: "1/1",
-      </Head>
+            maxHeight: "50vh",
-      <Header></Header>
+          }}
+          layout="fullWidth"
+          src="../../images/mainbg.webp"
+          alt="Website background photo"
+        />
+      } />
+
       <main className={homeStyles.container}>
         <section className={styles.post}>
           <h2>{title}</h2>
@@ -51,7 +58,10 @@ export default function Init() {
           </p>
         </section>
       </main>
-    </div>
+
-  );
+      <Footer />
+    </>
+  )
 }
 
+export default InitPage

src/pages/posts/law.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import Image from "../../components/Image"
+import Header from "../../components/Header"
+import Footer from "../../components/Footer"
+import {StaticImage, GatsbyImage} from "gatsby-plugin-image"
+import * as styles from "../../styles/Post.module.css"
+import * as homeStyles from "../../styles/Home.module.css"
+import {Link} from "gatsby"
+const lawPages = require('../../data/law')
+
+const LawPage = () => {
+  return (
+    <>
+      <Header Background={
+        <StaticImage placeholder="blurred"
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          alt="header background"
+          src="../../images/486.webp"
+        />
+      } />
+
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>社会管理法律</h2>
+          <small>发布于 2022-07-06</small>
+          <hr />
+          <div className={styles.grid}>
+            {
+              lawPages.map((element) => {
+                return <Link to={`/posts/law/${element.path}`} style={{
+                  textDecoration: "unset", color: "unset",
+                }}>
+                  <div>
+                    <h3>{element.title}<br />{element.titleEn}</h3>
+                  </div>
+                  <small></small>
+                  <GatsbyImage image={Image(`group${element.path}bg`)} alt="test" />
+                </Link>
+              })
+            }
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  )
+}
+
+export default LawPage

src/pages/posts/map.js

@@ -0,0 +1,210 @@
+import * as React from "react"
+import * as styles from "../../styles/Post.module.css"
+import * as homeStyles from "../../styles/Home.module.css"
+import Header from "../../components/Header"
+import Footer from "../../components/Footer"
+import {StaticImage} from "gatsby-plugin-image"
+import Copyright from "../../components/Copyright"
+import DownloadReport from "../../components/DownloadReport"
+
+const MapPage = () => {
+  return (
+    <>
+      <Header Background={
+        <StaticImage placeholder="blurred"
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          src="../../images/typhoon.png"
+          alt="Map background photo"
+        />
+      } />
+
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>全国灾害统计地图 (Disasters Map of China)</h2>
+          <small>发布于 2022-05-12</small>
+          <hr />
+          <div className={styles.grid}>
+            <a
+              href="https://umap.openstreetmap.fr/zh/map/map_761199#4/36.24/122.08"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省受台风影响地图 (Typhoons Map)</h3>
+                <small>
+                  <Copyright />
+                  吴懿鹏 林思源
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Typhoon%20%20Dan%20%26%20Jimmy.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/typhoon.png" alt="Typhoons map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.openstreetmap.fr/zh/map/drought-disasters-in-chinas-provinces-from-2014-to_758463#5/34.940/109.248"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省干旱灾害地图 (Drought Map)</h3>
+                <small>
+                  <Copyright />
+                  郑可儿 郑梦佳
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Drought%20%20Eliza%20%26%20Sophia.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/dought.jpg" alt="Dought map preview" />
+              </div>
+            </a>
+            <a
+              href="https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/images/snow.jpg"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省低温冰雪灾害地图 (Low Temprature Map)</h3>
+                <small>
+                  <Copyright />
+                  陈熙瑶 郭舒怡 尚阳
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Low%20Temprature%20%20Katerina%2C%20Sabrina%20%26%20Sherry.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/snow.jpg" alt="Snow map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.openstreetmap.fr/en/map/gis_756551#5/37.020/103.623"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省工伤统计地图 (Work Injury Map)</h3>
+                <small>
+                  <Copyright />
+                  姚婉谊 战云英 易佳莹
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Work%20Injury%20%20Stanley%2C%20Lori%20%26%20Kristin.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/workInjury.png" alt="Work injury map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.openstreetmap.fr/zh/map/geological-disasters-in-mainland-china_758447#4/39.44/104.15"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省突发地质灾害地图 (Geological Disters Map)</h3>
+                <small>
+                  <Copyright />
+                  孙晓盈 邓忻玥 庞颖彤
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Geological%20disasters%20in%20Mainland%20China.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/geological.jpg" alt="Geological disaster map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.osm.ch/en/map/map_4637#4/41.44/118.21"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>新中国成立后各省地震数据 (Earthquake Map)</h3>
+                <small>
+                  <Copyright />
+                  周鲲鹏 刘梦蝶 陈九如
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Earthquake%20%20Lebron%2C%20Bonnie%20%26%20Azeal.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/earthquake.png" alt="Earthquake map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.openstreetmap.fr/en/map/forest-fires-data-map-of-china-2015-2020_753341#4/35.89/104.24"
+              passHref
+            >
+              <div>
+                <h3>各省森林火灾地图 (Forest Fire Map)</h3>
+                <small>
+                  <Copyright />
+                  施适雨 黄珏晞 易欣宇
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Forest%20Fires%20%20Peggy%2C%20Cindy%20%26%20jessie.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/forestFire.png" alt="Forest fire map preview" />
+              </div>
+            </a>
+            <a
+              href="https://umap.openstreetmap.fr/en/map/untitled-map_758141#4/41.97/106.83"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省洪涝灾害地图 (Floods andd Droughts Map)</h3>
+                <small>
+                  <Copyright />
+                  杨思怡 张芷晴 马玉
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Flood%20and%20Waterlogging%20%20Jade%2C%20Mia%20%26%20Cherry.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/floodsAndDroughts.png" alt="Floods and droughts map preview" />
+              </div>
+            </a>
+            <a
+              href="http://umap.openstreetmap.fr/en/map/traffic-accidents_756060#4/40.38/107.58"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div>
+                <h3>各省交通事故地图 (Traffic Accidents Map)</h3>
+                <small>
+                  <Copyright />
+                  朱诗琪 李昕玥 苗诗扬
+                </small>
+                <DownloadReport
+                  URL={
+                    "https://social-ojo-1301796004.cos.ap-guangzhou.myqcloud.com/files/EMPS_Traffic%20Accident%20%20Selina%2C%20Carolyn%20%26%20Julianne.docx"
+                  }
+                />
+                <StaticImage placeholder="blurred" src="../../images/traffic.jpg" alt="Traffic accidents map preview" />
+              </div>
+            </a>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  )
+}
+
+export default MapPage

src/styles/Header.module.css

@@ -11,11 +11,9 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  position: absolute;
+  padding: 2em;
-  left: 0;
-  width: 100vw;
-  padding: 2rem;
   background-color: rgba(255, 255, 255, 0.7);
+  height: 1em;
 }
 
 .nav {
@@ -28,11 +26,10 @@
 }
 
 .title {
-  position: absolute;
-  top: 22vh;
-  width: 100vw;
   text-align: center;
   font-size: 2rem;
   line-height: 3rem;
-  text-shadow: 1px 1px 1px black;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
+  color: white;
+  opacity: 0.8;
 }

src/styles/Home.module.css

@@ -0,0 +1,19 @@
+.container {
+  margin-top: 2rem;
+}
+
+.postPreview {
+  padding: 0.5rem;
+  border-radius: 1rem;
+  max-width: 70%;
+}
+
+.postPreviewWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding-left: 10%;
+  padding-right: 10%;
+}

src/styles/Post.module.css

@@ -1,11 +1,15 @@
 .post {
   padding-top: 1rem;
+  padding-left: 10%;
+  padding-right: 10%;
+  padding-bottom: 2rem;
 }
 
 .grid {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(auto-fit, 15rem);
+  justify-content: center;
 }
 
 .grid > * {

src/styles/globals.css

@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family:Arial, Helvetica, sans-serif;
 }
 
 a {

src/templates/law.js

@@ -0,0 +1,48 @@
+import * as React from "react"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+import Image from "../components/Image"
+import {GatsbyImage} from "gatsby-plugin-image"
+import {Link} from "gatsby"
+import * as style from "../styles/Post.module.css"
+import * as homeStyle from "../styles/Home.module.css"
+
+const LawPage = (props) => {
+  const {pageContext} = props
+  const {element} = pageContext
+  return (
+    <>
+      <Header Background={
+        <GatsbyImage placeholder="blurred"
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          alt="header background"
+          image={Image(`group${element.path}bg`)}
+        />
+      } />
+
+      <main className={homeStyle.container}>
+        <section className={style.post}>
+          <Link to="../"><h3>{"<<"}返回目录</h3></Link>
+          <h2>{element.title}<br />{element.titleEn}</h2>
+          <small>{element.date}</small>
+          <hr />
+          {element.videos.map((video) => {
+            const poster = video.substr(0, video.indexOf('.mp4')) + '_poster.jpg';
+            return <p style={{textAlign: "center"}}>
+              <video src={video} poster={poster || ""} controls preload="none" width="70%" />
+            </p>
+          })
+          }
+        </section>
+      </main>
+
+      <Footer />
+    </>
+  )
+}
+
+export default LawPage

styles/Home.module.css

@@ -1,11 +0,0 @@
-.container {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 2rem;
-}
-
-.postPreview {
-  padding: 0.5rem;
-  border-radius: 1rem;
-  cursor: pointer;
-}