From 7bc5e1caae5d9c1fb0609e0e1bf5ec7ee1371700 Mon Sep 17 00:00:00 2001 From: Jordan Roher Date: Fri, 21 Apr 2023 14:15:25 -0700 Subject: [PATCH] Icons support Dashboard, Material, and various color options --- docker-entrypoint.sh | 7 +++-- readme.md | 15 ++++++++- src/components/icon.tsx | 63 ++++++++++++++++++++++++++++++++----- src/components/services.tsx | 18 ++++++++--- src/shared/types.ts | 3 ++ tailwind.config.js | 20 +++--------- 6 files changed, 96 insertions(+), 30 deletions(-) diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh index ccdf44e..2e2976a 100644 --- a/docker-entrypoint.sh +++ b/docker-entrypoint.sh @@ -3,8 +3,11 @@ # Escape slashes LOGO=${LOGO//\//\\/} -sed -i -e 's/PAGETITLE = "My Website"/'"${TITLE}"'/g' /app/index.html -sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/src/variables.ts +# HTML replacement +sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/index.html + +# TypeScript replacement +sed -i -e 's/PAGETITLE = "My Website"/'"${TITLE}"'/g' /app/src/variables.ts sed -i -e 's/PAGEICON = "\/logo\.png"/'"${LOGO}"'/g' /app/src/variables.ts exec "$@" \ No newline at end of file diff --git a/readme.md b/readme.md index 00223bc..7635a43 100644 --- a/readme.md +++ b/readme.md @@ -49,9 +49,22 @@ Use [Dashboard icons](https://github.com/walkxcode/dashboard-icons) by specifyin Use any [Material Design icon](https://icon-sets.iconify.design/mdi/) by prefixing the name with `mdi-`. +Fill the icon by providing an "iconColor" from the [list of Tailwind colors](https://tailwindcss.com/docs/background-color). Do not prefix with "bg-". + +Set a background by providing an "iconBG" from the [list of Tailwind colors](https://tailwindcss.com/docs/background-color). Do not prefix with "bg-". + +Turn off the bubble and shadow by setting `"iconBubble": false`. + +Turn off background color by setting `"iconBG": "transparent"`. + +Hide the icon entirely by setting `"icon": ""`. + ```bash # Specify an icon in config.json -"icon": "mdi-cloud" +"icon": "mdi-cloud", +"iconColor": "blue-500", # optional, defaults to a contrasting color +"iconBG": "gray-200", # optional, defaults to a complementary color +"iconBubble": false, # optional, defaults to true ``` # Docker compose diff --git a/src/components/icon.tsx b/src/components/icon.tsx index d63213e..0179470 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -23,16 +23,20 @@ const iconLevel = 300; const getIconColor = (index: number) => `bg-${iconColors[iconColors.length % index]}-${iconLevel}`; interface IProps { + name: string; index: number; icon?: string; + iconColor?: string; + iconBG?: string; + iconBubble?: boolean; uri?: string; } -export const Icon: React.FunctionComponent = ({ uri, icon, index }) => { +export const Icon: React.FunctionComponent = ({ name, uri, icon, index, iconBG, iconBubble, iconColor }) => { if (is.null(icon)) { if (!is.null(uri)) { return ( - + ); @@ -43,13 +47,13 @@ export const Icon: React.FunctionComponent = ({ uri, icon, index }) => { if (!is.null(uri)) { return ( - - + + ); } - return ; + return ; }; interface IIconBlankProps { @@ -68,14 +72,57 @@ const IconBlank: React.FunctionComponent = ({ index }) => { interface IIconBaseProps { icon: string; + iconColor?: string; + iconBG?: string; + iconBubble?: boolean; } -const IconBase: React.FunctionComponent = ({ icon }) => { +const IconBase: React.FunctionComponent = ({ icon, iconBG, iconBubble, iconColor }) => { + if (icon.startsWith("http") || icon.startsWith("/")) { + /* Relative or absolute icon URI */ + return ( + + ); + } + + if (icon.startsWith("mdi-")) { + /* Material Design icon */ + const iconName = icon.replace("mdi-", "").replace(".svg", ""); + let iconClassName = + iconBubble === false + ? "block w-16 h-16 overflow-hidden" + : "block w-16 h-16 rounded-2xl border border-black/5 shadow-sm overflow-hidden"; + + if (is.null(iconBG)) { + iconClassName += ` bg-slate-200`; + } else { + iconClassName += ` bg-${iconBG}`; + } + + return ( +
+
+
+ ); + } + + /* Dashboard icon */ + const iconName = icon.replace(".png", "").replace(".jpg", "").replace(".svg", ""); return ( ); }; diff --git a/src/components/services.tsx b/src/components/services.tsx index 70836c2..1944664 100644 --- a/src/components/services.tsx +++ b/src/components/services.tsx @@ -23,13 +23,23 @@ interface IServiceProps { } const Service: React.FunctionComponent = ({ service, index }) => { - const { name, uri, description, icon } = service; + const { name, uri, description, icon, iconBG, iconBubble, iconColor } = service; return (
  • - - - + {!is.null(icon) && ( + + + + )}

    diff --git a/src/shared/types.ts b/src/shared/types.ts index 5219bf0..b7b21b3 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -9,4 +9,7 @@ export interface IService { description?: string; icon?: string; + iconColor?: string; + iconBG?: string; + iconBubble?: boolean; } diff --git a/tailwind.config.js b/tailwind.config.js index 64046fe..57500d9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,21 +3,11 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], safelist: [ /* Built from icon.tsx */ - "bg-blue-300", - "bg-rose-300", - "bg-green-300", - "bg-red-300", - "bg-yellow-300", - "bg-cyan-300", - "bg-pink-300", - "bg-orange-300", - "bg-sky-300", - "bg-slate-300", - "bg-emerald-300", - "bg-zinc-300", - "bg-neutral-300", - "bg-amber-300", - "bg-violet-300", + { + pattern: + /bg-(black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/, + }, + "bg-transparent", ], theme: { extend: {