Can toggle header

docker-entrypoint.sh

@@ -7,7 +7,8 @@ LOGO=${LOGO//\//\\/}
 sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/index.html
 
 # TypeScript replacement
-sed -i -e 's/PAGETITLE = "My Website"/'"${TITLE}"'/g' /app/src/variables.ts
-sed -i -e 's/PAGEICON = "\/logo\.png"/'"${LOGO}"'/g' /app/src/variables.ts
+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
 
 exec "$@"

dockerfile

@@ -11,6 +11,7 @@ ENV NODE_ENV production
 
 ENV TITLE "My Website"
 ENV LOGO "/logo.png"
+ENV HEADER "true"
 
 EXPOSE 4173
 

readme.md

@@ -78,6 +78,7 @@ services:
         environment:
             - TITLE=Starbase 80 # defaults to "My Website"
             - LOGO=/starbase80.jpg # defaults to /logo.png
+			- HEADER=true # defaults to true, set to false to hide the header (title and logo)
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional

src/pages/index.tsx

@@ -3,6 +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";
 
 interface IProps {
 	title?: string;
@@ -14,9 +15,11 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 
 	return (
 		<div className="min-h-screen flex flex-col xl:flex-row">
-			<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">
-				<Header title={title} icon={icon} />
-			</div>
+			{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">
+					<Header title={title} icon={icon} />
+				</div>
+			)}
 			<div className="min-h-screen p-4 flex-grow">
 				<ServiceCatalogs catalogs={mySerices} />
 			</div>

src/variables.ts

@@ -1,2 +1,3 @@
 export const PAGETITLE = "My Website";
 export const PAGEICON = "/logo.png";
+export const SHOWHEADER = false;