Added category and service tagging

Added users and groups to the config fields

src/components/service-catalogs.ts

@@ -43,7 +43,7 @@ const ServiceCatalog = function (props: ICatalogProps) {
 	}
 
 	return `
-		<li class="${liClassName}">
+		<li class="category ${liClassName}">
 			<h2 class="${categoryClassName}">${catalog.category}</h2>
 			${Services({ services: catalog.services })}
 		</li>

src/components/services.ts

@@ -25,29 +25,32 @@ interface IServiceProps {
 function Service(props: IServiceProps) {
 	const { service, index } = props;
 
-	const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service;
+	const { name, uri, users, groups, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } =
+		service;
 
 	return `
-		<li class="p-4 flex gap-4">
+		<li class="p-4 flex gap-4" ${!is.null(groups) ? `groups="${groups}"` : ``} ${!is.null(users) ? `users="${users}"` : ``}>
 			${
-				!is.null(icon) ?
-				`
+				!is.null(icon)
+					? `
 				<span class="flex-shrink-0 flex">
 				${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })}
 				</span>
-			` : ``
+			`
+					: ``
 			}
 			<div>
 				<h3 class="text-lg mt-1 font-semibold line-clamp-1">
 					${Anchor({ uri, newWindow, children: name })}
 				</h3>
 				${
-					!is.null(description) ?
-					`
+					!is.null(description)
+						? `
 					<p class="text-sm text-black/50 dark:text-white/50 line-clamp-1">
 					${Anchor({ uri, newWindow, children: description })}
 					</p>
-				` : ``
+				`
+						: ``
 				}
 			</div>
 		</li>

src/shared/types.ts

@@ -8,6 +8,8 @@ export interface IService {
 	name: string;
 	uri: string;
 
+	users?: string;
+	groups?: string;
 	description?: string;
 	icon?: string;
 	iconColor?: string;