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 "./Button.css";
interface ButtonProps {
interface LinkProps {
className?: string;
href?: string;
openExternally?: boolean;
children: ComponentChildren;
title?: string;
}
interface ButtonProps extends Omit<LinkProps, "children"> {
href?: string;
iconSvg?: string;
text: ComponentChildren;
openExternally?: boolean;
className?: string;
outline?: boolean;
}
export default function Button({ href, iconSvg, openExternally, text, className, outline }: ButtonProps) {
export default function Button({ iconSvg, text, className, outline, ...restProps }: ButtonProps) {
return (
<a
<Link
className={`button ${className} ${outline ? "outline" : ""}`}
href={href}
target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
{...restProps}
>
{iconSvg && <><Icon svg={iconSvg} />{" "}</>}
{text}
</Link>
)
}
export function Link({ openExternally, children, ...restProps }: LinkProps) {
return (
<a
{...restProps}
target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
>
{children}
</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 matrixIcon from "../assets/boxicons/bx-message-dots.svg?raw";
import redditIcon from "../assets/boxicons/bx-reddit.svg?raw";
import { Link } from "./Button";
export default function Footer() {
return (
<footer>
<div class="content-wrapper">
<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 />
© 2017-2024 <a href="https://github.com/zadam">zadam</a>.
© 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 <Link href="https://github.com/zadam" openExternally>zadam</Link>.
</div>
<div className="social-buttons">
@ -46,8 +47,8 @@ export default function Footer() {
function SocialButton({ name, iconSvg, url }: { name: string, iconSvg: string, url: string }) {
return (
<a className="social-button" href={url} target="_blank" title={name}>
<Link className="social-button" href={url} openExternally title={name}>
<Icon svg={iconSvg} />
</a>
</Link>
)
}

View File

@ -3,7 +3,7 @@ import "./Donate.css";
import githubIcon from "../../assets/boxicons/bx-github.svg?raw";
import paypalIcon from "../../assets/boxicons/bx-paypal.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 { usePageTitle } from "../../hooks";
@ -16,11 +16,11 @@ export default function Donate() {
<div class="grid-2-cols">
<Card title="Financial donations">
<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.
</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">
<li>
@ -56,9 +56,9 @@ export default function Donate() {
<Card title="Other ways to contribute">
<ul>
<li>Translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</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>Report bugs via <a href="https://github.com/TriliumNext/Trilium/issues" target="_blank">GitHub issues</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 <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 <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>Spread the word: Share Trilium Notes with friends, or on blogs and social media.</li>
</ul>