refactor(website): use link component with rel

This commit is contained in:
Elian Doran 2025-09-27 14:02:49 +03:00
parent 4e4e65b462
commit c21a9223f5
No known key found for this signature in database
3 changed files with 35 additions and 17 deletions

View File

@ -2,25 +2,42 @@ import { ComponentChildren } from "preact";
import Icon from "./Icon"; import Icon from "./Icon";
import "./Button.css"; import "./Button.css";
interface ButtonProps { interface LinkProps {
className?: string;
href?: string;
openExternally?: boolean;
children: ComponentChildren;
title?: string;
}
interface ButtonProps extends Omit<LinkProps, "children"> {
href?: string; href?: string;
iconSvg?: string; iconSvg?: string;
text: ComponentChildren; text: ComponentChildren;
openExternally?: boolean; openExternally?: boolean;
className?: string;
outline?: boolean; outline?: boolean;
} }
export default function Button({ href, iconSvg, openExternally, text, className, outline }: ButtonProps) { export default function Button({ iconSvg, text, className, outline, ...restProps }: ButtonProps) {
return ( return (
<a <Link
className={`button ${className} ${outline ? "outline" : ""}`} className={`button ${className} ${outline ? "outline" : ""}`}
href={href} {...restProps}
target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
> >
{iconSvg && <><Icon svg={iconSvg} />{" "}</>} {iconSvg && <><Icon svg={iconSvg} />{" "}</>}
{text} {text}
</Link>
)
}
export function Link({ openExternally, children, ...restProps }: LinkProps) {
return (
<a
{...restProps}
target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
>
{children}
</a> </a>
) )
} }

View File

@ -4,14 +4,15 @@ import githubIcon from "../assets/boxicons/bx-github.svg?raw";
import githubDiscussionsIcon from "../assets/boxicons/bx-discussion.svg?raw"; import githubDiscussionsIcon from "../assets/boxicons/bx-discussion.svg?raw";
import matrixIcon from "../assets/boxicons/bx-message-dots.svg?raw"; import matrixIcon from "../assets/boxicons/bx-message-dots.svg?raw";
import redditIcon from "../assets/boxicons/bx-reddit.svg?raw"; import redditIcon from "../assets/boxicons/bx-reddit.svg?raw";
import { Link } from "./Button";
export default function Footer() { export default function Footer() {
return ( return (
<footer> <footer>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="footer-text"> <div class="footer-text">
© 2024-2025 <a href="https://github.com/eliandoran">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors">team</a>.<br /> © 2024-2025 <Link href="https://github.com/eliandoran" openExternally>Elian Doran</Link> and the <Link href="https://github.com/TriliumNext/Notes/graphs/contributors" openExternally>team</Link>.<br />
© 2017-2024 <a href="https://github.com/zadam">zadam</a>. © 2017-2024 <Link href="https://github.com/zadam" openExternally>zadam</Link>.
</div> </div>
<div className="social-buttons"> <div className="social-buttons">
@ -46,8 +47,8 @@ export default function Footer() {
function SocialButton({ name, iconSvg, url }: { name: string, iconSvg: string, url: string }) { function SocialButton({ name, iconSvg, url }: { name: string, iconSvg: string, url: string }) {
return ( return (
<a className="social-button" href={url} target="_blank" title={name}> <Link className="social-button" href={url} openExternally title={name}>
<Icon svg={iconSvg} /> <Icon svg={iconSvg} />
</a> </Link>
) )
} }

View File

@ -3,7 +3,7 @@ import "./Donate.css";
import githubIcon from "../../assets/boxicons/bx-github.svg?raw"; import githubIcon from "../../assets/boxicons/bx-github.svg?raw";
import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw"; import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw";
import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw"; import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw";
import Button from "../../components/Button"; import Button, { Link } from "../../components/Button";
import Card from "../../components/Card"; import Card from "../../components/Card";
import { usePageTitle } from "../../hooks"; import { usePageTitle } from "../../hooks";
@ -16,11 +16,11 @@ export default function Donate() {
<div class="grid-2-cols"> <div class="grid-2-cols">
<Card title="Financial donations"> <Card title="Financial donations">
<p> <p>
Trilium is built and maintained with <a href="https://github.com/TriliumNext/Trilium/graphs/commit-activity" target="_blank">hundreds of hours of work</a>. Trilium is built and maintained with <Link href="https://github.com/TriliumNext/Trilium/graphs/commit-activity" openExternally>hundreds of hours of work</Link>.
Your support keeps it open-source, improves features, and covers costs such as hosting. Your support keeps it open-source, improves features, and covers costs such as hosting.
</p> </p>
<p>Consider supporting the main developer (<a href="https://github.com/eliandoran">eliandoran</a>) of the application via:</p> <p>Consider supporting the main developer (<Link href="https://github.com/eliandoran" openExternally>eliandoran</Link>) of the application via:</p>
<ul class="donate-buttons"> <ul class="donate-buttons">
<li> <li>
@ -56,9 +56,9 @@ export default function Donate() {
<Card title="Other ways to contribute"> <Card title="Other ways to contribute">
<ul> <ul>
<li>Translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</li> <li>Translate the application into your native language via <Link href="https://hosted.weblate.org/engage/trilium/" openExternally>Weblate</Link>.</li>
<li>Interact with the community on <a href="https://github.com/orgs/TriliumNext/discussions" target="_blank">GitHub Discussions</a> or on <a href="https://matrix.to/#/#triliumnext:matrix.org">Matrix</a>.</li> <li>Interact with the community on <Link href="https://github.com/orgs/TriliumNext/discussions" openExternally>GitHub Discussions</Link> or on <Link href="https://matrix.to/#/#triliumnext:matrix.org" openExternally>Matrix</Link>.</li>
<li>Report bugs via <a href="https://github.com/TriliumNext/Trilium/issues" target="_blank">GitHub issues</a>.</li> <li>Report bugs via <Link href="https://github.com/TriliumNext/Trilium/issues" openExternally>GitHub issues</Link>.</li>
<li>Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.</li> <li>Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.</li>
<li>Spread the word: Share Trilium Notes with friends, or on blogs and social media.</li> <li>Spread the word: Share Trilium Notes with friends, or on blogs and social media.</li>
</ul> </ul>