Fix conditional rendering

src/components/header.ts

@@ -9,7 +9,10 @@ export const Header = function (props: IProps) {
 	const { icon, title } = props;
 	return `
 		<div class="p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap">
-			${!is.null(icon) && `<img src="${icon}" alt="${title || ""}" class="inline-block w-16 h-16" />`}
+			${!is.null(icon) ? 
+				(`<img src="${icon}" alt="${title || ""}" class="inline-block w-16 h-16" />`) :
+				``
+			}
 			<h1>${title}</h1>
 		</div>
 	`;

src/components/services.ts

@@ -30,24 +30,24 @@ function Service(props: IServiceProps) {
 	return `
 		<li class="p-4 flex gap-4">
 			${
-				!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/pages/index.ts

@@ -49,12 +49,12 @@ export const IndexPage = function (props: IProps): string {
 		<div class="min-h-screen">
 			<div class="${pageWrapperClassName}">
 				${
-					SHOWHEADER &&
+					SHOWHEADER ?
 					`
 					<div class="${headerClassName}">
 					${Header({ icon, title })}
 					</div>
-				`
+				` : ``
 				}
 				<div class="${serviceCatalogListWrapperClassName}">
 				${ServiceCatalogList({ catalogs: myServices })}