LemmyNet/joinlemmy-site
2
0
Fork 0
mirror of https://github.com/LemmyNet/joinlemmy-site.git synced 2024-11-22 20:31:17 +00:00
Code Issues Projects Releases Wiki Activity

Finishing up blocks.

Browse source
This commit is contained in:
Dessalines 2023-09-24 19:10:47 -04:00
parent 65aae5f412
commit 8bd2eb826d
3 changed files with 208 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/shared/components/donate-lines.tsx
View file

@ -1,41 +0,0 @@
import { Component } from "inferno";
import { Link } from "inferno-router";
import { i18n } from "../i18next";
import { T } from "inferno-i18next";
export class DonateLines extends Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<>
<p>
<T i18nKey="donate_desc">
#<Link to="/donate">#</Link>#
</T>
</p>
<div class="row is-horizontal-align">
<div class="col-3">
<a class="button primary" href="https://liberapay.com/Lemmy">
{i18n.t("support_on_liberapay")}
</a>
</div>
<div class="col-3">
<a class="button primary" href="https://www.patreon.com/dessalines">
{i18n.t("support_on_patreon")}
</a>
</div>
<div class="col-3">
<a
class="col button primary"
href="https://opencollective.com/lemmy"
>
{i18n.t("support_on_opencollective")}
</a>
</div>
</div>
</>
);
}
}

2
src/shared/components/donate.tsx
View file

