mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
refactor(website): use link component with rel
This commit is contained in:
parent
4e4e65b462
commit
c21a9223f5
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user