LBRYCommunity/lbry-sec
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

cleanup

Browse source
This commit is contained in:
Sean Yesmunt 2021-03-28 23:32:35 -04:00
parent 39635fcc1c
commit e4204bd6fe
8 changed files with 184 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
component/email.jsx Normal file
View file

@ -0,0 +1,75 @@
import React from 'react';
export function Email() {
const [email, setEmail] = React.useState('');
const [emailLoading, setEmailLoading] = React.useState(false);
const [emailError, setEmailError] = React.useState();
const [emailSuccess, setEmailSuccess] = React.useState();
function handleEmailSubmit(e) {
e.preventDefault();
if (!email) {
return;
}
setEmailError(false);
setEmailSuccess(false);
setEmailLoading(true);
fetch('/api/email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
}),
})
.then((res) => res.json())
.then((data) => {
setEmailLoading(false);
setEmailSuccess(true);
})
.catch(() => {
setEmailLoading(false);
setEmailSuccess(false);
setEmailError(true);
});
}
return (
<div className="email">
<h2 className="content__section-title">Stay up to date</h2>
<div className="email__subtitle">
We will keep you up to date with any information we receive about this
case.
</div>
<label htmlFor="email">Email</label>
<form className="email__group" onSubmit={handleEmailSubmit}>
<input
type="email"
name="email"
placeholder="ihatecensorship@protonmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button disabled={!email || emailLoading}>
{emailLoading ? 'Submitting' : 'Submit'}
</button>
</form>
{emailSuccess && (
<div className="email__success">
Thank you! We will keep you in the loop.
</div>
)}
{emailError && (
<div className="email__success">
Sorry, there was an error. Please try again.
</div>
)}
</div>
);
}

6
component/header.jsx
View file

@ -25,7 +25,7 @@ export function Header(props) {
/>
<meta
property="og:description"
content="The SEC doesn’t understand blockchain or crypto. They’re saying LBC is a security, it’s not!"
content="The SEC doesn’t understand blockchain. The claims made in SEC vs. LBRY, Inc. would destroy the United States cryptocurrency industry."
key="description"
/>
</Head>
@ -37,8 +37,8 @@ export function Header(props) {
{!faqPage && (
<div className="header__links">
<Link className="link" href="/faq">
{__(m.faq)}
<Link href="/faq">
<span className="link">FAQ</span>
</Link>
</div>
)}

3
component/stripe.jsx
View file

@ -1,3 +0,0 @@
export function Stripe() {
return <>insert stripe</>;
}

14
component/twitter.jsx
View file

@ -10,15 +10,23 @@ export function Twitter() {
if (res.error) {
throw Error(res.error);
}
setTweets(res.data.statuses);
setTweets(
res.data.statuses.filter((tweet) => tweet.favorite_count > 5)
);
})
.catch((err) => {
setError(true);
});
}, []);
if (!tweets || !(tweets.length > 5)) {
return null;
}
return (
<>
<div className="content">
<h2 className="content__section-title">What are people saying?</h2>
<div className="twitter">
{!error && !tweets && (
<div className="tweets tweets--static">
@ -78,6 +86,6 @@ export function Twitter() {
</div>
)}
</div>
</>
</div>
);
}

2
pages/api/twitter.js
View file

