Merge pull request #12 from notclickable-jordan/i11

Can set whether individual links open in a new window
This commit is contained in:
Jordan Roher 2023-08-05 11:04:11 -07:00 committed by GitHub
commit 15008ff725
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 9 deletions

View File

@ -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
}
]
}

View File

@ -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}

View File

@ -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}

View File

@ -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>

View File

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

View File

@ -1 +1 @@
1.1.5
1.1.6