Merge pull request #3483 from ONRR/blog-post-home-2

Blog post on homepage rebuild, part 2

blog-site/gatsby-config.js

@@ -12,7 +12,7 @@ module.exports = {
   siteMetadata: {
     title: 'Open data design at the Department of the Interior',
     author: 'Ryan Johnson',
-    description: 'Our blog about data, design, and innovation at the Department of the Interior.',
+    description: 'Our blog about data, design, and innovation at the Department of the Interior',
     siteUrl: 'https://revenuedata.doi.gov/',
   },
   pathPrefix: `${BASEURL}/blog`,
@@ -43,7 +43,7 @@ module.exports = {
           {
             resolve: `gatsby-remark-images`,
             options: {
-              maxWidth: 590,
+              maxWidth: 650,
               quality: 80,
             },
           },

blog-site/src/components/footer.js

@@ -13,10 +13,10 @@ const Footer = () => (
       marginBottom: '0',
     }}
   >
-    <div class='footer-content'
+    <div className='footer-content'
     >
         <div
-          class='footer-img'
+          className='footer-img'
         >
           <a href='https://doi.gov/'>
               <img
@@ -33,7 +33,7 @@ const Footer = () => (
           </a>
         </div>
       <div
-        class='footer-contact'
+        className='footer-contact'
         style={{
           display: 'block',
         }}  
@@ -65,7 +65,7 @@ const Footer = () => (
           }} 
           href="mailto:nrrd@onrr.gov">nrrd@onrr.gov</a>
       </p>
-      <div class='team'
+      <div className='team'
         style={{
           display: 'block',
         }}
@@ -77,22 +77,22 @@ const Footer = () => (
             }}
           >From the team that works on <a style={{color: 'white'}} href='https://revenuedata.doi.gov'>Natural Resources Revenue Data</a></em>
       </div>
-      <div class='social'>
+      <div className='social'>
         <a href='https://github.com/ONRR/'>
           <img
-            class='social-icon'
+            className='social-icon'
             src={github}
             alt={`GitHub logo`}
           /></a>
           <a href='https://twitter.com/DOIONRR'> 
           <img
-            class='social-icon'
+            className='social-icon'
             src={twitter}
             alt={`Twitter logo`}
           /></a>
           <a href='https://www.facebook.com/DOIONRR/'>  
           <img
-            class='social-icon'
+            className='social-icon'
             src={facebook}
             alt={`Facebook logo`}
           /></a>

blog-site/src/components/layout.js

@@ -3,6 +3,7 @@ import { Link } from 'gatsby'
 
 import { rhythm, scale } from '../utils/typography'
 import './layout.css'
+import './prism-theme.css'
 import Footer from './footer.js'
 import mastImage from '../img/NRRD_blog_mast.png'
 import Banner from './govbanner.js'
@@ -43,7 +44,7 @@ class Template extends React.Component {
       )
     } else {
       header = (
-        <h2 class="post-mast">
+        <h2 className="post-mast">
           <Link
             style={{
               boxShadow: 'none',
@@ -70,7 +71,7 @@ class Template extends React.Component {
     return (
     <div>
       <Banner /> 
-      <main class="angle"
+      <main className="angle"
         style={{
           marginLeft: 'auto',
           marginRight: 'auto',

blog-site/src/components/prism-theme.css

@@ -0,0 +1,123 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+   color: #f8f8f2;
+   background: none;
+   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   word-wrap: normal;
+   line-height: 1.5;
+
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   margin: .5em 0 1.4em 0;
+   overflow: auto;
+   border-radius: 0.3em;
+ }
+
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+   background: #272822;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: .1em;
+   border-radius: .3em;
+   white-space: normal;
+   background: none;
+   color: #272822;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+   color: slategray;
+ }
+
+ .token.punctuation {
+   color: #f8f8f2;
+ }
+
+ .namespace {
+   opacity: .7;
+ }
+
+ .token.property,
+ .token.tag,
+ .token.constant,
+ .token.symbol,
+ .token.deleted {
+   color: #f92672;
+ }
+
+ .token.boolean,
+ .token.number {
+   color: #ae81ff;
+ }
+
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+   color: #a6e22e;
+ }
+
+ .token.operator,
+ .token.entity,
+ .token.url,
+ .language-css .token.string,
+ .style .token.string,
+ .token.variable {
+   color: #f8f8f2;
+ }
+
+ .token.atrule,
+ .token.attr-value,
+ .token.function {
+   color: #e6db74;
+ }
+
+ .token.keyword {
+   color: #66d9ef;
+ }
+
+ .token.regex,
+ .token.important {
+   color: #fd971f;
+ }
+
+ .token.important,
+ .token.bold {
+   font-weight: bold;
+ }
+ .token.italic {
+   font-style: italic;
+ }
+
+ .token.entity {
+   cursor: help;
+ }

blog-site/src/pages/homepage-revamp/index.md

@@ -1,5 +1,5 @@
 ---
-title: "How we decided to rebuild our open-data homepage"
+title: "How we rebuilt our open-data homepage part one: design"
 authors:
 - Shannon McHarg
 - Ryan Johnson
@@ -17,7 +17,7 @@ tags:
 date: "2018-12-06"
 ---
 
-_This is part one of a two-part series about our homepage redesign._
+_This is part one of a two-part series about our homepage redesign. [Read part two here](/homepage-revamp-part-two/)._
 
 Digital teams from [18F](https://18f.gsa.gov/) and the [Department of the Interior](https://www.doi.gov/) have been publishing government data about energy and mineral extraction on federal lands and waters since 2014. The [Natural Resources Revenue Data](https://revenuedata.doi.gov/) portal provides that open government data today.
 

blog-site/src/templates/blog-post.js

@@ -73,7 +73,7 @@ class BlogPostTemplate extends React.Component {
           </div>
         ))
       }
-        <ul class='other-posts'
+        <ul className='other-posts'
           style={{
             marginTop: '2rem',
             display: 'flex',