Merge pull request #9 from notclickable-jordan/aspect-ratio

Aspect ratio

package.json

@@ -5,7 +5,7 @@
 	"repository": {
 		"url": "https://github.com/notclickable-jordan/starbase-80"
 	},
-	"version": "1.0.1",
+	"version": "1.1.5",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -13,20 +13,20 @@
 		"start": "npm run build && vite preview"
 	},
 	"dependencies": {
-		"@types/react-dom": "^18.0.11",
+		"@types/react-dom": "^18.2.7",
 		"@types/react-helmet": "^6.1.6",
-		"@types/react": "^18.0.28",
-		"@vitejs/plugin-react": "^3.1.0",
+		"@types/react": "^18.2.15",
+		"@vitejs/plugin-react": "^4.0.3",
 		"autoprefixer": "^10.4.14",
 		"js-yaml": "^4.1.0",
-		"postcss": "^8.4.23",
-		"prettier": "^2.8.7",
+		"postcss": "^8.4.26",
+		"prettier": "^3.0.0",
 		"react-dom": "^18.2.0",
 		"react-helmet": "^6.1.0",
 		"react": "^18.2.0",
-		"tailwindcss": "^3.3.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.2.0"
+		"tailwindcss": "^3.3.3",
+		"typescript": "^5.1.6",
+		"vite": "^4.4.4"
 	},
 	"prettier": {
 		"arrowParens": "avoid",

readme.md

@@ -129,6 +129,7 @@ Can have as many categories as you like.
 -   **iconBG**: optional, hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`). Background color for icons.
 -   **iconColor**: optional, hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`). Only used as the fill color for Material Design icons.
 -   **iconBubble**: optional, defaults to `true`, when `false` the bubble and shadow are removed from the icon
+-	**iconAspect**: optional, defaults to `"square"`, can set to `"width"` or `"height"` to constrain the icon to the width or height of the icon, respectively
 
 ## Template
 
@@ -145,7 +146,8 @@ Can have as many categories as you like.
 				"icon": "mdi-cloud",
 				"iconBG": "#fff",
 				"iconColor": "#000",
-				"iconBubble": false
+				"iconBubble": false,
+				"iconAspect": "width"
 			}
 		]
 	}

src/components/anchor.tsx

@@ -4,20 +4,21 @@ import { NEWWINDOW } from "../variables";
 interface IProps {
 	uri: string;
 	title?: string;
+	className?: string;
 	children?: React.ReactNode;
 }
 
