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)

This commit is contained in:
Bram Suurd
2025-09-25 10:49:12 +02:00
committed by GitHub
parent 7fd08cbe69
commit 984eeedf31
3 changed files with 208 additions and 37 deletions

View File

@@ -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"
}
]
}

View File

@@ -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 ? <IconComponent className="size-4 text-[#0083c3] mr-2" /> : null;
}
export default function ScriptAccordion({
items,
selectedScript,
@@ -81,10 +93,13 @@ export default function ScriptAccordion({
)}
>
<div className="mr-2 flex w-full items-center justify-between">
<span className="pl-2 text-left">
{category.name}
{" "}
</span>
<div className="flex items-center pl-2 text-left">
{getCategoryIcon(category.icon)}
<span>
{category.name}
{" "}
</span>
</div>
<span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
{category.scripts.length}
</span>
@@ -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);

View File

@@ -41,6 +41,8 @@ export type Category = {
name: string;
id: number;
sort_order: number;
description: string;
icon: string;
scripts: Script[];
};