1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React, { Component } from 'react'
import { themes } from './globals'
import {
faSpotify,
faGithub,
faTwitter,
faKeybase
} from '@fortawesome/free-brands-svg-icons'
import { Header } from './header'
import { FontAwesome } from './font-awesome'
import { ThemeSwitcher } from './theme-switcher'
import { BaseLayout } from './base-layout'
import { parseQuery, writeQuery } from '../lib/url'
const helmetData = {
title: 'Nicholas Van Doorn',
meta: [
{
name: 'description',
content: 'Portfolio for Nicholas Van Doorn'
},
{
name: 'keywords',
content: 'software, engineer, development, web'
}
]
}
const siteData = {
siteName: 'Nicholas Van Doorn',
navLinks: [
{
name: 'Work',
to: '/work'
},
{
name: 'Projects',
to: '/projects'
},
{
name: 'About',
to: '/about'
}
],
socialEntries: [
{
href: 'https://github.com/nvandoorn',
name: 'GitHub',
icon: <FontAwesome icon={faGithub} size="30px" />
},
{
href: 'https://twitter.com/nickvandoorn',
name: 'Twitter',
icon: <FontAwesome icon={faTwitter} size="30px" />
},
{
href: 'https://keybase.io/nvandoorn',
name: 'Keybase',
icon: <FontAwesome icon={faKeybase} size="30px" />
},
{
href: 'https://open.spotify.com/user/pontonn',
name: 'Spotify',
icon: <FontAwesome icon={faSpotify} size="30px" />
}
]
}
const themeSwitcherThemes = [
{ name: '👔', key: 'mainTheme' },
{ name: '📰', key: 'highContrastTheme' }
]
const getThemeKeyFromUrl = () => {
const queryObj = parseQuery()
return queryObj && queryObj.themeKey
}
const initState = () => {
let currentThemeKey = getThemeKeyFromUrl() || 'mainTheme'
return {
theme: themes[currentThemeKey],
currentThemeKey
}
}
// persist state globally
// (theme should stay
// across page changes)
let lastState = initState()
export default class Layout extends Component {
state = lastState
changeTheme = themeKey => {
const theme = themes[themeKey]
const newState = { theme, currentThemeKey: themeKey }
lastState = newState
this.setState(newState)
writeQuery({ themeKey })
}
render() {
const { children, height } = this.props
return (
<BaseLayout
height={height}
theme={this.state.theme}
helmetData={helmetData}
>
<Header
siteName={siteData.siteName}
links={siteData.navLinks}
socialEntries={siteData.socialEntries}
/>
{children}
<ThemeSwitcher
currentTheme={this.state.currentThemeKey}
themes={themeSwitcherThemes}
onClick={t => this.changeTheme(t)}
/>
</BaseLayout>
)
}
}
|
