From 4a27d6fc5fe1e533fd7a55767303202ff49529d7 Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Tue, 21 May 2019 21:18:17 -0600 Subject: [PATCH] chore: include more quotes, new quote for each day, add to features section, dynamic theme_color --- gatsby-browser.js | 60 +++++++++++++++++++++++++++++++++ gatsby-config.js | 1 + src/App.js | 4 +-- src/App.test.js | 9 ----- src/components/context/theme.js | 8 +++++ src/data/greetings.json | 12 ------- src/data/quotes.json | 60 +++++++++++++++++++++++++++++++-- src/index.js | 19 ----------- src/routes/Start.js | 13 +++++++ src/routes/Welcome.js | 42 ++++++++++++++++------- 10 files changed, 171 insertions(+), 57 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/data/greetings.json delete mode 100644 src/index.js diff --git a/gatsby-browser.js b/gatsby-browser.js index 68d5438..ddce947 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -19,3 +19,63 @@ export const wrapRootElement = ({ element }) => { ) } + +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() +} diff --git a/gatsby-config.js b/gatsby-config.js index 1d5a2da..c2a94fd 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -60,6 +60,7 @@ module.exports = { root: "./src", aliases: { components: "./components", + data: "./data", img: "./img", routes: "./routes", styles: "./styles", diff --git a/src/App.js b/src/App.js index 4847408..65a4906 100644 --- a/src/App.js +++ b/src/App.js @@ -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 { - + { - const div = document.createElement("div") - ReactDOM.render(, div) - ReactDOM.unmountComponentAtNode(div) -}) diff --git a/src/components/context/theme.js b/src/components/context/theme.js index 31be356..29ea22f 100644 --- a/src/components/context/theme.js +++ b/src/components/context/theme.js @@ -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, }} > + + + {children} ) diff --git a/src/data/greetings.json b/src/data/greetings.json deleted file mode 100644 index fa3d90f..0000000 --- a/src/data/greetings.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - "Hello", - "Hi there", - "Bonjour", - "Salut", - "Privet", - "Nǐ hǎo", - "Ciao", - "Konnichiwa", - "Guten Tag", - "Ahlan" -] diff --git a/src/data/quotes.json b/src/data/quotes.json index af69688..24073b7 100644 --- a/src/data/quotes.json +++ b/src/data/quotes.json @@ -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" } ] diff --git a/src/index.js b/src/index.js deleted file mode 100644 index c42ce21..0000000 --- a/src/index.js +++ /dev/null @@ -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( - - - , - 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() diff --git a/src/routes/Start.js b/src/routes/Start.js index 1ec2001..c6d3af9 100644 --- a/src/routes/Start.js +++ b/src/routes/Start.js @@ -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 ( + + +

Record what's on your mind, from anywhere

Journaling can improve your health and help you take inventory of your diff --git a/src/routes/Welcome.js b/src/routes/Welcome.js index cce2a51..1f0c484 100644 --- a/src/routes/Welcome.js +++ b/src/routes/Welcome.js @@ -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 ( -

Hello

- - Sucking at something is the first step to being sort of good at - something - + + + +
+

Hello

+
+ {todaysQuote.quote} - - Jake the Dog + - {todaysQuote.author} -

- This your space for wandering thoughts and ideas. Write about whatever - is on your mind. -

- - - +
+

+ This your space for wandering thoughts and ideas. Write about + whatever is on your mind. +

+
+
+ + + +