add: 2022 avatar

west2-online · Jun 5, 2024 · 488620c · 488620c
1 parent 1a367cd
commit 488620c
Show file tree

Hide file tree

Showing 51 changed files with 66 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -1,41 +1,39 @@
 # Website
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+west2-online 官方网站源代码及发布托管
 
-### Installation
+## 迭代维护
 
-```
-$ yarn
-```
+我们使用 yarn 来进行包管理，下载好源代码后，使用
 
-### Local Development
-
-```
-$ yarn start
+```bash
+$ yarn install   # 安装依赖包
+$ yarn run start # 启动本地测试服务器
 ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+之后可以在`localhost:3000`中复查看到测试页面，测试服务器支持热重载
 
-### Build
-
-```
-$ yarn build
-```
+### 更新文档
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+文档侧边栏`sidebars.ts`使用文件夹自动生成，当我们需要添加文档时，只需要在`docs`文件夹里添加文件即可，如果需要对文档进行分类，可以直接创建文件夹，然后把分类的文件放进文件夹中即可
 
-### Deployment
+### 更新成员
 
-Using SSH:
+资源文件位于`src/components/Member`文件夹，编辑其中的`memberData.ts`即可
 
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
+## 文件结构
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+```text
+.
+├── README.md
+├── babel.config.js
+├── components.json
+├── docs                  # 文档
+├── docusaurus.config.ts  # Docusaurus 配置
+├── sidebars.ts           # 侧边栏配置
+├── src                   # 页面源代码
+├── static                # 静态资源
+├── tailwind.config.js
+├── tsconfig.json
+└── yarn.lock
+```
diff --git a/src/components/Member/index.tsx b/src/components/Member/index.tsx
@@ -1,8 +1,34 @@
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { memberData } from "@/components/Member/memberData";
+import React, { useState, useEffect } from 'react';
+
+async function loadImage(avatar) {
+  try {
+    const image = await import(`@site/static/member/${avatar}`);
+    return image.default;
+  } catch (e) {
+    console.error('Failed to load image', e);
+    return '@site/static/img/logo.svg'; // 返回一个占位图的路径或者你想要的错误图像
+  }
+}
 
 export default function Component() {
   const data = memberData
+  const [images, setImages] = useState({});
+
+  useEffect(() => {
+    (async () => {
+      const promises = Object.values(data).flat().map(async member => {
+        const src = await loadImage(member.avatar);
+        return { [member.avatar]: src };
+      });
+
+      const imagesArray = await Promise.all(promises);
+      const imagesObject = imagesArray.reduce((acc, current) => ({ ...acc, ...current }), {});
+      setImages(imagesObject);
+    })();
+  }, []); // 空依赖数组意味着这个 effect 只在组件挂载时运行
+
   return (
     <div className="container mx-auto py-12 px-4 md:px-6">
       {Object.keys(data).map((year) => (
@@ -15,7 +41,7 @@ export default function Component() {
                 className="flex flex-col items-center gap-2 bg-white dark:bg-gray-950 p-4 rounded-lg shadow-md"
               >
                 <Avatar>
-                  <img src="/placeholder.svg" alt={member.name} />
+                <img src={images[member.avatar]} alt={member.name} />
                   <AvatarFallback>{member.name.split(" ").map((word) => word[0])}</AvatarFallback>
                 </Avatar>
                 <div className="text-center">

diff --git a/src/components/Member/memberData.ts b/src/components/Member/memberData.ts
@@ -2,25 +2,26 @@ type MemberData = Record<string, {
   avatar: string;
   name: string;
   profession: string;
+  github: string;
 }[]>
 
 export const memberData: MemberData = {
   "2023": [
-    { avatar: "/placeholder-avatar.jpg", name: "John Doe", profession: "Software Engineer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Jane Smith", profession: "Product Manager" },
-    { avatar: "/placeholder-avatar.jpg", name: "Michael Johnson", profession: "UI/UX Designer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Emily Davis", profession: "Data Analyst" },
+    // { avatar: "/placeholder-avatar.jpg", name: "John Doe", profession: "Software Engineer" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Jane Smith", profession: "Product Manager" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Michael Johnson", profession: "UI/UX Designer" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Emily Davis", profession: "Data Analyst" },
   ],
   "2022": [
-    { avatar: "/placeholder-avatar.jpg", name: "David Lee", profession: "Backend Developer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Sarah Kim", profession: "Frontend Developer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Tom Wilson", profession: "Project Manager" },
-    { avatar: "/placeholder-avatar.jpg", name: "Olivia Chen", profession: "QA Engineer" },
+    { avatar: "2022/android_sqt.jpg", name: "David Lee", profession: "Backend Developer", github: "string" },
+    { avatar: "/placeholder-avatar.jpg", name: "Sarah Kim", profession: "Frontend Developer", github: "string" },
+    { avatar: "/placeholder-avatar.jpg", name: "Tom Wilson", profession: "Project Manager", github: "string" },
+    { avatar: "/placeholder-avatar.jpg", name: "Olivia Chen", profession: "QA Engineer", github: "string" },
   ],
   "2021": [
-    { avatar: "/placeholder-avatar.jpg", name: "Alex Park", profession: "DevOps Engineer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Sophia Nguyen", profession: "Business Analyst" },
-    { avatar: "/placeholder-avatar.jpg", name: "Ryan Gonzalez", profession: "Mobile Developer" },
-    { avatar: "/placeholder-avatar.jpg", name: "Isabella Ramirez", profession: "Content Writer" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Alex Park", profession: "DevOps Engineer" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Sophia Nguyen", profession: "Business Analyst" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Ryan Gonzalez", profession: "Mobile Developer" },
+    // { avatar: "/placeholder-avatar.jpg", name: "Isabella Ramirez", profession: "Content Writer" },
   ],
 }
diff --git a/static/img/docusaurus-social-card1.jpg b/static/img/docusaurus-social-card1.jpg
diff --git a/static/img/docusaurus.png b/static/img/docusaurus.png
diff --git a/static/member/2022/android_sqt.jpg b/static/member/2022/android_sqt.jpg
diff --git a/static/member/2022/android_sx.jpg b/static/member/2022/android_sx.jpg
diff --git a/static/member/2022/android_zyn.jpg b/static/member/2022/android_zyn.jpg
diff --git a/static/member/2022/art_cjw.jpg b/static/member/2022/art_cjw.jpg
diff --git a/static/member/2022/art_hcx.jpg b/static/member/2022/art_hcx.jpg
diff --git a/static/member/2022/art_lcy.jpg b/static/member/2022/art_lcy.jpg
diff --git a/static/member/2022/art_lmq.jpg b/static/member/2022/art_lmq.jpg
diff --git a/static/member/2022/art_lxy.jpg b/static/member/2022/art_lxy.jpg
diff --git a/static/member/2022/frontends_czh.jpg b/static/member/2022/frontends_czh.jpg
diff --git a/static/member/2022/frontends_gcj.jpg b/static/member/2022/frontends_gcj.jpg
diff --git a/static/member/2022/frontends_ios_golang_lhx.jpg b/static/member/2022/frontends_ios_golang_lhx.jpg
diff --git a/static/member/2022/frontends_lx.jpg b/static/member/2022/frontends_lx.jpg
diff --git a/static/member/2022/frontends_pcy.jpg b/static/member/2022/frontends_pcy.jpg
diff --git a/static/member/2022/frontends_python_wy.jpg b/static/member/2022/frontends_python_wy.jpg
diff --git a/static/member/2022/frontends_python_zyy.jpg b/static/member/2022/frontends_python_zyy.jpg
diff --git a/static/member/2022/frontends_szx.jpg b/static/member/2022/frontends_szx.jpg
diff --git a/static/member/2022/frontends_wxy.jpg b/static/member/2022/frontends_wxy.jpg
diff --git a/static/member/2022/frontends_wzr.jpg b/static/member/2022/frontends_wzr.jpg
diff --git a/static/member/2022/frontends_zjz.jpg b/static/member/2022/frontends_zjz.jpg
diff --git a/static/member/2022/golang_ckf.jpg b/static/member/2022/golang_ckf.jpg
diff --git a/static/member/2022/golang_fyc.jpg b/static/member/2022/golang_fyc.jpg
diff --git a/static/member/2022/golang_zzy.jpg b/static/member/2022/golang_zzy.jpg
diff --git a/static/member/2022/java_cy.jpg b/static/member/2022/java_cy.jpg
diff --git a/static/member/2022/java_czf.jpg b/static/member/2022/java_czf.jpg
diff --git a/static/member/2022/java_czh.jpg b/static/member/2022/java_czh.jpg
diff --git a/static/member/2022/java_hjq.jpg b/static/member/2022/java_hjq.jpg
diff --git a/static/member/2022/java_lb.jpg b/static/member/2022/java_lb.jpg
diff --git a/static/member/2022/java_ljh.jpg b/static/member/2022/java_ljh.jpg
diff --git a/static/member/2022/java_lyd.jpg b/static/member/2022/java_lyd.jpg
diff --git a/static/member/2022/java_lzp.jpg b/static/member/2022/java_lzp.jpg
diff --git a/static/member/2022/java_sjs.jpg b/static/member/2022/java_sjs.jpg
diff --git a/static/member/2022/java_xyj.jpg b/static/member/2022/java_xyj.jpg
diff --git a/static/member/2022/java_yjj.jpg b/static/member/2022/java_yjj.jpg
diff --git a/static/member/2022/java_yrw.jpg b/static/member/2022/java_yrw.jpg
diff --git a/static/member/2022/java_zcx.jpg b/static/member/2022/java_zcx.jpg
diff --git a/static/member/2022/java_zl.jpg b/static/member/2022/java_zl.jpg
diff --git a/static/member/2022/python_cxy.jpg b/static/member/2022/python_cxy.jpg
diff --git a/static/member/2022/python_gbq.jpg b/static/member/2022/python_gbq.jpg
diff --git a/static/member/2022/python_lzp.jpg b/static/member/2022/python_lzp.jpg
diff --git a/static/member/2022/unity_hhc.jpg b/static/member/2022/unity_hhc.jpg
diff --git a/static/member/2022/unity_hkh.jpg b/static/member/2022/unity_hkh.jpg
diff --git a/static/member/2022/unity_hzy.jpg b/static/member/2022/unity_hzy.jpg
diff --git a/static/member/2022/unity_lqy.jpg b/static/member/2022/unity_lqy.jpg
diff --git a/static/member/2022/unity_wjy.jpg b/static/member/2022/unity_wjy.jpg
diff --git a/static/member/2022/unity_ywx.jpg b/static/member/2022/unity_ywx.jpg
diff --git a/static/member/2022/unity_yxx.jpg b/static/member/2022/unity_yxx.jpg