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

Fixed icons

Browse Source
This commit is contained in:
Jordan Roher 2023-12-18 13:09:47 -08:00
parent 438e5f5405
commit 88252eea06
7 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/anchor.ts
View File

@ -20,14 +20,14 @@ export const Anchor = function (props: IProps) {
if (newWindowLocal) { if (newWindowLocal) {
return ` return `
<a href="${uri}" target="_blank" rel="noreffer" title="${title || ""}" className="${className || ""}"> <a href="${uri}" target="_blank" rel="noreffer" title="${title || ""}" class="${className || ""}">
${children} ${children}
</a> </a>
`; `;
} }
return ` return `
<a href="${uri}" title="${title || ""}" className="${className || ""}"> <a href="${uri}" title="${title || ""}" class="${className || ""}">
${children} ${children}
</a> </a>
`; `;

4
src/components/header.ts
View File

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

10
src/components/icon.ts
View File

@ -38,7 +38,7 @@ interface IProps {
export const Icon = function (props: IProps): string { export const Icon = function (props: IProps): string {
const { name, uri, icon, index, iconBG, iconBubble, iconColor, iconAspect, newWindow } = props; const { name, uri, icon, index, iconBG, iconBubble, iconColor, iconAspect, newWindow } = props;
if (!is.null(icon)) { if (is.null(icon)) {
if (!is.null(uri)) { if (!is.null(uri)) {
return Anchor({ uri: uri as string, title: name, newWindow, children: IconBlank({ index }) }); return Anchor({ uri: uri as string, title: name, newWindow, children: IconBlank({ index }) });
} }
@ -79,7 +79,7 @@ function IconBlank(props: IIconBlankProps) {
const { index } = props; const { index } = props;
return ` return `
<span <span
className="${`block w-16 h-16 rounded-2xl border border-black/5 shadow-sm ${getIconColor(index)} overflow-hidden`}" class="${`block w-16 h-16 rounded-2xl border border-black/5 shadow-sm ${getIconColor(index)} overflow-hidden`}"
/> />
`; `;
} }
@ -176,14 +176,14 @@ function IconBase(props: IIconBaseProps) {
switch (iconType) { switch (iconType) {
case IconType.uri: case IconType.uri:
return `<img src="${icon}" alt="" className="${iconClassName || ""}" style="${{ ...iconStyle }}" />`; return `<img src="${icon}" alt="" class="${iconClassName || ""}" style="${{ ...iconStyle }}" />`;
case IconType.dashboard: case IconType.dashboard:
icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", ""); icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", "");
return ` return `
<img <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="" alt=""
className="${iconClassName || ""}" class="${iconClassName || ""}"
style="${{ ...iconStyle }}" style="${{ ...iconStyle }}"
/> />
`; `;
@ -191,7 +191,7 @@ function IconBase(props: IIconBaseProps) {
icon = icon.replace("mdi-", "").replace(".svg", ""); icon = icon.replace("mdi-", "").replace(".svg", "");
return ` return `
<div className="${iconClassName || ""}" style="${{ ...iconStyle }}"> <div class="${iconClassName || ""}" style="${{ ...iconStyle }}">
<div <div
className=${`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`} className=${`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`}
style="${{ style="${{

4
src/components/service-catalogs.ts
View File

@ -43,8 +43,8 @@ const ServiceCatalog = function (props: ICatalogProps) {
} }
return ` return `
<li className="${liClassName}"> <li class="${liClassName}">
<h2 className="${categoryClassName}">${catalog.category}</h2> <h2 class="${categoryClassName}">${catalog.category}</h2>
${Services({ services: catalog.services })} ${Services({ services: catalog.services })}
</li> </li>
`; `;

10
src/components/services.ts
View File

@ -11,7 +11,7 @@ export const Services = function (props: IServicesProps) {
const { services } = props; const { services } = props;
return ` 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"> <ul class="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 })).join("")} ${services.map((service, index) => Service({ index, service })).join("")}
</ul> </ul>
`; `;
@ -28,23 +28,23 @@ function Service(props: IServiceProps) {
const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service; const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service;
return ` return `
<li className="p-4 flex gap-4"> <li class="p-4 flex gap-4">
${ ${
!is.null(icon) && !is.null(icon) &&
` `
<span className="flex-shrink-0 flex"> <span class="flex-shrink-0 flex">
${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })} ${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })}
</span> </span>
` `
} }
<div> <div>
<h3 className="text-lg mt-1 font-semibold line-clamp-1"> <h3 class="text-lg mt-1 font-semibold line-clamp-1">
${Anchor({ uri, newWindow, children: name })} ${Anchor({ uri, newWindow, children: name })}
</h3> </h3>
${ ${
!is.null(description) && !is.null(description) &&
` `
<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1"> <p class="text-sm text-black/50 dark:text-white/50 line-clamp-1">
${Anchor({ uri, newWindow, children: description })} ${Anchor({ uri, newWindow, children: description })}
</p> </p>
` `

8
src/pages/index.ts
View File

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

2
tailwind.config.js
View File

@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./dist/index.html"], content: ["./public/index.html"],
safelist: [ safelist: [
/* Built from icon.tsx */ /* Built from icon.tsx */
{ {