Skip to content

Commit 3eade13

Browse files
Add emojis to categories
1 parent a08da9e commit 3eade13

File tree

1 file changed

+95
-8
lines changed

1 file changed

+95
-8
lines changed

web/src/components/CategoryList.astro

Lines changed: 95 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,63 @@ const { itemsByCategory, what } = Astro.props;
1212
const categories = Object.keys(itemsByCategory);
1313
const slugify = (str: string) => str.replace(/\s+/g, '-');
1414
15+
const categoryEmojis: Record<string, string> = {
16+
Account: "👤",
17+
Admin: "🛡️",
18+
ACL: "🔐",
19+
Announcement: "📢",
20+
Audio: "🎧",
21+
Sound: "🔊",
22+
Blip: "📍",
23+
Browser: "🌐",
24+
Building: "🏢",
25+
Camera: "📷",
26+
"Clothes and body": "🧍",
27+
Ped: "🚶",
28+
Colshape: "🔲",
29+
Cursor: "🖱️",
30+
Database: "🗄️",
31+
Discord: "💬",
32+
Drawing: "🎨",
33+
Effects: "",
34+
Event: "🎉",
35+
Explosion: "💥",
36+
File: "📄",
37+
Fire: "🔥",
38+
Engine: "⚙️",
39+
Element: "🧩",
40+
HTTP: "🔗",
41+
Light: "💡",
42+
Input: "⌨️",
43+
Map: "🗺️",
44+
GUI: "🖥️",
45+
Module: "📦",
46+
Marker: "📌",
47+
Matrix: "🧮",
48+
Object: "📦",
49+
Output: "📤",
50+
Path: "🛣️",
51+
Pickup: "🎁",
52+
Projectile: "🎯",
53+
Player: "🧑‍💻",
54+
"Radar area": "📡",
55+
Resource: "🪵",
56+
Server: "🖧",
57+
Searchlight: "🔦",
58+
"Settings registry": "⚙️",
59+
SVG: "🖼️",
60+
Team: "👥",
61+
"UTF8 Library": "🔤",
62+
Text: "📝",
63+
Utility: "🛠️",
64+
Water: "💧",
65+
Weapon: "🔫",
66+
"Weapon creation": "🛠️",
67+
XML: "📃",
68+
Vehicle: "🚗",
69+
World: "🌍"
70+
};
71+
1572
function displayTitle(title: string) {
1673
switch (what) {
1774
case 'all_functions':
@@ -46,17 +103,25 @@ function displayItem(item: any) {
46103
}
47104
return '?';
48105
}
106+
function displayCategory(category: string) {
107+
// Add emoji if available
108+
if (categoryEmojis[category]) {
109+
return `${categoryEmojis[category]} ${category}`;
110+
}
111+
return category;
112+
}
49113
---
50114

51115
<section data-pagefind-ignore>
52-
<nav>
53-
<h5>Table of Contents</h5>
54-
<ol>
55-
{categories.map(category => (
56-
<li><a href={`#${slugify(category)}`}>{category}</a></li>
57-
))}
58-
</ol>
59-
</nav>
116+
<h5>Table of Contents</h5>
117+
<div class="mtatoc-list">
118+
{categories.map(category => (
119+
<div class="mtatoc-item">
120+
<a href={`#${slugify(category)}`}>{displayCategory(category)}</a>
121+
</div>
122+
))}
123+
</div>
124+
60125

61126
{Object.entries(itemsByCategory).map(([category, items]) => (
62127
<section id={slugify(category)}>
@@ -78,4 +143,26 @@ function displayItem(item: any) {
78143
vertical-align: center;
79144
cursor: pointer;
80145
}
146+
147+
.mtatoc-list {
148+
font-size: 1.1rem;
149+
display: flex;
150+
flex-wrap: wrap;
151+
gap: 0.5rem;
152+
}
153+
154+
.mtatoc-item {
155+
margin: 0;
156+
background-color: var(--sl-color-accent-low);
157+
border-radius: 0.5rem;
158+
}
159+
160+
.mtatoc-item a {
161+
display: inline-block;
162+
padding: 0.25rem 0.5rem;
163+
text-decoration: none;
164+
white-space: nowrap;
165+
color: var(--sl-color-white);
166+
}
167+
81168
</style>

0 commit comments

Comments
 (0)