Skip to content

Commit 984eeed

Browse files
BramSuurdjeBramSuurdje
authored
Enhance category metadata in JSON and update script accordion to display icons. Added 'icon' property to categories in metadata.json and modified script-accordion component to render corresponding icons for each category. (#7894)
1 parent 7fd08cb commit 984eeed

File tree

3 files changed

+208
-37
lines changed

3 files changed

+208
-37
lines changed

‎frontend/public/json/metadata.json‎

Lines changed: 184 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,186 @@
11
{
2-
"categories": [
3-
{ "name": "Proxmox & Virtualization", "id": 1, "sort_order": 1.0, "description": "Tools and scripts to manage Proxmox VE and virtualization platforms effectively." },
4-
{ "name": "Operating Systems", "id": 2, "sort_order": 2.0, "description": "Scripts for deploying and managing various operating systems." },
5-
{ "name": "Containers & Docker", "id": 3, "sort_order": 3.0, "description": "Solutions for containerization using Docker and related technologies." },
6-
{ "name": "Network & Firewall", "id": 4, "sort_order": 4.0, "description": "Enhance network security and configure firewalls with ease." },
7-
{ "name": "Adblock & DNS", "id": 5, "sort_order": 5.0, "description": "Optimize your network with DNS and ad-blocking solutions." },
8-
{ "name": "Authentication & Security", "id": 6, "sort_order": 6.0, "description": "Secure your infrastructure with authentication and security tools." },
9-
{ "name": "Backup & Recovery", "id": 7, "sort_order": 7.0, "description": "Reliable backup and recovery scripts to protect your data." },
10-
{ "name": "Databases", "id": 8, "sort_order": 8.0, "description": "Deploy and manage robust database systems with ease." },
11-
{ "name": "Monitoring & Analytics", "id": 9, "sort_order": 9.0, "description": "Monitor system performance and analyze data seamlessly." },
12-
{ "name": "Dashboards & Frontends", "id": 10, "sort_order": 10.0, "description": "Create interactive dashboards and user-friendly frontends." },
13-
{ "name": "Files & Downloads", "id": 11, "sort_order": 11.0, "description": "Manage file sharing and downloading solutions efficiently." },
14-
{ "name": "Documents & Notes", "id": 12, "sort_order": 12.0, "description": "Organize and manage documents and note-taking tools." },
15-
{ "name": "Media & Streaming", "id": 13, "sort_order": 13.0, "description": "Stream and manage media effortlessly across devices." },
16-
{ "name": "*Arr Suite", "id": 14, "sort_order": 14.0, "description": "Automated media management with the popular *Arr suite tools." },
17-
{ "name": "NVR & Cameras", "id": 15, "sort_order": 15.0, "description": "Manage network video recorders and camera setups." },
18-
{ "name": "IoT & Smart Home", "id": 16, "sort_order": 16.0, "description": "Control and automate IoT devices and smart home systems." },
19-
{ "name": "ZigBee, Z-Wave & Matter", "id": 17, "sort_order": 17.0, "description": "Solutions for ZigBee, Z-Wave, and Matter-based device management." },
20-
{ "name": "MQTT & Messaging", "id": 18, "sort_order": 18.0, "description": "Set up reliable messaging and MQTT-based communication systems." },
21-
{ "name": "Automation & Scheduling", "id": 19, "sort_order": 19.0, "description": "Automate tasks and manage scheduling with powerful tools." },
22-
{ "name": "AI / Coding & Dev-Tools", "id": 20, "sort_order": 20.0, "description": "Leverage AI and developer tools for smarter coding workflows." },
23-
{ "name": "Webservers & Proxies", "id": 21, "sort_order": 21.0, "description": "Deploy and configure web servers and proxy solutions." },
24-
{ "name": "Bots & ChatOps", "id": 22, "sort_order": 22.0, "description": "Enhance collaboration with bots and ChatOps integrations." },
25-
{ "name": "Finance & Budgeting", "id": 23, "sort_order": 23.0, "description": "Track expenses and manage budgets efficiently." },
26-
{ "name": "Gaming & Leisure", "id": 24, "sort_order": 24.0, "description": "Scripts for gaming servers and leisure-related tools." },
27-
{ "name": "Business & ERP", "id": 25, "sort_order": 25.0, "description": "Streamline business operations with ERP and management tools." },
28-
{ "name": "Miscellaneous", "id": 0, "sort_order": 99.0, "description": "General scripts and tools that don't fit into other categories." }
29-
]
2+
"categories": [
3+
{
4+
"name": "Proxmox & Virtualization",
5+
"id": 1,
6+
"sort_order": 1.0,
7+
"description": "Tools and scripts to manage Proxmox VE and virtualization platforms effectively.",
8+
"icon": "server"
9+
},
10+
{
11+
"name": "Operating Systems",
12+
"id": 2,
13+
"sort_order": 2.0,
14+
"description": "Scripts for deploying and managing various operating systems.",
15+
"icon": "monitor"
16+
},
17+
{
18+
"name": "Containers & Docker",
19+
"id": 3,
20+
"sort_order": 3.0,
21+
"description": "Solutions for containerization using Docker and related technologies.",
22+
"icon": "box"
23+
},
24+
{
25+
"name": "Network & Firewall",
26+
"id": 4,
27+
"sort_order": 4.0,
28+
"description": "Enhance network security and configure firewalls with ease.",
29+
"icon": "shield"
30+
},
31+
{
32+
"name": "Adblock & DNS",
33+
"id": 5,
34+
"sort_order": 5.0,
35+
"description": "Optimize your network with DNS and ad-blocking solutions.",
36+
"icon": "ban"
37+
},
38+
{
39+
"name": "Authentication & Security",
40+
"id": 6,
41+
"sort_order": 6.0,
42+
"description": "Secure your infrastructure with authentication and security tools.",
43+
"icon": "lock"
44+
},
45+
{
46+
"name": "Backup & Recovery",
47+
"id": 7,
48+
"sort_order": 7.0,
49+
"description": "Reliable backup and recovery scripts to protect your data.",
50+
"icon": "archive"
51+
},
52+
{
53+
"name": "Databases",
54+
"id": 8,
55+
"sort_order": 8.0,
56+
"description": "Deploy and manage robust database systems with ease.",
57+
"icon": "database"
58+
},
59+
{
60+
"name": "Monitoring & Analytics",
61+
"id": 9,
62+
"sort_order": 9.0,
63+
"description": "Monitor system performance and analyze data seamlessly.",
64+
"icon": "bar-chart"
65+
},
66+
{
67+
"name": "Dashboards & Frontends",
68+
"id": 10,
69+
"sort_order": 10.0,
70+
"description": "Create interactive dashboards and user-friendly frontends.",
71+
"icon": "layout"
72+
},
73+
{
74+
"name": "Files & Downloads",
75+
"id": 11,
76+
"sort_order": 11.0,
77+
"description": "Manage file sharing and downloading solutions efficiently.",
78+
"icon": "download"
79+
},
80+
{
81+
"name": "Documents & Notes",
82+
"id": 12,
83+
"sort_order": 12.0,
84+
"description": "Organize and manage documents and note-taking tools.",
85+
"icon": "file-text"
86+
},
87+
{
88+
"name": "Media & Streaming",
89+
"id": 13,
90+
"sort_order": 13.0,
91+
"description": "Stream and manage media effortlessly across devices.",
92+
"icon": "play"
93+
},
94+
{
95+
"name": "*Arr Suite",
96+
"id": 14,
97+
"sort_order": 14.0,
98+
"description": "Automated media management with the popular *Arr suite tools.",
99+
"icon": "tv"
100+
},
101+
{
102+
"name": "NVR & Cameras",
103+
"id": 15,
104+
"sort_order": 15.0,
105+
"description": "Manage network video recorders and camera setups.",
106+
"icon": "camera"
107+
},
108+
{
109+
"name": "IoT & Smart Home",
110+
"id": 16,
111+
"sort_order": 16.0,
112+
"description": "Control and automate IoT devices and smart home systems.",
113+
"icon": "home"
114+
},
115+
{
116+
"name": "ZigBee, Z-Wave & Matter",
117+
"id": 17,
118+
"sort_order": 17.0,
119+
"description": "Solutions for ZigBee, Z-Wave, and Matter-based device management.",
120+
"icon": "radio"
121+
},
122+
{
123+
"name": "MQTT & Messaging",
124+
"id": 18,
125+
"sort_order": 18.0,
126+
"description": "Set up reliable messaging and MQTT-based communication systems.",
127+
"icon": "message-circle"
128+
},
129+
{
130+
"name": "Automation & Scheduling",
131+
"id": 19,
132+
"sort_order": 19.0,
133+
"description": "Automate tasks and manage scheduling with powerful tools.",
134+
"icon": "clock"
135+
},
136+
{
137+
"name": "AI / Coding & Dev-Tools",
138+
"id": 20,
139+
"sort_order": 20.0,
140+
"description": "Leverage AI and developer tools for smarter coding workflows.",
141+
"icon": "code"
142+
},
143+
{
144+
"name": "Webservers & Proxies",
145+
"id": 21,
146+
"sort_order": 21.0,
147+
"description": "Deploy and configure web servers and proxy solutions.",
148+
"icon": "globe"
149+
},
150+
{
151+
"name": "Bots & ChatOps",
152+
"id": 22,
153+
"sort_order": 22.0,
154+
"description": "Enhance collaboration with bots and ChatOps integrations.",
155+
"icon": "bot"
156+
},
157+
{
158+
"name": "Finance & Budgeting",
159+
"id": 23,
160+
"sort_order": 23.0,
161+
"description": "Track expenses and manage budgets efficiently.",
162+
"icon": "dollar-sign"
163+
},
164+
{
165+
"name": "Gaming & Leisure",
166+
"id": 24,
167+
"sort_order": 24.0,
168+
"description": "Scripts for gaming servers and leisure-related tools.",
169+
"icon": "gamepad-2"
170+
},
171+
{
172+
"name": "Business & ERP",
173+
"id": 25,
174+
"sort_order": 25.0,
175+
"description": "Streamline business operations with ERP and management tools.",
176+
"icon": "building"
177+
},
178+
{
179+
"name": "Miscellaneous",
180+
"id": 0,
181+
"sort_order": 99.0,
182+
"description": "General scripts and tools that don't fit into other categories.",
183+
"icon": "more-horizontal"
184+
}
185+
]
30186
}
31-

‎frontend/src/app/scripts/_components/script-accordion.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useCallback, useEffect, useRef, useState } from "react";
2+
import * as Icons from "lucide-react";
23
import Image from "next/image";
34
import Link from "next/link";
45

