Can set whether individual links open in a new window

readme.md

@@ -130,6 +130,7 @@ Can have as many categories as you like.
 -   **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
+-   **newWindow**: optional, set to `true` or `false` to override the environment variable `NEWWINDOW`
 
 ## Template
 
@@ -147,7 +148,8 @@ Can have as many categories as you like.
 				"iconBG": "#fff",
 				"iconColor": "#000",
 				"iconBubble": false,
-				"iconAspect": "width"
+				"iconAspect": "width",
+				"newWindow": false
 			}
 		]
 	}

src/components/anchor.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { is } from "../shared/is";
 import { NEWWINDOW } from "../variables";
 
 interface IProps {
@@ -6,10 +7,17 @@ interface IProps {
 	title?: string;
 	className?: string;
 	children?: React.ReactNode;
+	newWindow?: boolean;
 }
 
-export const Anchor: React.FunctionComponent<IProps> = ({ uri, children, title, className }) => {
-	if (NEWWINDOW) {
+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}

src/components/icon.tsx

@@ -33,6 +33,7 @@ interface IProps {
 	iconBubble?: boolean;
 	iconAspect?: IconAspect;
 	uri?: string;
+	newWindow?: boolean;
 }
 
 export const Icon: React.FunctionComponent<IProps> = ({
@@ -44,11 +45,12 @@ export const Icon: React.FunctionComponent<IProps> = ({
 	iconBubble,
 	iconColor,
 	iconAspect,
+	newWindow,
 }) => {
 	if (is.null(icon)) {
 		if (!is.null(uri)) {
 			return (
-				<Anchor uri={uri as string} title={name}>
+				<Anchor uri={uri as string} title={name} newWindow={newWindow}>
 					<IconBlank index={index} />
 				</Anchor>
 			);
@@ -59,7 +61,7 @@ export const Icon: React.FunctionComponent<IProps> = ({
 
 	if (!is.null(uri)) {
 		return (
-			<Anchor uri={uri as string} title={name} className="self-center">
+			<Anchor uri={uri as string} title={name} newWindow={newWindow} className="self-center">
 				<IconBase
 					icon={icon as string}
 					iconBG={iconBG}

src/components/services.tsx

@@ -24,7 +24,7 @@ interface IServiceProps {
 }
 
 const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) => {
-	const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect } = service;
+	const { name, uri, description, icon, iconBG, iconBubble, iconColor, iconAspect, newWindow } = service;
 
 	return (
 		<li className="p-4 flex gap-4">
@@ -39,16 +39,21 @@ const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) =>
 						iconBG={iconBG}
 						iconBubble={iconBubble}
 						iconAspect={iconAspect}
+						newWindow={newWindow}
 					/>
 				</span>
 			)}
 			<div>
 				<h3 className="text-lg mt-1 font-semibold line-clamp-1">
-					<Anchor uri={uri}>{name}</Anchor>
+					<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}>{description}</Anchor>
+						<Anchor uri={uri} newWindow={newWindow}>
+							{description}
+						</Anchor>
 					</p>
 				)}
 			</div>

src/shared/types.ts

@@ -14,6 +14,8 @@ export interface IService {
 	iconBG?: string;
 	iconBubble?: boolean;
 	iconAspect?: IconAspect;
+
+	newWindow?: boolean;
 }
 
 export type IconAspect = "square" | "width" | "height";

version

@@ -1 +1 @@
-1.1.5
+1.1.6