Added background color themeing

Added smaller category titles option

docker-entrypoint.sh

@@ -10,5 +10,10 @@ sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/index.html
 sed -i -e 's/(PAGETITLE = ")My Website(")/'"$1${TITLE}$2"'/g' /app/src/variables.ts
 sed -i -e 's/(PAGEICON = ")\/logo\.png(")/'"$1${LOGO}$2"'/g' /app/src/variables.ts
 sed -i -e 's/(SHOWHEADER = )false/'"$1${HEADER}"'/g' /app/src/variables.ts
+sed -i -e 's/(CATEGORIES = ")normal(")/'"$1${CATEGORIES}$2"'/g' /app/src/variables.ts
+
+# CSS replacement
+sed -i -e 's/(background-color: )#f8fafc/'"$1${BGCOLOR}"'/g' /app/src/tailwind.css
+ #f8fafc
 
 exec "$@"

dockerfile

@@ -12,6 +12,8 @@ ENV NODE_ENV production
 ENV TITLE "My Website"
 ENV LOGO "/logo.png"
 ENV HEADER "true"
+ENV CATEGORIES "normal"
+ENV BGCOLOR "#f8fafc"
 
 EXPOSE 4173
 

readme.md

@@ -66,9 +66,12 @@ Use any [Material Design icon](https://icon-sets.iconify.design/mdi/) by prefixi
 
 Fill the icon by providing an "iconColor" from the [list of Tailwind colors](https://tailwindcss.com/docs/background-color). Do not prefix with "bg-".
 
+Use "black" or "white" for those colors.
+
 ```bash
 # Specify an icon in config.json
-"icon": "mdi-cloud"
+"icon": "mdi-cloud",
+"iconColor": "black"
 ```
 
 # Docker compose
@@ -80,9 +83,11 @@ services:
         ports:
             - 4173:4173
         environment:
-            - TITLE=Starbase 80 # defaults to "My Website"
+            - TITLE=Starbase 80 # defaults to "My Website", set to TITLE= to hide the title
-            - LOGO=/starbase80.jpg # defaults to /logo.png
+            - LOGO=/starbase80.jpg # defaults to /logo.png, set to LOGO= to hide the logo
-			- HEADER=true # defaults to true, set to false to hide the header (title and logo)
+			- HEADER=true # defaults to true, set to false to hide the title and logo
+			- 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)
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional

src/components/service-catalogs.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { IServiceCatalog } from "../shared/types";
+import { CATEGORIES } from "../variables";
 import { Services } from "./services";
 
 interface IProps {
@@ -7,11 +8,23 @@ interface IProps {
 }
 
 export const ServiceCatalogs: React.FunctionComponent<IProps> = ({ catalogs }) => {
+	let categoryClassName = "";
+
+	switch (CATEGORIES as string) {
+		case "small":
+			categoryClassName = "text-sm text-slate-800 font-semibold py px-4 uppercase";
+			break;
+		case "normal":
+		default:
+			categoryClassName = "text-2xl text-slate-600 font-light py-2 px-4";
+			break;
+	}
+
 	return (
 		<ul>
 			{catalogs.map((catalog, index) => (
 				<li key={index} className="mt-12 first:mt-0 xl:first:mt-6">
-					<h2 className="text-2xl text-slate-600 font-light py-2 px-4">{catalog.category}</h2>
+					<h2 className={categoryClassName}>{catalog.category}</h2>
 					<Services services={catalog.services} />
 				</li>
 			))}

src/tailwind.css

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

src/variables.ts

@@ -1,3 +1,4 @@
 export const PAGETITLE = "My Website";
 export const PAGEICON = "/logo.png";
 export const SHOWHEADER = true;
+export const CATEGORIES = "normal";

tailwind.config.js

@@ -8,14 +8,11 @@ export default {
 				/bg-(black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
 		},
 		"bg-transparent",
+		"bg-black",
+		"bg-white",
 	],
 	theme: {
-		extend: {
+		extend: {},
-			colors: {
-				bg: "#f8fafc",
-				border: "#336699",
-			},
-		},
 	},
 	plugins: [],
 };