Added header line option

docker-entrypoint.sh

@@ -9,7 +9,8 @@ sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/index.html
 # TypeScript replacement
 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/(SHOWHEADER = )true/'"$1${HEADER}"'/g' /app/src/variables.ts
+sed -i -e 's/(SHOWHEADERLINE = )true/'"$1${HEADERLINE}"'/g' /app/src/variables.ts
 sed -i -e 's/(CATEGORIES = ")normal(")/'"$1${CATEGORIES}$2"'/g' /app/src/variables.ts
 
 # CSS replacement

dockerfile

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

readme.md

@@ -86,6 +86,7 @@ services:
             - TITLE=Starbase 80 # defaults to "My Website", set to TITLE= to hide the title
             - 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 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)
         volumes:

src/pages/index.tsx

@@ -3,7 +3,7 @@ import { Header } from "../components/header";
 import { ServiceCatalogs } from "../components/service-catalogs";
 import userServices from "../config.json";
 import { IServiceCatalog } from "../shared/types";
-import { SHOWHEADER } from "../variables";
+import { SHOWHEADER, SHOWHEADERLINE } from "../variables";
 
 interface IProps {
 	title?: string;
@@ -13,10 +13,16 @@ interface IProps {
 export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 	const mySerices = userServices as IServiceCatalog[];
 
+	let headerClassName = "w-full xl:w-auto xl:max-w-xs xl:min-h-screen p-4";
+
+	if (SHOWHEADERLINE) {
+		headerClassName += "border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300";
+	}
+
 	return (
 		<div className="min-h-screen flex flex-col xl:flex-row">
 			{SHOWHEADER && (
-				<div className="w-full xl:w-auto xl:max-w-xs xl:min-h-screen border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300 p-4">
+				<div className={headerClassName}>
 					<Header title={title} icon={icon} />
 				</div>
 			)}

src/variables.ts

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