Skip to content

Commit

Permalink
Add language to writings
Browse files Browse the repository at this point in the history
Add keywords to writings
Add theme switch
Add Layout component to add initial Helmet att
Rename all scss modules with an underscore
Added Storage module
  • Loading branch information
Marvin Heilemann committed Jan 10, 2020
1 parent f6ff65d commit 05db231
Show file tree
Hide file tree
Showing 36 changed files with 714 additions and 257 deletions.
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"semi": false,
"singleQuote": true,
"proseWrap": "always",
"endOfLine": "lf"
"endOfLine": "lf",
"arrowParens": "always"
}
3 changes: 1 addition & 2 deletions content/writings/Der Morgen, die Nacht/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ title: Der Morgen, die Nacht
description: Ein kleines süßes Gedicht
created: 02-23-2015
modified: 07-12-2019
language: de

header:
image: image.jpg
author: Luis Alfonso Orellana
link: https://unsplash.com/@alphonzs?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge
source: unsplash

tags: [german]
language: de
keywords: [dreams]
---

Expand Down
3 changes: 1 addition & 2 deletions content/writings/__demo__/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@ description: Ein kleines süßes Gedicht
slug: custom slug
created: 09-23-2019
modified: 07-12-2019
language: en

header:
image: image.jpg
author: Daniil Vnoutchkov
link: https://unsplash.com/@daniilvnoutchkov?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge
source: unsplash

tags: [german]
language: en
keywords: [dreams]
---

Expand Down
301 changes: 148 additions & 153 deletions package-lock.json

Large diffs are not rendered by default.

