From 14d463464dd9cb083a1de2b253a028ed88b35741 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 26 Sep 2023 13:08:22 -0400 Subject: [PATCH] Almost done with donation page. --- package.json | 1 + src/shared/components/common.tsx | 57 +++++++++ src/shared/components/donate.tsx | 183 ++++++++++++++++++---------- src/shared/components/main.tsx | 48 +------- src/shared/components/news-item.tsx | 2 +- src/shared/components/news.tsx | 26 ++-- src/shared/components/symbols.tsx | 3 + yarn.lock | 5 + 8 files changed, 201 insertions(+), 124 deletions(-) diff --git a/package.json b/package.json index 0d00831..3e99a61 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "repository": "https://github.com/LemmyNet/joinlemmy-site", "dependencies": { "@typescript-eslint/parser": "^5.60.1", + "classnames": "^2.3.2", "express": "~4.18.2", "i18next": "^23.2.6", "inferno": "^8.2.1", diff --git a/src/shared/components/common.tsx b/src/shared/components/common.tsx index 09e7104..6ebf476 100644 --- a/src/shared/components/common.tsx +++ b/src/shared/components/common.tsx @@ -1,2 +1,59 @@ +import { Link } from "inferno-router"; +import { i18n } from "../i18next"; +import { T } from "inferno-i18next"; +import { Icon } from "./icon"; + export const gradientTextClasses = "bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]"; + +export const Badge = ({ content }) => ( +
+ {content} +
+); + +export const DonateDesc = () => ( +

+ + # + + # + + # + +

+); + +export const DonateButtons = () => ( +
+ + {i18n.t("support_on_liberapay")} + + + {i18n.t("support_on_patreon")} + + + {i18n.t("support_on_opencollective")} + +
+); + +export const SupportDonateBlock = () => ( +
+
+
+

+ {i18n.t("support_donate")} +

+ + +
+
+
+); diff --git a/src/shared/components/donate.tsx b/src/shared/components/donate.tsx index 57c6ede..7a397e6 100644 --- a/src/shared/components/donate.tsx +++ b/src/shared/components/donate.tsx @@ -5,79 +5,124 @@ import { T } from "inferno-i18next"; import { translators } from "../translations/translators"; import { languagesAll, countries } from "countries-list"; import { isBrowser } from "../utils"; +import { Badge, SupportDonateBlock, gradientTextClasses } from "./common"; +import { + CODERS, + GOLD_SPONSORS, + HIGHLIGHTED_SPONSORS, + LATINUM_SPONSORS, + SILVER_SPONSORS, + SPONSORS, + Translation, +} from "./donate-definitions"; +import classNames from "classnames"; +import { Icon } from "./icon"; const avatarSize = 40; const bannerWidth = 240; const bannerHeight = 101; -interface LinkedSponsor { - name: string; - link: string; -} +const SectionTitle = ({ title }) => ( +
{title}
+); -interface GoldSponsor { - name: string; - link: string; - avatar: string; -} +const ContributorsBlock = () => ( +
+ +

{i18n.t("thanks_coders")}

+ +

+ {i18n.t("thanks_translators")} +

+ +
+); -let goldSponsors: GoldSponsor[] = []; +const CodersBlock = () => ( +
+
+ +
+
+); -let latinumSponsors: GoldSponsor[] = [ - { - name: "NLnet", - link: "https://nlnet.nl", - avatar: "https://nlnet.nl/image/logo_nlnet.svg", - }, -]; +const TranslatorsBlock = () => ( +
+
+ + {convertTranslators().map(t => ( + + + + + ))} +
+
+ {languagesAll[t.lang].native} + {t.country && {countries[t.country].native}} + : +
+ 		+ +
+
+
+); -let silverSponsors: LinkedSponsor[] = []; - -let highlightedSponsors = ["DQW", "John Knapp"]; -let sponsors = [ - "Anthony", - "Remi Rampin", - "Cameron C", - "Vegard", - "0ti.me", - "Brendan", - "mexicanhalloween .", - "Arthur Nieuwland", - "Forrest Weghorst", - "Luke Black", - "Brandon Abbott", - "Eon Gattignolo", -]; - -export interface Coder { +interface PersonBadgeData { name: string; link?: string; + greenOutline?: boolean; + greenAt?: boolean; } -let coders: Coder[] = [ - { name: "dessalines", link: "https://mastodon.social/@dessalines" }, - { name: "Nutomic", link: "https://lemmy.ml/u/nutomic" }, - { name: "asonix", link: "https://github.com/asonix" }, - { name: "krawieck", link: "https://github.com/krawieck" }, - { name: "shilangyu", link: "https://github.com/shilangyu" }, - { name: "uuttff8", link: "https://github.com/uuttff8" }, - { name: "eiknat", link: "https://github.com/eiknat" }, - { name: "ernestwisniewski", link: "https://github.com/ernestwisniewski" }, - { name: "zacanger", link: "https://github.com/zacanger" }, - { name: "iav", link: "https://github.com/iav" }, -]; - -export interface Translation { - lang: string; - country?: string; - translators: Translator[]; +interface PersonBadgeProps { + person: PersonBadgeData; } -export interface Translator { - name: string; - link?: string; +const PersonBadge = ({ person }: PersonBadgeProps) => + person.link ? ( + + + + ) : ( + + ); + +const PersonBadgeInternal = ({ person }: PersonBadgeProps) => ( + + + + {person.name} + + + } + /> +); + +interface PersonBadgesProps { + persons: PersonBadgeData[]; } +const PersonBadges = ({ persons }: PersonBadgesProps) => ( +
+ {persons.map(p => ( + + ))} +
+); + export class Donate extends Component { constructor(props: any, context: any) { super(props, context); @@ -92,10 +137,14 @@ export class Donate extends Component { render() { const title = i18n.t("support_title"); return ( -
+
+ +
+ +

{i18n.t("support_lemmy")}

@@ -109,11 +158,11 @@ export class Donate extends Component {

{i18n.t("sponsors")}

- {latinumSponsors.length > 0 && ( + {LATINUM_SPONSORS.length > 0 && (

{i18n.t("gold_pressed_latinum_sponsors_desc")}

- {latinumSponsors.map(s => ( + {LATINUM_SPONSORS.map(s => (
{
)} - {goldSponsors.length > 0 && ( + {GOLD_SPONSORS.length > 0 && (

{i18n.t("gold_sponsors_desc")}

- {goldSponsors.map(s => ( + {GOLD_SPONSORS.map(s => (
{
)} - {silverSponsors.length > 0 && ( + {SILVER_SPONSORS.length > 0 && (

{i18n.t("silver_sponsors_desc")}

- {silverSponsors.map(s => ( + {SILVER_SPONSORS.map(s => (
💎 {s.name} @@ -167,12 +216,12 @@ export class Donate extends Component { )}

{i18n.t("general_sponsors_desc")}

- {highlightedSponsors.map(s => ( + {HIGHLIGHTED_SPONSORS.map(s => (
{s}
))} - {sponsors.map(s => ( + {SPONSORS.map(s => (
{s}
@@ -257,14 +306,14 @@ export class Donate extends Component {

{i18n.t("thanks_coders")} - {coders.map((coder, i) => ( + {CODERS.map((coder, i) => ( {coder.link ? ( {coder.name} ) : ( {coder.name} )} - {i != coders.length - 1 ? ", " : " "} + {i != CODERS.length - 1 ? ", " : " "} ))}

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx index 25a5c1f..0c49966 100644 --- a/src/shared/components/main.tsx +++ b/src/shared/components/main.tsx @@ -5,7 +5,7 @@ import { i18n } from "../i18next"; import { T } from "inferno-i18next"; import { isBrowser } from "../utils"; import { Icon } from "./icon"; -import { gradientTextClasses } from "./common"; +import { SupportDonateBlock, gradientTextClasses } from "./common"; const TitleBlock = () => (
@@ -354,52 +354,6 @@ const MoreFeaturesCard = ({ icons, text }) => (
); -const DonateDesc = () => ( -

- - # - - # - - # - -

-); - -const DonateButtons = () => ( -
- - {i18n.t("support_on_liberapay")} - - - {i18n.t("support_on_patreon")} - - - {i18n.t("support_on_opencollective")} - -
-); - -const SupportDonateBlock = () => ( -
-
-
-

- {i18n.t("support_donate")} -

- - -
-
-
-); - export class Main extends Component { constructor(props: any, context: any) { super(props, context); diff --git a/src/shared/components/news-item.tsx b/src/shared/components/news-item.tsx index e124312..cdfb350 100644 --- a/src/shared/components/news-item.tsx +++ b/src/shared/components/news-item.tsx @@ -29,7 +29,7 @@ export class NewsItem extends Component { -
+
diff --git a/src/shared/components/news.tsx b/src/shared/components/news.tsx index 98128a2..6cbaa25 100644 --- a/src/shared/components/news.tsx +++ b/src/shared/components/news.tsx @@ -4,7 +4,8 @@ import { Helmet } from "inferno-helmet"; import { i18n } from "../i18next"; import { isBrowser } from "../utils"; import { news_md } from "../translations/news"; -import { gradientTextClasses } from "./common"; +import { Badge, gradientTextClasses } from "./common"; +import { Icon } from "./icon"; const title = i18n.t("news"); const authors = ["nutomic", "dessalines"]; @@ -51,7 +52,7 @@ interface NewsProps { } const NewsCard = ({ news }: NewsProps) => ( -
+
@@ -60,9 +61,12 @@ const NewsCard = ({ news }: NewsProps) => ( {title}
{news.dateStr}
- {authors.map(name => ( - - ))} + +
+ {authors.map(name => ( + + ))} +
{news.preview}
@@ -75,10 +79,14 @@ const NewsCard = ({ news }: NewsProps) => ( ); const AuthorBadge = ({ name }) => ( -
- @ - {name} -
+ + + {name} +
+ } + /> ); export class News extends Component { diff --git a/src/shared/components/symbols.tsx b/src/shared/components/symbols.tsx index 7049df8..9326bc3 100644 --- a/src/shared/components/symbols.tsx +++ b/src/shared/components/symbols.tsx @@ -20,6 +20,9 @@ export class Symbols extends Component { xmlnsXlink="http://www.w3.org/1999/xlink" > + + + diff --git a/yarn.lock b/yarn.lock index f9e949c..72a297e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2335,6 +2335,11 @@ cidr-regex@1.0.6: resolved "https://registry.yarnpkg.com/cidr-regex/-/cidr-regex-1.0.6.tgz#74abfd619df370b9d54ab14475568e97dd64c0c1" integrity sha1-dKv9YZ3zcLnVSrFEdVaOl91kwME= +classnames@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"