diff --git a/frontend/public/json/metadata.json b/frontend/public/json/metadata.json index 16c71220d..4973b8db2 100644 --- a/frontend/public/json/metadata.json +++ b/frontend/public/json/metadata.json @@ -1,31 +1,186 @@ { - "categories": [ - { "name": "Proxmox & Virtualization", "id": 1, "sort_order": 1.0, "description": "Tools and scripts to manage Proxmox VE and virtualization platforms effectively." }, - { "name": "Operating Systems", "id": 2, "sort_order": 2.0, "description": "Scripts for deploying and managing various operating systems." }, - { "name": "Containers & Docker", "id": 3, "sort_order": 3.0, "description": "Solutions for containerization using Docker and related technologies." }, - { "name": "Network & Firewall", "id": 4, "sort_order": 4.0, "description": "Enhance network security and configure firewalls with ease." }, - { "name": "Adblock & DNS", "id": 5, "sort_order": 5.0, "description": "Optimize your network with DNS and ad-blocking solutions." }, - { "name": "Authentication & Security", "id": 6, "sort_order": 6.0, "description": "Secure your infrastructure with authentication and security tools." }, - { "name": "Backup & Recovery", "id": 7, "sort_order": 7.0, "description": "Reliable backup and recovery scripts to protect your data." }, - { "name": "Databases", "id": 8, "sort_order": 8.0, "description": "Deploy and manage robust database systems with ease." }, - { "name": "Monitoring & Analytics", "id": 9, "sort_order": 9.0, "description": "Monitor system performance and analyze data seamlessly." }, - { "name": "Dashboards & Frontends", "id": 10, "sort_order": 10.0, "description": "Create interactive dashboards and user-friendly frontends." }, - { "name": "Files & Downloads", "id": 11, "sort_order": 11.0, "description": "Manage file sharing and downloading solutions efficiently." }, - { "name": "Documents & Notes", "id": 12, "sort_order": 12.0, "description": "Organize and manage documents and note-taking tools." }, - { "name": "Media & Streaming", "id": 13, "sort_order": 13.0, "description": "Stream and manage media effortlessly across devices." }, - { "name": "*Arr Suite", "id": 14, "sort_order": 14.0, "description": "Automated media management with the popular *Arr suite tools." }, - { "name": "NVR & Cameras", "id": 15, "sort_order": 15.0, "description": "Manage network video recorders and camera setups." }, - { "name": "IoT & Smart Home", "id": 16, "sort_order": 16.0, "description": "Control and automate IoT devices and smart home systems." }, - { "name": "ZigBee, Z-Wave & Matter", "id": 17, "sort_order": 17.0, "description": "Solutions for ZigBee, Z-Wave, and Matter-based device management." }, - { "name": "MQTT & Messaging", "id": 18, "sort_order": 18.0, "description": "Set up reliable messaging and MQTT-based communication systems." }, - { "name": "Automation & Scheduling", "id": 19, "sort_order": 19.0, "description": "Automate tasks and manage scheduling with powerful tools." }, - { "name": "AI / Coding & Dev-Tools", "id": 20, "sort_order": 20.0, "description": "Leverage AI and developer tools for smarter coding workflows." }, - { "name": "Webservers & Proxies", "id": 21, "sort_order": 21.0, "description": "Deploy and configure web servers and proxy solutions." }, - { "name": "Bots & ChatOps", "id": 22, "sort_order": 22.0, "description": "Enhance collaboration with bots and ChatOps integrations." }, - { "name": "Finance & Budgeting", "id": 23, "sort_order": 23.0, "description": "Track expenses and manage budgets efficiently." }, - { "name": "Gaming & Leisure", "id": 24, "sort_order": 24.0, "description": "Scripts for gaming servers and leisure-related tools." }, - { "name": "Business & ERP", "id": 25, "sort_order": 25.0, "description": "Streamline business operations with ERP and management tools." }, - { "name": "Miscellaneous", "id": 0, "sort_order": 99.0, "description": "General scripts and tools that don't fit into other categories." } - ] + "categories": [ + { + "name": "Proxmox & Virtualization", + "id": 1, + "sort_order": 1.0, + "description": "Tools and scripts to manage Proxmox VE and virtualization platforms effectively.", + "icon": "server" + }, + { + "name": "Operating Systems", + "id": 2, + "sort_order": 2.0, + "description": "Scripts for deploying and managing various operating systems.", + "icon": "monitor" + }, + { + "name": "Containers & Docker", + "id": 3, + "sort_order": 3.0, + "description": "Solutions for containerization using Docker and related technologies.", + "icon": "box" + }, + { + "name": "Network & Firewall", + "id": 4, + "sort_order": 4.0, + "description": "Enhance network security and configure firewalls with ease.", + "icon": "shield" + }, + { + "name": "Adblock & DNS", + "id": 5, + "sort_order": 5.0, + "description": "Optimize your network with DNS and ad-blocking solutions.", + "icon": "ban" + }, + { + "name": "Authentication & Security", + "id": 6, + "sort_order": 6.0, + "description": "Secure your infrastructure with authentication and security tools.", + "icon": "lock" + }, + { + "name": "Backup & Recovery", + "id": 7, + "sort_order": 7.0, + "description": "Reliable backup and recovery scripts to protect your data.", + "icon": "archive" + }, + { + "name": "Databases", + "id": 8, + "sort_order": 8.0, + "description": "Deploy and manage robust database systems with ease.", + "icon": "database" + }, + { + "name": "Monitoring & Analytics", + "id": 9, + "sort_order": 9.0, + "description": "Monitor system performance and analyze data seamlessly.", + "icon": "bar-chart" + }, + { + "name": "Dashboards & Frontends", + "id": 10, + "sort_order": 10.0, + "description": "Create interactive dashboards and user-friendly frontends.", + "icon": "layout" + }, + { + "name": "Files & Downloads", + "id": 11, + "sort_order": 11.0, + "description": "Manage file sharing and downloading solutions efficiently.", + "icon": "download" + }, + { + "name": "Documents & Notes", + "id": 12, + "sort_order": 12.0, + "description": "Organize and manage documents and note-taking tools.", + "icon": "file-text" + }, + { + "name": "Media & Streaming", + "id": 13, + "sort_order": 13.0, + "description": "Stream and manage media effortlessly across devices.", + "icon": "play" + }, + { + "name": "*Arr Suite", + "id": 14, + "sort_order": 14.0, + "description": "Automated media management with the popular *Arr suite tools.", + "icon": "tv" + }, + { + "name": "NVR & Cameras", + "id": 15, + "sort_order": 15.0, + "description": "Manage network video recorders and camera setups.", + "icon": "camera" + }, + { + "name": "IoT & Smart Home", + "id": 16, + "sort_order": 16.0, + "description": "Control and automate IoT devices and smart home systems.", + "icon": "home" + }, + { + "name": "ZigBee, Z-Wave & Matter", + "id": 17, + "sort_order": 17.0, + "description": "Solutions for ZigBee, Z-Wave, and Matter-based device management.", + "icon": "radio" + }, + { + "name": "MQTT & Messaging", + "id": 18, + "sort_order": 18.0, + "description": "Set up reliable messaging and MQTT-based communication systems.", + "icon": "message-circle" + }, + { + "name": "Automation & Scheduling", + "id": 19, + "sort_order": 19.0, + "description": "Automate tasks and manage scheduling with powerful tools.", + "icon": "clock" + }, + { + "name": "AI / Coding & Dev-Tools", + "id": 20, + "sort_order": 20.0, + "description": "Leverage AI and developer tools for smarter coding workflows.", + "icon": "code" + }, + { + "name": "Webservers & Proxies", + "id": 21, + "sort_order": 21.0, + "description": "Deploy and configure web servers and proxy solutions.", + "icon": "globe" + }, + { + "name": "Bots & ChatOps", + "id": 22, + "sort_order": 22.0, + "description": "Enhance collaboration with bots and ChatOps integrations.", + "icon": "bot" + }, + { + "name": "Finance & Budgeting", + "id": 23, + "sort_order": 23.0, + "description": "Track expenses and manage budgets efficiently.", + "icon": "dollar-sign" + }, + { + "name": "Gaming & Leisure", + "id": 24, + "sort_order": 24.0, + "description": "Scripts for gaming servers and leisure-related tools.", + "icon": "gamepad-2" + }, + { + "name": "Business & ERP", + "id": 25, + "sort_order": 25.0, + "description": "Streamline business operations with ERP and management tools.", + "icon": "building" + }, + { + "name": "Miscellaneous", + "id": 0, + "sort_order": 99.0, + "description": "General scripts and tools that don't fit into other categories.", + "icon": "more-horizontal" + } + ] } - diff --git a/frontend/src/app/scripts/_components/script-accordion.tsx b/frontend/src/app/scripts/_components/script-accordion.tsx index 0730efcaf..8432c89c7 100644 --- a/frontend/src/app/scripts/_components/script-accordion.tsx +++ b/frontend/src/app/scripts/_components/script-accordion.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; +import * as Icons from "lucide-react"; import Image from "next/image"; import Link from "next/link"; @@ -9,6 +10,17 @@ import { formattedBadge } from "@/components/command-menu"; import { basePath } from "@/config/site-config"; import { cn } from "@/lib/utils"; +function getCategoryIcon(iconName: string) { + // Convert kebab-case to PascalCase for Lucide icon names + const pascalCaseName = iconName + .split("-") + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(""); + + const IconComponent = (Icons as any)[pascalCaseName]; + return IconComponent ? : null; +} + export default function ScriptAccordion({ items, selectedScript, @@ -81,10 +93,13 @@ export default function ScriptAccordion({ )} >
- - {category.name} - {" "} - +
+ {getCategoryIcon(category.icon)} + + {category.name} + {" "} + +
{category.scripts.length} @@ -103,10 +118,9 @@ export default function ScriptAccordion({ query: { id: script.slug, category: category.name }, }} prefetch={false} - 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 - ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white" - : "" + 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 + ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white" + : "" }`} onClick={() => { handleSelected(script.slug); diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index d1ce8720d..7dc855009 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -41,6 +41,8 @@ export type Category = { name: string; id: number; sort_order: number; + description: string; + icon: string; scripts: Script[]; };