RSS, PWA, Sitemap and Sticky Footer Fix (ryanwiemer#10)

RSS, PWA, Sitemap and Sticky Footer enhancements
brandonkal · May 10, 2018 · 1db4bc3 · 1db4bc3
1 parent 34adec2
commit 1db4bc3
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 44 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,3 +1,11 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier",
+    "stylelint-config-styled-components"
+  ],
+  "rules": {
+    "no-descending-specificity": null
+  }
 }
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -15,6 +15,18 @@ try {
 }
 
 module.exports = {
+  siteMetadata: {
+    siteUrl: config.siteUrl,
+    rssMetadata: {
+      site_url: config.siteUrl,
+      feed_url: `${config.siteUrl}/rss.xml`,
+      title: config.siteTitle,
+      description: config.siteDescription,
+      image_url: `${config.siteUrl}${config.siteLogo}`,
+      author: config.author,
+      copyright: config.copyright,
+    },
+  },
   plugins: [
     {
       resolve: 'gatsby-plugin-canonical-urls',
@@ -49,5 +61,94 @@ module.exports = {
         head: true,
       },
     },
+    'gatsby-plugin-sitemap',
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: config.siteTitle,
+        short_name: config.shortTitle,
+        description: config.siteDescription,
+        start_url: '/',
+        background_color: config.backgroundColor,
+        theme_color: config.themeColor,
+        display: 'minimal-ui',
+        icon: `static${config.siteLogo}`,
+      },
+    },
+    'gatsby-plugin-offline',
+    {
+      resolve: 'gatsby-plugin-feed',
+      options: {
+        setup(ref) {
+          const ret = ref.query.site.siteMetadata.rssMetadata
+          ret.allMarkdownRemark = ref.query.allMarkdownRemark
+          ret.generator = 'GatsbyJS GCN Starter'
+          return ret
+        },
+        query: `
+    {
+      site {
+        siteMetadata {
+          rssMetadata {
+            site_url
+            feed_url
+            title
+            description
+            image_url
+            author
+            copyright
+          }
+        }
+      }
+    }
+  `,
+        feeds: [
+          {
+            serialize(ctx) {
+              const rssMetadata = ctx.query.site.siteMetadata.rssMetadata
+              return ctx.query.allContentfulPost.edges.map(edge => ({
+                date: edge.node.publishDate,
+                title: edge.node.title,
+                description: edge.node.body.childMarkdownRemark.excerpt,
+
+                url: rssMetadata.site_url + '/' + edge.node.slug,
+                guid: rssMetadata.site_url + '/' + edge.node.slug,
+                custom_elements: [
+                  {
+                    'content:encoded': edge.node.body.childMarkdownRemark.html,
+                  },
+                ],
+              }))
+            },
+            query: `
+              {
+            allContentfulPost(limit: 1000, sort: {fields: [publishDate], order: DESC}) {
+               edges {
+                 node {
+                   title
+                   slug
+                   publishDate(formatString: "MMMM DD, YYYY")
+                   body {
+                     childMarkdownRemark {
+                       html
+                       excerpt(pruneLength: 80)
+                     }
+                   }
+                 }
+               }
+             }
+           }
+      `,
+            output: '/rss.xml',
+          },
+        ],
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-nprogress',
+      options: {
+        color: config.themeColor,
+      },
+    },
   ],
 }
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,7 +1,7 @@
 const path = require(`path`)
 
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators;
+  const { createPage } = boundActionCreators
 
   const loadPosts = new Promise((resolve, reject) => {
     graphql(`
@@ -14,9 +14,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         }
       }
-    `
-    ).then(result => {
-        result.data.allContentfulPost.edges.map(({ node }) => {
+    `).then(result => {
+      result.data.allContentfulPost.edges.map(({ node }) => {
         createPage({
           path: `${node.slug}/`,
           component: path.resolve(`./src/templates/post.js`),
@@ -40,9 +39,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         }
       }
-    `
-    ).then(result => {
-        result.data.allContentfulPage.edges.map(({ node }) => {
+    `).then(result => {
+      result.data.allContentfulPage.edges.map(({ node }) => {
         createPage({
           path: `${node.slug}/`,
           component: path.resolve(`./src/templates/page.js`),
@@ -66,9 +64,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         }
       }
-    `
-    ).then(result => {
-        result.data.allContentfulTag.edges.map(({ node }) => {
+    `).then(result => {
+      result.data.allContentfulTag.edges.map(({ node }) => {
         createPage({
           path: `tag/${node.slug}/`,
           component: path.resolve(`./src/templates/tag.js`),
@@ -82,4 +79,4 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   })
 
   return Promise.all([loadPosts, loadPages, loadTags])
-};
+}
diff --git a/package.json b/package.json
@@ -13,12 +13,17 @@
     "gatsby-image": "^1.0.45",
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-canonical-urls": "^1.0.16",
+    "gatsby-plugin-feed": "^1.3.21",
     "gatsby-plugin-google-analytics": "^1.0.31",
+    "gatsby-plugin-manifest": "^1.0.21",
     "gatsby-plugin-netlify": "^1.0.19",
+    "gatsby-plugin-nprogress": "^1.0.14",
+    "gatsby-plugin-offline": "^1.0.16",
     "gatsby-plugin-react-helmet": "^2.0.10",
+    "gatsby-plugin-sitemap": "^1.2.23",
     "gatsby-plugin-styled-components": "^2.0.11",
     "gatsby-remark-prismjs": "^1.2.24",
-    "gatsby-source-contentful": "^1.3.46",
+    "gatsby-source-contentful": "^1.3.50",
     "gatsby-source-filesystem": "^1.5.29",
     "gatsby-transformer-remark": "^1.7.39",
     "inquirer": "^5.2.0",
@@ -34,19 +39,22 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "npm run lint:css && npm run lint:js && npm run check-pretty",
     "setup": "node ./bin/setup.js",
     "dev": "gatsby develop",
-    "lint:js": "./node_modules/.bin/eslint --ext .js,.jsx .",
-    "lint:css": "./node_modules/.bin/stylelint 'src/**/*.css'",
-    "check-pretty": "./node_modules/.bin/prettier -l 'src/**'",
+    "lint:js": "eslint --ext .js,.jsx .",
+    "lint:css": "stylelint 'src/**/*.js'",
+    "check-pretty": "prettier -l {,src/**/}*.{js,jsx,json,css,scss}",
     "format": "prettier --write \"src/**/*.js\""
   },
   "devDependencies": {
     "eslint": "^4.19.1",
-    "eslint-config-gatsby-standard": "^1.2.0",
+    "eslint-config-gatsby-standard": "^1.2.1",
     "prettier": "^1.12.1",
+    "stylelint": "9.1.3",
     "stylelint-config-prettier": "^3.2.0",
-    "stylelint-config-standard": "^18.2.0"
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.3.1"
   }
 }
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js
@@ -20,21 +20,12 @@ const Form = styled.form`
   textarea {
     font-family: inherit;
     font-size: inherit;
-    background: none;
     border: none;
     outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     background: ${props => props.theme.colors.tertiary};
     color: ${props => props.theme.colors.base};
     border-radius: 2px;
     padding: 1em;
-    &:focus {
-      outline: none;
-    }
-    &:required {
-      box-shadow: none;
-    }
     &::-webkit-input-placeholder {
       color: gray;
     }
@@ -47,8 +38,14 @@ const Form = styled.form`
     &:-moz-placeholder {
       color: gray;
     }
+    &:required {
+      box-shadow: none;
+    }
+    &:focus {
+      outline: none;
+    }
   }
-  &:before {
+  &::before {
     content: '';
     background: black;
     height: 100%;

diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -21,7 +21,7 @@ const BgImg = styled(Img)`
     object-fit: ${props => props.fit || 'cover'} !important;
     object-position: ${props => props.position || '50% 50%'} !important;
   }
-  &:before {
+  &::before {
     content: '';
     background: rgba(0, 0, 0, 0.25);
     position: absolute;

diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -10,7 +10,7 @@ import favicon from '../images/favicon.ico'
 
 const Template = ({ children }) => {
   return (
-    <div>
+    <div className="siteRoot">
       <Helmet>
         <title>{config.siteTitle}</title>
         <meta charSet="utf-8" />
@@ -28,12 +28,15 @@ const Template = ({ children }) => {
       </Helmet>
 
       <ThemeProvider theme={theme}>
-        <div>
+        <div className="siteContent">
           <Menu />
           {children()}
-          <Footer />
         </div>
       </ThemeProvider>
+      {/* Footer placed in seperate ThemeProvider to avoid Rendering an extra DIV in HTML output  */}
+      <ThemeProvider theme={theme}>
+        <Footer />
+      </ThemeProvider>
     </div>
   )
 }

diff --git a/src/styles/global.js b/src/styles/global.js
@@ -26,15 +26,29 @@ injectGlobal`
     vertical-align: baseline;
   }
 
+  /* Added to Fix Footer to bottom of viewport */
+  html, body {
+    height: 100%;
+  }
+  .siteRoot {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  .siteContent {
+    flex: 1 0 auto;
+  }
+  footer {
+    width: 100%;
+  }
+
+  /* End Fix to Place Footer on Bottom of Viewport */
+
   article, aside, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section {
     display: block;
   }
 
-  body {
-    line-height: 1;
-  }
-
   @media screen and (min-width: 35em) {
     html {
       margin-right: calc(-100vw + 100%);
@@ -50,8 +64,8 @@ injectGlobal`
     quotes: none;
   }
 
-  blockquote:before, blockquote:after,
-  q:before, q:after {
+  blockquote::before, blockquote::after,
+  q::before, q::after {
     content: '';
     content: none;
   }
@@ -67,13 +81,10 @@ injectGlobal`
 
   body {
     background: white;
+    line-height: 1;
     font-size: 100%;
-    -webkit-text-size-adjust: 100%;
     font-variant-ligatures: none;
-    -webkit-font-variant-ligatures: none;
     text-rendering: optimizeLegibility;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
     text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
     font-weight: 400;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

diff --git a/src/utils/siteConfig.js b/src/utils/siteConfig.js
@@ -1,6 +1,17 @@
 module.exports = {
   siteTitle: 'GCN',
+
   siteDescription:
     'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
-  siteUrl: 'https://gcn.netlify.com', // Site domain. Do not inculde a trailing slash! If you wish to use a path prefix you can read more about that here: https://www.gatsbyjs.org/docs/path-prefix/
+  siteUrl: 'https://gcn.netlify.com', // Site domain. Do not include a trailing slash! If you wish to use a path prefix you can read more about that here: https://www.gatsbyjs.org/docs/path-prefix/
+
+  author: 'GCN User', // Author for RSS author segment and SEO schema.
+
+  // PWA and Offline Manifest Settings
+  shortTitle: 'GCN App', // Used for App manifest e.g. Mobile Home Screen
+  siteLogo: '/logos/logo-512.png', // Logo used for SEO, RSS, and manifest.
+  backgroundColor: '#e9e9e9', // Used for Offline Manifest
+  themeColor: '#121212', // Used for Offline Manifest
+
+  copyright: 'Copyright © 2018 GCN User', // Copyright string for the RSS feed. Could also go in the footer.
 }
diff --git a/static/logos/logo-512.png b/static/logos/logo-512.png