Added category bubbling

readme.md

@@ -88,7 +88,7 @@ services:
 			- HEADER=true # defaults to true, set to false to hide the title and logo
 			- HEADERLINE=true # defaults to true, set to false to turn off the header border line
 			- CATEGORIES=small # defaults to normal, set to small for smaller, uppercase category labels
-			- BGCOLOR=#fff # defaults to #f8fafc, set to any hex color or Tailwind color using the theme syntax (e.g. BGCOLOR=theme(colors.sky.100) for bg-sky-100)
+			- BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax (e.g. BGCOLOR=theme(colors.sky.100) for bg-sky-100)
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional
@@ -103,6 +103,7 @@ services:
 Can have as many categories as you like.
 
 -   **category**: Title, optional, displays above services
+-   **bubble**: boolean, optional, defaults to false, shows a bubble around category
 -   **services**: Array of services
 
 ## Service
@@ -118,6 +119,7 @@ Can have as many categories as you like.
 [
 	{
 		"category": "Category name",
+		"bubble": false,
 		"services": [
 			{
 				"name": "My App",
@@ -159,6 +161,7 @@ Can have as many categories as you like.
 	},
 	{
 		"category": "Devices",
+		"bubble": true,
 		"services": [
 			{
 				"name": "Router",

src/components/service-catalogs.tsx

@@ -7,7 +7,22 @@ interface IProps {
 	catalogs: IServiceCatalog[];
 }
 
-export const ServiceCatalogs: React.FunctionComponent<IProps> = ({ catalogs }) => {
+export const ServiceCatalogList: React.FunctionComponent<IProps> = ({ catalogs }) => {
+	return (
+		<ul>
+			{catalogs.map((catalog, index) => (
+				<ServiceCatalog key={index} catalog={catalog} index={index} />
+			))}
+		</ul>
+	);
+};
+
+interface ICatalogProps {
+	catalog: IServiceCatalog;
+	index: number;
+}
+
+const ServiceCatalog: React.FunctionComponent<ICatalogProps> = ({ catalog, index }) => {
 	let categoryClassName = "";
 
 	switch (CATEGORIES as string) {
@@ -20,14 +35,16 @@ export const ServiceCatalogs: React.FunctionComponent<IProps> = ({ catalogs }) =
 			break;
 	}
 
+	let liClassName = "mt-12 first:mt-0 xl:first:mt-6";
+
+	if (catalog.bubble) {
+		liClassName += " bg-white rounded-2xl px-6 py-8 ring-1 ring-slate-900/5 shadow-xl";
+	}
+
 	return (
-		<ul>
-			{catalogs.map((catalog, index) => (
-				<li key={index} className="mt-12 first:mt-0 xl:first:mt-6">
-					<h2 className={categoryClassName}>{catalog.category}</h2>
-					<Services services={catalog.services} />
-				</li>
-			))}
-		</ul>
+		<li key={index} className={liClassName}>
+			<h2 className={categoryClassName}>{catalog.category}</h2>
+			<Services services={catalog.services} />
+		</li>
 	);
 };

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Header } from "../components/header";
-import { ServiceCatalogs } from "../components/service-catalogs";
+import { ServiceCatalogList } from "../components/service-catalogs";
 import userServices from "../config.json";
 import { IServiceCatalog } from "../shared/types";
 import { SHOWHEADER, SHOWHEADERLINE } from "../variables";
@@ -20,14 +20,14 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col xl:flex-row">
+		<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
 			{SHOWHEADER && (
 				<div className={headerClassName}>
 					<Header title={title} icon={icon} />
 				</div>
 			)}
 			<div className="min-h-screen p-4 flex-grow">
-				<ServiceCatalogs catalogs={mySerices} />
+				<ServiceCatalogList catalogs={mySerices} />
 			</div>
 		</div>
 	);

src/shared/types.ts

@@ -1,5 +1,6 @@
 export interface IServiceCatalog {
 	category: string;
+	bubble?: boolean;
 	services: IService[];
 }
 

src/tailwind.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 html {
-	background-color: #f8fafc;
+	background-color: theme(colors.slate.50);
 }
 
 body {