-export const Anchor: React.FunctionComponent<IProps> = ({ uri, children, title }) => {
+export const Anchor: React.FunctionComponent<IProps> = ({ uri, children, title, className }) => {
 	if (NEWWINDOW) {
 		return (
-			<a href={uri} target="_blank" rel="noreffer" title={title}>
+			<a href={uri} target="_blank" rel="noreffer" title={title} className={className}>
 				{children}
 			</a>
 		);
 	}
 
 	return (
-		<a href={uri} title={title}>
+		<a href={uri} title={title} className={className}>
 			{children}
 		</a>
 	);

src/components/icon.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { is } from "../shared/is";
+import { IconAspect } from "../shared/types";
 import { Anchor } from "./anchor";
 
 const iconColors = [
@@ -30,10 +31,20 @@ interface IProps {
 	iconColor?: string;
 	iconBG?: string;
 	iconBubble?: boolean;
+	iconAspect?: IconAspect;
 	uri?: string;
 }
 
-export const Icon: React.FunctionComponent<IProps> = ({ name, uri, icon, index, iconBG, iconBubble, iconColor }) => {
+export const Icon: React.FunctionComponent<IProps> = ({
+	name,
+	uri,
+	icon,
+	index,
+	iconBG,
+	iconBubble,
+	iconColor,
+	iconAspect,
+}) => {
 	if (is.null(icon)) {
 		if (!is.null(uri)) {
 			return (
@@ -48,13 +59,27 @@ export const Icon: React.FunctionComponent<IProps> = ({ name, uri, icon, index,
 
 	if (!is.null(uri)) {
 		return (
-			<Anchor uri={uri as string} title={name}>
-				<IconBase icon={icon as string} iconBG={iconBG} iconColor={iconColor} iconBubble={iconBubble} />
+			<Anchor uri={uri as string} title={name} className="self-center">
+				<IconBase
+					icon={icon as string}
+					iconBG={iconBG}
+					iconColor={iconColor}
+					iconBubble={iconBubble}
+					iconAspect={iconAspect}
+				/>
 			</Anchor>
 		);
 	}
 
-	return <IconBase icon={icon as string} iconBG={iconBG} iconColor={iconColor} iconBubble={iconBubble} />;
+	return (
+		<IconBase
+			icon={icon as string}
+			iconBG={iconBG}
+			iconColor={iconColor}
+			iconBubble={iconBubble}
+			iconAspect={iconAspect}
+		/>
+	);
 };
 
 interface IIconBlankProps {
@@ -82,9 +107,16 @@ interface IIconBaseProps {
 	iconColor?: string;
 	iconBG?: string;
 	iconBubble?: boolean;
+	iconAspect?: IconAspect;
 }
 
-const IconBase: React.FunctionComponent<IIconBaseProps> = ({ icon, iconBG, iconBubble, iconColor }) => {
+const IconBase: React.FunctionComponent<IIconBaseProps> = ({
+	icon,
+	iconBG,
+	iconBubble,
+	iconColor,
+	iconAspect = "square",
+}) => {
 	let iconType: IconType = IconType.uri;
 
 	if (icon.startsWith("http") || icon.startsWith("/")) {
@@ -96,7 +128,23 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({ icon, iconBG, iconB
 	}
 
 	// Everyone starts the same size
-	let iconClassName = "block w-16 h-16 overflow-hidden bg-contain";
+	let iconClassName = "block overflow-hidden bg-contain";
+	let iconWidthHeightClassName = "";
+
+	switch (iconAspect) {
+		case "width":
+			iconWidthHeightClassName = "w-16";
+			break;
+		case "height":
+			iconWidthHeightClassName = "h-16";
+			break;
+		case "square":
+		default:
+			iconWidthHeightClassName = "w-16 h-16";
+			break;
+	}
+
+	iconClassName += " " + iconWidthHeightClassName;
 
 	if (is.null(iconBubble) || iconBubble !== false) {
 		iconClassName += " rounded-2xl border border-black/5 shadow-sm";
@@ -161,7 +209,7 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({ icon, iconBG, iconB
 			return (
 				<div className={iconClassName} style={{ ...iconStyle }}>
 					<div
-						className={`block w-16 h-16 ${mdiIconColorFull} overflow-hidden`}
+						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`,

src/components/services.tsx

@@ -24,12 +24,12 @@ interface IServiceProps {
 }
 
 const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) => {
-	const { name, uri, description, icon, iconBG, iconBubble, iconColor } = service;
+	const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect } = service;
 
 	return (
 		<li className="p-4 flex gap-4">
 			{!is.null(icon) && (
-				<span className="flex-shrink-0 block">
+				<span className="flex-shrink-0 flex">
 					<Icon
 						name={name}
 						icon={icon}
@@ -38,6 +38,7 @@ const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) =>
 						iconColor={iconColor}
 						iconBG={iconBG}
 						iconBubble={iconBubble}
+						iconAspect={iconAspect}
 					/>
 				</span>
 			)}

src/shared/types.ts

@@ -13,4 +13,7 @@ export interface IService {
 	iconColor?: string;
 	iconBG?: string;
 	iconBubble?: boolean;
+	iconAspect?: IconAspect;
 }
+
+export type IconAspect = "square" | "width" | "height";

version

@@ -1 +1 @@
-1.1.4
+1.1.5