Release/v1.1.0 (#214)

* ContentManager, server, env: Separated production and preview keys. * App, server, log: Added version logging. * BlogPage, LandingPage: Added estimated read time. * BlogPage, LandingPage: Only external links open in a new window. * Router: Switched next and previous posts. * BlogPage: Added styles for secondary headers. * BlogPage: Added H2 styling. * BlogPage, LandingPage: Added temporary workaround for dropcap issue adobe-webplatform/dropcap.js#19 * BlogPage: Updated dropcap styling. * readme, license, package: Updated readme and license. * package: Version bump.
umamialex · Jun 20, 2016 · 9e4d448 · 9e4d448
1 parent 7fa5476
commit 9e4d448
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 47 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1 +1,10 @@
-Copyright 2015 Alexander Martin
+Copyright 2016 Alexander Martin Licensed under the Educational Community License
+, Version 2.0 (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+http://www.osedu.org/licenses/ECL-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.
diff --git a/README.md b/README.md
@@ -11,20 +11,46 @@ $ npm install
 
 ## Build
 ```bash
-$ gulp build
+$ SA_URL='http://suitupalex.com:80' npm run build
 ```
 
-## Development
+## Production Build
 ```bash
-$ gulp dev
-$ gulp dev:strict # This will run ESLint checks.
+$ npm run prod
 ```
 
-## Test
+## Run
 ```bash
-$ npm install -g mocha jest-cli
-$ npm test
+$ DEBUG='sa*' \
+  SA_CONTENTFUL_PREVIEW_ACCESS_TOKEN=preview_token
+  SA_CONTENTFUL_PRODUCTION_ACCESS_TOKEN=production_token
+  SA_CONTENTFUL_SPACE=space_id
+  SA_PORT=8080 \
+  SA_URL=http://localhost:8080 \
+  SA_FETCH_INTERVAL=30 \
+  npm run watch
+```
+
+## Watch
+```bash
+$ DEBUG='sa*' \
+  SA_CONTENTFUL_PREVIEW_ACCESS_TOKEN=preview_token
+  SA_CONTENTFUL_PRODUCTION_ACCESS_TOKEN=production_token
+  SA_CONTENTFUL_SPACE=space_id
+  SA_PORT=8080 \
+  SA_URL=http://localhost:8080 \
+  SA_FETCH_INTERVAL=30 \
+  npm start
 ```
 
 ## License
-No License. Copyright 2015 Alexander Martin.
+Copyright 2016 Alexander Martin Licensed under the Educational Community License
+, Version 2.0 (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+http://www.osedu.org/licenses/ECL-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.
diff --git a/backend/ContentManager/ContentManager.js b/backend/ContentManager/ContentManager.js
@@ -5,14 +5,17 @@ const contentful = require('contentful')
 class ContentManager {
   constructor(options) {
     this.log = options.log
+    this.isProduction = options.isProduction
 
     this.client = contentful.createClient({
       space: options.space
-    , accessToken: options.accessToken
-    , host: options.isProduction ? undefined : 'preview.contentful.com'
+    , accessToken: this.isProduction
+        ? options.productionAccessToken
+        : options.previewAccessToken
+    , host: this.isProduction ? undefined : 'preview.contentful.com'
     })
 
-    this.log('Production environment:', options.isProduction)
+    this.log('Production environment:', this.isProduction)
 
     this.entryReducer = this.entryReducer.bind(this)
 
@@ -80,7 +83,7 @@ class ContentManager {
       case 'blogPost': {
         fields.date = new Date(fields.publishDate).getTime()
 
-        if (fields.date > new Date().getTime()){
+        if (this.isProduction && fields.date > new Date().getTime()){
           return result
         }
 

diff --git a/backend/server.js b/backend/server.js
@@ -1,14 +1,18 @@
 'use strict'
 
+const pkg = require('../package.json')
 const env = require('../lib/env')
 const log = require('../lib/log')
 const paths = require('../lib/paths')
 
 const ContentManager = require('./ContentManager/ContentManager')
 const HttpServer = require('./HttpServer/HttpServer')
 
+log.server(`Application started: v${pkg.version}`)
+
 const contentManager = new ContentManager({
-  accessToken: env.CONTENTFUL_ACCESS_TOKEN
+  productionAccessToken: env.CONTENTFUL_PRODUCTION_ACCESS_TOKEN
+, previewAccessToken: env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
 , fetchInterval:
     parseFloat(env.FETCH_INTERVAL ? env.FETCH_INTERVAL : 30) * 60000
 , isProduction: env.NODE_ENV === 'production'

diff --git a/dist/base.bundle.js b/dist/base.bundle.js
diff --git a/frontend/App/App.jsx b/frontend/App/App.jsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import Router from '../Router/Router.jsx'
 
+import pkg from '../../package.json'
 import {web as log} from 'log'
 
 import './app.sass'
@@ -13,7 +14,7 @@ class App extends React.Component {
 
     window.app = this
 
-    log('Application started.')
+    log(`Application started: v${pkg.version}`)
 
     log('Connecting to socket:', props.url)
     const socket = io(props.url)

diff --git a/frontend/Page/BlogPage/BlogPage.jsx b/frontend/Page/BlogPage/BlogPage.jsx
@@ -22,11 +22,12 @@ class BlogPage extends React.Component {
   }
 
   applyDropCap() {
+    const dropcap = this.refs.dropcap
+
     log('Applying dropcap.')
-    window.Dropcap.layout(
-      document.querySelectorAll('.blog-page-dropcap')
-    , 3
-    )
+
+    dropcap.dcapjsStrut = null
+    window.Dropcap.layout(dropcap, 3)
   }
 
   componentDidMount() {
@@ -47,6 +48,7 @@ class BlogPage extends React.Component {
     const body = this.getContent('body')
     const dropcap = body ? body.slice(0, 1) : ''
     const restOfBody = body ? body.slice(1) : ''
+    const readTime = Math.ceil(_.words(body).length / 275)
 
     const formattedDate = moment(this.getContent('publishDate'))
       .format('MMMM Do, YYYY')
@@ -83,14 +85,19 @@ class BlogPage extends React.Component {
         updateRoute={props.updateRoute}
       >
         <h1>&ldquo;{title}&rdquo;</h1>
-        <p className='blog-page-date'>{formattedDate}</p>
+        <p className='blog-page-date'>
+          {formattedDate} | {readTime} minute read
+        </p>
         <hr/>
-        <span className='blog-page-dropcap'>{dropcap}</span>
+        <span className='blog-page-dropcap' ref='dropcap'>{dropcap}</span>
         <ReactMarkdown
           className='blog-page-body'
           renderers={{
             Link: props => (
-              <a href={props.href} target='_blank'>{props.children}</a>
+              <a
+                href={props.href}
+                target={props.href.indexOf('/') === 0 ? '' : '_blank'}
+              >{props.children}</a>
             )
           }}
           source={restOfBody}

diff --git a/frontend/Page/BlogPage/blog-page.sass b/frontend/Page/BlogPage/blog-page.sass
@@ -3,11 +3,34 @@
   max-width: 50ch
   box-sizing: border-box
 
-  h1, &-date
+  h1, h2, &-date
     text:
       align: center
       transform: uppercase
 
+  h2
+    font:
+      size: 1em
+      weight: bold
+    letter-spacing: 0.1em
+    margin: 2em
+    position: relative
+    z-index: 1
+    overflow: hidden
+    &:before, &:after
+      content: '\a0'
+      background-color: #000
+      height: 0.16em
+      position: absolute
+      overflow: hidden
+      top: calc(50% - 0.08em)
+      width: calc(50% - 1em)
+    &:before
+      text-align: right
+      margin-left: -50%
+    &:after
+      margin-left: 1em
+
   &-date
     font:
       size: 0.6em
@@ -25,8 +48,8 @@
 
   &-dropcap
     color: #f00
-    margin-right: 0.05em
-    margin-top: 0.145em
+    margin-right: 0.075em
+    margin-top: 0.11em !important
 
   &-previous, &-next
     margin-top: 1em

diff --git a/frontend/Page/LandingPage/LandingPage.jsx b/frontend/Page/LandingPage/LandingPage.jsx
@@ -39,17 +39,19 @@ class LandingPage extends React.Component {
 
   applyDropCap() {
     log('Applying dropcap.')
-    window.Dropcap.layout(
-      document.querySelectorAll('.blog-page-dropcap')
-    , 3
-    )
+
+    const dropcaps = document.querySelectorAll('.blog-page-dropcap')
+    _.forEach(dropcaps, (dropcap) => {dropcap.dcapjsStrut=null})
+
+    window.Dropcap.layout(dropcaps, 3)
   }
 
   blogMapper(blog, index) {
     const body = blog.body
     const summary = body.slice(0, body.indexOf('\n\n'))
     const dropcap = summary ? summary.slice(0, 1) : ''
     const restOfBody = summary ? summary.slice(1) : ''
+    const readTime = Math.ceil(_.words(body).length / 275)
 
     const formattedDate = moment(blog.publishDate).format('MMMM Do, YYYY')
 
@@ -58,11 +60,21 @@ class LandingPage extends React.Component {
     return (
       <div className='blog-post' key={index}>
         <h2>&ldquo;{blog.title}&rdquo;</h2>
-        <p className='blog-page-date'>{formattedDate}</p>
+        <p className='blog-page-date'>
+          {formattedDate} | {readTime} minute read
+        </p>
         <hr/>
         <span className='blog-page-dropcap'>{dropcap}</span>
         <ReactMarkdown
           className='blog-page-body'
+          renderers={{
+            Link: props => (
+              <a
+                href={props.href}
+                target={props.href.indexOf('/') === 0 ? '' : '_blank'}
+              >{props.children}</a>
+            )
+          }}
           source={restOfBody}
         />
         <p>

diff --git a/frontend/Router/Router.jsx b/frontend/Router/Router.jsx
@@ -109,11 +109,11 @@ class Router extends React.Component {
       ? blogPosts.indexOf(current)
       : false
 
-    const previous = index !== false && index > 0
+    const next = index !== false && index > 0
       ? blogPosts[index - 1]
       : null
 
-    const next = index !== false && index < blogPosts.length - 1
+    const previous = index !== false && index < blogPosts.length - 1
       ? blogPosts[index + 1]
       : null
 

diff --git a/lib/env.js b/lib/env.js
@@ -3,7 +3,8 @@
 const PREFIX = 'SA'
 
 const ENV_VARS = [
-  ['CONTENTFUL_ACCESS_TOKEN']
+  ['CONTENTFUL_PRODUCTION_ACCESS_TOKEN']
+, ['CONTENTFUL_PREVIEW_ACCESS_TOKEN']
 , ['CONTENTFUL_SPACE']
 , ['FETCH_INTERVAL']
 , ['PORT']

diff --git a/lib/log.js b/lib/log.js
@@ -7,6 +7,7 @@ const debug = require('debug')
 const SUBSYSTEMS = [
   'contentManager'
 , 'httpServer'
+, 'server'
 , 'web'
 ]
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suitupalex.com",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Source code for suitupalex.com.",
   "scripts": {
     "build": "./scripts/build",
@@ -11,6 +11,7 @@
     "watch": "./scripts/watch"
   },
   "author": "Alexander Martin",
+  "license": "ECL",
   "repository": {
     "type": "git",
     "url": "https://github.com/suitupalex/suitupalex.com"