Links in new tab

This commit is contained in:
Daniel Kluge 2022-03-14 10:57:06 +01:00
parent b4a076a494
commit 71a053662c
3 changed files with 14 additions and 12 deletions

View File

@ -38,7 +38,7 @@ const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
const linkHref = line.substring(idxSep+1, idxEnd);
result.push(line.substring(0, idxStart));
result.push(<Link href={linkHref}><a className={styles.link}>{linkText}</a></Link>);
result.push(<Link href={linkHref}><a className={styles.link} target={linkHref.startsWith("https://c0ntroller.de") || linkHref.startsWith("/") ? "_self" : "_blank"}>{linkText}</a></Link>);
line = line.substring(idxEnd+1);
idxStart = line.indexOf("#{");

View File

@ -1,6 +1,5 @@
import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
import { useRef, useState } from "react";
import ProjectModal from "../components/ProjectModal";
@ -29,24 +28,24 @@ const Home: NextPage = () => {
<div className={styles.container}>
<div className={styles.header}>
<span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
<Link href="https://github.com/C0ntroller/c0ntroller.de"><a>Source</a></Link>
<a href="https://github.com/C0ntroller/c0ntroller.de" target="_blank">Source</a>
<span className={styles.divider}>|</span>
<Link href="https://github.com/C0ntroller/c0ntroller.de/issues/new"><a>Bug?</a></Link>
<a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank">Bug?</a>
<span className={styles.divider}>|</span>
<Link href="https://github.com/C0ntroller" passHref><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
<a href="https://github.com/C0ntroller" target="_blank"><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></a>
<span className={styles.divider}>|</span>
<Link href="https://www.instagram.com/c0ntroller/" passHref><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
<a href="https://www.instagram.com/c0ntroller/" target="_blank"><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></a>
<span className={styles.divider}>|</span>
<Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link>
<a href="https://steamcommunity.com/id/c0ntroller/" target="_blank"><GameController color="var(--repl-color)" className={styles.iconLink} /></a>
<span className={styles.divider}>|</span>
<Link href="https://discordapp.com/users/224208617820127233" passHref>
<a href="https://discordapp.com/users/224208617820127233" target="_blank">
<span className={styles.tooltip} style={{ cursor: "pointer" }}>
<DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
<span className={styles.tooltiptext}>
C0ntroller_Z#3883
</span>
</span>
</Link><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</div>
<REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/>
</div>

View File

@ -3,7 +3,7 @@
flex-direction: column;
height: 100vh;
margin: 0;
padding: 10px;
padding: 2px 10px 10px 10px;
}
.header {
@ -13,6 +13,7 @@
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.header * {
@ -24,7 +25,7 @@
.header a {
color: var(--repl-color);
text-decoration: underline;
font-size: 80%;
font-size: 0.9em;
}
.header a:hover {
@ -34,7 +35,7 @@
.header .divider {
color: var(--repl-color);
margin: 0 5px;
font-size: 80%;
font-size: 1.1em;
}
.header .spacer {
@ -43,6 +44,8 @@
.iconLink {
cursor: pointer;
font-size: 1.6em;
padding-top: 0.3em;
}
.tooltip {