mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 23:29:02 +02:00
feat(website): add icons for donate buttons
This commit is contained in:
Elian Doran
parent
55c70b404c
commit
65dae511e5
1
apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg
Normal file
1
apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M12 8.07v-.01c-.01 0-.03.02-.04.03h.02Zm-.02 12.51h.01s.02-.03.03-.04c-.02 0-.03.02-.05.04Zm.03.12s-.03-.02-.05-.02c.01 0 .03.01.04.02Zm2.25-.66c.23-.21.37-.51.4-.82l.78-8.29c-.35-.12-.7-.2-1.1-.2-.69 0-1.24.24-1.88.51-.72.31-1.53.66-2.59.66-.44 0-.88-.06-1.31-.18l.73 7.5c.03.31.17.61.4.82s.53.33.85.33c0 0 1.04.05 1.38.05.37 0 1.49-.05 1.49-.05.31 0 .62-.12.85-.33M12.01 8.05l-.02-.02H12v.02Z"/><path d="M18.74 6.79c-.1-.5-.32-.97-.83-1.15-.16-.06-.35-.08-.48-.2s-.16-.3-.19-.48c-.05-.32-.1-.63-.16-.94-.05-.27-.09-.57-.21-.82-.16-.33-.5-.53-.83-.66-.17-.06-.34-.12-.52-.16-.83-.22-1.71-.3-2.56-.35-1.03-.06-2.06-.04-3.08.05-.76.07-1.57.15-2.29.42-.27.1-.54.21-.74.42-.25.25-.33.64-.15.95.13.22.35.38.58.48.3.13.61.24.94.3.9.2 1.82.28 2.74.31 1.01.04 2.03 0 3.04-.1.25-.03.5-.06.75-.1.29-.04.48-.43.39-.7-.1-.32-.38-.44-.7-.39-.05 0-.09.01-.14.02h-.03c-.11.02-.21.03-.32.04l-.66.06c-.49.03-.99.05-1.49.05-.49 0-.97-.01-1.46-.05q-.33-.015-.66-.06l-.3-.03h-.1l-.02-.02h-.1l-.6-.12c-.02 0-.04-.02-.05-.03-.01-.02-.02-.04-.02-.06s0-.04.02-.06c.01-.02.03-.03.05-.03.17-.04.35-.07.52-.1.06 0 .12-.02.18-.03.11 0 .22-.03.33-.04.95-.1 1.9-.13 2.85-.1.46.01.92.04 1.39.09l.3.03c.04 0 .08 0 .11.01h.08c.22.04.44.08.66.13.33.07.75.09.89.45.05.11.07.24.09.36l.03.15c.08.36.15.72.23 1.08v.08c0 .03-.02.05-.03.07s-.04.04-.06.06c-.02.01-.05.02-.08.03H16l-.05.01c-.15.02-.3.04-.44.05l-.87.09q-.87.075-1.74.09c-.3 0-.59.01-.89.01-1.18 0-2.36-.07-3.53-.21-.12-.01-.24-.03-.36-.04-.02 0-.11-.01-.13-.02-.08-.01-.16-.02-.24-.04-.27-.04-.54-.09-.81-.13-.33-.05-.64-.03-.94.13-.24.13-.44.34-.56.58-.13.26-.17.55-.22.83-.06.28-.15.59-.11.88.07.63.51 1.14 1.14 1.25a33 33 0 0 0 8.88.37l.58-.06c.06 0 .12 0 .18.02s.11.05.15.09.08.09.1.15.03.12.02.18l-.06.58-.36 3.52c-.13 1.23-.25 2.46-.38 3.7-.04.35-.07.69-.11 1.04-.03.34-.04.69-.1 1.03-.1.53-.46.86-.99.98-.48.11-.97.17-1.46.17-.55 0-1.09-.02-1.64-.02-.58 0-1.3-.05-1.75-.48-.4-.38-.45-.98-.5-1.49l-.21-2.05-.4-3.8-.26-2.46s0-.08-.01-.12c-.03-.29-.24-.58-.57-.57-.28.01-.6.25-.57.57l.19 1.82.39 3.77.33 3.21.06.62c.12 1.12.98 1.72 2.04 1.89.62.1 1.25.12 1.88.13.81.01 1.62.04 2.41-.1 1.17-.22 2.05-1 2.18-2.21.04-.35.07-.7.11-1.05l.36-3.48.39-3.79.18-1.74c0-.09.05-.17.1-.23s.14-.11.22-.12c.34-.07.66-.18.89-.43.38-.41.46-.94.32-1.47l-.11-.56ZM6.26 7.97s.01 0 .02.02zm11.36.01c-.12.11-.3.17-.48.19-2.01.3-4.05.45-6.09.38-1.46-.05-2.9-.21-4.34-.42-.14-.02-.29-.05-.39-.15-.06-.06-.08-.14-.1-.23v.01-.01c-.03-.2.02-.43.05-.6.04-.22.13-.51.39-.54.4-.05.87.12 1.27.18.48.07.96.13 1.45.18 2.07.19 4.17.16 6.23-.12.38-.05.75-.11 1.12-.18.33-.06.7-.17.9.17.14.23.16.55.13.81 0 .12-.06.22-.14.3Z"/><path d="M6.22 7.77c0-.02.01-.05 0-.05z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
1
apps/website/src/assets/boxicons/bx-github.svg
Normal file
1
apps/website/src/assets/boxicons/bx-github.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path fill-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.6 9.6 0 0 1 2.496-.336 9.6 9.6 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 956 B |
1
apps/website/src/assets/boxicons/bx-paypal.svg
Normal file
1
apps/website/src/assets/boxicons/bx-paypal.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M19.554 9.488q.18.844-.04 2.051-.873 4.467-5.683 4.466h-.442a.67.67 0 0 0-.444.166.72.72 0 0 0-.239.427l-.041.189-.553 3.479-.021.151a.7.7 0 0 1-.247.426.67.67 0 0 1-.447.166H8.874a.4.4 0 0 1-.331-.15.46.46 0 0 1-.09-.363q.09-.561.267-1.689.175-1.126.267-1.689c.092-.563.15-.938.272-1.685q.182-1.122.271-1.685.05-.371.433-.371h1.316q1.338.02 2.375-.211 1.758-.392 2.886-1.449 1.026-.956 1.56-2.473.241-.706.352-1.338.009-.062.025-.074.014-.016.035-.011a.4.4 0 0 1 .062.035c.524.398.854.941.98 1.632m-1.728-2.836q0 1.075-.465 2.374-.804 2.343-3.037 3.168-1.136.401-2.535.425 0 .008-.904.007l-.903-.007q-1.008-.001-1.187.964-.02.08-.855 5.329-.012.1-.121.102H4.854a.47.47 0 0 1-.369-.165.47.47 0 0 1-.115-.39L6.702 3.664a.78.78 0 0 1 .276-.483.8.8 0 0 1 .519-.19h6.014q.342 0 .979.131c.428.084.801.194 1.123.321q1.077.412 1.645 1.237t.568 1.972"/></svg>
|
||||||
|
After Width: | Height: | Size: 1006 B |
9
apps/website/src/components/Button.css
Normal file
9
apps/website/src/components/Button.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
a.button {
|
||||||
|
display: block;
|
||||||
|
background: var(--brand-1);
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--brand-foreground-color);
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
23
apps/website/src/components/Button.tsx
Normal file
23
apps/website/src/components/Button.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentChildren } from "preact";
|
||||||
|
import Icon from "./Icon";
|
||||||
|
import "./Button.css";
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
href?: string;
|
||||||
|
iconSvg?: string;
|
||||||
|
text: ComponentChildren;
|
||||||
|
openExternally?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className="button"
|
||||||
|
href={href}
|
||||||
|
target={openExternally ? "_blank" : undefined}
|
||||||
|
>
|
||||||
|
{iconSvg && <><Icon svg={iconSvg} />{" "}</>}
|
||||||
|
{text}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
apps/website/src/components/Icon.tsx
Normal file
9
apps/website/src/components/Icon.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
interface IconProps {
|
||||||
|
svg: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Icon({ svg }: IconProps) {
|
||||||
|
return (
|
||||||
|
<span className="bx" dangerouslySetInnerHTML={{ __html: svg }} />
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -16,13 +16,3 @@ section.donate ul {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section.donate ul a {
|
|
||||||
display: block;
|
|
||||||
background: var(--brand-1);
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: var(--brand-foreground-color);
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,9 @@
|
|||||||
import Section from "../../components/Section";
|
import Section from "../../components/Section";
|
||||||
import "./Donate.css";
|
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";
|
||||||
|
|
||||||
export default function Donate() {
|
export default function Donate() {
|
||||||
return (
|
return (
|
||||||
@ -10,9 +14,32 @@ export default function Donate() {
|
|||||||
<p>Consider supporting the main developer of the application via:</p>
|
<p>Consider supporting the main developer of the application via:</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/sponsors/eliandoran" target="_blank">GitHub Sponsors</a></li>
|
<li>
|
||||||
<li><a href="https://paypal.me/eliandoran" target="_blank">PayPal</a></li>
|
<Button
|
||||||
<li><a href="https://buymeacoffee.com/eliandoran" target="_blank">Buy Me A Coffee</a></li>
|
iconSvg={githubIcon}
|
||||||
|
href="https://github.com/sponsors/eliandoran"
|
||||||
|
text="GitHub Sponsors"
|
||||||
|
openExternally
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
iconSvg={paypalIcon}
|
||||||
|
href="https://paypal.me/eliandoran"
|
||||||
|
text="PayPal"
|
||||||
|
openExternally
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
iconSvg={buyMeACoffeeIcon}
|
||||||
|
href="https://buymeacoffee.com/eliandoran"
|
||||||
|
text="Buy Me A Coffee"
|
||||||
|
openExternally
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
|
|||||||
@ -101,6 +101,17 @@ img {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bx {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx svg {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 719px) {
|
@media (max-width: 719px) {
|
||||||
.grid-3-cols > *,
|
.grid-3-cols > *,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user