9 | 14 | {article.title} 15 | 16 |
17 |{article.subtitle}
18 |19 | 29 | - Published in : 30 | 35 | {category.title} 36 | 37 |
38 |
13 |
23 | )
24 |
25 | export default pure(Category)
26 |
27 | let styles = StyleSheet.create({
28 | category: {
29 | height: '30rem',
30 | backgroundPosition: 'center center',
31 | backgroundSize: 'cover',
32 | width: '100%',
33 | '@media (min-width: 768px)': {
34 | width: '100%'
35 | },
36 | '@media (min-width: 992px)': {
37 | width: '48%'
38 | },
39 | position: 'relative',
40 | marginBottom: '2rem',
41 | display: 'flex',
42 | alignItems: 'flex-end'
43 | },
44 | link: {
45 | color: '#fff',
46 | cursor: 'pointer',
47 | textDecoration: 'none',
48 | backgroundColor: 'transparent',
49 | fontSize: '2rem',
50 | borderBottom: 'solid 1px #fAfafa',
51 | ':hover': {
52 | cursor: 'pointer',
53 | textDecoration: 'none',
54 | backgroundColor: 'transparent',
55 | outline: 0,
56 | color: '#999',
57 | borderBottom: 'solid 1px #999',
58 | transition: 'all .4s'
59 | }
60 | },
61 | title: {
62 | background: 'rgba(50,50,50,.5)',
63 | width: '100%',
64 | fontSize: '2rem',
65 | color: '#fff',
66 | padding: '10px',
67 | fontWeight: 700,
68 | lineHeight: '1.1',
69 | bottom: 0,
70 | fontFamily: '"Source Sans Pro",Helvetica,Arial,sans-serif',
71 | marginBottom: 0
72 | }
73 | })
74 |
--------------------------------------------------------------------------------
/src/components/disqus/disqusCount.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import conf from 'conf'
4 |
5 | export default class DisqusCount extends Component {
6 | constructor(props) {
7 | super(props)
8 | this.addDisqusScript = this.addDisqusScript.bind(this)
9 | this.removeDisqusScript = this.removeDisqusScript.bind(this)
10 | }
11 |
12 | addDisqusScript() {
13 | this.disqusCount = document.createElement('script')
14 | let child = this.disqusCount
15 | let parent =
16 | document.getElementsByTagName('head')[0] ||
17 | document.getElementsByTagName('body')[0]
18 | child.async = true
19 | child.type = 'text/javascript'
20 | child.src = `https://${conf.shortname}.disqus.com/count.js`
21 | parent.appendChild(child)
22 | }
23 |
24 | removeDisqusScript() {
25 | if (this.disqusCount && this.disqusCount.parentNode) {
26 | this.disqusCount.parentNode.removeChild(this.disqusCount)
27 | this.disqusCount = null
28 | }
29 | }
30 |
31 | componentDidMount() {
32 | window.disqus_shortname = conf.shortname
33 | if (typeof window.DISQUSWIDGETS !== 'undefined') {
34 | window.DISQUSWIDGETS = undefined
35 | }
36 | this.addDisqusScript()
37 | }
38 |
39 | componentWillUnmount() {
40 | this.removeDisqusScript()
41 | }
42 |
43 | render() {
44 | return
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/disqus/disqusThread.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import conf from 'conf'
4 |
5 | export default class DisqusThread extends Component {
6 | constructor() {
7 | super()
8 | this.addDisqusScript = this.addDisqusScript.bind(this)
9 | this.removeDisqusScript = this.removeDisqusScript.bind(this)
10 | }
11 |
12 | addDisqusScript() {
13 | let child = (this.disqus = document.createElement('script'))
14 | let parent =
15 | document.getElementsByTagName('head')[0] ||
16 | document.getElementsByTagName('body')[0]
17 | child.async = true
18 | child.type = 'text/javascript'
19 | child.src = '//' + conf.shortname + '.disqus.com/embed.js'
20 | parent.appendChild(child)
21 | }
22 |
23 | removeDisqusScript() {
24 | if (this.disqus && this.disqus.parentNode) {
25 | this.disqus.parentNode.removeChild(this.disqus)
26 | this.disqus = null
27 | }
28 | }
29 |
30 | componentDidMount() {
31 | let { id, title } = this.props
32 | window.disqus_shortname = conf.shortname
33 | window.disqus_identifier = id
34 | window.disqus_title = title
35 | window.disqus_url = window.location.href
36 |
37 | if (typeof window.DISQUS !== 'undefined') {
38 | window.DISQUS.reset({ reload: true })
39 | } else {
40 | this.addDisqusScript()
41 | }
42 | }
43 |
44 | componentWillUnmount() {
45 | this.removeDisqusScript()
46 | }
47 |
48 | render() {
49 | return
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/form/baseInput.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react'
2 | import debounce from 'lodash.debounce'
3 |
4 | import uuid from 'utils/uuid'
5 | import capitalize from 'utils/capitalize'
6 |
7 | class BaseInput extends PureComponent {
8 | constructor(props) {
9 | super(props)
10 | this.handleChange = this.handleChange.bind(this)
11 | this.updateValue = debounce(this.updateValue.bind(this), 700)
12 | this.state = {
13 | value: props.value
14 | }
15 | this.id = uuid()
16 | }
17 |
18 | handleChange(event) {
19 | let property = event.target.dataset.property
20 | let value =
21 | this.props.type === 'number'
22 | ? parseInt(event.target.value)
23 | : event.target.value
24 | this.setState(
25 | {
26 | value
27 | },
28 | () => this.updateValue(property, value)
29 | )
30 | }
31 |
32 | componentWillReceiveProps(nextProps) {
33 | if (this.id !== document.activeElement.id) {
34 | this.setState({
35 | value: nextProps.value
36 | })
37 | }
38 | }
39 |
40 | updateValue(property, value) {
41 | this.setState(
42 | {
43 | value
44 | },
45 | () => this.props.onInput(property, value, this.props.id)
46 | )
47 | }
48 |
49 | render() {
50 | let {
51 | className = '',
52 | style = {},
53 | name = '',
54 | type = 'text',
55 | placeholder = '',
56 | Component = 'input',
57 | property = '',
58 | min = 0,
59 | step = 1
60 | } = this.props
61 | let { value } = this.state
62 | name = !!name ? name : property
63 | return (
64 | 14 | 19 | {category.title} 20 | 21 |
22 |
58 |
83 |
97 | {children}
98 |
99 |
100 |
101 | )
102 | }
103 | }
104 |
105 | function mapStateToProps(state) {
106 | return {
107 | location: getLocation(state)
108 | }
109 | }
110 |
111 | function mapDispatchToProps(dispatch) {
112 | return Object.assign(
113 | bindActionCreators(
114 | {
115 | ...categoryActions
116 | },
117 | dispatch
118 | ),
119 | { dispatch }
120 | )
121 | }
122 |
123 | export default connect(
124 | mapStateToProps,
125 | mapDispatchToProps
126 | )(Page)
127 |
128 | let styles = StyleSheet.create({
129 | page: {
130 | display: 'flex',
131 | width: '100%',
132 | justifyContent: 'flex-end',
133 | overflowX: 'hidden',
134 | maxWidth: '100%'
135 | },
136 | main: {
137 | opacity: 1,
138 | width: '100%',
139 | display: 'block',
140 | transition: 'width linear 750ms',
141 | '@media (min-width: 768px)': {
142 | display: 'block'
143 | },
144 | '@media (min-width: 992px)': {
145 | flexDirection: 'row',
146 | display: 'flex',
147 | justifyContent: 'flex-end'
148 | },
149 | margin: 0,
150 | padding: 0,
151 | overflowX: 'hidden',
152 | maxWidth: '100%'
153 | },
154 | mainNarrow: {
155 | margin: 0,
156 | width: '100%',
157 | '@media (min-width: 768px)': {
158 | width: '60%',
159 | display: 'block'
160 | },
161 | '@media (min-width: 992px)': {
162 | display: 'block',
163 | width: '70%'
164 | },
165 | '@media (min-width: 1200px)': {
166 | width: '75%',
167 | flexDirection: 'row',
168 | display: 'flex',
169 | justifyContent: 'flex-end'
170 | }
171 | },
172 | content: {
173 | padding: '5rem',
174 | overflowX: 'hidden',
175 | maxWidth: '100%',
176 | transition: 'width linear 750ms',
177 | width: '100%',
178 | marginLeft: 0,
179 | '@media (min-width: 768px)': {
180 | width: '100%'
181 | },
182 | '@media (min-width: 992px)': {
183 | width: '60%'
184 | },
185 | '@media (min-width: 1200px)': {
186 | width: '60%'
187 | }
188 | },
189 | contentNarrow: {
190 | width: '100%',
191 | marginLeft: 0,
192 | '@media (min-width: 768px)': {
193 | width: '100%'
194 | },
195 | '@media (min-width: 992px)': {
196 | width: '100%'
197 | },
198 | '@media (min-width: 1200px)': {
199 | width: '52%'
200 | }
201 | },
202 | menuBurger: {
203 | position: 'fixed',
204 | top: '1.5rem',
205 | left: '1.5rem',
206 | zIndex: '15',
207 | borderRadius: 5,
208 | height: '4rem',
209 | width: '4rem',
210 | background: '#333',
211 | paddingTop: 8,
212 | cursor: 'pointer',
213 | borderBottom: '0 transparent',
214 | boxShadow: '#948b8b 2px 2px 10px',
215 | color: '#fff',
216 | display: 'flex',
217 | flexDirection: 'column',
218 | alignItems: 'center',
219 | outline: 0,
220 | border: 0,
221 | ':hover': {
222 | color: '#fff',
223 | outline: 0,
224 | background: '#999'
225 | },
226 | ':focus': {
227 | outline: 0
228 | }
229 | },
230 | bar: {
231 | height: '0.5rem',
232 | width: '2.8rem',
233 | display: 'block',
234 | margin: '0 6px 5px',
235 | background: '#fff',
236 | borderRadius: '0.3rem'
237 | }
238 | })
239 |
--------------------------------------------------------------------------------
/src/components/layout/sidebar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { pure } from 'recompose'
3 | import { StyleSheet, css } from 'aphrodite'
4 | import { Link } from 'react-router-dom'
5 |
6 | let Sidebar = ({
7 | title,
8 | subtitle,
9 | description,
10 | sidebarImage,
11 | menuVisible,
12 | showLinks
13 | }) => (
14 |
42 | )
43 |
44 | export default pure(Sidebar)
45 |
46 | let styles = StyleSheet.create({
47 | sidebar: {
48 | justifyContent: 'flex-start',
49 | alignItems: 'flex-end',
50 | transition:
51 | 'width linear 750ms, height linear 750ms, left linear 750ms',
52 | padding: 0,
53 | backgroundPosition: 'center',
54 | backgroundRepeat: 'no-repeat',
55 | backgroundSize: 'cover',
56 | display: 'flex',
57 | position: 'relative',
58 | width: '100%',
59 | '@media (min-width: 768px)': {
60 | height: '45rem',
61 | position: 'relative',
62 | width: '100%'
63 | },
64 | '@media (min-width: 992px)': {
65 | height: '100vh',
66 | backgroundColor: '#f5f5f5',
67 | position: 'fixed',
68 | width: '40%',
69 | left: 0
70 | },
71 | '@media (min-width: 1200px)': {
72 | height: '100vh',
73 | backgroundColor: '#f5f5f5',
74 | position: 'fixed',
75 | width: '40%',
76 | left: 0
77 | },
78 | overflowX: 'hidden',
79 | maxWidth: '100%'
80 | },
81 | sidebarNarrow: {
82 | padding: 0,
83 | backgroundPosition: 'center',
84 | backgroundRepeat: 'no-repeat',
85 | backgroundSize: 'cover',
86 | display: 'flex',
87 | width: '100%',
88 | '@media (min-width: 768px)': {
89 | height: '45rem',
90 | position: 'relative',
91 | width: '100%'
92 | },
93 | '@media (min-width: 992px)': {
94 | height: '45rem',
95 | position: 'relative',
96 | width: '100%'
97 | },
98 | '@media (min-width: 1200px)': {
99 | height: '100vh',
100 | backgroundColor: '#f5f5f5',
101 | position: 'fixed',
102 | width: '35%',
103 | left: '25%'
104 | }
105 | },
106 | info: {
107 | padding: '5%',
108 | background: 'rgba(50,50,50,.5)',
109 | color: '#fafafa',
110 | height: '28rem',
111 | width: '100%',
112 | display: 'flex',
113 | justifyContent: 'flex-end',
114 | alignItems: 'end',
115 | flexDirection: 'column'
116 | },
117 |
118 | primary: {
119 | borderBottom: 'solid 1px rgba(255,255,255,.3)',
120 | marginBottom: '1.6rem'
121 | },
122 | h1: {
123 | letterSpacing: 0,
124 | marginBottom: 0,
125 | fontSize: '3.4rem',
126 | textShadow: '0 1px 3px rgba(0,0,0,.3)',
127 | fontWeight: 700,
128 | fontFamily: "'Source Sans Pro',Helvetica,Arial,sans-serif"
129 | },
130 | p: {
131 | marginBottom: 10,
132 | textShadow: '0 1px 3px rgba(0,0,0,.3)',
133 | lineHeight: '2.4rem',
134 | fontSize: '1.8rem'
135 | },
136 | links: {
137 | display: 'none'
138 | },
139 | showLinks: {
140 | display: 'flex'
141 | },
142 | button: {
143 | fontFamily: "'Source Sans Pro',Helvetica,Arial,sans-serif",
144 | display: 'inline-block',
145 | color: '#fff',
146 | marginRight: '20px',
147 | marginBottom: 0,
148 | backgroundColor: '#337ab7',
149 | borderColor: '#2e6da4',
150 | fontWeight: 400,
151 | textAlign: 'center',
152 | touchAction: 'manipulation',
153 | cursor: 'pointer',
154 | border: '1px solid transparent',
155 | whiteSpace: 'nowrap',
156 | padding: '6px 12px',
157 | fontSize: '14px',
158 | lineHeight: '1.42857',
159 | borderRadius: '4px',
160 | userSelect: 'none',
161 | ':hover': {
162 | color: '#fff',
163 | backgroundColor: '#286090',
164 | borderColor: '#204d74',
165 | textDecoration: 'none'
166 | },
167 | ':focus': {
168 | color: '#fff',
169 | backgroundColor: '#286090',
170 | borderColor: '#122b40',
171 | textDecoration: 'none'
172 | }
173 | }
174 | })
175 |
--------------------------------------------------------------------------------
/src/lib/api.js:
--------------------------------------------------------------------------------
1 | export default class Api {
2 | constructor() {
3 | this.call = this.call.bind(this)
4 | this.get = this.get.bind(this)
5 | this.post = this.post.bind(this)
6 | }
7 |
8 | call(
9 | url,
10 | options = {
11 | method: 'GET',
12 | credentials: 'include',
13 | headers: {}
14 | }
15 | ) {
16 | let { method, credentials, headers } = options
17 |
18 | if (!credentials) {
19 | options = { ...options, credentials: 'include' }
20 | }
21 |
22 | options = Object.assign({}, options, {
23 | headers
24 | })
25 |
26 | return fetch(url, options)
27 | }
28 |
29 | get(
30 | url,
31 | options = {
32 | method: 'GET',
33 | credentials: 'include'
34 | }
35 | ) {
36 | return this.call(url, { ...options, method: 'GET' })
37 | }
38 |
39 | post(
40 | url,
41 | options = {
42 | method: 'POST',
43 | credentials: 'include'
44 | }
45 | ) {
46 | return this.call(url, { ...options, method: 'POST' })
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/lib/drive.js:
--------------------------------------------------------------------------------
1 | import Api from './api'
2 | import conf from 'conf'
3 |
4 | class Drive extends Api {
5 | constructor() {
6 | super()
7 | this.getSpreadsheet = this.getSpreadsheet.bind(this)
8 | this.getDocument = this.getDocument.bind(this)
9 | this.getCategories = this.getCategories.bind(this)
10 | this.getArticleHtml = this.getArticleHtml.bind(this)
11 | this.driveExportUrl = 'https://drive.google.com/uc?export=download&id='
12 | this.slug = this.slug.bind(this)
13 | this.formatDate = this.formatDate.bind(this)
14 | }
15 |
16 | getSpreadsheet(fileId) {
17 | return this.get(
18 | `https://spreadsheets.google.com/feeds/list/${fileId}/od6/public/values?alt=json`,
19 | {
20 | credentials: 'omit'
21 | }
22 | )
23 | .then(response => response.json())
24 | .catch(error => console.log('error', error))
25 | }
26 |
27 | getDocument(fileId) {
28 | return this.get(
29 | `https://docs.google.com/feeds/download/documents/export/Export?id=${fileId}&exportFormat=html`,
30 | {
31 | credentials: 'omit'
32 | }
33 | )
34 | .then(response => {
35 | return response.text()
36 | })
37 | .catch(error => console.log('error', error))
38 | }
39 |
40 | getCategories() {
41 | return this.getSpreadsheet(conf.dashboardId).then(sheetData => {
42 | let articles = {}
43 | let categories = {}
44 |
45 | sheetData.feed.entry
46 | .map(row => ({
47 | title: row.gsx$title.$t,
48 | subtitle: row.gsx$subtitle.$t,
49 | image: row.gsx$image.$t,
50 | category: row.gsx$category.$t,
51 | postId: row.gsx$postid.$t,
52 | imageId: row.gsx$imageid.$t,
53 | lastUpdated: row.gsx$lastupdated.$t
54 | }))
55 | .forEach(row => {
56 | let category = {}
57 |
58 | let categoryId = this.slug(row.category, 'category')
59 |
60 | let existingCategory = Object.values(categories).find(
61 | category => category.id === categoryId
62 | )
63 |
64 | let article = {
65 | id: row.postId,
66 | title: row.title,
67 | subtitle: row.subtitle,
68 | imageName: row.image,
69 | image: this.driveExportUrl + row.imageId,
70 | categoryId,
71 | lastUpdated: row.lastUpdated,
72 | date: this.formatDate(row.lastUpdated),
73 | uri: `/articles/${row.postId}/${this.slug(
74 | row.title,
75 | 'article'
76 | )}`
77 | }
78 |
79 | if (existingCategory) {
80 | categories[categoryId].articles.push(row.postId)
81 | } else {
82 | category = {
83 | id: categoryId,
84 | title: row.category,
85 | imageName: row.image,
86 | image: this.driveExportUrl + row.imageId,
87 | articles: [row.postId],
88 | uri: `/categories/${categoryId}`
89 | }
90 | categories[categoryId] = category
91 | }
92 | articles[row.postId] = article
93 | })
94 | return {
95 | articles,
96 | categories
97 | }
98 | })
99 | }
100 |
101 | getArticleHtml(articleId) {
102 | return this.getDocument(articleId).then(doc => {
103 | let styleStart = ''
105 | let splitStyleStart = doc.split(styleStart)
106 | let splitStyleEnd = splitStyleStart[1].split(styleEnd)
107 |
108 | let htmlStart = '' +
122 | splitHtmlEnd[0] +
123 | ''
124 | )
125 | })
126 | }
127 |
128 | slug(str, type = 'type') {
129 | str = str.replace(/^\s+|\s+$/g, '')
130 | str = str.toLowerCase()
131 |
132 | let from = 'ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;'
133 | let to = 'aaaaaeeeeeiiiiooooouuuunc------'
134 | for (let i = 0, l = from.length; i < l; i++) {
135 | str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
136 | }
137 |
138 | str = str
139 | .replace(/[^a-z0-9 -]/g, '')
140 | .replace(/\s+/g, '-')
141 | .replace(/-+/g, '-')
142 |
143 | if (str.length < 4) {
144 | str = type + '_' + str
145 | }
146 | return str
147 | }
148 |
149 | formatDate(lastUpdated) {
150 | var fullDateSplit = lastUpdated.split(' ')
151 | var dateSplit = fullDateSplit[0].split('/')
152 | var day = parseInt(dateSplit[0])
153 | var month = dateSplit[1]
154 | var year = dateSplit[2]
155 | var monthNames = [
156 | 'January',
157 | 'February',
158 | 'March',
159 | 'April',
160 | 'May',
161 | 'June',
162 | 'July',
163 | 'August',
164 | 'September',
165 | 'October',
166 | 'November',
167 | 'December'
168 | ]
169 | var daySuffix = 'th'
170 | switch (day) {
171 | case 1:
172 | daySuffix = 'st'
173 | break
174 | case 2:
175 | daySuffix = 'nd'
176 | break
177 | case 3:
178 | daySuffix = 'rd'
179 | break
180 | }
181 | return day + daySuffix + ' of ' + monthNames[month - 1] + ' ' + year
182 | }
183 | }
184 |
185 | export default new Drive()
186 |
--------------------------------------------------------------------------------
/src/lib/mail.js:
--------------------------------------------------------------------------------
1 | import Api from './api'
2 | import conf from 'conf'
3 | import jsonpCall from 'utils/jsonpCall'
4 |
5 | class Mail extends Api {
6 | constructor() {
7 | super()
8 | this.send = this.send.bind(this)
9 | }
10 |
11 | send(form) {
12 | jsonpCall('http://smart-ip.net/info-json', ipInfo => {
13 | form.ip = ipInfo.address
14 | form.country = ipInfo.countryName
15 |
16 | jsonpCall(
17 | `https://script.google.com/macros/s/${
18 | conf.sendContactMessageUrlId
19 | }/exec?${Object.keys(form)
20 | .map(
21 | property =>
22 | `${property}=${encodeURIComponent(form[property])}`
23 | )
24 | .join('&')}`,
25 | response => {
26 | console.log(response)
27 | }
28 | )
29 | })
30 | }
31 | }
32 |
33 | export default new Mail()
34 |
--------------------------------------------------------------------------------
/src/modules/article/actionCreators.js:
--------------------------------------------------------------------------------
1 | import { REQUEST_ARTICLE, RECEIVE_ARTICLE } from './actionTypes'
2 | import { shouldFetchArticle } from './selectors'
3 | import Drive from 'lib/drive'
4 |
5 | export function fetchArticleIfNeeded(articleId) {
6 | return (dispatch, getState) => {
7 | let state = getState()
8 |
9 | if (shouldFetchArticle(state, articleId)) {
10 | return fetchArticle(dispatch, articleId)
11 | }
12 | }
13 | }
14 |
15 | export function fetchArticle(dispatch, articleId) {
16 | dispatch(requestArticle(articleId))
17 | return Drive.getArticleHtml(articleId)
18 | .then(article => {
19 | return dispatch(receiveArticle(articleId, article))
20 | })
21 | .catch(function(error) {
22 | console.log('code:', error.code, ' message:', error.message)
23 | })
24 | }
25 |
26 | export function requestArticle(articleId) {
27 | return {
28 | type: REQUEST_ARTICLE,
29 | articleId
30 | }
31 | }
32 |
33 | export function receiveArticle(articleId, article) {
34 | return {
35 | type: RECEIVE_ARTICLE,
36 | articleId,
37 | article
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/modules/article/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const REQUEST_ARTICLE = 'REQUEST_ARTICLE'
2 | export const RECEIVE_ARTICLE = 'RECEIVE_ARTICLE'
3 |
--------------------------------------------------------------------------------
/src/modules/article/reducer.js:
--------------------------------------------------------------------------------
1 | import { REQUEST_ARTICLE, RECEIVE_ARTICLE } from './actionTypes'
2 | import { RECEIVE_CATEGORIES } from 'category/actionTypes'
3 |
4 | export default function article(state = initialState, action) {
5 | switch (action.type) {
6 | case REQUEST_ARTICLE:
7 | return {
8 | ...state,
9 | isFetching: {
10 | ...state.isFetching,
11 | [action.articleId]: true
12 | }
13 | }
14 |
15 | case RECEIVE_ARTICLE:
16 | return {
17 | ...state,
18 | isFetching: {
19 | ...state.isFetching,
20 | [action.articleId]: false
21 | },
22 | fetched: {
23 | ...state.fetched,
24 | [action.articleId]: true
25 | },
26 | texts: {
27 | ...state.texts,
28 | [action.articleId]: action.article
29 | }
30 | }
31 |
32 | case RECEIVE_CATEGORIES:
33 | return {
34 | ...state,
35 | articles: {
36 | ...state.articles,
37 | ...action.categories.articles
38 | }
39 | }
40 |
41 | default:
42 | return state
43 | }
44 | }
45 |
46 | const initialState = {
47 | isFetching: {},
48 | fetched: {},
49 | articles: {},
50 | texts: {}
51 | }
52 |
--------------------------------------------------------------------------------
/src/modules/article/selectors.js:
--------------------------------------------------------------------------------
1 | export const shouldFetchArticle = (state, articleId) => {
2 | if (!articleId) {
3 | return false
4 | }
5 | return (
6 | !articleIsLoading(state, articleId) &&
7 | typeof state.article.texts[articleId] === 'undefined'
8 | )
9 | }
10 |
11 | export const articleIsLoading = (state, articleId) => {
12 | if (!articleId) {
13 | return false
14 | }
15 | return state.article.isFetching[articleId]
16 | }
17 |
18 | export const articleIsFetched = (state, articleId) => {
19 | if (!articleId) {
20 | return false
21 | }
22 | return state.article.fetched[articleId]
23 | }
24 |
--------------------------------------------------------------------------------
/src/modules/category/actionCreators.js:
--------------------------------------------------------------------------------
1 | import { REQUEST_CATEGORIES, RECEIVE_CATEGORIES } from './actionTypes'
2 | import { shouldFetchCategories } from './selectors'
3 | import Drive from 'lib/drive'
4 |
5 | export function fetchCategoriesIfNeeded() {
6 | return (dispatch, getState) => {
7 | let state = getState()
8 |
9 | if (shouldFetchCategories(state)) {
10 | return fetchCategories(dispatch)
11 | }
12 | }
13 | }
14 |
15 | export function fetchCategories(dispatch) {
16 | dispatch(requestCategories())
17 | return Drive.getCategories()
18 | .then(categories => {
19 | return dispatch(receiveCategories(categories))
20 | })
21 | .catch(function(error) {
22 | console.log('code:', error.code, ' message:', error.message)
23 | })
24 | }
25 |
26 | export function requestCategories() {
27 | return {
28 | type: REQUEST_CATEGORIES
29 | }
30 | }
31 |
32 | export function receiveCategories(categories) {
33 | return {
34 | type: RECEIVE_CATEGORIES,
35 | categories
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/modules/category/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const REQUEST_CATEGORIES = 'REQUEST_CATEGORIES'
2 | export const RECEIVE_CATEGORIES = 'RECEIVE_CATEGORIES'
3 |
--------------------------------------------------------------------------------
/src/modules/category/reducer.js:
--------------------------------------------------------------------------------
1 | import { REQUEST_CATEGORIES, RECEIVE_CATEGORIES } from './actionTypes'
2 |
3 | export default function category(state = initialState, action) {
4 | switch (action.type) {
5 | case REQUEST_CATEGORIES:
6 | return {
7 | ...state,
8 | isFetching: true
9 | }
10 |
11 | case RECEIVE_CATEGORIES:
12 | return {
13 | ...state,
14 | isFetching: true,
15 | fetched: true,
16 | categories: {
17 | ...action.categories.categories
18 | }
19 | }
20 |
21 | default:
22 | return state
23 | }
24 | }
25 |
26 | const initialState = {
27 | isFetching: false,
28 | fetched: false,
29 | categories: {}
30 | }
31 |
--------------------------------------------------------------------------------
/src/modules/category/selectors.js:
--------------------------------------------------------------------------------
1 | export const shouldFetchCategories = state =>
2 | !state.category.isFetching && !state.category.fetched
3 |
--------------------------------------------------------------------------------
/src/modules/main/containers/noMatch.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react'
2 | import { Helmet } from 'react-helmet'
3 |
4 | class NoMatch extends PureComponent {
5 | render() {
6 | return (
7 |
8 |
11 | )
12 | }
13 | }
14 |
15 | export default NoMatch
16 |
--------------------------------------------------------------------------------
/src/modules/main/containers/root.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Provider } from 'react-redux'
3 | import ConnectedRouter from 'route/ConnectedRouter'
4 | import { renderRoutes } from 'react-router-dom'
5 | import { css } from 'aphrodite'
6 | import routes from 'routes/routes'
7 |
8 | import blocks from 'styles/blocks'
9 |
10 | let Root = ({ store, history }) => (
11 | {renderRoutes(routes)}
14 |
20 | 
28 |
42 |
43 |
48 |
29 |
41 | React Drive CMS Demo
30 |31 | A demo site to showcase the use of Google Drive as a Content 32 | Management System. Write articles in Google Docs and publish 33 | them directly from there. 34 |
35 |36 | Google Drive is the backend, only a few static files are 37 | hosted on GitHub Pages, and the content is displayed with 38 | React JS. 39 |
40 |
85 |
110 |
124 |
139 |
145 |
146 |
147 | )
148 | }
149 | }
150 |
151 | function mapStateToProps(state) {
152 | return {
153 | location: getLocation(state),
154 | articles: state.article.articles,
155 | categories: state.category.categories,
156 | texts: state.article.texts
157 | }
158 | }
159 |
160 | function mapDispatchToProps(dispatch) {
161 | return Object.assign(
162 | bindActionCreators(
163 | {
164 | ...categoryActions
165 | },
166 | dispatch
167 | ),
168 | { dispatch }
169 | )
170 | }
171 |
172 | export default connect(
173 | mapStateToProps,
174 | mapDispatchToProps
175 | )(Article)
176 |
177 | const opacityKeyframes = {
178 | from: {
179 | opacity: 0
180 | },
181 |
182 | to: {
183 | opacity: 1
184 | }
185 | }
186 |
187 | let styles = StyleSheet.create({
188 | hero: {
189 | position: 'relative',
190 | display: 'block',
191 | height: '15rem',
192 | width: '100%',
193 | backgroundPosition: 'center',
194 | backgroundRepeat: 'no-repeat',
195 | backgroundSize: 'cover',
196 | '@media (min-width: 768px)': {
197 | height: '30rem'
198 | },
199 | overflowX: 'hidden',
200 | maxWidth: '100%'
201 | },
202 | title: {
203 | paddingTop: '20pt',
204 | color: '#000000',
205 | fontSize: '20pt',
206 | paddingBottom: '6pt',
207 | fontFamily: '"Arial"',
208 | lineHeight: '1.15',
209 | pageBreakAfter: 'avoid',
210 | orphans: 2,
211 | widows: 2,
212 | textAlign: 'left',
213 | letterSpacing: '-1pt',
214 | marginTop: '20px',
215 | margin: '.67em 0',
216 | fontWeight: 700,
217 | marginBottom: '10px'
218 | },
219 | p: {
220 | margin: 0,
221 | paddingTop: '0pt',
222 | color: '#666666',
223 | fontSize: '15pt',
224 | paddingBottom: '16pt',
225 | fontFamily: '"Arial"',
226 | lineHeight: '1.15',
227 | pageBreakAfter: 'avoid',
228 | orphans: 2,
229 | widows: 2,
230 | textAlign: 'left'
231 | },
232 | text: {},
233 | page: {
234 | display: 'flex',
235 | width: '100%',
236 | justifyContent: 'flex-end',
237 | overflowX: 'hidden',
238 | maxWidth: '100%'
239 | },
240 | main: {
241 | opacity: 1,
242 | width: '100%',
243 | overflowX: 'hidden',
244 | display: 'block',
245 | transition: 'width linear 750ms',
246 | margin: 0,
247 | padding: 0,
248 | animationName: [opacityKeyframes],
249 | animationDuration: '1s, 1s',
250 | animationIterationCount: 1,
251 | maxWidth: '100%'
252 | },
253 | mainNarrow: {
254 | '@media (min-width: 768px)': {
255 | width: '60%'
256 | },
257 | '@media (min-width: 992px)': {
258 | width: '70%'
259 | },
260 | '@media (min-width: 1200px)': {
261 | width: '75%'
262 | }
263 | },
264 | content: {
265 | display: 'block',
266 | width: '100%',
267 | padding: '3rem 8%',
268 | '@media (min-width: 768px)': {
269 | padding: '3rem 16%'
270 | },
271 | '@media (min-width: 992px)': {
272 | padding: '3rem 18%'
273 | },
274 | '@media (min-width: 1200px)': {
275 | padding: '3rem 24%'
276 | },
277 | overflowX: 'hidden',
278 | maxWidth: '100%'
279 | },
280 | contentNarrow: {
281 | display: 'block',
282 | width: '100%',
283 | padding: '3rem 8%',
284 | '@media (min-width: 768px)': {
285 | padding: '3rem 8%'
286 | },
287 | '@media (min-width: 992px)': {
288 | padding: '3rem 12%'
289 | },
290 | '@media (min-width: 1200px)': {
291 | padding: '3rem 20%'
292 | }
293 | },
294 |
295 | menuBurger: {
296 | position: 'fixed',
297 | top: '1.5rem',
298 | left: '1.5rem',
299 | zIndex: '15',
300 | borderRadius: 5,
301 | height: '4rem',
302 | width: '4rem',
303 | background: '#333',
304 | paddingTop: 8,
305 | cursor: 'pointer',
306 | borderBottom: '0 transparent',
307 | boxShadow: '#948b8b 2px 2px 10px',
308 | color: '#fff',
309 | display: 'flex',
310 | flexDirection: 'column',
311 | alignItems: 'center',
312 | outline: 0,
313 | border: 0,
314 | ':hover': {
315 | color: '#fff',
316 | outline: 0,
317 | background: '#999'
318 | },
319 | ':focus': {
320 | outline: 0
321 | }
322 | },
323 | bar: {
324 | height: '0.5rem',
325 | width: '2.8rem',
326 | display: 'block',
327 | margin: '0 6px 5px',
328 | background: '#fff',
329 | borderRadius: '0.3rem'
330 | }
331 | })
332 |
--------------------------------------------------------------------------------
/src/routes/category.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { StyleSheet, css } from 'aphrodite'
3 | import { connect } from 'react-redux'
4 | import { bindActionCreators } from 'redux'
5 | import { Link } from 'react-router-dom'
6 |
7 | import { getLocation } from 'route/selectors'
8 |
9 | import Page from 'components/layout/page'
10 | import DisqusCount from 'components/disqus/disqusCount'
11 | import Article from 'components/blocks/article'
12 | import Category from 'components/blocks/category'
13 |
14 | class CategoryPage extends Component {
15 | constructor() {
16 | super()
17 | this.setActivePanel = this.setActivePanel.bind(this)
18 | this.state = {
19 | activePanel: 'posts'
20 | }
21 | }
22 |
23 | setActivePanel() {
24 | let panel = event.target.dataset.panel
25 | this.setState({
26 | activePanel: panel
27 | })
28 | }
29 |
30 | componentWillReceiveProps(nextProps) {
31 | let { match } = this.props
32 | let activeCategoryId = match.params.categoryId
33 | let nextCategoryId = nextProps.match.params.categoryId
34 | if (activeCategoryId !== nextCategoryId) {
35 | this.setState({
36 | activePanel: 'posts'
37 | })
38 | }
39 | }
40 |
41 | render() {
42 | let { location, categories, articles, match } = this.props
43 | let activeCategoryId = match.params.categoryId
44 | let activeCategory = categories[activeCategoryId]
45 | ? categories[activeCategoryId]
46 | : {
47 | title: '',
48 | image: `${window.location.protocol}//${
49 | window.location.hostname
50 | }:${window.location.port}/assets/images/default-sidebar.jpg`
51 | }
52 |
53 | let { activePanel } = this.state
54 | return (
55 | 125 | {activeArticle.title} 126 |
127 |128 | {activeArticle.subtitle} 129 |
130 | 134 |
62 |
72 |
82 |
83 |
84 | {activePanel === 'posts' &&
85 | Object.values(articles)
86 | .filter(
87 | article =>
88 | article.categoryId === activeCategoryId
89 | )
90 | .map(article => (
91 |
96 | ))}
97 | {activePanel === 'categories' &&
98 | Object.values(categories).map(category => (
99 |
102 | Send me an email
117 | 249 | 254 |
48 |
58 |
68 |
69 |
75 | {Object.values(articles).map(article => (
76 |
81 | ))}
82 |
83 |
91 | {Object.values(categories).map(category => (
92 |
95 |