@ -24,7 +24,7 @@ export default (req, res) => {
return new Promise((resolve, reject) => {
client.get(
'search/tweets',
{ q: '#lbry', count: 50 },
{ q: '#HelpLBRYSaveCrypto', count: 100 },
function (error, tweets, response) {
if (error) {
res.statusCode = 500;

16
pages/faq.js
View file

@ -1,14 +1,20 @@
import ReactMarkdown from 'react-markdown';
import { Header } from '../component/header';
import { Email } from '../component/email';
import md from '../faq.md';
export default function Faq() {
return (
<>
<div>
<Header faqPage />
<div className="content">
<ReactMarkdown>{md}</ReactMarkdown>
</div>
</>
<main>
<div className="content md">
<ReactMarkdown>{md}</ReactMarkdown>
</div>
<Email />
</main>
</div>
);
}

102
pages/index.js
View file

@ -2,15 +2,11 @@ import React from 'react';
import Image from 'next/image';
import { Header } from '../component/header';
import { Twitter } from '../component/twitter';
import { Stripe } from '../component/stripe';
import { Email } from '../component/email';
import { t, m } from '../i18n';
import { tracker } from '../analytics';
export default function Home() {
const [email, setEmail] = React.useState('');
const [emailLoading, setEmailLoading] = React.useState(false);
const [emailError, setEmailError] = React.useState();
const [emailSuccess, setEmailSuccess] = React.useState();
const lang = 'en'; // req.query.lang || 'en'
React.useEffect(() => {
@ -21,38 +17,6 @@ export default function Home() {
return t(message, lang);
}
function handleEmailSubmit(e) {
e.preventDefault();
if (!email) {
return;
}
setEmailError(false);
setEmailSuccess(false);
setEmailLoading(true);
fetch('/api/email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
}),
})
.then((res) => res.json())
.then((data) => {
setEmailLoading(false);
setEmailSuccess(true);
})
.catch(() => {
setEmailLoading(false);
setEmailSuccess(false);
setEmailError(true);
});
}
return (
<div>
<Header />
@ -117,16 +81,16 @@ export default function Home() {
operating in the US.
</p>
<div className="content__img">
<div className="content__img content__img--question">
<Image
src="/machine.png"
src="/question.png"
alt="Image of LBRY cartoon"
layout="fill"
/>
</div>
</div>
<div className="content__section">
<div className="content__img">
<div className="content__img content__img--megaphone">
<Image
className="content__img"
src="/megaphone.png"
@ -162,10 +126,7 @@ export default function Home() {
</div>
</div>
<div className="content">
<h2 className="content__section-title">What are people saying?</h2>
<Twitter />
</div>
<Twitter />
<div className="content">
<h2 className="content__section-title">Sign the petition</h2>
@ -179,38 +140,7 @@ export default function Home() {
</div>
</div>
<div className="email">
<h2 className="content__section-title">Stay up to date</h2>
<div className="email__subtitle">
We will keep you up to date with any information we receive about
this case.
</div>
<label htmlFor="email">Email</label>
<form className="email__group" onSubmit={handleEmailSubmit}>
<input
type="email"
name="email"
placeholder="ihatecensorship@protonmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button disabled={!email || emailLoading}>
{emailLoading ? 'Submitting' : 'Submit'}
</button>
</form>
{emailSuccess && (
<div className="email__success">
Thank you! We will keep you in the loop.
</div>
)}
{emailError && (
<div className="email__success">
Sorry, there was an error. Please try again.
</div>
)}
</div>
<Email />
<div className="content">
<h2 className="content__section-title">Try LBRY</h2>
@ -218,14 +148,18 @@ export default function Home() {
If the government and big tech want it gone, it must be good.
</div>
<div>
<a href="https://lbry.com/get" className="link">
LBRY Desktop
</a>{' '}
(decentralized and open-source)
<a href="https://odysee.com" className="link">
Odysee
</a>{' '}
(easiest to use)
<div className="lbry__try">
<a href="https://lbry.com/get" className="link">
LBRY Desktop
</a>{' '}
(decentralized and open-source)
</div>
<div className="lbry__try">
<a href="https://odysee.com" className="link">
Odysee
</a>{' '}
(easiest to use)
</div>
</div>
</div>
</main>

82
styles/globals.scss
View file

@ -41,7 +41,9 @@ button {
border: none;
}
a {
a,
button,
.link {
color: inherit;
text-decoration: none;
@ -63,6 +65,10 @@ a {
margin-right: $spacing-small;
}
.link {
font-size: 1.5rem;
}
@media (min-width: $breakpoint-small) {
padding: 0 1rem;
}
@ -74,6 +80,7 @@ a {
main {
overflow: hidden;
padding-bottom: 5rem;
}
.title {
@ -114,7 +121,6 @@ main {
.landing__text {
margin-top: -2rem;
margin-bottom: 3rem;
margin-left: $spacing-small;
margin-right: $spacing-small;
background-color: #31afa1;
@ -161,13 +167,13 @@ main {
padding: 0.75rem;
margin-top: 2rem;
font-size: 1.4rem;
font-size: 1.2rem;
padding: 1.5rem;
transform: skew(-10deg);
transform: skew(-5deg);
span {
transform: skew(10deg);
transform: skew(5deg);
}
@media (min-width: $breakpoint-small) {
@ -177,6 +183,7 @@ main {
.content {
padding: 2rem;
padding-bottom: 0;
background-color: #ffffff;
color: #000000;
@ -221,20 +228,23 @@ main {
width: 100%;
}
}
}
.content__img {
position: relative;
width: 80%;
margin: 3rem 0;
.content__img {
position: relative;
@media (max-width: $breakpoint-small) {
display: none;
}
@media (max-width: $breakpoint-small) {
display: none;
}
}
img {
width: 600px;
}
.content__img--question {
width: 80%;
}
.content__img--megaphone {
width: 80%;
margin: 3rem 0;
}
.content__subtitle {
@ -271,7 +281,6 @@ main {
max-width: 35rem;
margin: auto;
font-size: 2rem;
margin-top: 4rem;
padding: 1rem;
background-color: #fcd34d;
@ -286,6 +295,8 @@ main {
@media (min-width: $breakpoint-small) {
padding: 5rem;
margin-top: 4rem;
margin-bottom: 2rem;
h2 {
font-size: 3rem;
@ -365,7 +376,7 @@ main {
display: flex;
align-items: flex-start;
margin-left: 100px;
animation: slide 240s linear;
animation: slide 360s linear;
animation-fill-mode: forwards;
}
@ -445,3 +456,40 @@ main {
margin-top: 1rem;
font-size: 1rem;
}
.md {
h1 {
font-size: 4.5rem;
font-weight: 900;
@media (max-width: $breakpoint-small) {
font-size: 2.5rem;
}
}
h2 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 1rem;
@media (max-width: $breakpoint-small) {
font-size: 2rem;
}
}
h3 {
font-size: 2rem;
@media (max-width: $breakpoint-small) {
font-size: 1.5rem;
}
}
ul {
font-size: 1.5rem;
}
}
.lbry__try {
margin-bottom: 1rem;
}