@ -1,6 +1,5 @@
import { Component } from "inferno"; import { Component } from "inferno";
import { Helmet } from "inferno-helmet"; import { Helmet } from "inferno-helmet";
import { DonateLines } from "./donate-lines";
import { i18n } from "../i18next"; import { i18n } from "../i18next";
import { T } from "inferno-i18next"; import { T } from "inferno-i18next";
import { translators } from "../translations/translators"; import { translators } from "../translations/translators";
@ -100,7 +99,6 @@ export class Donate extends Component<any, any> {
<div class="container"> <div class="container">
<div class="text-center"> <div class="text-center">
<h1>{i18n.t("support_lemmy")}</h1> <h1>{i18n.t("support_lemmy")}</h1>
<DonateLines />
</div> </div>
<hr /> <hr />

233
src/shared/components/main.tsx
View file

@ -1,19 +1,19 @@
import { Component } from "inferno"; import { Component } from "inferno";
import { Link } from "inferno-router"; import { Link } from "inferno-router";
import { Helmet } from "inferno-helmet"; import { Helmet } from "inferno-helmet";
import { DonateLines } from "./donate-lines";
import { i18n } from "../i18next"; import { i18n } from "../i18next";
import { T } from "inferno-i18next"; import { T } from "inferno-i18next";
import { isBrowser } from "../utils"; import { isBrowser } from "../utils";
import { Icon } from "./icon"; import { Icon } from "./icon";
const gradientTextClasses =
"bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]";
const LemmyTitleBlock = () => ( const LemmyTitleBlock = () => (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="flex flex-col items-center mb-2"> <div className="flex flex-col items-center mb-2">
<p className="text-2xl font-bold bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]"> <p className={`text-6xl font-bold ${gradientTextClasses}`}>Lemmy</p>
Lemmy <p className="text-3xl font-medium text-center">{i18n.t("lemmy_desc")}</p>
</p>
<p className="text-xl font-medium text-center">{i18n.t("lemmy_desc")}</p>
</div> </div>
<div className="flex flex-row justify-around gap-2"> <div className="flex flex-row justify-around gap-2">
<JoinServerButton /> <JoinServerButton />
@ -23,14 +23,14 @@ const LemmyTitleBlock = () => (
); );
const JoinServerButton = () => ( const JoinServerButton = () => (
<Link className="btn btn-primary" to="/instances"> <Link className="btn btn-primary text-white" to="/instances">
{i18n.t("join_a_server")} {i18n.t("join_a_server")}
</Link> </Link>
); );
const RunServerButton = () => ( const RunServerButton = () => (
<a <a
class="btn btn-secondary" class="btn btn-secondary text-white"
href={`/docs/administration/administration.html`} href={`/docs/administration/administration.html`}
> >
{i18n.t("run_a_server")} {i18n.t("run_a_server")}
@ -39,10 +39,12 @@ const RunServerButton = () => (
const FollowCommunitiesBlock = () => ( const FollowCommunitiesBlock = () => (
<div className="flex flex-col items-center mt-16"> <div className="flex flex-col items-center mt-16">
<div className="card card-bordered w-11/12 bg-neutral-800 shadow-xl"> <div className="card card-bordered bg-neutral-800 shadow-xl">
<div className="card-body items-center px-32 py-16"> <div className="card-body items-center px-32 py-16">
<p class="card-title text-center">{i18n.t("follow_communities")}</p> <p class="card-title text-4xl text-center mb-3">
<p class="text-sm text-gray-300 text-center mb-3"> {i18n.t("follow_communities")}
</p>
<p class="text-sm text-gray-300 text-center mb-6">
{i18n.t("lemmy_long_desc")} {i18n.t("lemmy_long_desc")}
</p> </p>
<JoinServerButton /> <JoinServerButton />
@ -52,7 +54,7 @@ const FollowCommunitiesBlock = () => (
); );
const FeatureCard = ({ pic, title, subtitle }) => ( const FeatureCard = ({ pic, title, subtitle }) => (
<div className="card card-bordered w-auto bg-neutral-800 shadow-xl"> <div className="card card-bordered bg-neutral-800 shadow-xl">
<figure className="px-10 pt-10"> <figure className="px-10 pt-10">
<img src={pic} className="rounded-xl" /> <img src={pic} className="rounded-xl" />
</figure> </figure>
@ -124,21 +126,21 @@ const ModToolsCard = () => (
const FeatureCardsBlock = () => ( const FeatureCardsBlock = () => (
<div className="grid md:grid-cols-12 grid-cols-1 gap-4 mt-16"> <div className="grid md:grid-cols-12 grid-cols-1 gap-4 mt-16">
<div className="col-span-7"> <div className="md:col-span-7">
<OpenSourceCard /> <OpenSourceCard />
</div> </div>
<div className="col-span-5"> <div className="md:col-span-5">
<BlazingFastCard /> <BlazingFastCard />
</div> </div>
<div className="col-span-4"> <div className="md:col-span-4">
<ModToolsCard /> <ModToolsCard />
</div> </div>
{/* TODO Add censorship and other cards */} {/* TODO Add censorship and other cards */}
<div className="col-span-4"> <div className="md:col-span-4">
<ModToolsCard /> <ModToolsCard />
</div> </div>
<div className="col-span-4"> <div className="md:col-span-4">
<ModToolsCard /> <ModToolsCard />
</div> </div>
</div> </div>
@ -146,12 +148,12 @@ const FeatureCardsBlock = () => (
const DiscussionPlatformBlock = () => ( const DiscussionPlatformBlock = () => (
<div className="flex flex-col items-center mt-16"> <div className="flex flex-col items-center mt-16">
<div className="card card-bordered w-11/12 bg-gradient-to-r text-transparent from-primary to-secondary shadow-xl"> <div className="card card-bordered bg-gradient-to-r text-transparent from-primary to-secondary shadow-xl">
<div className="card-body items-center px-32 py-16"> <div className="card-body items-center px-32 py-16">
<p class="card-title text-center text-white"> <p class="card-title text-4xl text-center text-white mb-3">
{i18n.t("create_discussion_platform")} {i18n.t("create_discussion_platform")}
</p> </p>
<p class="text-sm text-white text-center mb-3"> <p class="text-sm text-white text-center mb-6">
<T i18nKey="create_discussion_platform_desc"> <T i18nKey="create_discussion_platform_desc">
# #
<a <a
@ -178,7 +180,11 @@ const DiscussionPlatformBlock = () => (
// TODO add all of these ones // TODO add all of these ones
const MoreFeaturesBlock = () => ( const MoreFeaturesBlock = () => (
<div className="mt-16"> <div className="mt-16">
<div className="text-center text-2xl mb-8">{i18n.t("more_features")}</div> <div
className={`text-center text-primary text-4xl mb-8 ${gradientTextClasses}`}
>
{i18n.t("more_features")}
</div>
<div className="grid md:grid-cols-5 grid-cols-1 gap-4"> <div className="grid md:grid-cols-5 grid-cols-1 gap-4">
<MoreFeaturesCard <MoreFeaturesCard
icons={<Icon icon="f-droid" />} icons={<Icon icon="f-droid" />}
@ -186,13 +192,13 @@ const MoreFeaturesBlock = () => (
<T i18nKey="self_hostable"> <T i18nKey="self_hostable">
# #
<a <a
className="link" className="link link-primary"
href={`/docs/administration/install_docker.html`} href={`/docs/administration/install_docker.html`}
> >
# #
</a> </a>
<a <a
className="link" className="link link-primary"
href={`/docs/administration/install_ansible.html`} href={`/docs/administration/install_ansible.html`}
> >
# #
@ -206,7 +212,138 @@ const MoreFeaturesBlock = () => (
<Icon icon="f-droid" /> <Icon icon="f-droid" /> <Icon icon="f-droid" /> <Icon icon="f-droid" />
</div> </div>
} }
text={"Some more here"} text={i18n.t("clean_interface")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<Link class="link link-primary" to="/apps">
{i18n.t("mobile_apps_for_ios_and_android")}
</Link>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("avatar_support")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<T i18nKey="full_vote_scores">
#<code class="text-primary">#</code>#
</T>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("themes_including")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<T i18nKey="emojis_autocomplete">
#<code class="text-primary">#</code>
</T>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<T i18nKey="user_tagging">
#<code class="text-primary">#</code>
<code class="text-primary">#</code>
</T>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("integrated_image_uploading")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("notifications_including")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<T i18nKey="i18n_support">
#
<a
className="link link-primary"
href="https://weblate.join-lemmy.org/projects/lemmy/lemmy/"
>
#
</a>
</T>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={
<T i18nKey="rss_feeds">
#<code class="text-primary">#</code>
<code class="text-primary">#</code>
<code class="text-primary">#</code>
<code class="text-primary">#</code>
<code class="text-primary">#</code>
</T>
}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("can_fully_erase")}
/>
<MoreFeaturesCard
icons={
<div>
<Icon icon="f-droid" /> <Icon icon="f-droid" />
</div>
}
text={i18n.t("nsfw_support")}
/> />
</div> </div>
</div> </div>
@ -215,12 +352,58 @@ const MoreFeaturesBlock = () => (
const MoreFeaturesCard = ({ icons, text }) => ( const MoreFeaturesCard = ({ icons, text }) => (
<div className="card card-bordered w-auto bg-neutral-800 shadow-xl"> <div className="card card-bordered w-auto bg-neutral-800 shadow-xl">
<div className="card-body"> <div className="card-body">
<div className="btn btn-sm btn-secondary w-fit mb-3">{icons}</div> <div className="btn btn-sm btn-secondary w-fit mb-2">{icons}</div>
<p className="text-sm text-gray-300">{text}</p> <p className="text-sm text-gray-300">{text}</p>
</div> </div>
</div> </div>
); );
const DonateDesc = () => (
<p className="text-sm text-gray-300 mb-6">
<T i18nKey="donate_desc">
#
<Link className="link" to="/donate">
#
</Link>
#
</T>
</p>
);
const DonateButtons = () => (
<div class="flex flex-row justify-between gap-2">
<a class="btn btn-primary text-white" href="https://liberapay.com/Lemmy">
{i18n.t("support_on_liberapay")}
</a>
<a
class="btn btn-secondary text-white"
href="https://www.patreon.com/dessalines"
>
{i18n.t("support_on_patreon")}
</a>
<a
class="btn btn-primary text-white"
href="https://opencollective.com/lemmy"
>
{i18n.t("support_on_opencollective")}
</a>
</div>
);
const SupportDonateBlock = () => (
<div className="flex flex-col items-center mt-16">
<div className="card card-bordered bg-neutral-800 shadow-xl">
<div className="card-body px-32 py-16">
<p class={`card-title text-4xl mb-3 ${gradientTextClasses}`}>
{i18n.t("support_donate")}
</p>
<DonateDesc />
<DonateButtons />
</div>
</div>
</div>
);
export class Main extends Component<any, any> { export class Main extends Component<any, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
@ -244,6 +427,7 @@ export class Main extends Component<any, any> {
<FeatureCardsBlock /> <FeatureCardsBlock />
<DiscussionPlatformBlock /> <DiscussionPlatformBlock />
<MoreFeaturesBlock /> <MoreFeaturesBlock />
<SupportDonateBlock />
<div class="bg-success"> <div class="bg-success">
<br /> <br />
@ -412,7 +596,6 @@ export class Main extends Component<any, any> {
<h2> <h2>
<Link to="/donate">{i18n.t("support_donate")}</Link> <Link to="/donate">{i18n.t("support_donate")}</Link>
</h2> </h2>
<DonateLines />
</div> </div>
</div> </div>
<br /> <br />