chore: include more quotes, new quote for each day, add to features section, dynamic theme_color

This commit is contained in:
Kyle Gill
2019-05-21 21:18:17 -06:00
parent 90250e7a98
commit 4a27d6fc5f
10 changed files with 171 additions and 57 deletions

View File

@@ -1,18 +1,24 @@
import React, { Component } from "react"
import { Helmet } from "react-helmet"
import { Link } from "gatsby"
import styled from "@emotion/styled"
import { withTheme } from "emotion-theming"
import { getDayOfYear } from "date-fns"
import { SIZES } from "styles/constants"
import { Button, P } from "components/elements"
import Footer from "components/Footer"
import { todayUrl } from "utils/date"
import Quotes from "data/quotes.json"
const WelcomeGrid = styled.div`
text-align: center;
margin-top: 60px;
line-height: 1.5;
color: ${props => props.theme.colors.primary};
display: flex;
flex-direction: column;
height: 100%;
`
@@ -28,24 +34,34 @@ const QuoteAuthor = styled(P)`
class Welcome extends Component {
render() {
const todaysQuote = Quotes[getDayOfYear(new Date()) % Quotes.length]
const { theme } = this.props
return (
<WelcomeGrid>
<h1>Hello</h1>
<Quote>
Sucking at something is the first step to being sort of good at
something
</Quote>
<Helmet>
<meta
name="description"
label="Connect with your soul through a simple, beautiful journaling experience from any device."
/>
</Helmet>
<div>
<h1>Hello</h1>
</div>
<Quote>{todaysQuote.quote}</Quote>
<QuoteAuthor style={{ letterSpacing: 1.1, marginBottom: 30 }}>
- Jake the Dog
- {todaysQuote.author}
</QuoteAuthor>
<P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
This your space for wandering thoughts and ideas. Write about whatever
is on your mind.
</P>
<Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
<Button colors={theme.colors}>Write about today</Button>
</Link>
<div>
<P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
This your space for wandering thoughts and ideas. Write about
whatever is on your mind.
</P>
</div>
<div>
<Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
<Button colors={theme.colors}>Write about today</Button>
</Link>
</div>
<Footer />
</WelcomeGrid>
)