stuff

.gitlab-ci.yml

@@ -5,16 +5,11 @@ cache:
     - node_modules/
 
 before_script:
-  - sudo apt-get -qq update
-  - sudo apt-get install python python-pip
-  - pip install --user awscli
-  - export PATH=$PATH:$HOME/.local/bin
   - npm i -g gatsby-cli
   - export PATH="$PATH:/usr/local/bin/gatsby"
 
 stages:
     - testing
-    - deployment
 
 testing:
   stage: test
@@ -26,8 +21,8 @@ testing:
     paths:
       - public
 
-deployment:
+# deployment:
-    stage: deploy
+#     stage: deploy
-    script: aws s3 sync ./public s3://beta.matthiaskretschmann.com --delete --acl public-read
+#     script: aws s3 sync ./public s3://beta.matthiaskretschmann.com --delete --acl public-read
-    only:
+#     only:
-        - master
+#         - master

gatsby-config.js

@@ -12,6 +12,8 @@ module.exports = {
     'gatsby-transformer-json',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
+    'gatsby-plugin-offline',
+    'gatsby-plugin-sitemap',
     {
       resolve: 'gatsby-plugin-sass',
       options: {

package.json

@@ -7,6 +7,7 @@
     "gatsby-image": "^1.0.47",
     "gatsby-link": "^1.6.41",
     "gatsby-plugin-google-analytics": "^1.0.31",
+    "gatsby-plugin-offline": "^1.0.15",
     "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sass": "^1.0.26",

src/components/atoms/Head.js

@@ -3,22 +3,28 @@ import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import WebFont from 'webfontloader'
 
-const Head = ({ meta }) => {
+class Head extends React.Component {
-  const { title, tagline, description, url, typekit } = meta
+  componentDidMount() {
+    WebFont.load({ typekit: { id: this.props.meta.typekit } })
+  }
 
-  WebFont.load({ typekit: { id: typekit } })
+  render() {
+    const { title, tagline, description, url } = this.props.meta
 
-  return (
+    return (
-    <Helmet
+      <Helmet
-      defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
+        defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
-      titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
+        titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
-    >
+      >
-      <meta name="description" content={description} />
 
-      {window.location.protocol + '//' + window.location.hostname !==
+        <meta name="description" content={description} />
-        `${url}` && <meta content="noindex,nofollow" name="robots" />}
+
-    </Helmet>
+        {window.location.protocol + '//' + window.location.hostname !== `${url}` &&
-  )
+          <meta content="noindex,nofollow" name="robots" />
+        }
+      </Helmet>
+    )
+  }
 }
 
 Head.propTypes = {

src/components/molecules/ProjectLinks.scss

@@ -3,9 +3,9 @@
 .project__links {
     ul {
         padding: 0;
-        margin-left: -($spacer / 2);
         display: flex;
         flex-wrap: wrap;
+        margin-left: -($spacer / 2);
     }
 
     li {

src/components/molecules/ProjectTechstack.scss

@@ -5,7 +5,6 @@
         padding: 0;
         display: flex;
         flex-wrap: wrap;
-        justify-content: center;
         margin-left: -($spacer / 2);
     }
 
@@ -17,7 +16,7 @@
         text-align: center;
         background: rgba(#fff, .15);
         color: $brand-grey-light;
-        flex: 1 1 calc((100% / 3) - #{$spacer});
+        flex: 0 0 calc(33% - #{$spacer / 2});
         margin-left: $spacer / 2;
         margin-bottom: $spacer / 2;
     }