Cronocide/starbase-81
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working on page component

Browse Source
This commit is contained in:
Jordan Roher 2023-12-16 14:03:25 -08:00
parent 4b5c3f772b
commit 8e42011629
10 changed files with 104 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/header.js Normal file
View File

@ -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;

9
src/components/header.tsx → src/components/header.ts
View File

@ -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 }) => {
return (
export const Header = function ({ icon, title }) {
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>
);
`;
};

39
src/pages/index.js Normal file
View File

@ -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;

24
src/pages/index.tsx → src/pages/index.ts
View File

@ -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}>
{SHOWHEADER && (
<div className={headerClassName}>
<Header title={title} icon={icon} />
<div className=${pageWrapperClassName}>
${
SHOWHEADER &&
`
<div className=${headerClassName}>
${Header({ icon, title })}
</div>
)}
<div className={serviceCatalogListWrapperClassName}>
`
}
<div className=${serviceCatalogListWrapperClassName}>
<ServiceCatalogList catalogs={mySerices} />
</div>
</div>
</div>
);
`;
};

18
src/shared/is.js Normal file
View File

@ -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,
};

2
src/shared/types.js Normal file
View File

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

4
src/static.js
View File

@ -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));

4
src/static.ts
View File

@ -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>';

11
src/variables.js Normal file
View File

@ -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;

3
tsconfig.json
View File

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