Skip to content

Commit

Permalink
feat: use more good icon and support blog show
Browse files Browse the repository at this point in the history
  • Loading branch information
@ozline
ozline committed Jun 6, 2024
1 parent 857bc56 commit 030b17a
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 47 deletions.
27 changes: 19 additions & 8 deletions src/components/Member/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { Avatar } from "@/components/ui/avatar"
import { memberData } from "@/components/Member/memberData";
import { memberData, imgPrefix, githubPrefix, visibleYearsCount } from "@/components/Member/memberData";
import GithubIcon from '@site/static/img/github.svg';
import BlogIcon from '@site/static/img/blog.svg';
import React, { useState, useMemo, useEffect } from 'react';
import './styles.module.css';

export default function Component() {
const data = memberData
const [activeYear, setActiveYear] = useState(Object.keys(data)[0]); // 默认为第一个年份
const sortedYears = Object.keys(memberData).sort((a, b) => b.localeCompare(a));

const [activeYear, setActiveYear] = useState(sortedYears[0]); // 默认为第一个年份
const [activeFocus, setActiveFocus] = useState('All'); // 默认选中所有 focus
const [isExpanded, setIsExpanded] = useState(false); // 默认不展开年份选择

const imgPrefix = "https://img.w2fzu.com/member/"
const githubPrefix = "https://github.com/"
const visibleYearsCount = 3; // 可见年份数量

const sortedYears = Object.keys(data).sort((a, b) => b.localeCompare(a));
const displayedYears = isExpanded ? sortedYears : sortedYears.slice(0, visibleYearsCount);

// 我们创建一个 state 来存储 LazyLoad 组件
Expand Down Expand Up @@ -113,9 +111,12 @@ export default function Component() {
)}
</Avatar>
<div className="text-center">
{/* name */}
<h3 className="font-semibold text-lg mb-1">{member.name}</h3>
{/* major */}
<p className="text-gray-500 dark:text-gray-400 text-xs mb-1">{member.major}</p>
{member.github !== "null" && (
{/* Github link */}
{member.github !== undefined && (
<a
href={githubPrefix + member.github}
className="flex items-center justify-center text-[var(--ifm-color-primary)] hover:text-[var(--ifm-color-primary-light)] transition duration-300 text-xs"
Expand All @@ -124,6 +125,16 @@ export default function Component() {
{member.github}
</a>
)}
{/* blog link */}
{member.blog && (
<a
href={member.blog.url}
className="flex items-center justify-center text-[var(--ifm-color-primary)] hover:text-[var(--ifm-color-primary-light)] transition duration-300 text-xs"
>
<BlogIcon className="w-3 h-3 mr-1" />
{member.blog.display}
</a>
)}
</div>
</div>
))}
Expand Down
83 changes: 49 additions & 34 deletions src/components/Member/memberData.ts
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,80 @@
export const imgPrefix = "https://img.w2fzu.com/member/"
export const githubPrefix = "https://github.com/"
export const visibleYearsCount = 3; // 可见年份数量

/*
1. 计算机方向同学必须搜集 GitHub ID，其他方向同学可选
2. 头像图片请上传到又拍云，并将链接填写到 avatar 字段，文件名请以学号（如 052106112）命名
3. GitHub ID 请填写不带前缀的 ID，会自动拼接 github 地址
4. blog 字段可选，如果填写了会在成员卡片中显示一个链接
*/

type MemberData = Record<string, {
avatar: string; // 头像
avatar: string; // 头像，会自动拼接又拍云 prefix
name: string; // 姓名
focus: string; // 专注于
github: string; // GitHub 地址
major: string; // 专业
github?: string; // GitHub id
major: string; // 专业，如 20级软件工程
blog?: { // 博客
display: string; // 显示的文字
url: string; // 链接
}
}[]>

