@@ -1,49 +1,91 @@
import React, { FC } from 'react' ;
import { MumbleStatus } from 'src/lib/mumble' ;
import { XMPPStatus } from 'src/lib/xmpp' ;
import { MastodonStatus } from 'src/lib/mastodon' ;
import React, { FC } from "react" ;
import { MumbleStatus } from "src/lib/mumble" ;
import { XMPPStatus } from "src/lib/xmpp" ;
import { MastodonStatus } from "src/lib/mastodon" ;
import cn from 'classnames';
import cn from "classnames";
import embedStyles from "src/lib/styles";
type Props = {
mastodon: MastodonStatus,
mumble: MumbleStatus,
xmpp: XMPPStatus,
staticHost?: string,
}
mastodon: MastodonStatus;
mumble: MumbleStatus;
xmpp: XMPPStatus;
staticHost?: string;
};
const Landing: FC<Props> = ({ mastodon, mumble, xmpp, staticHost = 'http://localhost:8080' }) => (
<html>
<head>
<title>GenSoc Network</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href={`${staticHost}/static/landing/styles/style-initial.css`} />
</head>
<body>
<div className="grid-container">
<div className="grid-cell">
<div className="yuyuko-cell">
<div className="yuyuko-bg img-bg"></div>
<h3>Gensokyo.social</h3>
<hr className="break" />
<h4>A Free <a href="https://en.wikipedia.org/wiki/Fediverse" target="blank_" rel="noreferrer">Fediverse</a> Node.</h4>
<ul className="feature-list">
<li>Fully-automated Luxury Gay Yokai Communism:</li>
<li>Running Mastodon {mastodon.version}</li>
<li>Providing social network services and more</li>
<li>Operating on <a target="_blank" href="https://nixos.org">NixOS</a> from <a target="_blank" rel="noreferrer" href="https://www.openstreetmap.org/search?query=Limburger%20Str.%2045%2C%2065555%20Limburg%20an%20der%20Lahn#map=19/50.40888/8.06255">Limburg, Germany</a></li>
<li>Proudly using <a href="https://jortage.com" target="_blank" rel="noreferrer">Jortage</a></li>
<li>Serving dinner</li>
</ul>
</div>
</div>
<div className="grid-cell">
<div className="youmu-cell">
<div className="img-bg youmu-bg"></div>
<h3>Mastodon</h3>
<hr className="break" />
<h4>Is it dinner yet?</h4>
{/*<p style={{
const Landing: FC<Props> = ({ mastodon, mumble, xmpp }) => (
<html lang="en">
<head>
<title>GenSoc Network</title>
<meta
name="description"
content="Gensokyo.social - Free Fediverse Node"
/>
<meta name="og:title" content="GenSoc Network" />
<meta
name="og:description"
content="Gensokyo.social - Free Fediverse Node"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style
dangerouslySetInnerHTML={{
__html: embedStyles("landing.css"),
}}
/>
</head>
<body>
<div className="grid-container">
<div className="grid-cell">
<div className="yuyuko-cell">
<div className="yuyuko-bg img-bg"></div>
<h3>Gensokyo.social</h3>
<hr className="break" />
<h4>
A Free
<a
href="https://en.wikipedia.org/wiki/Fediverse"
target="blank_"
rel="noreferrer"
>
Fediverse
</a>{" "}
Node.
</h4>
<ul className="feature-list">
<li>Fully-automated Luxury Gay Yokai Communism:</li>
<li>Running Mastodon {mastodon.version}</li>
<li>Providing social network services and more</li>
<li>
Operating on{" "}
<a target="_blank" rel="noreferrer" href="https://nixos.org">
NixOS
</a>{" "}
from{" "}
<a
target="_blank"
rel="noreferrer"
href="https://www.openstreetmap.org/search?query=Limburger%20Str.%2045%2C%2065555%20Limburg%20an%20der%20Lahn#map=19/50.40888/8.06255"
>
Limburg, Germany
</a>
</li>
<li>
Proudly using{" "}
<a href="https://jortage.com" target="_blank" rel="noreferrer">
Jortage
</a>
</li>
<li>Serving dinner</li>
</ul>
</div>
</div>
<div className="grid-cell">
<div className="youmu-cell">
<div className="img-bg youmu-bg"></div>
<h3>Mastodon</h3>
<hr className="break" />
<h4>Is it dinner yet?</h4>
{/*<p style={{
padding: "10px", backgroundColor: "var(--Warning)",
color: "black", borderRadius: "2px",
marginTop: "10px", display: "inline-block",
@@ -51,100 +93,191 @@ const Landing: FC<Props> = ({ mastodon, mumble, xmpp, staticHost = 'http://local
Due to onslaught of bots we have enabled applications. <br />
The only requirement is to sound like an actual human
</p>*/}
<ul className="links">
<li><a href="https://gensokyo.social/auth/sign_up" className="youmu-link">Sign Up</a></li>
<li><a href="https://gensokyo.social/auth/sign_in" className="youmu-link">Log In</a></li>
<li><a href="https://gensokyo.social/web/timelines/home" className="youmu-link">Home</a></li>
{/*<li><a href="https://gensokyo.social/about" className="youmu-link">About Page</a></li>*/}
</ul>
</div>
</div>
<div className="grid-cell">
<div className="yuuka-cell">
<div className="yuuka-bg img-bg"></div>
<h3>New user?</h3>
<hr className="break" />
<h4>Here's the rundown</h4>
<ul className="links">
<li><a href="https://medium.com/@VirtualAdept/a-friendly-introduction-to-the-fediverse-5b4ef3f8ed0e" target="_blank" rel="noreferrer" className="yuuka-link">What's Fediverse?</a></li>
<li><a href="https://blog.joinmastodon.org/2018/08/mastodon-quick-start-guide/" target="_blank" rel="noreferrer" className="yuuka-link">Learn the Ropes</a></li>
<li><a href="https://www.notion.so/deiru/Rules-and-Code-of-Conduct-aa95638c4aa148c1b6139f297ff0318b" target="_blank" rel="noreferrer" className="yuuka-link">Read the Rules</a></li>
<li><a href="https://www.notion.so/Terms-of-Service-5a5782fe41ea4fff86ff85bb074f2046" target="_blank" rel="noreferrer" className="yuuka-link">Study the Terms of Service</a></li>
</ul>
</div>
</div>
<div className="grid-cell">
<div className="byakuren-cell">
<div className="byakuren-bg img-bg"></div>
<h3>Services Status</h3>
<hr className="break" />
<h4>{`See how we're doing.`}</h4>
<table className="services-list">
<tbody>
<tr>
<td>{'<*>'}</td>
<td>Mastodon</td>
<td>{mastodon.online ? 'Online' : 'Offline'}</td>
<td>
<span className={cn({
"text-success": mastodon.online,
"text-fail": !mastodon.online,
})}>
●
</span>
</td>
</tr>
<tr>
<td>{'<*>'}</td>
<td>Mumble</td>
<td>{mumble.online ? 'Online' : 'Offline'}</td>
<td>
<span className={cn({
"text-success": mumble.online,
"text-fail": !mumble.online,
})}>
●
</span>
</td>
</tr>
<tr>
<td>{'<*>'}</td>
<td>XMPP</td>
<td>{xmpp.online ? 'Online' : 'Offline'}</td>
<td>
<span className={cn({
"text-success": xmpp.online,
"text-fail": !xmpp.online,
})}>
●
</span>
</td>
</tr>
</tbody>
</table>
{xmpp.unstable && (
<div style={{
padding: "10px", backgroundColor: "var(--Warning)",
color: "black", borderRadius: "2px",
marginTop: "10px", display: "inline-block",
}}>
XMPP is currently wonky.
Do not rely on status that much
</div>
)}
<div style={{marginTop: "15px"}}>
Refer to <a target="_blank" rel="noreferrer" href="https://status.gensokyo.social">Status page</a> for more details.
</div>
<ul className="bottom-links">
<li><a href="https://code.gensokyo.social/Gensokyo.social/status" target="_blank" rel="noreferrer">Code</a></li>
<li><a href="https://www.notion.so/GenSoc-4ea8d54e1d494d02a6c952492380a87f" target="_blank" rel="noreferrer" className="yuuka-link">GenSoc Central</a></li>
</ul>
</div>
</div>
<ul className="links">
<li>
<a
href="https://gensokyo.social/auth/sign_up"
className="youmu-link"
>
Sign Up
</a>
</li>
<li>
<a
href="https://gensokyo.social/auth/sign_in"
className="youmu-link"
>
Log In
</a>
</li>
<li>
<a
href="https://gensokyo.social/web/timelines/home"
className="youmu-link"
>
Home
</a>
</li>
{/*<li><a href="https://gensokyo.social/about" className="youmu-link">About Page</a></li>*/}
</ul>
</div>
</div>
<div className="grid-cell">
<div className="yuuka-cell">
<div className="yuuka-bg img-bg"></div>
<h3>New user?</h3>
<hr className="break" />
<h4>Here's the rundown</h4>
<ul className="links">
<li>
<a
href="https://medium.com/@VirtualAdept/a-friendly-introduction-to-the-fediverse-5b4ef3f8ed0e"
target="_blank"
rel="noreferrer"
className="yuuka-link"
>
What's Fediverse?
</a>
</li>
<li>
<a
href="https://blog.joinmastodon.org/2018/08/mastodon-quick-start-guide/"
target="_blank"
rel="noreferrer"
className="yuuka-link"
>
Learn the Ropes
</a>
</li>
<li>
<a
href="https://www.notion.so/deiru/Rules-and-Code-of-Conduct-aa95638c4aa148c1b6139f297ff0318b"
target="_blank"
rel="noreferrer"
className="yuuka-link"
>
Read the Rules
</a>
</li>
<li>
<a
href="https://www.notion.so/Terms-of-Service-5a5782fe41ea4fff86ff85bb074f2046"
target="_blank"
rel="noreferrer"
className="yuuka-link"
>
Study the Terms of Service
</a>
</li>
</ul>
</div>
</div>
<div className="grid-cell">
<div className="byakuren-cell">
<div className="byakuren-bg img-bg"></div>
<h3>Services Status</h3>
<hr className="break" />
<h4>{`See how we're doing.`}</h4>
<table className="services-list">
<tbody>
<tr>
<td>{"<*>"}</td>
<td>Mastodon</td>
<td>{mastodon.online ? "Online" : "Offline"}</td>
<td>
<span
className={cn({
"text-success": mastodon.online,
"text-fail": !mastodon.online,
})}
>
●
</span>
</td>
</tr>
<tr>
<td>{"<*>"}</td>
<td>Mumble</td>
<td>{mumble.online ? "Online" : "Offline"}</td>
<td>
<span
className={cn({
"text-success": mumble.online,
"text-fail": !mumble.online,
})}
>
●
</span>
</td>
</tr>
<tr>
<td>{"<*>"}</td>
<td>XMPP</td>
<td>{xmpp.online ? "Online" : "Offline"}</td>
<td>
<span
className={cn({
"text-success": xmpp.online,
"text-fail": !xmpp.online,
})}
>
●
</span>
</td>
</tr>
</tbody>
</table>
{xmpp.unstable && (
<div
style={{
padding: "10px",
backgroundColor: "var(--Warning)",
color: "black",
borderRadius: "2px",
marginTop: "10px",
display: "inline-block",
}}
>
XMPP is currently wonky. Do not rely on status that much
</div>
)}
<div style={{ marginTop: "15px" }}>
Refer to{" "}
<a
target="_blank"
rel="noreferrer"
href="https://status.gensokyo.social"
>
Status page
</a>{" "}
for more details.
</div>
<link rel="stylesheet" type="text/css" href={`${staticHost}/static/landing/styles/style.css?v=1.0`} />
</body>
</html>
<ul className="bottom-links">
<li>
<a
href="https://code.gensokyo.social/Gensokyo.social/status"
target="_blank"
rel="noreferrer"
>
Code
</a>
</li>
<li>
<a
href="https://www.notion.so/GenSoc-4ea8d54e1d494d02a6c952492380a87f"
target="_blank"
rel="noreferrer"
className="yuuka-link"
>
GenSoc Central
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
);
export default Landing
export default Landing;