Working on page component

src/components/header.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var is_1 = require("../shared/is");
+var Header = function (_a) {
+    var icon = _a.icon, title = _a.title;
+    return "\n\t\t<div className=\"p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap\">\n\t\t\t".concat(!is_1.is.null(icon) && "<img src={icon} alt={title} className=\"inline-block w-16 h-16\" />", "\n\t\t\t<h1>{title}</h1>\n\t\t</div>\n\t");
+};
+exports.Header = Header;

src/components/header.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { is } from "../shared/is";
 
 interface IProps {
@@ -6,11 +5,11 @@ interface IProps {
 	icon?: string;
 }
 
-export const Header: React.FunctionComponent<IProps> = ({ icon, title }) => {
+export const Header = function ({ icon, title }) {
-	return (
+	return `
 		<div className="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} className="inline-block w-16 h-16" />}
+			${!is.null(icon) && `<img src={icon} alt={title} className="inline-block w-16 h-16" />`}
 			<h1>{title}</h1>
 		</div>
-	);
+	`;
 };

src/pages/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexPage = void 0;
+var header_1 = require("../components/header");
+var config_json_1 = require("../config.json");
+var config_json_2 = require("../config/config.json");
+var is_1 = require("../shared/is");
+var variables_1 = require("../variables");
+var IndexPage = function (props) {
+    var icon = props.icon, title = props.title;
+    var mySerices = (is_1.is.null(config_json_1.default) ? config_json_2.default : config_json_1.default);
+    var headerClassName = "p-4";
+    if (variables_1.SHOWHEADERTOP) {
+        headerClassName += " w-full";
+    }
+    else {
+        headerClassName += " w-full xl:w-auto xl:max-w-xs xl:min-h-screen";
+    }
+    if (variables_1.SHOWHEADERLINE) {
+        headerClassName += "border-0 border-solid border-gray-300 dark:border-gray-700";
+        if (variables_1.SHOWHEADERTOP) {
+            headerClassName += " border-b";
+        }
+        else {
+            headerClassName += " border-b xl:border-r xl:border-b-0";
+        }
+    }
+    var pageWrapperClassName = "min-h-screen flex flex-col  max-w-screen-2xl mx-auto";
+    if (!variables_1.SHOWHEADERTOP) {
+        pageWrapperClassName += " xl:flex-row";
+    }
+    var serviceCatalogListWrapperClassName = "p-4 flex-grow";
+    if (!variables_1.SHOWHEADERTOP) {
+        serviceCatalogListWrapperClassName += " min-h-screen";
+    }
+    return "\n\t\t<div className=\"min-h-screen\">\n\t\t\t<div className=".concat(pageWrapperClassName, ">\n\t\t\t\t").concat(variables_1.SHOWHEADER &&
+        "\n\t\t\t\t\t<div className=".concat(headerClassName, ">\n\t\t\t\t\t").concat((0, header_1.Header)({ icon: icon, title: title }), "\n\t\t\t\t\t</div>\n\t\t\t\t"), "\n\t\t\t\t<div className=").concat(serviceCatalogListWrapperClassName, ">\n\t\t\t\t\t<ServiceCatalogList catalogs={mySerices} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t");
+};
+exports.IndexPage = IndexPage;

src/pages/index.ts

@@ -1,6 +1,4 @@
-import React from "react";
 import { Header } from "../components/header";
-import { ServiceCatalogList } from "../components/service-catalogs";
 import userServicesOld from "../config.json";
 import userServices from "../config/config.json";
 import { is } from "../shared/is";
@@ -12,7 +10,8 @@ interface IProps {
 	icon?: string;
 }
 
-export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
+export const IndexPage = function (props: IProps): string {
+	const { icon, title } = props;
 	const mySerices = (is.null(userServicesOld) ? userServices : userServicesOld) as IServiceCatalog[];
 
 	let headerClassName = "p-4";
@@ -45,18 +44,21 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 		serviceCatalogListWrapperClassName += " min-h-screen";
 	}
 
-	return (
+	return `
 		<div className="min-h-screen">
-			<div className={pageWrapperClassName}>
+			<div className=${pageWrapperClassName}>
-				{SHOWHEADER && (
+				${
-					<div className={headerClassName}>
+					SHOWHEADER &&
-						<Header title={title} icon={icon} />
+					`
+					<div className=${headerClassName}>
+					${Header({ icon, title })}
 					</div>
-				)}
+				`
-				<div className={serviceCatalogListWrapperClassName}>
+				}
+				<div className=${serviceCatalogListWrapperClassName}>
 					<ServiceCatalogList catalogs={mySerices} />
 				</div>
 			</div>
 		</div>
-	);
+	`;
 };

src/shared/is.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.is = void 0;
+function IsArray(data) {
+    if (data === null || typeof data === "undefined") {
+        return false;
+    }
+    return data.constructor === Array;
+}
+function IsNull(data) {
+    return (typeof data === "undefined" ||
+        data === null ||
+        (typeof data === "string" && data.length === 0) ||
+        (IsArray(data) && data.length === 0));
+}
+exports.is = {
+    null: IsNull,
+};

src/shared/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

src/static.js

@@ -38,6 +38,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var fs = require("fs/promises");
 var path = require("path");
+var index_1 = require("./pages/index");
+var variables_1 = require("./variables");
 var indexFilePath = path.join(__dirname, "../", "index.html");
 function writeIndexPage(contents) {
     return __awaiter(this, void 0, void 0, function () {
@@ -99,7 +101,7 @@ function start() {
                 case 0: return [4 /*yield*/, readIndexPage()];
                 case 1:
                     index = _a.sent();
-                    newText = "<p>Hello, world!</p>";
+                    newText = (0, index_1.IndexPage)({ icon: variables_1.PAGEICON, title: variables_1.PAGETITLE });
                     rootDiv = '<div id="root"></div>';
                     rootDivReplacement = '<div id="root">$1</div>';
                     newIndex = index.replace(rootDiv, rootDivReplacement.replace("$1", newText));

src/static.ts

@@ -1,5 +1,7 @@
 import * as fs from "fs/promises";
 import * as path from "path";
+import { IndexPage } from "./pages/index";
+import { PAGEICON, PAGETITLE } from "./variables";
 
 const indexFilePath = path.join(__dirname, "../", "index.html");
 
@@ -31,7 +33,7 @@ async function readIndexPage(): Promise<string> {
 async function start(): Promise<void> {
 	const index = await readIndexPage();
 
-	const newText = "<p>Hello, world!</p>";
+	const newText = IndexPage({ icon: PAGEICON, title: PAGETITLE });
 	const rootDiv = '<div id="root"></div>';
 	const rootDivReplacement = '<div id="root">$1</div>';
 

src/variables.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NEWWINDOW = exports.THEME = exports.CATEGORIES = exports.SHOWHEADERTOP = exports.SHOWHEADERLINE = exports.SHOWHEADER = exports.PAGEICON = exports.PAGETITLE = void 0;
+exports.PAGETITLE = "My Website";
+exports.PAGEICON = "/logo.png";
+exports.SHOWHEADER = true;
+exports.SHOWHEADERLINE = true;
+exports.SHOWHEADERTOP = false;
+exports.CATEGORIES = "normal";
+exports.THEME = "light";
+exports.NEWWINDOW = true;

tsconfig.json

@@ -5,7 +5,8 @@
 		"outDir": "./dist",
 		"strict": true,
 		"esModuleInterop": true,
+		"resolveJsonModule": true,
 		"module": "CommonJS"
 	},
-	"include": ["src/*.ts"]
+	"include": ["src"]
 }