export const memberData: MemberData = {
"2023": [],
"2022": [
{ avatar: "2022/frontends_python_zyy.jpg", name: "张艺耀", focus: "前端", major:"21级人工智能", github: "1379255913" },
{ avatar: "2022/frontends_python_wy.jpg", name: "吴悠", focus: "Python", major:"21级给排水", github: "null" },
{ avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "ozline" },
{ avatar: "2022/frontends_python_wy.jpg", name: "吴悠", focus: "Python", major:"21级给排水" },
{ avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "ozline", blog: { display: "ozline's blog", url: "https://blog.ozline.icu/" } },

{ avatar: "2022/unity_lqy.jpg", name: "罗骐翼", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_hzy.jpg", name: "黄致远", focus: "Unity", major:"21级计算机", github: "null" },
{ avatar: "2022/unity_wjy.jpg", name: "吴佳仪", focus: "Unity", major:"20级自动化", github: "null" },
{ avatar: "2022/unity_hhc.jpg", name: "何晗晨", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_yxx.jpg", name: "袁夏鑫", focus: "Unity", major:"21级软件工程", github: "null" },
{ avatar: "2022/unity_hkh.jpg", name: "黄铠赫", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_lqy.jpg", name: "罗骐翼", focus: "Unity", major:"21级数媒" },
{ avatar: "2022/unity_hzy.jpg", name: "黄致远", focus: "Unity", major:"21级计算机" },
{ avatar: "2022/unity_wjy.jpg", name: "吴佳仪", focus: "Unity", major:"20级自动化" },
{ avatar: "2022/unity_hhc.jpg", name: "何晗晨", focus: "Unity", major:"21级数媒" },
{ avatar: "2022/unity_yxx.jpg", name: "袁夏鑫", focus: "Unity", major:"21级软件工程" },
{ avatar: "2022/unity_hkh.jpg", name: "黄铠赫", focus: "Unity", major:"21级数媒" },
{ avatar: "2022/unity_ywx.jpg", name: "姚玮欣", focus: "Unity", major:"20级计算机", github: "yaoweixin" },

{ avatar: "2022/golang_ckf.jpg", name: "陈恺丰", focus: "Go", major:"20级电子信息工程", github: "KAIFENG-ch" },
{ avatar: "2022/golang_fyc.jpg", name: "方宇辰", focus: "Go", major:"20级软件工程", github: "Anxiu0101" },
{ avatar: "2022/golang_zzy.jpg", name: "张钊洋", focus: "Go", major:"20级电子信息工程", github: "rsooio" },

{ avatar: "2022/python_cxy.jpg", name: "陈昕远", focus: "Python", major:"20级软件工程", github: "null" },
{ avatar: "2022/python_gbq.jpg", name: "高炳强", focus: "Python", major:"21级人工智能", github: "null" },
{ avatar: "2022/python_lzp.jpg", name: "李志鹏", focus: "Python", major:"20级计算机", github: "null" },
{ avatar: "2022/python_cxy.jpg", name: "陈昕远", focus: "Python", major:"20级软件工程" },
{ avatar: "2022/python_gbq.jpg", name: "高炳强", focus: "Python", major:"21级人工智能" },
{ avatar: "2022/python_lzp.jpg", name: "李志鹏", focus: "Python", major:"20级计算机" },

{ avatar: "2022/android_sqt.jpg", name: "沈轻腾", focus: "Android", major:"21级计算机", github: "theonenull" },
{ avatar: "2022/android_zyn.jpg", name: "张煜楠", focus: "Android", major:"21级软件工程", github: "Benxinm" },
{ avatar: "2022/android_sx.jpg", name: "孙逊", focus: "Android", major:"21级电子信息工程", github: "utf8-coding" },

{ avatar: "2022/frontends_zjz.jpg", name: "张佳泽", focus: "前端", major:"20级软件工程", github: "sami-jiaze" },
{ avatar: "2022/frontends_czh.jpg", name: "陈泽华", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_czh.jpg", name: "陈泽华", focus: "前端", major:"20级软件工程" },
{ avatar: "2022/frontends_pcy.jpg", name: "庞财莹", focus: "前端", major:"21级软件工程", github: "xi-null" },
{ avatar: "2022/frontends_wxy.jpg", name: "吴星宇", focus: "前端", major:"21级计算机", github: "null" },
{ avatar: "2022/frontends_gcj.jpg", name: "龚辰珺", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_lx.jpg", name: "林翔", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_wzr.jpg", name: "吴子隆", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_wxy.jpg", name: "吴星宇", focus: "前端", major:"21级计算机" },
{ avatar: "2022/frontends_gcj.jpg", name: "龚辰珺", focus: "前端", major:"20级软件工程" },
{ avatar: "2022/frontends_lx.jpg", name: "林翔", focus: "前端", major:"20级软件工程" },
{ avatar: "2022/frontends_wzr.jpg", name: "吴子隆", focus: "前端", major:"20级软件工程" },

{ avatar: "2022/java_lb.jpg", name: "刘博", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_czh.jpg", name: "陈桢函", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_zl.jpg", name: "朱辽", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_hjq.jpg", name: "胡家齐", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_lb.jpg", name: "刘博", focus: "Java", major:"20级自动化" },
{ avatar: "2022/java_czh.jpg", name: "陈桢函", focus: "Java", major:"20级软件工程" },
{ avatar: "2022/java_zl.jpg", name: "朱辽", focus: "Java", major:"20级自动化" },
{ avatar: "2022/java_hjq.jpg", name: "胡家齐", focus: "Java", major:"20级自动化" },
{ avatar: "2022/java_lyd.jpg", name: "李炎东", focus: "Java", major:"21级软件工程", github: "SkyDDDog" },
{ avatar: "2022/java_ljh.jpg", name: "刘俊辉", focus: "Java", major:"21级人工智能", github: "SUPERGOG07" },
{ avatar: "2022/java_lzp.jpg", name: "李振鹏", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_xyj.jpg", name: "许影杰", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_cy.jpg", name: "陈艺", focus: "Java", major:"21级计算机", github: "null" },
{ avatar: "2022/java_sjs.jpg", name: "苏锦森", focus: "Java", major:"21级计算机", github: "null" },
{ avatar: "2022/java_yrw.jpg", name: "杨润午", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_yjj.jpg", name: "余婧洁", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_zcx.jpg", name: "张晨旭", focus: "Java", major:"20级计算机", github: "null" },
{ avatar: "2022/java_czf.jpg", name: "陈知菲", focus: "Java", major:"21级计算机", github: "null" },
{ avatar: "2022/java_lzp.jpg", name: "李振鹏", focus: "Java", major:"20级软件工程" },
{ avatar: "2022/java_xyj.jpg", name: "许影杰", focus: "Java", major:"20级软件工程" },
{ avatar: "2022/java_cy.jpg", name: "陈艺", focus: "Java", major:"21级计算机" },
{ avatar: "2022/java_sjs.jpg", name: "苏锦森", focus: "Java", major:"21级计算机" },
{ avatar: "2022/java_yrw.jpg", name: "杨润午", focus: "Java", major:"20级软件工程" },
{ avatar: "2022/java_yjj.jpg", name: "余婧洁", focus: "Java", major:"20级自动化" },
{ avatar: "2022/java_zcx.jpg", name: "张晨旭", focus: "Java", major:"20级计算机" },
{ avatar: "2022/java_czf.jpg", name: "陈知菲", focus: "Java", major:"21级计算机" },

{ avatar: "2022/art_lcy.jpg", name: "李宸晔", focus: "美术", major:"20级建筑学", github: "ALLLOUD" },
{ avatar: "2022/art_lmq.jpg", name: "李鸣谦", focus: "美术", major:"20级信息安全", github: "null" },
{ avatar: "2022/art_cjw.jpg", name: "陈佳雯", focus: "美术", major:"21级数媒", github: "null" },
{ avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒", github: "null" },
{ avatar: "2022/art_lmq.jpg", name: "李鸣谦", focus: "美术", major:"20级信息安全" },
{ avatar: "2022/art_cjw.jpg", name: "陈佳雯", focus: "美术", major:"21级数媒" },
{ avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒" },
{ avatar: "2022/art_hcx.jpg", name: "黄晨曦", focus: "美术", major:"21级信管", github: "mmmki" },
],
"2021": [],
Expand Down
1 change: 0 additions & 1 deletion src/components/Member/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* 在你的 CSS 文件中添加以下样式 */
/* 自定义滚动条的样式 */
.scrollbar-custom::-webkit-scrollbar {
width: 10px; /* 设置滚动条的宽度 */
Expand Down
1 change: 1 addition & 0 deletions static/img/blog.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 1 addition & 3 deletions static/img/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@
"paths": {
"@/*": ["./src/*"]
}
}
},
}

0 comments on commit 030b17a

Please sign in to comment.