@@ -12,6 +12,63 @@ const { itemsByCategory, what } = Astro.props;
12
12
const categories = Object .keys (itemsByCategory );
13
13
const slugify = (str : string ) => str .replace (/ \s + / g , ' -' );
14
14
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
+
15
72
function displayTitle(title : string ) {
16
73
switch (what ) {
17
74
case ' all_functions' :
@@ -46,17 +103,25 @@ function displayItem(item: any) {
46
103
}
47
104
return ' ?' ;
48
105
}
106
+ function displayCategory(category : string ) {
107
+ // Add emoji if available
108
+ if (categoryEmojis [category ]) {
109
+ return ` ${categoryEmojis [category ]} ${category } ` ;
110
+ }
111
+ return category ;
112
+ }
49
113
---
50
114
51
115
<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
+
60
125
61
126
{ Object .entries (itemsByCategory ).map (([category , items ]) => (
62
127
<section id = { slugify (category )} >
@@ -78,4 +143,26 @@ function displayItem(item: any) {
78
143
vertical-align: center;
79
144
cursor: pointer;
80
145
}
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
+
81
168
</style >
0 commit comments