roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-16 10:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

landing done-ish.

Browse source
This commit is contained in:
41666 2019-03-18 21:25:36 -05:00
parent 6413d7c642
commit 0cd8409199
9 changed files with 194 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

48
ui/pages/_app.js
View file

@ -4,12 +4,23 @@ import App, { Container } from 'next/app'
import Head from 'next/head'
import Layout from '../components/layout'
import { withCookies } from '../config/rpc'
import ErrorP from './_error'
import ErrorP, { Overlay } from './_error'
import styled from 'styled-components'
type NextPage = React.Component<any> & React.StatelessFunctionalComponent<any> & {
getInitialProps: (ctx: any, ...args: any) => any
}
const MissingJS = styled.noscript`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
font-size: 1.3em;
padding: 1em;
`
class RoleypolyApp extends App {
static async getInitialProps ({ Component, ctx }: { Component: NextPage, ctx: {[x:string]: any}}) {
// Fix for next/error rendering instead of our error page.
@ -50,15 +61,17 @@ class RoleypolyApp extends App {
// Fix for next/error rendering instead of our error page.
// Who knows why this would ever happen.
const ErrorCaughtComponent = (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') ? ErrorP : Component
return (
<Container>
<noscript>Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹</noscript>
<Head>
<meta charSet='utf-8' />
<title key='title'>Roleypoly</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/static/favicon.png' />
<script key='typekit'>{`
return <Container>
<MissingJS>
<Overlay />
Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹
</MissingJS>
<Head>
<meta charSet='utf-8' />
<title key='title'>Roleypoly</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/static/favicon.png' />
<script key='typekit' dangerouslySetInnerHTML={{ __html: `
(function(d) {
var config = {
kitId: 'bck0pci',
@ -67,15 +80,12 @@ class RoleypolyApp extends App {
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);//
`}
</script>
</Head>
<Layout user={user} {...layout} >
<ErrorCaughtComponent {...pageProps} router={router} />
</Layout>
</Container>
)
` }} />
</Head>
<Layout user={user} {...layout}>
<ErrorCaughtComponent {...pageProps} router={router} />
</Layout>
</Container>
}
}

4
ui/pages/_error.js
View file

@ -2,11 +2,11 @@ import * as React from 'react'
import styled from 'styled-components'
import MediaQuery from '../kit/media'
const Overlay = styled.div`
export const Overlay = styled.div`
opacity: 0.6;
pointer-events: none;
position: fixed;
top: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;

106
ui/pages/index.js
View file

@ -5,6 +5,77 @@ import redirect from '../lib/redirect'
// import Nav from '../components/nav'
import TypingDemo from '../components/demos/typing'
import TapDemo from '../components/demos/tap'
import styled from 'styled-components'
import MediaQuery from '../kit/media'
const HeroBig = styled.h1`
color: var(--c-7);
font-size: 1.8em;
`
const HeroSmol = styled.h1`
color: var(--c-5);
font-size: 1.1em;
`
const Hero = styled.div`
padding: 2em 0;
text-align: center;
`
const Footer = styled.p`
text-align: center;
font-size: 0.7em;
opacity: 0.3;
transition: opacity 0.3s ease-in-out;
&:hover {
opacity: 1;
}
&:active {
opacity: 1;
}
`
const FooterLink = styled.a`
font-style: none;
color: var(--c-7);
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: var(--c-5);
}
`
const DemoArea = styled.div`
display: flex;
flex-direction: column;
${() => MediaQuery({ md: `flex-direction: row;` })}
& > div {
flex: 1;
padding: 10px;
}
& > div > p {
text-align: center;
}
`
const Wrapper = styled.div`
flex-wrap: wrap;
${() => MediaQuery({
md: `
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
min-height: 500px;
`
})}
`
export default class Home extends React.Component {
static async getInitialProps (ctx, rpc) {
@ -17,16 +88,31 @@ export default class Home extends React.Component {
render () {
return <div>
<h2>A bot to tame your self-assignable Discord roles.</h2>
<div>
<TypingDemo />
<p>What is this? 2005?</p>
</div>
<div>
<TapDemo />
<p>Just click or tap.</p>
</div>
<Wrapper>
<div>
<Hero>
<HeroBig>Discord roles for humans.</HeroBig>
<HeroSmol>Ditch bot commands once and for all.</HeroSmol>
</Hero>
<DemoArea>
<div>
<TypingDemo />
<p>What is this? 2005?</p>
</div>
<div>
<TapDemo />
<p>Just click or tap.</p>
</div>
</DemoArea>
</div>
</Wrapper>
<Footer>
© {new Date().getFullYear()}<br />
Made with ♡&nbsp;
<img src='/static/flags.svg' style={{ height: '1em', opacity: 0.5 }} /><br />
<FooterLink target='_blank' href='https://github.com/kayteh/roleypoly'>GitHub</FooterLink>&nbsp;-&nbsp;
<FooterLink target='_blank' href='https://discord.gg/PWQUVsd'>Discord</FooterLink>
</Footer>
</div>
}
}