mirror of
https://github.com/LemmyNet/joinlemmy-site.git
synced 2024-11-22 04:11:15 +00:00
Some cleanup, refactoring into components
This commit is contained in:
parent
af641e1f82
commit
d39b3e7148
7 changed files with 414 additions and 319 deletions
50
src/shared/components/app-details.tsx
Normal file
50
src/shared/components/app-details.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { Component } from "inferno";
|
||||
import { Icon } from "./icon";
|
||||
|
||||
interface AppDetailsProps {
|
||||
name: string;
|
||||
description: string;
|
||||
link: string;
|
||||
icon?: string;
|
||||
banner?: string;
|
||||
links: AppLink[];
|
||||
}
|
||||
|
||||
interface AppLink {
|
||||
link: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export class AppDetails extends Component<AppDetailsProps, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
render() {
|
||||
let p = this.props;
|
||||
let icon = p.icon || "/static/assets/images/lemmy.svg";
|
||||
let banner = p.banner || "/static/assets/images/lemmy.svg";
|
||||
|
||||
return (
|
||||
<>
|
||||
<header class="is-center">
|
||||
<img class="app-icon" src={icon} />
|
||||
<h4>
|
||||
<a href={p.link}>{p.name}</a>
|
||||
</h4>
|
||||
</header>
|
||||
<div class="is-center">
|
||||
<img class="app-banner" src={banner} />
|
||||
</div>
|
||||
<br />
|
||||
<p class="is-center">{p.description}</p>
|
||||
<footer class="is-center">
|
||||
{p.links.map(l => (
|
||||
<a class="button primary" href={l.link}>
|
||||
<Icon icon={l.icon} />
|
||||
</a>
|
||||
))}
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from "inferno";
|
||||
import { Icon } from "./icon";
|
||||
import { AppDetails } from "./app-details";
|
||||
import { Helmet } from "inferno-helmet";
|
||||
|
||||
const title = "Lemmy - Apps and Libraries";
|
||||
|
|
@ -20,73 +20,49 @@ export class Apps extends Component<any, any> {
|
|||
|
||||
<div class="row">
|
||||
<div class="card col-6">
|
||||
<header class="is-center">
|
||||
<img class="app-icon" src="/static/assets/images/lemmur.svg" />
|
||||
<h4>
|
||||
<a href="https://github.com/krawieck/lemmur">lemmur</a>
|
||||
</h4>
|
||||
</header>
|
||||
<div class="is-center">
|
||||
<img
|
||||
class="app-banner"
|
||||
src="/static/assets/images/lemmur_screen.webp"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="is-center">
|
||||
A Lemmy client for Android, Linux, and Windows.
|
||||
</p>
|
||||
<footer class="is-center">
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://f-droid.org/packages/com.krawieck.lemmur"
|
||||
>
|
||||
<Icon icon="f-droid" />
|
||||
</a>
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://play.google.com/store/apps/details?id=com.krawieck.lemmur"
|
||||
>
|
||||
<Icon icon="googleplay" />
|
||||
</a>
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://github.com/krawieck/lemmur"
|
||||
>
|
||||
<Icon icon="github" />
|
||||
</a>
|
||||
</footer>
|
||||
<AppDetails
|
||||
name="lemmur"
|
||||
description="A Lemmy client for Android, Linux, and Windows."
|
||||
link="https://github.com/krawieck/lemmur"
|
||||
icon="/static/assets/images/lemmur.svg"
|
||||
banner="/static/assets/images/lemmur_screen.webp"
|
||||
links={[
|
||||
{
|
||||
link: "https://f-droid.org/packages/com.krawieck.lemmur",
|
||||
icon: "f-droid",
|
||||
},
|
||||
{
|
||||
link:
|
||||
"https://play.google.com/store/apps/details?id=com.krawieck.lemmur",
|
||||
icon: "googleplay",
|
||||
},
|
||||
{
|
||||
link: "https://github.com/krawieck/lemmur",
|
||||
icon: "github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="card col-6">
|
||||
<header class="is-center">
|
||||
<img class="app-icon" src="/static/assets/images/remmel.webp" />
|
||||
<h4>
|
||||
<a href="https://github.com/uuttff8/Lemmy-iOS">remmel</a>
|
||||
</h4>
|
||||
</header>
|
||||
<div class="is-center">
|
||||
<img
|
||||
class="app-banner"
|
||||
src="/static/assets/images/remmel_screen.webp"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="is-center">An iOS client for lemmy.</p>
|
||||
<footer class="is-center">
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://apps.apple.com/us/app/remmel-for-lemmy/id1547988171"
|
||||
>
|
||||
<Icon icon="appleinc" />
|
||||
</a>
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://github.com/uuttff8/Lemmy-iOS"
|
||||
>
|
||||
<Icon icon="github" />
|
||||
</a>
|
||||
</footer>
|
||||
<AppDetails
|
||||
name="remmel"
|
||||
description="An iOS client for lemmy."
|
||||
link="https://github.com/uuttff8/Lemmy-iOS"
|
||||
icon="/static/assets/images/remmel.webp"
|
||||
banner="/static/assets/images/remmel_screen.webp"
|
||||
links={[
|
||||
{
|
||||
link:
|
||||
"https://apps.apple.com/us/app/remmel-for-lemmy/id1547988171",
|
||||
icon: "appleinc",
|
||||
},
|
||||
{
|
||||
link: "https://github.com/uuttff8/Lemmy-iOS",
|
||||
icon: "github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -94,58 +70,33 @@ export class Apps extends Component<any, any> {
|
|||
|
||||
<div class="row">
|
||||
<div class="card col-6">
|
||||
<header class="is-center">
|
||||
<img class="app-icon" src="/static/assets/images/lemmy.svg" />
|
||||
<h4>
|
||||
<a href="https://github.com/LemmyNet/lemmy-ui">lemmy-ui</a>
|
||||
</h4>
|
||||
</header>
|
||||
<div class="is-center">
|
||||
<img
|
||||
class="app-banner"
|
||||
src="/static/assets/images/mobile_pic.webp"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="is-center">The official web app for lemmy.</p>
|
||||
<footer class="is-center">
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://github.com/LemmyNet/lemmy-ui"
|
||||
>
|
||||
<Icon icon="github" />
|
||||
</a>
|
||||
</footer>
|
||||
<AppDetails
|
||||
name="lemmy-ui"
|
||||
description="The official web app for lemmy."
|
||||
link="https://github.com/LemmyNet/lemmy-ui"
|
||||
banner="/static/assets/images/mobile_pic.webp"
|
||||
links={[
|
||||
{
|
||||
link: "https://github.com/LemmyNet/lemmy-ui",
|
||||
icon: "github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="card col-6">
|
||||
<header class="is-center">
|
||||
<img class="app-icon" src="/static/assets/images/lemmy.svg" />
|
||||
<h4>
|
||||
<a href="https://github.com/IronOxidizer/lemmy-lite">
|
||||
lemmy-lite
|
||||
</a>
|
||||
</h4>
|
||||
</header>
|
||||
<div class="is-center">
|
||||
<img
|
||||
class="app-banner"
|
||||
src="/static/assets/images/lemmy_lite_screen.webp"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="is-center">
|
||||
A static, JSless, touch-friendly Lemmy frontend built for legacy
|
||||
web clients and maximum performance
|
||||
</p>
|
||||
<footer class="is-center">
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://github.com/IronOxidizer/lemmy-lite"
|
||||
>
|
||||
<Icon icon="github" />
|
||||
</a>
|
||||
</footer>
|
||||
<AppDetails
|
||||
name="lemmy-lite"
|
||||
description="A static, JSless, touch-friendly Lemmy frontend built for legacy web clients and maximum performance"
|
||||
link="https://github.com/IronOxidizer/lemmy-lite"
|
||||
banner="/static/assets/images/lemmy_lite_screen.webp"
|
||||
links={[
|
||||
{
|
||||
link: "https://github.com/IronOxidizer/lemmy-lite",
|
||||
icon: "github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
39
src/shared/components/donate-lines.tsx
Normal file
39
src/shared/components/donate-lines.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { Component } from "inferno";
|
||||
|
||||
export class DonateLines extends Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Lemmy is free, open-source software, meaning no advertising,
|
||||
monetizing, or venture capital, ever.{" "}
|
||||
<a href="/sponsors">Your donations</a> directly support full-time
|
||||
development of the project.
|
||||
</p>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col-3">
|
||||
<a class="button primary" href="https://liberapay.com/Lemmy">
|
||||
Support on Liberapay
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a class="button primary" href="https://www.patreon.com/dessalines">
|
||||
Support on Patreon
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a
|
||||
class="col button primary"
|
||||
href="https://opencollective.com/lemmy"
|
||||
>
|
||||
Support on OpenCollective
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { Component } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
import { LinkLine } from "./link-line";
|
||||
|
||||
export class Footer extends Component<any, any> {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { Helmet } from "inferno-helmet";
|
|||
|
||||
const title = "Lemmy - Join a Server";
|
||||
|
||||
// TODO wait until new lemmy-instances is written to refactor this
|
||||
|
||||
export class Join extends Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
|
|
|||
|
|
@ -1,111 +1,133 @@
|
|||
import { Component } from "inferno";
|
||||
import { Helmet } from "inferno-helmet";
|
||||
import { DonateLines } from "./donate-lines";
|
||||
|
||||
const title = "Lemmy - A link aggregator for the fediverse";
|
||||
|
||||
export class Main extends Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Helmet title={title}>
|
||||
<meta property={"title"} content={title} />
|
||||
</Helmet>
|
||||
<div class="bg-image"></div>
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h1 class="stylized">Lemmy</h1>
|
||||
<h4>A link aggregator for the fediverse.</h4>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col-2-lg">
|
||||
<a class="button primary" href="/join">Join a Server</a>
|
||||
</div>
|
||||
<div class="col-2-lg">
|
||||
<a class="button primary" href="/docs/en/administration/administration.html">Run a Server</a>
|
||||
</div>
|
||||
<div class="bg-image"></div>
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h1 class="stylized">Lemmy</h1>
|
||||
<h4>A link aggregator for the fediverse.</h4>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col-2-lg">
|
||||
<a class="button primary" href="/join">
|
||||
Join a Server
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2-lg">
|
||||
<a
|
||||
class="button primary"
|
||||
href="/docs/en/administration/administration.html"
|
||||
>
|
||||
Run a Server
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>Follow communities anywhere in the world</h2>
|
||||
<p><a href="https://github.com/LemmyNet">Lemmy</a> is similar to sites like <a href="https://reddit.com">Reddit</a>, <a href="https://lobste.rs">Lobste.rs</a>, or <a href="https://news.ycombinator.com/">Hacker News</a>: you subscribe to communities you're interested in, post links and discussions, then vote and comment on them. Lemmy isn't just a reddit alternative; its a network of interconnected communities ran by different people and organizations, all combining to create <b>a single, personalized front page</b> of your favorite news, articles, and memes. </p>
|
||||
<p><a class="button primary" href="/join">Join a Server</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="bg-success">
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img height={180} src="/static/assets/images/review_pic.webp" />
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Open Source</h4>
|
||||
<p>Lemmy is and will always remain free, <a href="https://github.com/LemmyNet">open source</a> software, using the strong <a href="https://en.wikipedia.org/wiki/Copyleft">copyleft</a> <a href="https://github.com/LemmyNet/lemmy/blob/master/LICENSE">AGPL License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img height={180} src="/static/assets/images/code_pic.webp" />
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Blazing Fast</h4>
|
||||
<p>Made using some of the fastest frameworks and tools, including <a href="https://www.rust-lang.org">Rust</a>, <a href="https://actix.rs/">Actix</a>, <a href="http://diesel.rs/">Diesel</a>, <a href="https://infernojs.org">Inferno</a>, and <a href="https://www.typescriptlang.org/">Typescript</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img height={180} src="/static/assets/images/mod_pic.webp" />
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Powerful Mod Tools</h4>
|
||||
<p>Each server can set its own moderation policy, to help foster a healthy environment where all can feel comfortable contributing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>Create your own discussion platform</h2>
|
||||
<p>With Lemmy, you can <a href="/docs/en/administration/administration.html">easily host your own server</a>, and all these servers are <i>federated</i> (think email), and connected to the same universe, called the <a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a>. For a link aggregator, this means that someone registered on one server can subscribe to communities elsewhere, and can have discussions with people on a completely different server.</p>
|
||||
<p>
|
||||
<a class="button primary" href="/docs/en/administration/administration.html">Run a Server</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>Follow communities anywhere in the world</h2>
|
||||
<p>
|
||||
<a href="https://github.com/LemmyNet">Lemmy</a> is similar to
|
||||
sites like <a href="https://reddit.com">Reddit</a>,{" "}
|
||||
<a href="https://lobste.rs">Lobste.rs</a>, or{" "}
|
||||
<a href="https://news.ycombinator.com/">Hacker News</a>: you
|
||||
subscribe to communities you're interested in, post links and
|
||||
discussions, then vote and comment on them. Lemmy isn't just a
|
||||
reddit alternative; its a network of interconnected communities
|
||||
ran by different people and organizations, all combining to create{" "}
|
||||
<b>a single, personalized front page</b> of your favorite news,
|
||||
articles, and memes.{" "}
|
||||
</p>
|
||||
<p>
|
||||
<a class="button primary" href="/join">
|
||||
Join a Server
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="bg-success">
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h4>Live Updates</h4>
|
||||
<p>New comments and posts stream in to your front page and inbox; No more page refreshes required.</p>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img
|
||||
height={180}
|
||||
src="/static/assets/images/review_pic.webp"
|
||||
/>
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Open Source</h4>
|
||||
<p>
|
||||
Lemmy is and will always remain free,{" "}
|
||||
<a href="https://github.com/LemmyNet">open source</a>{" "}
|
||||
software, using the strong{" "}
|
||||
<a href="https://en.wikipedia.org/wiki/Copyleft">
|
||||
copyleft
|
||||
</a>{" "}
|
||||
<a href="https://github.com/LemmyNet/lemmy/blob/master/LICENSE">
|
||||
AGPL License
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 is-center">
|
||||
<video height={325} autoPlay loop>
|
||||
<source src="/static/assets/images/reply_vid.webm" />
|
||||
</video>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img
|
||||
height={180}
|
||||
src="/static/assets/images/code_pic.webp"
|
||||
/>
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Blazing Fast</h4>
|
||||
<p>
|
||||
Made using some of the fastest frameworks and tools,
|
||||
including <a href="https://www.rust-lang.org">Rust</a>,{" "}
|
||||
<a href="https://actix.rs/">Actix</a>,{" "}
|
||||
<a href="http://diesel.rs/">Diesel</a>,{" "}
|
||||
<a href="https://infernojs.org">Inferno</a>, and{" "}
|
||||
<a href="https://www.typescriptlang.org/">Typescript</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<header class="is-center">
|
||||
<img
|
||||
height={180}
|
||||
src="/static/assets/images/mod_pic.webp"
|
||||
/>
|
||||
</header>
|
||||
<br />
|
||||
<h4 class="text-center">Powerful Mod Tools</h4>
|
||||
<p>
|
||||
Each server can set its own moderation policy, to help
|
||||
foster a healthy environment where all can feel comfortable
|
||||
contributing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,57 +136,122 @@ export class Main extends Component<any, any> {
|
|||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 is-center">
|
||||
<img height={325} src="/static/assets/images/mobile_pic.webp" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h4 class="is-marginless">More Features</h4>
|
||||
<ul class="is-marginless">
|
||||
<li>Self hostable, easy to deploy, via <a href="/docs/en/administration/install_docker.html">Docker</a>, or <a href="/docs/en/administration/install_ansible.html">Ansible</a>.
|
||||
</li>
|
||||
<li>Clean, mobile-friendly interface.</li>
|
||||
<li>User avatar support.</li>
|
||||
<li>Full vote scores <code>(+/-)</code> like old Reddit.</li>
|
||||
<li>Themes, including light, dark, and solarized.</li>
|
||||
<li>Emojis with autocomplete support. Start typing <code>:</code></li>
|
||||
<li>User tagging using <code>@</code>, Community tagging using <code>!</code>.</li>
|
||||
<li>Integrated image uploading in both posts and comments.</li>
|
||||
<li>Notifications, including via email.</li>
|
||||
<li><a href="https://weblate.yerbamate.ml/projects/lemmy/lemmy/">i18n / internationalization support for > 30 languages.</a></li>
|
||||
<li>RSS / Atom feeds for <code>All</code>, <code>Subscribed</code>, <code>Inbox</code>, <code>User</code>, and <code>Community</code>.</li>
|
||||
<li>Can fully erase your data, replacing all posts and comments.</li>
|
||||
<li>NSFW post / community support.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h2>Create your own discussion platform</h2>
|
||||
<p>
|
||||
With Lemmy, you can{" "}
|
||||
<a href="/docs/en/administration/administration.html">
|
||||
easily host your own server
|
||||
</a>
|
||||
, and all these servers are <i>federated</i> (think email), and
|
||||
connected to the same universe, called the{" "}
|
||||
<a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a>.
|
||||
For a link aggregator, this means that someone registered on one
|
||||
server can subscribe to communities elsewhere, and can have
|
||||
discussions with people on a completely different server.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="button primary"
|
||||
href="/docs/en/administration/administration.html"
|
||||
>
|
||||
Run a Server
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div class="bg-success">
|
||||
<br />
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2><a href="/sponsors">Support / Donate</a></h2>
|
||||
<p>Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. <a href="/sponsors">Your donations</a> directly support full-time development of the project.</p>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col-3">
|
||||
<a class="button primary" href="https://liberapay.com/Lemmy">Support on Liberapay</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a class="button primary" href="https://www.patreon.com/dessalines">Support on Patreon</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a class="col button primary" href="https://opencollective.com/lemmy">Support on OpenCollective</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h4>Live Updates</h4>
|
||||
<p>
|
||||
New comments and posts stream in to your front page and inbox;
|
||||
No more page refreshes required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-6 is-center">
|
||||
<video height={325} autoPlay loop>
|
||||
<source src="/static/assets/images/reply_vid.webm" />
|
||||
</video>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 is-center">
|
||||
<img height={325} src="/static/assets/images/mobile_pic.webp" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h4 class="is-marginless">More Features</h4>
|
||||
<ul class="is-marginless">
|
||||
<li>
|
||||
Self hostable, easy to deploy, via{" "}
|
||||
<a href="/docs/en/administration/install_docker.html">
|
||||
Docker
|
||||
</a>
|
||||
, or{" "}
|
||||
<a href="/docs/en/administration/install_ansible.html">
|
||||
Ansible
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
<li>Clean, mobile-friendly interface.</li>
|
||||
<li>User avatar support.</li>
|
||||
<li>
|
||||
Full vote scores <code>(+/-)</code> like old Reddit.
|
||||
</li>
|
||||
<li>Themes, including light, dark, and solarized.</li>
|
||||
<li>
|
||||
Emojis with autocomplete support. Start typing <code>:</code>
|
||||
</li>
|
||||
<li>
|
||||
User tagging using <code>@</code>, Community tagging using{" "}
|
||||
<code>!</code>.
|
||||
</li>
|
||||
<li>Integrated image uploading in both posts and comments.</li>
|
||||
<li>Notifications, including via email.</li>
|
||||
<li>
|
||||
<a href="https://weblate.yerbamate.ml/projects/lemmy/lemmy/">
|
||||
i18n / internationalization support for > 30 languages.
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
RSS / Atom feeds for <code>All</code>, <code>Subscribed</code>
|
||||
, <code>Inbox</code>, <code>User</code>, and{" "}
|
||||
<code>Community</code>.
|
||||
</li>
|
||||
<li>
|
||||
Can fully erase your data, replacing all posts and comments.
|
||||
</li>
|
||||
<li>NSFW post / community support.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div class="bg-success">
|
||||
<br />
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h2>
|
||||
<a href="/sponsors">Support / Donate</a>
|
||||
</h2>
|
||||
<DonateLines />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,33 @@
|
|||
import { Component } from "inferno";
|
||||
import { Helmet } from "inferno-helmet";
|
||||
import { DonateLines } from "./donate-lines";
|
||||
|
||||
const title = "Lemmy - Sponsors";
|
||||
|
||||
interface LinkedSponsor {
|
||||
name: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
let silverSponsors: LinkedSponsor[] = [
|
||||
{ name: "RedJoker", link: "https://iww.org" },
|
||||
];
|
||||
let highlightedSponsors = ["DQW", "Alex Benishek"];
|
||||
let sponsors = [
|
||||
"seahorse",
|
||||
"Tommaso",
|
||||
"Jamie Gray",
|
||||
"Brendan",
|
||||
"mexicanhalloween",
|
||||
"William Moore",
|
||||
"Rachel Schmitz",
|
||||
"comradeda",
|
||||
"Jonathan Cremin",
|
||||
"Arthur Nieuwland",
|
||||
"Forrest Weghorst",
|
||||
"Andre Vallestero",
|
||||
];
|
||||
|
||||
export class Sponsors extends Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
|
@ -16,35 +41,7 @@ export class Sponsors extends Component<any, any> {
|
|||
<div class="container">
|
||||
<div class="text-center">
|
||||
<h1>Donate to Lemmy</h1>
|
||||
<p>
|
||||
Lemmy is free, open-source software, meaning no advertising,
|
||||
monetizing, or venture capital, ever.{" "}
|
||||
<a href="/sponsors">Your donations</a> directly support full-time
|
||||
development of the project.
|
||||
</p>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col-3">
|
||||
<a class="button primary" href="https://liberapay.com/Lemmy">
|
||||
Support on Liberapay
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a
|
||||
class="button primary"
|
||||
href="https://www.patreon.com/dessalines"
|
||||
>
|
||||
Support on Patreon
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<a
|
||||
class="col button primary"
|
||||
href="https://opencollective.com/lemmy"
|
||||
>
|
||||
Support on OpenCollective
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<DonateLines />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
|
@ -53,57 +50,27 @@ export class Sponsors extends Component<any, any> {
|
|||
<h2>Sponsors</h2>
|
||||
<p>Silver Sponsors are those that pledged $40 to Lemmy.</p>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col">
|
||||
<a class="button outline primary" href="https://iww.org/">
|
||||
💎 RedJoker
|
||||
</a>
|
||||
</div>
|
||||
{silverSponsors.map(s => (
|
||||
<div class="col">
|
||||
<a class="button outline primary" href={s.link}>
|
||||
💎 {s.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<br />
|
||||
<p>General Sponsors are those that pledged $10 to $39 to Lemmy.</p>
|
||||
<div class="row is-horizontal-align">
|
||||
<div class="col">
|
||||
<div class="button outline primary">DQW</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline primary">Alex Benishek</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">seahorse</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Tommaso</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Jamie Gray</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Brendan</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">mexicanhalloween</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">William Moore</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Rachel Schmitz</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">comradeda</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Jonathan Cremin</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Arthur Nieuwland</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Forrest Weghorst</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button outline">Andre Vallestero</div>
|
||||
</div>
|
||||
{highlightedSponsors.map(s => (
|
||||
<div class="col">
|
||||
<div class="button outline primary">{s}</div>
|
||||
</div>
|
||||
))}
|
||||
{sponsors.map(s => (
|
||||
<div class="col">
|
||||
<div class="button outline">{s}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue