Merge pull request #142 from kremalicious/feature/manifest

switch to gatsby-plugin-manifest for web manifest and favicon generation

gatsby-config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
 const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
-const { title, description, url, matomoSite, matomoUrl } = meta[0]
+const { title, url, matomoSite, matomoUrl } = meta[0]
 
 module.exports = {
   siteMetadata: {
@@ -66,37 +66,16 @@ module.exports = {
       }
     },
     {
-      resolve: 'gatsby-plugin-favicon',
+      resolve: 'gatsby-plugin-manifest',
       options: {
-        logo: './src/images/favicon.png',
-
-        // WebApp Manifest Configuration
-        appName: title.toLowerCase(),
-        appDescription: description,
-        developerName: null,
-        developerURL: null,
-        dir: 'auto',
-        lang: 'en-US',
-        background: '#e7eef4',
-        theme_color: '#88bec8',
-        display: 'minimal-ui',
-        orientation: 'any',
-        start_url: '/?homescreen=1',
+        name: title.toLowerCase(),
         short_name: 'mk',
-        version: '1.0',
-
-        icons: {
-          android: true,
-          appleIcon: true,
-          appleStartup: true,
-          coast: false,
-          favicons: true,
-          firefox: true,
-          opengraph: false,
-          twitter: false,
-          yandex: false,
-          windows: false
-        }
+        start_url: '/',
+        background_color: '#e7eef4',
+        theme_color: '#88bec8',
+        icon: 'src/images/favicon.png',
+        display: 'minimal-ui',
+        cache_busting_mode: 'name'
       }
     },
     'gatsby-plugin-react-helmet',

package.json

@@ -29,7 +29,7 @@
     "file-saver": "^2.0.1",
     "gatsby": "^2.8.6",
     "gatsby-image": "^2.1.2",
-    "gatsby-plugin-favicon": "^3.1.6",
+    "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-matomo": "^0.7.1",
     "gatsby-plugin-offline": "^2.1.1",
     "gatsby-plugin-react-helmet": "^3.0.12",

src/components/molecules/LogoUnit.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import classNames from 'classnames'
 import { moveInBottom } from '../atoms/Transitions'
@@ -23,14 +23,14 @@ export default class LogoUnit extends PureComponent {
 
   Animation = posed.div(moveInBottom)
 
-  wrapClasses = classNames([styles.logounit], {
-    [styles.minimal]: this.props.minimal
-  })
-
   nameClasses = classNames('p-name', [styles.title])
   descriptionClasses = classNames('p-job-title', [styles.description])
 
   render() {
+    const wrapClasses = classNames([styles.logounit], {
+      [styles.minimal]: this.props.minimal
+    })
+
     return (
       <StaticQuery
         query={query}
@@ -38,20 +38,15 @@ export default class LogoUnit extends PureComponent {
           const { title, tagline } = data.metaYaml
 
           return (
-            <div className={this.wrapClasses}>
-              <this.Animation>
+            <this.Animation>
+              <Link className={wrapClasses} to={'/'}>
                 <Logo className={styles.logo} />
-                <h1 data-testid="logo-title" className={this.nameClasses}>
-                  {title.toLowerCase()}
-                </h1>
-                <p
-                  data-testid="logo-tagline"
-                  className={this.descriptionClasses}
-                >
+                <h1 className={this.nameClasses}>{title.toLowerCase()}</h1>
+                <p className={this.descriptionClasses}>
                   {tagline.toLowerCase()}
                 </p>
-              </this.Animation>
-            </div>
+              </Link>
+            </this.Animation>
           )
         }}
       />

src/components/molecules/LogoUnit.module.scss

@@ -1,7 +1,9 @@
 @import 'variables';
 
 .logounit {
+    pointer-events: none;
     display: block;
+    width: 100%;
 }
 
 .logo {
@@ -46,9 +48,16 @@
 }
 
 .minimal {
-    transform: scale(.7);
-    transform-origin: top center;
-    transform-box: border-box;
+    pointer-events: all;
+    width: auto;
+
+    &,
+    &:hover,
+    &:focus {
+        transform: scale(.7);
+        transform-origin: top center;
+        transform-box: border-box;
+    }
 
     .title,
     .description {

src/components/molecules/LogoUnit.test.jsx

@@ -11,17 +11,23 @@ beforeEach(() => {
 describe('LogoUnit', () => {
   it('renders correctly from data file values', () => {
     const { title, tagline } = data.metaYaml
-    const { container, getByTestId } = render(<LogoUnit />)
+    const { container } = render(<LogoUnit />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(getByTestId('logo-title')).toHaveTextContent(title.toLowerCase())
-    expect(getByTestId('logo-tagline')).toHaveTextContent(tagline.toLowerCase())
+    expect(container.querySelector('.title')).toHaveTextContent(
+      title.toLowerCase()
+    )
+    expect(container.querySelector('.description')).toHaveTextContent(
+      tagline.toLowerCase()
+    )
   })
 
   it('renders in minimal variant', () => {
     const { container } = render(<LogoUnit minimal={true} />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(container.firstChild.className).toMatch(/logounit minimal/)
+    expect(container.querySelector('.logounit').className).toMatch(
+      /logounit minimal/
+    )
   })
 })

src/components/organisms/Footer.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Link, StaticQuery, graphql } from 'gatsby'
+import { StaticQuery, graphql } from 'gatsby'
 import classNames from 'classnames'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
@@ -27,9 +27,7 @@ const FooterMarkup = ({ pkg, meta, year }) => {
 
   return (
     <footer className={classes}>
-      <Link to={'/'}>
-        <LogoUnit minimal />
-      </Link>
+      <LogoUnit minimal />
 
       <Networks minimal />
 

src/components/organisms/Header.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Link, StaticQuery, graphql } from 'gatsby'
+import { StaticQuery, graphql } from 'gatsby'
 import classNames from 'classnames'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
@@ -31,21 +31,15 @@ export default class Header extends PureComponent {
         query={query}
         render={data => {
           const meta = data.metaYaml
-
-          let headerClasses = classNames([styles.header], {
+          const headerClasses = classNames([styles.header], {
             [styles.minimal]: minimal
           })
 
           return (
             <header className={headerClasses}>
               <ThemeSwitch />
-
-              <Link className={styles.link} to={'/'}>
-                <LogoUnit minimal={minimal} />
-              </Link>
-
+              <LogoUnit minimal={minimal} />
               <Networks hide={minimal} />
-
               <Availability hide={minimal && !meta.availability.status} />
             </header>
           )

src/components/organisms/Header.module.scss

@@ -12,19 +12,8 @@
     justify-content: flex-start;
 }
 
-.link {
-    pointer-events: none;
-    display: block;
-    width: 100%;
-}
-
 .minimal {
     min-height: 0;
     padding-top: $spacer * 2;
     padding-bottom: 0;
-
-    .link {
-        pointer-events: all;
-        width: auto;
-    }
 }