40 changes: 20 additions & 20 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "marvin-digital",
"version": "3.1.0",
"version": "3.2.0",
"private": true,
"description": "Portfolio of Marvin Heilemann (@muuvmuuv)",
"repository": {
Expand Down Expand Up @@ -40,32 +40,32 @@
"dependencies": {
"@ibm/plex": "^4.0.2",
"dayjs": "^1.8.19",
"gatsby": "^2.18.18",
"gatsby-image": "^2.2.37",
"gatsby": "^2.18.21",
"gatsby-image": "^2.2.38",
"gatsby-plugin-breadcrumb": "^6.3.0",
"gatsby-plugin-canonical-urls": "^2.1.18",
"gatsby-plugin-catch-links": "^2.1.21",
"gatsby-plugin-canonical-urls": "^2.1.19",
"gatsby-plugin-catch-links": "^2.1.24",
"gatsby-plugin-humans-txt": "^1.1.4",
"gatsby-plugin-layout": "^1.1.18",
"gatsby-plugin-manifest": "^2.2.34",
"gatsby-plugin-layout": "^1.1.21",
"gatsby-plugin-manifest": "^2.2.37",
"gatsby-plugin-module-resolver": "^1.0.3",
"gatsby-plugin-postcss": "^2.1.18",
"gatsby-plugin-preact": "^3.1.24",
"gatsby-plugin-postcss": "^2.1.19",
"gatsby-plugin-preact": "^3.1.25",
"gatsby-plugin-purgecss": "^4.0.1",
"gatsby-plugin-react-helmet": "^3.1.18",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-remove-generator": "^1.0.4",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.1.26",
"gatsby-plugin-sharp": "^2.3.10",
"gatsby-plugin-sitemap": "^2.2.24",
"gatsby-plugin-sass": "^2.1.27",
"gatsby-plugin-sharp": "^2.3.13",
"gatsby-plugin-sitemap": "^2.2.25",
"gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
"gatsby-remark-emoji": "0.0.3",
"gatsby-remark-images": "^3.1.39",
"gatsby-remark-prismjs": "^3.3.29",
"gatsby-source-filesystem": "^2.1.43",
"gatsby-transformer-json": "^2.2.22",
"gatsby-transformer-remark": "^2.6.45",
"gatsby-transformer-sharp": "^2.3.9",
"gatsby-remark-images": "^3.1.42",
"gatsby-remark-prismjs": "^3.3.30",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-json": "^2.2.25",
"gatsby-transformer-remark": "^2.6.48",
"gatsby-transformer-sharp": "^2.3.12",
"kleur": "^3.0.3",
"node-sass": "^4.13.0",
"postcss-easing-gradients": "^3.0.1",
Expand All @@ -83,7 +83,7 @@
"del-cli": "^3.0.0",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.1.0",
"gatsby-plugin-remove-trailing-slashes": "^2.1.17",
"gatsby-plugin-remove-trailing-slashes": "^2.1.20",
"lighthouse": "^5.6.0",
"npm-run-all": "^4.1.5",
"prettier": "^1.19.1",
Expand Down
5 changes: 4 additions & 1 deletion src/components/HeroWritings.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@ import Backdrop from './Backdrop'
import Time from './Time'
import Language from './Language'
import Separator from './Separator'
import Keywords from './Keywords'

const HeroWritings = ({ img, title, lang, time }) => (
const HeroWritings = ({ img, title, keywords, lang, time }) => (
<div id="hero">
<Backdrop img={img.image.childImageSharp.fluid}></Backdrop>

<div className="container">
<div className="post-title">
<h1>{title}</h1>
<h2>
<Keywords list={keywords} />
<Separator />
<Time date={time} format="LL" />
<Separator />
<Language lang={lang} />
Expand Down
14 changes: 14 additions & 0 deletions src/components/Keywords.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react'

const Keywords = ({ list }) => (
<span className="keywords">
{list.map((item, i) => (
<span key={i}>
{item}
{list.length > i + 1 ? ', ' : ''}
</span>
))}
</span>
)

export default Keywords
41 changes: 41 additions & 0 deletions src/components/ThemeSwitch.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { useContext } from 'react'

import { Theme } from '../store'
import { modes } from '../store/theme'

/**
* @link https://codepen.io/muuvmuuv/pen/jOEzYLa?editors=0110
*/
const ThemeSwitch = () => {
const themeState = useContext(Theme.State)

const current = modes.findIndex((m) => m === themeState.mode)
const index = current + 1 >= modes.length ? 0 : current + 1
const nextMode = modes[index]

function toggleTheme(event) {
const element = event.target
element.classList.add('animating')
themeState.toggle()
}

function onAnimationEnd(event) {
const element = event.target
element.classList.remove('animating')
}

return (
<button
id="theme-switch"
onKeyPress={toggleTheme}
onClick={toggleTheme}
mode={themeState.mode}
theme={themeState.theme}
onAnimationEnd={onAnimationEnd}
aria-label={`Switch to ${nextMode} appearance`}
title={`Switch to ${nextMode} appearance`}
></button>
)
}

export default ThemeSwitch
22 changes: 22 additions & 0 deletions src/layouts/Layout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useContext } from 'react'
import { Helmet } from 'react-helmet-async'

import { Theme } from '../store'

const Layout = ({ children }) => {
const themeState = useContext(Theme.State)

return (
<>
<Helmet
htmlAttributes={{
theme: themeState.theme,
}}
/>

{children}
</>
)
}

export default Layout
16 changes: 6 additions & 10 deletions src/layouts/header.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import React from 'react'

import Logo from '../components/Logo'
import Navigation from '../components/Navigation'
import Breadcrumb from '../components/Breadcrumb'
import Navigation from '../components/Navigation'
import ThemeSwitch from '../components/ThemeSwitch'

class Header extends React.PureComponent {
constructor(props) {
super(props)

this.state = {
sticky: false,
}

this.handleScroll = this.handleScroll.bind(this)
state = {
sticky: false,
}

componentDidMount() {
Expand All @@ -24,7 +19,7 @@ class Header extends React.PureComponent {
}

// TODO: test this with SSR
handleScroll(event) {
handleScroll = (event) => {
this.setState({
sticky: window.pageYOffset > 0,
})
Expand All @@ -36,6 +31,7 @@ class Header extends React.PureComponent {
<Logo />
<Breadcrumb />
<Navigation />
<ThemeSwitch />
</header>
)
}
Expand Down
7 changes: 5 additions & 2 deletions src/layouts/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ import { HelmetProvider } from 'react-helmet-async'

import { Store } from '../store'
import Header from './Header'
import Layout from './Layout'

const App = ({ children }) => (
<Store>
<HelmetProvider>
<Header></Header>
<main>{children}</main>
<Layout>
<Header></Header>
<main>{children}</main>
</Layout>
</HelmetProvider>
</Store>
)
Expand Down
18 changes: 13 additions & 5 deletions src/pages/writings.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { isDev } from '../environment'
import Link from '../components/Link'
import SEO from '../components/SEO'
import { History } from '../store'
import Time from '../components/Time'

const Page = ({
pageContext: { breadcrumb },
Expand Down Expand Up @@ -40,11 +41,16 @@ const Page = ({

<div className="container container--medium">
<div className="list">
{edges.map(({ node }, index) => (
<Link key={index} to={node.fields.slug}>
<h2>{node.frontmatter.title}</h2>
<p>{node.excerpt}</p>
</Link>
{edges.map(({ node: { frontmatter, fields, excerpt } }, index) => (
<div className="item" key={index}>
<Link to={fields.slug}>
<header>
<h2>{frontmatter.title}</h2>
<Time date={frontmatter.created} />
</header>
<p>{excerpt}</p>
</Link>
</div>
))}
</div>
</div>
Expand All @@ -65,6 +71,8 @@ export const pageQuery = graphql`
node {
frontmatter {
title
keywords
created
}
fields {
slug
Expand Down
40 changes: 40 additions & 0 deletions src/storage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
function setItem(key, data) {
return new Promise((resolve, reject) => {
if (!key || !data) {
reject('No key or data provided!')
}
localStorage.setItem(key, JSON.stringify(data))
resolve()
})
}

function getItem(key) {
return new Promise((resolve, reject) => {
if (!key) {
reject('No key provided!')
}
let content = localStorage.getItem(key)
content = JSON.parse(content)
resolve(content)
})
}

function removeItem(key) {
return new Promise((resolve, reject) => {
if (!key) {
reject('No key provided!')
}
localStorage.removeItem(key)
resolve()
})
}

function clearAll() {
return new Promise(resolve => {
localStorage.clear()
resolve()
})
}

const Storage = { setItem, getItem, removeItem, clearAll }
export default Storage
6 changes: 3 additions & 3 deletions src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@

import React from 'react'

import { Scheme } from './scheme'
import { Theme } from './theme'
import { History } from './history'
import { Nav } from './nav'

const providers = [<Scheme.Provider />, <History.Provider />, <Nav.Provider />]
const providers = [<Theme.Provider />, <History.Provider />, <Nav.Provider />]

const Store = ({ children: initial }) =>
providers.reduce(
(children, parent) => React.cloneElement(parent, { children }),
initial
)

export { Store, Scheme, History, Nav }
export { Store, Theme, History, Nav }
Loading

0 comments on commit 05db231

Please sign in to comment.