spencerpincott/sol-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

60
gatsby-browser.js
View File

@@ -19,3 +19,63 @@ export const wrapRootElement = ({ element }) => {
</FirebaseContext.Provider>
)
}
export const onServiceWorkerUpdateFound = () => {
const showNotification = () => {
Notification.requestPermission(result => {
if (result === "granted") {
navigator.serviceWorker.ready.then(registration => {
registration.showNotification("Update", {
body: "New content is available!",
icon: "../images/sol-journal-logo.png",
vibrate: [200, 100, 200, 100, 200, 100, 400],
tag: "request",
actions: [
// you can customize these actions as you like
{
action: alert("update!"), // you should define this
title: "update",
},
{
action: alert("ignore"), // you should define this
title: "ignore",
},
],
})
})
}
})
}
showNotification()
}
export const onServiceWorkerInstalled = () => {
const showNotification = () => {
Notification.requestPermission(result => {
if (result === "granted") {
navigator.serviceWorker.ready.then(registration => {
registration.showNotification("Installed", {
body: "New content is available!",
icon: "../images/sol-journal-logo.png",
vibrate: [200, 100, 200, 100, 200, 100, 400],
tag: "request",
actions: [
// you can customize these actions as you like
{
action: alert("update!"), // you should define this
title: "update",
},
{
action: alert("ignore"), // you should define this
title: "ignore",
},
],
})
})
}
})
}
showNotification()
}

1
gatsby-config.js
View File

@@ -60,6 +60,7 @@ module.exports = {
root: "./src",
aliases: {
components: "./components",
data: "./data",
img: "./img",
routes: "./routes",
styles: "./styles",

4
src/App.js
View File

@@ -57,7 +57,7 @@ class App extends Component {
render() {
const { authUser, online } = this.state
const { authUser: propAuthUser, theme } = this.props
const { authUser: propAuthUser } = this.props
const authed = !!propAuthUser || !!authUser
return (
@@ -67,7 +67,7 @@ class App extends Component {
<FullscreenLayout>
<Navbar toggleTheme={toggle} />
<RouteLayout>
<Router>
<Router style={{ height: "100%" }}>
<PrivateRoute
authed={authed}
path="/app/:year"

9
src/App.test.js
View File

@@ -1,9 +0,0 @@
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
it("renders without crashing", () => {
const div = document.createElement("div")
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})

8
src/components/context/theme.js
View File

@@ -1,4 +1,5 @@
import React from "react"
import { Helmet } from "react-helmet"
import theme from "styles/theme"
const ThemeTogglerContext = React.createContext({
@@ -22,6 +23,7 @@ class ThemeToggler extends React.Component {
"background-color",
theme[newTheme].colors.bodyBackground
)
this.setState({ themeName: newTheme })
}
@@ -35,6 +37,12 @@ class ThemeToggler extends React.Component {
toggle: this.toggle,
}}
>
<Helmet>
<meta
name="theme-color"
content={theme[themeName].colors.bodyBackground}
/>
</Helmet>
{children}
</ThemeTogglerContext.Provider>
)

12
src/data/greetings.json
View File

@@ -1,12 +0,0 @@
[
"Hello",
"Hi there",
"Bonjour",
"Salut",
"Privet",
"Nǐ hǎo",
"Ciao",
"Konnichiwa",
"Guten Tag",
"Ahlan"
]

60
src/data/quotes.json
View File

@@ -4,7 +4,63 @@
"author": "Jake the Dog"
},
{
"quote": "Sucking at something is the first step to being sort of good at something.",
"author": "Jake the Dog"
"quote": "Journal writing is a voyage to the interior.",
"author": "Christina Baldwin"
},
{
"quote": "Blessed is he who keeps daily diary and compares the work of this week with that of the last, for he will realize God quickly!",
"author": "Sivananda Saraswati"
},
{
"quote": "Each Bullet Journal becomes another volume in the story of your life. Does it represent the life you want to live? If not, then leverage the lessons you've learned to change the narrative in the next volume.",
"author": "Ryder Carroll"
},
{
"quote": "Authentic writing cannot be coerced.",
"author": "Ernst Jünger"
},
{
"quote": "If kids reflect on their days, they will become better problem-solvers of life.",
"author": "Trevor Carss"
},
{
"quote": "The best time to begin keeping a journal is whenever you decide to.",
"author": "Hannah Hinchman"
},
{
"quote": "He said, You'll write it not because there's no possibility it'll be found but because it costs too much to not write it.",
"author": "China Miéville"
},
{
"quote": "In the diary you find proof that in situations which today would seem unbearable, you lived, looked around and wrote down observations, that this right hand moved then as it does today...",
"author": "Franz Kafka"
},
{
"quote": "In the journal I do not just express myself more openly than I could to any person; I create myself.",
"author": "Susan Sontag"
},
{
"quote": "But what am I to do? I must have some drug, and reading isn’t a strong enough drug now.",
"author": "C.S. Lewis"
},
{
"quote": "What a comfort is this journal. I tell myself to myself and throw the burden on my book and feel relieved.",
"author": "Anne Lister"
},
{
"quote": "If there was no other motive in view [except] to have the privilege of reading over our journals and for our children to read, it would pay for the time spent in writing it.",
"author": "Wilford Woodruff"
},
{
"quote": "As there are a thousand thoughts lying within a man that he does not know till he takes up the pen to write.",
"author": "William Makepeace Thackeray"
},
{
"quote": "I want to write, but more than that, I want to bring out all kinds of things that lie buried deep in my heart.",
"author": "Anne Frank"
},
{
"quote": "A diary is useful during conscious, intentional, and painful spiritual evolutions.",
"author": "André Gide"
}
]

19
src/index.js
View File

@@ -1,19 +0,0 @@
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
import Firebase, { FirebaseContext } from "./components/firebase"
ReactDOM.render(
<FirebaseContext.Provider value={new Firebase()}>
<App />
</FirebaseContext.Provider>,
document.getElementById("root")
)
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register()

13
src/routes/Start.js
View File

@@ -1,4 +1,5 @@
import React, { Component } from "react"
import { Helmet } from "react-helmet"
import { Link, StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import styled from "@emotion/styled"
@@ -71,6 +72,12 @@ const features = [
desc:
"Download all of your journal entries at any time for back-up or safe keeping ",
},
{
icon: "Moon",
title: "Dark Mode",
desc:
"Take it easy on your eyes, with an easily accessible toggle from all screens and detection of night hours to turn on automatically",
},
]
class Start extends Component {
@@ -78,6 +85,12 @@ class Start extends Component {
const { theme } = this.props
return (
<StartGrid>
<Helmet>
<meta
name="description"
label="Connect with your soul through a simple, beautiful journaling experience from any of your devices."
/>
</Helmet>
<h1>Record what's on your mind, from anywhere</h1>
<P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
Journaling can improve your health and help you take inventory of your

42
src/routes/Welcome.js
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>
)