@@ -9,6 +10,17 @@ import { formattedBadge } from "@/components/command-menu";
910
import { basePath } from "@/config/site-config";
1011
import { cn } from "@/lib/utils";
1112

13+
function getCategoryIcon(iconName: string) {
14+
// Convert kebab-case to PascalCase for Lucide icon names
15+
const pascalCaseName = iconName
16+
.split("-")
17+
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
18+
.join("");
19+
20+
const IconComponent = (Icons as any)[pascalCaseName];
21+
return IconComponent ? <IconComponent className="size-4 text-[#0083c3] mr-2" /> : null;
22+
}
23+
1224
export default function ScriptAccordion({
1325
items,
1426
selectedScript,
@@ -81,10 +93,13 @@ export default function ScriptAccordion({
8193
)}
8294
>
8395
<div className="mr-2 flex w-full items-center justify-between">
84-
<span className="pl-2 text-left">
85-
{category.name}
86-
{" "}
87-
</span>
96+
<div className="flex items-center pl-2 text-left">
97+
{getCategoryIcon(category.icon)}
98+
<span>
99+
{category.name}
100+
{" "}
101+
</span>
102+
</div>
88103
<span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
89104
{category.scripts.length}
90105
</span>
@@ -103,10 +118,9 @@ export default function ScriptAccordion({
103118
query: { id: script.slug, category: category.name },
104119
}}
105120
prefetch={false}
106-
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
107-
selectedScript === script.slug
108-
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
109-
: ""
121+
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${selectedScript === script.slug
122+
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
123+
: ""
110124
}`}
111125
onClick={() => {
112126
handleSelected(script.slug);

‎frontend/src/lib/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export type Category = {
4141
name: string;
4242
id: number;
4343
sort_order: number;
44+
description: string;
45+
icon: string;
4446
scripts: Script[];
4547
};
4648

0 commit comments

Comments
 (0)