Skip to content

Commit 4cda456

Browse files
RevySRRevySR
committed
feat(projects): replace letter badges with semantic SVG icons
The project cards used two-letter category codes (EC/KN/FW/BL/DO/EL/BM) inside the colored badge, which read as placeholders rather than icons. Replace them with a line-style SVG per category (layers, cpu, download, terminal, book, zap, bar-chart, help) in a new CategoryIcon component, rendering white strokes on the colored badge. Drop the now-unused icon field from ProjectCategoryLabels. Signed-off-by: Han Gao <gaohan@iscas.ac.cn>
1 parent 91f3fbe commit 4cda456

4 files changed

Lines changed: 99 additions & 13 deletions

File tree

‎src/components/CategoryIcon.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
import { ProjectCategory } from './ProjectCategory';
3+
4+
const STROKE = {
5+
fill: 'none',
6+
stroke: 'currentColor',
7+
strokeWidth: 2,
8+
strokeLinecap: 'round' as const,
9+
strokeLinejoin: 'round' as const,
10+
};
11+
12+
/**
13+
* A small line-style icon for each project category, rendered inside the
14+
* colored badge on the project card. Replaces the old two-letter codes
15+
* (EC/KN/FW/...) with something recognizable.
16+
*/
17+
export const CategoryIcon: React.FC<{ category: ProjectCategory }> = ({
18+
category,
19+
}) => {
20+
switch (category) {
21+
case ProjectCategory.Ecosystem:
22+
return (
23+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
24+
<path d="M12 2L2 7l10 5 10-5-10-5z" />
25+
<path d="M2 17l10 5 10-5" />
26+
<path d="M2 12l10 5 10-5" />
27+
</svg>
28+
);
29+
case ProjectCategory.Kernel:
30+
return (
31+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
32+
<rect x="4" y="4" width="16" height="16" rx="2" />
33+
<rect x="9" y="9" width="6" height="6" />
34+
<path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3" />
35+
</svg>
36+
);
37+
case ProjectCategory.Firmware:
38+
return (
39+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
40+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
41+
<polyline points="7 10 12 15 17 10" />
42+
<line x1="12" y1="15" x2="12" y2="3" />
43+
</svg>
44+
);
45+
case ProjectCategory.BuildScripts:
46+
return (
47+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
48+
<polyline points="4 17 10 11 4 5" />
49+
<line x1="12" y1="19" x2="20" y2="19" />
50+
</svg>
51+
);
52+
case ProjectCategory.Documentation:
53+
return (
54+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
55+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
56+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
57+
</svg>
58+
);
59+
case ProjectCategory.Electron:
60+
return (
61+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
62+
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
63+
</svg>
64+
);
65+
case ProjectCategory.Benchmark:
66+
return (
67+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
68+
<line x1="6" y1="20" x2="6" y2="16" />
69+
<line x1="12" y1="20" x2="12" y2="10" />
70+
<line x1="18" y1="20" x2="18" y2="4" />
71+
</svg>
72+
);
73+
case ProjectCategory.Uncategorized:
74+
default:
75+
return (
76+
<svg viewBox="0 0 24 24" aria-hidden="true" {...STROKE}>
77+
<circle cx="12" cy="12" r="10" />
78+
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
79+
<line x1="12" y1="17" x2="12.01" y2="17" />
80+
</svg>
81+
);
82+
}
83+
};

‎src/components/InfoCard.module.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,11 @@
5454
border-radius: 10px;
5555
background: var(--cat);
5656
color: #fff;
57-
font-weight: 700;
58-
font-size: 0.85rem;
59-
letter-spacing: 0.5px;
57+
}
58+
59+
.icon svg {
60+
width: 22px;
61+
height: 22px;
6062
}
6163

6264
.titleWrap {

‎src/components/InfoCard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styles from './InfoCard.module.css';
44
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
55
import type { ProjectCategory } from './ProjectCategory';
66
import { ProjectCategoryLabels } from './ProjectCategory';
7+
import { CategoryIcon } from './CategoryIcon';
78

89
export type InfoCardProps = {
910
title: string; // 标题，中文
@@ -47,7 +48,7 @@ export const InfoCard: React.FC<InfoCardProps> = ({
4748
>
4849
<div className={styles.header}>
4950
<span className={styles.icon} aria-hidden="true">
50-
{meta.icon}
51+
<CategoryIcon category={category} />
5152
</span>
5253
<div className={styles.titleWrap}>
5354
<h3 className={styles.title}>{displayTitle}</h3>

‎src/components/ProjectCategory.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ export enum ProjectCategory {
1111

1212
export const ProjectCategoryLabels: Record<
1313
ProjectCategory,
14-
{ zh: string; en: string; icon: string }
14+
{ zh: string; en: string }
1515
> = {
16-
[ProjectCategory.Ecosystem]: { zh: '软件生态', en: 'Ecosystem', icon: 'EC' },
17-
[ProjectCategory.Kernel]: { zh: '内核', en: 'Kernel', icon: 'KN' },
18-
[ProjectCategory.Firmware]: { zh: '固件', en: 'Firmware', icon: 'FW' },
19-
[ProjectCategory.BuildScripts]: { zh: '构建脚本', en: 'Build Scripts', icon: 'BL' },
20-
[ProjectCategory.Documentation]: { zh: '文档', en: 'Documentation', icon: 'DO' },
21-
[ProjectCategory.Electron]: { zh: 'Electron', en: 'Electron', icon: 'EL' },
22-
[ProjectCategory.Benchmark]: { zh: '基准测试', en: 'Benchmark', icon: 'BM' },
23-
[ProjectCategory.Uncategorized]: { zh: '未分类', en: 'Uncategorized', icon: '?' },
16+
[ProjectCategory.Ecosystem]: { zh: '软件生态', en: 'Ecosystem' },
17+
[ProjectCategory.Kernel]: { zh: '内核', en: 'Kernel' },
18+
[ProjectCategory.Firmware]: { zh: '固件', en: 'Firmware' },
19+
[ProjectCategory.BuildScripts]: { zh: '构建脚本', en: 'Build Scripts' },
20+
[ProjectCategory.Documentation]: { zh: '文档', en: 'Documentation' },
21+
[ProjectCategory.Electron]: { zh: 'Electron', en: 'Electron' },
22+
[ProjectCategory.Benchmark]: { zh: '基准测试', en: 'Benchmark' },
23+
[ProjectCategory.Uncategorized]: { zh: '未分类', en: 'Uncategorized' },
2424
};

0 commit comments

Comments
 (0)