rebuild with gatsby

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

README.md

@@ -0,0 +1,54 @@
+<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>
+
+## 🚀 Quick start
+
+1.  **Create a Gatsby site.**
+
+    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+
+    ```shell
+    # create a new Gatsby site using the minimal starter
+    npm init gatsby
+    ```
+
+2.  **Start developing.**
+
+    Navigate into your new site’s directory and start it up.
+
+    ```shell
+    cd my-gatsby-site/
+    npm run develop
+    ```
+
+3.  **Open the code and start customizing!**
+
+    Your site is now running at http://localhost:8000!
+
+    Edit `src/pages/index.js` to see your site update in real-time!
+
+4.  **Learn more**
+
+    - [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)

gatsby-browser.js

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

gatsby-config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  siteMetadata: {
+    title: `Social OjO`,
+    siteUrl: `https://www.yourdomain.tld`
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src`,
+      },
+    },
+    "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,
+      }
+    })
+  })
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "social-oj-o",
+  "version": "1.0.0",
+  "private": true,
+  "description": "social-oj-o",
+  "author": "heimoshuiyu",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "gatsby": "^4.24.4",
+    "gatsby-plugin-google-analytics": "^4.24.0",
+    "gatsby-plugin-image": "^2.24.0",
+    "gatsby-plugin-sharp": "^4.24.0",
+    "gatsby-source-filesystem": "^4.24.0",
+    "gatsby-transformer-sharp": "^4.24.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}

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/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,29 @@
+import * as React from "react"
+import {GatsbyImage, 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 (
+    <GatsbyImage image={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/images/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

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,56 @@
+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"
+
+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>
+    </>
+  )
+}
+
+export default IndexPage
+
+export const Head = () => <title>Home Page</title>

src/pages/posts/init.js

@@ -0,0 +1,64 @@
+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 {StaticImage} from "gatsby-plugin-image"
+
+const InitPage = () => {
+  const title = "Social OjO 正式成立"
+  return (
+    <>
+      <Header Background={
+        <StaticImage
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          src="../../images/mainbg.webp"
+          alt="Website background photo"
+        />
+      } />
+
+      <main className={homeStyles.container}>
+        <section className={styles.post}>
+          <h2>{title}</h2>
+          <small>发布于 2022-05-12</small>
+          <p>今天是汶川大地震的十四周年，也是国家每年的防灾减灾日。</p>
+          <p>
+            十四年前，UIC二百多名
+            师生在地震发生后前赴后继地奔赴灾区，在三江，水磨，绵竹等地提供了灾后社区关怀服务。虽然力量有限，服务为期不长，但师生对灾后服务的情景都记忆猶新。今天我们仍在和水磨镇的小伙伴们在话家常。
+          </p>
+          <p>
+            自此，在UIC我们开设了一门灾害社会工作的选修课，探索社会工作者在灾变管理的角色和社会心理应急特别是危机干预介入的技巧。
+          </p>
+          <p>
+            转眼间我们已进入数字时代。数字社交平台在武汉疫情期间使我们能在线上提供危机干预培训和督导。更在线上陪同当地社工、社区工作者和志愿者为社区內的新冠患者及其家人提供社会心理服务，也可以连接基金会进行精准捐赠。以同一模式我们服务了2020年在湖北滞留的香港市民，在南韩的我国留学生，和2022年面对奥米克隆的香港市民。值得一提的是我们数十名毕业生，都参与到线上服务当中。
+          </p>
+          <p>
+            数字社会工作的基础经已建立。大数据也能应用于灾害救援，郑州洪灾期间，透过收集求助信息志愿者不眠不休地尝试连接求救者和救援队，也用GIS
+            技术将求救者和救援队的位置显示出来，中间有多少失望，又有多少惊喜，不足为外人道。UIC一名毕业生，自行组织了一个信息志愿队，加入了捜救者的行列，不求名利，实在令人感动。现在各个盈利地图都在大灾时开放求助信息通道，其实是向社会学习。
+          </p>
+          <p>
+            今天是国家防灾减灾日，为传承及颂掦UIC师生在灾难靣前挺身而出的优良传统，我邀请了一群同学，主要是社会工作及社会行政三，四年级，也有其他三个学部的同学，制作了一个中囯灾害地图，利用可视化的效果，让大家初步了解中国的灾害情况。
+          </p>
+          <p>
+            这只是漫漫防灾长路的一步，不是第一步，也肯定不是最后一步。请批评，指正，和参与。
+          </p>
+          <p style={{
+            textAlign: "right",
+          }}>
+            黄匡忠
+            <br />
+            北师港浸大
+            <br />
+            2008+14, 05,12
+            <br />
+          </p>
+        </section>
+      </main>
+    </>
+  )
+}
+
+export default InitPage

src/pages/posts/law.js

@@ -0,0 +1,52 @@
+import * as React from "react"
+import Image from "../../components/Image"
+import Header from "../../components/Header"
+import {StaticImage} 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>
+                  <Image name={`group${element.path}bg`} alt="test" />
+                </Link>
+              })
+            }
+          </div>
+        </section>
+      </main>
+
+    </>
+  )
+}
+
+export default LawPage

src/pages/posts/map.js

@@ -0,0 +1,207 @@
+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 {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>
+    </>
+  )
+}
+
+export default MapPage

src/styles/Footer.module.css

@@ -0,0 +1,4 @@
+.footer {
+  padding-top: 2rem;
+  text-align: center;
+}

src/styles/Header.module.css

@@ -0,0 +1,35 @@
+.header {
+  padding: 2em;
+  background-color: rgba(255, 255, 255, 0.7);
+  box-shadow: 0px 5px 8px rgba(255, 255, 255, 0.7);
+  background-position: center;
+  background-size: cover;
+  height: 50vh;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2em;
+  background-color: rgba(255, 255, 255, 0.7);
+  height: 1em;
+}
+
+.nav {
+  height: min-content;
+}
+
+.nav > * {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.title {
+  text-align: center;
+  font-size: 2rem;
+  line-height: 3rem;
+  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

@@ -0,0 +1,24 @@
+.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 > * {
+  padding: 0.3rem;
+  cursor: pointer;
+  border-radius: 1rem;
+}
+
+.grid > *:hover {
+  background-color: lightblue;
+  transition: cubic-bezier(1, 0, 0, 1);
+}

src/styles/globals.css

@@ -0,0 +1,19 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.hr {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}

src/templates/law.js

@@ -0,0 +1,43 @@
+import * as React from "react"
+import Header from "../components/Header"
+import {StaticImage} from "gatsby-plugin-image"
+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={
+        <StaticImage placeholder="blurred"
+          style={{
+            gridArea: "1/1",
+            maxHeight: "50vh",
+          }}
+          layout="fullWidth"
+          alt="header background"
+          src="../images/mainbg.webp"
+        />
+      } />
+
+      <main className={homeStyle.container}>
+        <section className={style.post}>
+          <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>
+
+    </>
+  )
+}
+
+export default LawPage