Merge pull request #4 from notclickable-jordan/new-window

Added the ability to set links to open in the same window

docker-entrypoint.sh

@@ -13,6 +13,7 @@ sed -i -e 's/SHOWHEADER = true/SHOWHEADER = '"${HEADER}"'/g' /app/src/variables.
 sed -i -e 's/SHOWHEADERLINE = true/SHOWHEADERLINE = '"${HEADERLINE}"'/g' /app/src/variables.ts
 sed -i -e 's/SHOWHEADERTOP = false/SHOWHEADERTOP = '"${HEADERTOP}"'/g' /app/src/variables.ts
 sed -i -e 's/CATEGORIES = "normal"/CATEGORIES = "'"${CATEGORIES}"'"/g' /app/src/variables.ts
+sed -i -e 's/NEWWINDOW = true/NEWWINDOW = '"${NEWWINDOW}"'/g' /app/src/variables.ts
 
 # CSS replacement
 sed -i -e 's/background-color: theme(\(colors\.slate\.50\))/background-color: '"${BGCOLOR}"'/g' /app/src/tailwind.css

dockerfile

@@ -26,6 +26,7 @@ ENV HEADERTOP "false"
 ENV CATEGORIES "normal"
 ENV BGCOLOR "theme(colors.slate.50)"
 ENV BGCOLORDARK "theme(colors.gray.950)"
+ENV NEWWINDOW "true"
 
 COPY version /
 

readme.md

@@ -95,6 +95,7 @@ services:
             - CATEGORIES=small # defaults to normal, set to small for smaller, uppercase category labels
             - BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax
             - BGCOLORDARK=#000 # defaults to theme(colors.gray.950), set to any hex color or Tailwind color using the theme syntax
+            - NEWWINDOW=true # defaults to true, set to false to not have links open in a new window
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional

src/components/anchor.tsx

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

src/components/icon.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { is } from "../shared/is";
+import { Anchor } from "./anchor";
 
 const iconColors = [
 	"blue",
@@ -36,9 +37,9 @@ export const Icon: React.FunctionComponent<IProps> = ({ name, uri, icon, index,
 	if (is.null(icon)) {
 		if (!is.null(uri)) {
 			return (
-				<a href={uri} target="_blank" rel="noreferrer" title={name}>
+				<Anchor uri={uri as string} title={name}>
 					<IconBlank index={index} />
-				</a>
+				</Anchor>
 			);
 		}
 
@@ -47,9 +48,9 @@ export const Icon: React.FunctionComponent<IProps> = ({ name, uri, icon, index,
 
 	if (!is.null(uri)) {
 		return (
-			<a href={uri} target="_blank" rel="noreferrer" title={name}>
+			<Anchor uri={uri as string} title={name}>
 				<IconBase icon={icon as string} iconBG={iconBG} iconColor={iconColor} iconBubble={iconBubble} />
-			</a>
+			</Anchor>
 		);
 	}
 

src/components/services.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { is } from "../shared/is";
 import { IService } from "../shared/types";
+import { Anchor } from "./anchor";
 import { Icon } from "./icon";
 
 interface IServicesProps {
@@ -42,15 +43,11 @@ const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) =>
 			)}
 			<div>
 				<h3 className="text-lg mt-1 font-semibold line-clamp-1">
-					<a href={uri} target="_blank">
-						{name}
-					</a>
+					<Anchor uri={uri}>{name}</Anchor>
 				</h3>
 				{!is.null(description) && (
 					<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
-						<a href={uri} target="_blank">
-							{description}
-						</a>
+						<Anchor uri={uri}>{description}</Anchor>
 					</p>
 				)}
 			</div>

src/variables.ts

@@ -5,3 +5,4 @@ export const SHOWHEADERLINE = true;
 export const SHOWHEADERTOP = false;
 export const CATEGORIES = "normal";
 export const THEME = "light";
+export const NEWWINDOW = true;

version

@@ -1 +1 @@
-1.1.1
+1.1.2