Finished basic conversion
This commit is contained in:
Jordan Roher
parent
714a831ead
commit
26ba6aaa38
171
index-2.html
Normal file
171
index-2.html
Normal file
@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<title>My Website</title>
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div className="min-h-screen">
|
||||
<div className="min-h-screen flex flex-col max-w-screen-2xl mx-auto xl:flex-row">
|
||||
<div
|
||||
className="p-4 w-full xl:w-auto xl:max-w-xs xl:min-h-screenborder-0 border-solid border-gray-300 dark:border-gray-700 border-b xl:border-r xl:border-b-0"
|
||||
>
|
||||
<div className="p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap">
|
||||
<img src="/logo.png" alt="My Website" className="inline-block w-16 h-16" />
|
||||
<h1>My Website</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 flex-grow min-h-screen">
|
||||
<ul>
|
||||
<li className="mt-12 first:mt-0 xl:first:mt-6">
|
||||
<h2 className="dark:text-slate-200 text-2xl text-slate-600 font-light py-2 px-4">
|
||||
Example category
|
||||
</h2>
|
||||
|
||||
<ul
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1 lg:gap-2 lg:gap-y-4"
|
||||
>
|
||||
<li className="p-4 flex gap-4">
|
||||
<span className="flex-shrink-0 flex">
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/starbase-80"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="Check the readme"
|
||||
className="undefined"
|
||||
>
|
||||
<span
|
||||
className="block w-16 h-16 rounded-2xl border border-black/5 shadow-sm bg-undefined-300 overflow-hidden"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg mt-1 font-semibold line-clamp-1">
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/starbase-80"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
Check the readme
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
|
||||
2
|
||||
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/starbase-80"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
Use your own icons
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
,
|
||||
<li className="p-4 flex gap-4">
|
||||
<span className="flex-shrink-0 flex">
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/docker-symphony"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="Bind mount"
|
||||
className="undefined"
|
||||
>
|
||||
<span
|
||||
className="block w-16 h-16 rounded-2xl border border-black/5 shadow-sm bg-blue-300 overflow-hidden"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg mt-1 font-semibold line-clamp-1">
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/docker-symphony"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
Bind mount
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
|
||||
2
|
||||
|
||||
<a
|
||||
href="https://github.com/notclickable-jordan/docker-symphony"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
/app/src/config/config.json
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
,
|
||||
<li className="p-4 flex gap-4">
|
||||
<span className="flex-shrink-0 flex">
|
||||
<a
|
||||
href="https://www.paramountplus.com/"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="Watch Lower Decks"
|
||||
className="undefined"
|
||||
>
|
||||
<span
|
||||
className="block w-16 h-16 rounded-2xl border border-black/5 shadow-sm bg-rose-300 overflow-hidden"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg mt-1 font-semibold line-clamp-1">
|
||||
<a
|
||||
href="https://www.paramountplus.com/"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
Watch Lower Decks
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
|
||||
2
|
||||
|
||||
<a
|
||||
href="https://www.paramountplus.com/"
|
||||
target="_blank"
|
||||
rel="noreffer"
|
||||
title="undefined"
|
||||
className="undefined"
|
||||
>
|
||||
On Paramount+
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
index.html
20
index.html
@ -7,24 +7,6 @@
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div className="min-h-screen">
|
||||
<div className=min-h-screen flex flex-col max-w-screen-2xl mx-auto xl:flex-row>
|
||||
|
||||
<div className=p-4 w-full xl:w-auto xl:max-w-xs xl:min-h-screenborder-0 border-solid border-gray-300 dark:border-gray-700 border-b xl:border-r xl:border-b-0>
|
||||
|
||||
<div className="p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap">
|
||||
<img src={icon} alt={title} className="inline-block w-16 h-16" />
|
||||
<h1>{title}</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className=p-4 flex-grow min-h-screen>
|
||||
<ServiceCatalogList catalogs={mySerices} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"version": "1.3.0",
|
||||
"type": "commonjs",
|
||||
"scripts": {
|
||||
"build": "tsc && node src/static.js",
|
||||
"build": "tsc && node ./dist/static.js",
|
||||
"html": "html-minifier --remove-comments --collapse-whitespace --input-dir ./dist --output-dir ./dist --file-ext html",
|
||||
"replace": "npm run replace:script",
|
||||
"replace:script": "replace-in-file --configFile replace-script.cjs"
|
||||
|
||||
34
src/components/anchor.ts
Normal file
34
src/components/anchor.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { is } from "../shared/is";
|
||||
import { NEWWINDOW } from "../variables";
|
||||
|
||||
interface IProps {
|
||||
uri: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
children?: any;
|
||||
newWindow?: boolean;
|
||||
}
|
||||
|
||||
export const Anchor = function (props: IProps) {
|
||||
const { uri, children, title, className, newWindow } = props;
|
||||
|
||||
let newWindowLocal = NEWWINDOW;
|
||||
|
||||
if (!is.null(newWindow)) {
|
||||
newWindowLocal = newWindow as boolean;
|
||||
}
|
||||
|
||||
if (newWindowLocal) {
|
||||
return `
|
||||
<a href="${uri}" target="_blank" rel="noreffer" title="${title}" className="${className}">
|
||||
${children}
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<a href="${uri}" title="${title}" className="${className}">
|
||||
${children}
|
||||
</a>
|
||||
`;
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
import React from "react";
|
||||
import { is } from "../shared/is";
|
||||
import { NEWWINDOW } from "../variables";
|
||||
|
||||
interface IProps {
|
||||
uri: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
newWindow?: boolean;
|
||||
}
|
||||
|
||||
export const Anchor: React.FunctionComponent<IProps> = ({ uri, children, title, className, newWindow }) => {
|
||||
let newWindowLocal = NEWWINDOW;
|
||||
|
||||
if (!is.null(newWindow)) {
|
||||
newWindowLocal = newWindow as boolean;
|
||||
}
|
||||
|
||||
if (newWindowLocal) {
|
||||
return (
|
||||
<a href={uri} target="_blank" rel="noreffer" title={title} className={className}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={uri} title={title} className={className}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
"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,8 +9,8 @@ export const Header = function (props: IProps) {
|
||||
const { icon, title } = props;
|
||||
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" />`}
|
||||
<h1>{title}</h1>
|
||||
${!is.null(icon) && `<img src="${icon}" alt="${title}" className="inline-block w-16 h-16" />`}
|
||||
<h1>${title}</h1>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import React from "react";
|
||||
import { is } from "../shared/is";
|
||||
import { IconAspect } from "../shared/types";
|
||||
import { Anchor } from "./anchor";
|
||||
@ -36,67 +35,54 @@ interface IProps {
|
||||
newWindow?: boolean;
|
||||
}
|
||||
|
||||
export const Icon: React.FunctionComponent<IProps> = ({
|
||||
name,
|
||||
uri,
|
||||
icon,
|
||||
index,
|
||||
iconBG,
|
||||
iconBubble,
|
||||
iconColor,
|
||||
iconAspect,
|
||||
newWindow,
|
||||
}) => {
|
||||
if (is.null(icon)) {
|
||||
export const Icon = function (props: IProps): string {
|
||||
const { name, uri, icon, index, iconBG, iconBubble, iconColor, iconAspect, newWindow } = props;
|
||||
|
||||
if (!is.null(icon)) {
|
||||
if (!is.null(uri)) {
|
||||
return (
|
||||
<Anchor uri={uri as string} title={name} newWindow={newWindow}>
|
||||
<IconBlank index={index} />
|
||||
</Anchor>
|
||||
);
|
||||
return Anchor({ uri: uri as string, title: name, newWindow, children: IconBlank({ index }) });
|
||||
}
|
||||
|
||||
return <IconBlank index={index} />;
|
||||
return IconBlank({ index });
|
||||
}
|
||||
|
||||
if (!is.null(uri)) {
|
||||
return (
|
||||
<Anchor uri={uri as string} title={name} newWindow={newWindow} className="self-center">
|
||||
<IconBase
|
||||
icon={icon as string}
|
||||
iconBG={iconBG}
|
||||
iconColor={iconColor}
|
||||
iconBubble={iconBubble}
|
||||
iconAspect={iconAspect}
|
||||
/>
|
||||
</Anchor>
|
||||
);
|
||||
return Anchor({
|
||||
uri: uri as string,
|
||||
title: name,
|
||||
newWindow,
|
||||
className: "self-center",
|
||||
children: IconBase({
|
||||
icon: icon as string,
|
||||
iconBG,
|
||||
iconColor,
|
||||
iconBubble,
|
||||
iconAspect,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<IconBase
|
||||
icon={icon as string}
|
||||
iconBG={iconBG}
|
||||
iconColor={iconColor}
|
||||
iconBubble={iconBubble}
|
||||
iconAspect={iconAspect}
|
||||
/>
|
||||
);
|
||||
return IconBase({
|
||||
icon: icon as string,
|
||||
iconBG,
|
||||
iconColor,
|
||||
iconBubble,
|
||||
iconAspect,
|
||||
});
|
||||
};
|
||||
|
||||
interface IIconBlankProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
const IconBlank: React.FunctionComponent<IIconBlankProps> = ({ index }) => {
|
||||
return (
|
||||
function IconBlank(props: IIconBlankProps) {
|
||||
const { index } = props;
|
||||
return `
|
||||
<span
|
||||
className={`block w-16 h-16 rounded-2xl border border-black/5 shadow-sm ${getIconColor(
|
||||
index
|
||||
)} overflow-hidden`}
|
||||
className="${`block w-16 h-16 rounded-2xl border border-black/5 shadow-sm ${getIconColor(index)} overflow-hidden`}"
|
||||
/>
|
||||
);
|
||||
};
|
||||
`;
|
||||
}
|
||||
|
||||
enum IconType {
|
||||
uri,
|
||||
@ -112,13 +98,9 @@ interface IIconBaseProps {
|
||||
iconAspect?: IconAspect;
|
||||
}
|
||||
|
||||
const IconBase: React.FunctionComponent<IIconBaseProps> = ({
|
||||
icon,
|
||||
iconBG,
|
||||
iconBubble,
|
||||
iconColor,
|
||||
iconAspect = "square",
|
||||
}) => {
|
||||
function IconBase(props: IIconBaseProps) {
|
||||
let { icon, iconBG, iconBubble, iconColor, iconAspect = "square" } = props;
|
||||
|
||||
let iconType: IconType = IconType.uri;
|
||||
|
||||
if (icon.startsWith("http") || icon.startsWith("/")) {
|
||||
@ -152,7 +134,7 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({
|
||||
iconClassName += " rounded-2xl border border-black/5 shadow-sm";
|
||||
}
|
||||
|
||||
const iconStyle: React.CSSProperties = {};
|
||||
const iconStyle: any = {};
|
||||
|
||||
switch (iconType) {
|
||||
case IconType.uri:
|
||||
@ -184,7 +166,7 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({
|
||||
break;
|
||||
}
|
||||
|
||||
const mdiIconStyle: React.CSSProperties = {};
|
||||
const mdiIconStyle: any = {};
|
||||
let mdiIconColorFull = "bg-" + iconColor;
|
||||
|
||||
if (!is.null(iconColor) && iconColor?.startsWith("#")) {
|
||||
@ -194,31 +176,31 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({
|
||||
|
||||
switch (iconType) {
|
||||
case IconType.uri:
|
||||
return <img src={icon} alt="" className={iconClassName} style={{ ...iconStyle }} />;
|
||||
return `<img src="${icon}" alt="" className="${iconClassName}" style="${{ ...iconStyle }}" />`;
|
||||
case IconType.dashboard:
|
||||
icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", "");
|
||||
return (
|
||||
return `
|
||||
<img
|
||||
src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`}
|
||||
src=${`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`}
|
||||
alt=""
|
||||
className={iconClassName}
|
||||
style={{ ...iconStyle }}
|
||||
className="${iconClassName}"
|
||||
style="${{ ...iconStyle }}"
|
||||
/>
|
||||
);
|
||||
`;
|
||||
case IconType.material:
|
||||
icon = icon.replace("mdi-", "").replace(".svg", "");
|
||||
|
||||
return (
|
||||
<div className={iconClassName} style={{ ...iconStyle }}>
|
||||
return `
|
||||
<div className="${iconClassName}" style="${{ ...iconStyle }}">
|
||||
<div
|
||||
className={`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`}
|
||||
style={{
|
||||
className=${`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`}
|
||||
style="${{
|
||||
...mdiIconStyle,
|
||||
mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`,
|
||||
WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`,
|
||||
}}
|
||||
}}"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
`;
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
import React from "react";
|
||||
import { IServiceCatalog } from "../shared/types";
|
||||
import { CATEGORIES } from "../variables";
|
||||
import { Services } from "./services";
|
||||
@ -7,14 +6,14 @@ interface IProps {
|
||||
catalogs: IServiceCatalog[];
|
||||
}
|
||||
|
||||
export const ServiceCatalogList: React.FunctionComponent<IProps> = ({ catalogs }) => {
|
||||
return (
|
||||
export const ServiceCatalogList = function (props: IProps) {
|
||||
const { catalogs } = props;
|
||||
|
||||
return `
|
||||
<ul>
|
||||
{catalogs.map((catalog, index) => (
|
||||
<ServiceCatalog key={index} catalog={catalog} index={index} />
|
||||
))}
|
||||
${catalogs.map((catalog, index) => ServiceCatalog({ catalog, index }))}
|
||||
</ul>
|
||||
);
|
||||
`;
|
||||
};
|
||||
|
||||
interface ICatalogProps {
|
||||
@ -22,7 +21,9 @@ interface ICatalogProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
const ServiceCatalog: React.FunctionComponent<ICatalogProps> = ({ catalog, index }) => {
|
||||
const ServiceCatalog = function (props: ICatalogProps) {
|
||||
const { catalog, index } = props;
|
||||
|
||||
let categoryClassName = "dark:text-slate-200";
|
||||
|
||||
switch (CATEGORIES as string) {
|
||||
@ -41,10 +42,10 @@ const ServiceCatalog: React.FunctionComponent<ICatalogProps> = ({ catalog, index
|
||||
liClassName += " bg-white dark:bg-black rounded-2xl px-6 py-6 ring-1 ring-slate-900/5 shadow-xl";
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={index} className={liClassName}>
|
||||
<h2 className={categoryClassName}>{catalog.category}</h2>
|
||||
<Services services={catalog.services} />
|
||||
return `
|
||||
<li className="${liClassName}">
|
||||
<h2 className="${categoryClassName}">${catalog.category}</h2>
|
||||
${Services({ services: catalog.services })}
|
||||
</li>
|
||||
);
|
||||
`;
|
||||
};
|
||||
55
src/components/services.ts
Normal file
55
src/components/services.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { is } from "../shared/is";
|
||||
import { IService } from "../shared/types";
|
||||
import { Anchor } from "./anchor";
|
||||
import { Icon } from "./icon";
|
||||
|
||||
interface IServicesProps {
|
||||
services: IService[];
|
||||
}
|
||||
|
||||
export const Services = function (props: IServicesProps) {
|
||||
const { services } = props;
|
||||
|
||||
return `
|
||||
<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1 lg:gap-2 lg:gap-y-4">
|
||||
${services.map((service, index) => Service({ index, service }))}
|
||||
</ul>
|
||||
`;
|
||||
};
|
||||
|
||||
interface IServiceProps {
|
||||
service: IService;
|
||||
index: number;
|
||||
}
|
||||
|
||||
function Service(props: IServiceProps) {
|
||||
const { service, index } = props;
|
||||
|
||||
const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service;
|
||||
|
||||
return `
|
||||
<li className="p-4 flex gap-4">
|
||||
${
|
||||
!is.null(icon) &&
|
||||
`
|
||||
<span className="flex-shrink-0 flex">
|
||||
${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })}
|
||||
</span>
|
||||
`
|
||||
}
|
||||
<div>
|
||||
<h3 className="text-lg mt-1 font-semibold line-clamp-1">
|
||||
${Anchor({ uri, newWindow, children: name })}
|
||||
</h3>
|
||||
${
|
||||
!is.null(description) &&
|
||||
`
|
||||
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">2
|
||||
${Anchor({ uri, newWindow, children: description })}
|
||||
</p>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
import React from "react";
|
||||
import { is } from "../shared/is";
|
||||
import { IService } from "../shared/types";
|
||||
import { Anchor } from "./anchor";
|
||||
import { Icon } from "./icon";
|
||||
|
||||
interface IServicesProps {
|
||||
services: IService[];
|
||||
}
|
||||
|
||||
export const Services: React.FunctionComponent<IServicesProps> = ({ services }) => {
|
||||
return (
|
||||
<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1 lg:gap-2 lg:gap-y-4">
|
||||
{services.map((service, index) => (
|
||||
<Service key={index} service={service} index={index} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
interface IServiceProps {
|
||||
service: IService;
|
||||
index: number;
|
||||
}
|
||||
|
||||
const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) => {
|
||||
const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service;
|
||||
|
||||
return (
|
||||
<li className="p-4 flex gap-4">
|
||||
{!is.null(icon) && (
|
||||
<span className="flex-shrink-0 flex">
|
||||
<Icon
|
||||
name={name}
|
||||
icon={icon}
|
||||
uri={uri}
|
||||
index={index}
|
||||
iconColor={iconColor}
|
||||
iconBG={iconBG}
|
||||
iconBubble={iconBubble}
|
||||
iconAspect={iconAspect}
|
||||
newWindow={newWindow}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="text-lg mt-1 font-semibold line-clamp-1">
|
||||
<Anchor uri={uri} newWindow={newWindow}>
|
||||
{name}
|
||||
</Anchor>
|
||||
</h3>
|
||||
{!is.null(description) && (
|
||||
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
|
||||
<Anchor uri={uri} newWindow={newWindow}>
|
||||
{description}
|
||||
</Anchor>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
11
src/main.tsx
11
src/main.tsx
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { IndexPage } from "./pages";
|
||||
import "./tailwind.css";
|
||||
import { PAGEICON, PAGETITLE } from "./variables";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<IndexPage title={PAGETITLE} icon={PAGEICON} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@ -1,39 +0,0 @@
|
||||
"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;
|
||||
@ -1,4 +1,5 @@
|
||||
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 +13,7 @@ interface IProps {
|
||||
|
||||
export const IndexPage = function (props: IProps): string {
|
||||
const { icon, title } = props;
|
||||
const mySerices = (is.null(userServicesOld) ? userServices : userServicesOld) as IServiceCatalog[];
|
||||
const myServices = (is.null(userServicesOld) ? userServices : userServicesOld) as IServiceCatalog[];
|
||||
|
||||
let headerClassName = "p-4";
|
||||
|
||||
@ -46,17 +47,17 @@ export const IndexPage = function (props: IProps): string {
|
||||
|
||||
return `
|
||||
<div className="min-h-screen">
|
||||
<div className=${pageWrapperClassName}>
|
||||
<div className="${pageWrapperClassName}">
|
||||
${
|
||||
SHOWHEADER &&
|
||||
`
|
||||
<div className=${headerClassName}>
|
||||
<div className="${headerClassName}">
|
||||
${Header({ icon, title })}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
<div className=${serviceCatalogListWrapperClassName}>
|
||||
<ServiceCatalogList catalogs={mySerices} />
|
||||
<div className="${serviceCatalogListWrapperClassName}">
|
||||
${ServiceCatalogList({ catalogs: myServices })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
"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,
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
116
src/static.js
116
src/static.js
@ -1,116 +0,0 @@
|
||||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
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 () {
|
||||
var _this = this;
|
||||
return __generator(this, function (_a) {
|
||||
return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
|
||||
var exception_1;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
_a.trys.push([0, 2, , 3]);
|
||||
return [4 /*yield*/, fs.writeFile(indexFilePath, contents)];
|
||||
case 1:
|
||||
_a.sent();
|
||||
return [2 /*return*/, resolve(true)];
|
||||
case 2:
|
||||
exception_1 = _a.sent();
|
||||
console.error("Could not write index.html file");
|
||||
reject(exception_1);
|
||||
return [3 /*break*/, 3];
|
||||
case 3: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
}); })];
|
||||
});
|
||||
});
|
||||
}
|
||||
function readIndexPage() {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var _this = this;
|
||||
return __generator(this, function (_a) {
|
||||
return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
|
||||
var index, exception_2;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
_a.trys.push([0, 2, , 3]);
|
||||
return [4 /*yield*/, fs.readFile(indexFilePath)];
|
||||
case 1:
|
||||
index = _a.sent();
|
||||
return [2 /*return*/, resolve(index.toString())];
|
||||
case 2:
|
||||
exception_2 = _a.sent();
|
||||
console.error("Could not read index.html file");
|
||||
reject(exception_2);
|
||||
return [3 /*break*/, 3];
|
||||
case 3: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
}); })];
|
||||
});
|
||||
});
|
||||
}
|
||||
function start() {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var index, newText, rootDiv, rootDivReplacement, newIndex;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0: return [4 /*yield*/, readIndexPage()];
|
||||
case 1:
|
||||
index = _a.sent();
|
||||
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));
|
||||
return [4 /*yield*/, writeIndexPage(newIndex)];
|
||||
case 2:
|
||||
_a.sent();
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
start();
|
||||
@ -1,11 +0,0 @@
|
||||
"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;
|
||||
Loading…
Reference in New Issue
Block a user