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); const linkHref = line.substring(idxSep+1, idxEnd);
result.push(line.substring(0, idxStart)); 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); line = line.substring(idxEnd+1);
idxStart = line.indexOf("#{"); idxStart = line.indexOf("#{");

View File

@ -1,6 +1,5 @@
import type { NextPage } from "next"; import type { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link";
import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react"; import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import ProjectModal from "../components/ProjectModal"; import ProjectModal from "../components/ProjectModal";
@ -29,24 +28,24 @@ const Home: NextPage = () => {
<div className={styles.container}> <div className={styles.container}>
<div className={styles.header}> <div className={styles.header}>
<span className={styles.spacer} onClick={focusInput}>&nbsp;</span> <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> <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> <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> <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> <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> <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" }}> <span className={styles.tooltip} style={{ cursor: "pointer" }}>
<DiscordLogo color="var(--repl-color)" className={styles.iconLink} /> <DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
<span className={styles.tooltiptext}> <span className={styles.tooltiptext}>
C0ntroller_Z#3883 C0ntroller_Z#3883
</span> </span>
</span> </span>
</Link><span className={styles.spacer} onClick={focusInput}>&nbsp;</span> </a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</div> </div>
<REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/> <REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/>
</div> </div>

View File

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