Contentful Integration + Tailwind upgrade

.contentful.json

@@ -0,0 +1,7 @@
+{
+  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
+  "CTF_BLOG_POST_TYPE_ID": "testimonial",
+  "CTF_SPACE_ID": "process.env.CTF_SPACE_ID",
+  "CTF_CDA_ACCESS_TOKEN": "process.env.CDA_ACCESS_TOKEN",
+  "CTF_CMA_ACCESS_TOKEN": "process.env.CMA_ACCESS_TOKEN"
+}

.env.example

@@ -0,0 +1,2 @@
+CONTENTFUL_ACCESS_TOKEN=
+CONTENTFUL_SPACE_ID=

.gitignore

@@ -58,7 +58,7 @@ typings/
 *.tgz
 
 # dotenv environment variable files
-.env*
+.env
 
 # gatsby files
 .cache/
@@ -75,3 +75,4 @@ yarn-error.log
 # Yarn Integrity file
 .yarn-integrity
 /.idea/
+package-lock.json

gatsby-browser.js

@@ -10,7 +10,6 @@ const supportedLanguagePaths = langConfig
 // eslint-disable-next-line import/prefer-default-export
 export const onInitialClientRender = () => {
   let currentPath = window.location.pathname + window.location.hash;
-  console.log(currentPath);
 
   // get language to use
   let language = window.navigator.language.substr(0, 2);

gatsby-config.js

@@ -1,5 +1,6 @@
 const resolveConfig = require('tailwindcss/resolveConfig');
-const tailwindConfig = require('./tailwind.config.js');
+const tailwindConfig = require('./tailwind.config');
+require('dotenv').config();
 
 const fullConfig = resolveConfig(tailwindConfig);
 
@@ -32,17 +33,25 @@ module.exports = {
         short_name: `hubblr`,
         start_url: `/`,
         background_color: fullConfig.theme.colors.white,
-        theme_color: fullConfig.theme.colors.teal['400'],
         display: `minimal-ui`,
         icon: `src/images/fav.png`,
       },
     },
     {
       resolve: `gatsby-plugin-sass`,
       options: {
+        // eslint-disable-next-line
         postCssPlugins: [require('tailwindcss')('./tailwind.config.js'), require('autoprefixer')],
       },
     },
     `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-source-contentful`,
+      options: {
+        spaceId: process.env.CONTENTFUL_SPACE_ID,
+        // Learn about environment variables: https://gatsby.dev/env-vars
+        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
+      },
+    },
   ],
 };

package.json

@@ -4,50 +4,53 @@
   "dependencies": {
     "@hubblr/react-side-content-accordion": "^1.0.3",
     "@reach/router": "^1.3.4",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "browser-cookies": "^1.2.0",
     "cssnano": "4.1.10",
-    "eslint": "7.11.0",
+    "dotenv": "^10.0.0",
+    "eslint": "7.31.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-import-resolver-babel-module": "^5.1.2",
+    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-loader": "4.0.2",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "flat": "^5.0.2",
-    "framer-motion": "^2.9.4",
-    "gatsby": "^2.24.92",
-    "gatsby-plugin-eslint": "2.0.8",
-    "gatsby-plugin-ffmpeg": "^0.3.1",
-    "gatsby-plugin-manifest": "^2.4.34",
-    "gatsby-plugin-offline": "3.2.31",
-    "gatsby-plugin-postcss": "2.3.13",
-    "gatsby-plugin-react-helmet": "3.3.14",
-    "gatsby-plugin-sass": "^2.6.0",
-    "gatsby-plugin-sharp": "^2.9.1",
-    "gatsby-source-airtable": "^2.1.1",
-    "gatsby-source-filesystem": "^3.4.0",
+    "framer-motion": "^2.9.5",
+    "gatsby": "^4.0.2",
+    "gatsby-plugin-eslint": "4.0.1",
+    "gatsby-plugin-ffmpeg": "^0.4.1",
+    "gatsby-plugin-manifest": "4.0.0",
+    "gatsby-plugin-offline": "5.0.0",
+    "gatsby-plugin-postcss": "5.0.0",
+    "gatsby-plugin-react-helmet": "5.0.0",
+    "gatsby-plugin-sass": "5.0.0",
+    "gatsby-plugin-sharp": "^4.0.1",
+    "gatsby-source-airtable": "^2.2.1",
+    "gatsby-source-contentful": "^6.1.0",
+    "gatsby-source-filesystem": "4.0.0",
     "gatsby-theme-i18n": "^1.0.4",
-    "gatsby-transformer-ffmpeg": "^0.3.8",
-    "gatsby-transformer-sharp": "^2.7.0",
+    "gatsby-transformer-ffmpeg": "0.4.0",
+    "gatsby-transformer-sharp": "4.0.0",
     "gatsby-video": "^0.2.0",
+    "postcss": "^8.3.11",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-autosize-textarea": "^7.1.0",
     "react-dom": "16.13.1",
     "react-helmet": "6.1.0",
-    "react-intl": "^5.10.6",
-    "react-responsive": "^8.1.1",
-    "sass": "^1.29.0",
+    "react-intl": "^5.20.6",
+    "react-responsive": "^8.2.0",
+    "sass": "^1.36.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "sweetalert2": "^10.10.4",
-    "uuid": "^8.3.1",
-    "validator": "^13.1.17"
+    "sweetalert2": "^10.16.9",
+    "uuid": "^8.3.2",
+    "validator": "^13.6.0"
   },
   "scripts": {
     "analyze:lint": "eslint --ext .jsx --ext .js .",
@@ -65,10 +68,10 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "devDependencies": {
-    "@tailwindcss/custom-forms": "0.2.1",
-    "@types/tailwindcss": "^2.0.5",
+    "@tailwindcss/forms": "0.2.1",
+    "@types/tailwindcss": "^2.2.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.2",
     "tailwindcss": "1.9.1",
     "tailwindcss-textshadow": "^2.1.3"
   },

src/components/contact/business-card/BusinessCardContactPage.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import CedricBalsImage from '../../image-components/CedricBalsImage';
 import GradientButton from '../../buttons/gradient-border-buttons/GradientButton';
+import SimonHagedornImage from '../../image-components/SimonHagedornImage';
 
 function BusinessCardContactPage() {
   return (
     <div className="w-full h-full bg-brand-gray-darkest rounded-lg p-4 md:p-6 flex flex-col items-center">
       <div className="mb-5">
-        <CedricBalsImage className="w-24" />
+        <SimonHagedornImage className="w-24 h-24 flex items-center justify-center rounded-full" />
       </div>
       <div className="flex-grow flex flex-col justify-between items-center mb-5">
         <h2 className="text-center text-2xl font-extrabold leading-none mb-10">
@@ -17,8 +17,8 @@ function BusinessCardContactPage() {
           <FormattedMessage id="contact.business-card.text" />
         </div>
         <div className="flex flex-col items-center">
-          <p className="text-lg font-extrabold">Cedric Bals</p>
-          <p className="text-base">CEO</p>
+          <p className="text-lg font-extrabold">Simon Hagedorn</p>
+          <p className="text-base">BizDev/Sales</p>
         </div>
       </div>
       <a href="https://calendly.com/cbals/30min" className="flex justify-center w-full">

src/components/image-components/SimonHagedornImage.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import simonHagedornImage from '../../images/simonHagedorn/simon_hagedorn.jpeg';
+
+function SimonHagedornImage({ className }) {
+  return <img src={simonHagedornImage} alt="Simon Hagedorn" className={className} />;
+}
+
+SimonHagedornImage.defaultProps = {
+  className: '',
+};
+
+SimonHagedornImage.propTypes = {
+  className: PropTypes.string,
+};
+
+export default SimonHagedornImage;

src/components/index/page-sections/TestimonialSection.jsx

@@ -1,34 +1,32 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import TestimonialPhoto from '../../../images/testimonial_profile.jpeg';
-import TestimonialLogo from '../../../images/flink-logo.png';
-import HelgePlehn from '../../../images/testimonial_helge_plehn.png';
+import PropTypes from 'prop-types';
 import TestimonialSectionContentContainer from './TestimonialSectionContentContainer';
-import MedikamentoLogo from '../../../images/medikamendo.png';
 
-const TestimonialSection = () => {
+const TestimonialSection = ({ testimonials }) => {
   return (
     // Section Container
     <div className="container mx-auto mb-40">
       {/* 2 COL GRID @largerScreen */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
-        <TestimonialSectionContentContainer
-          personaImage={TestimonialPhoto}
-          corporateLogo={TestimonialLogo}
-          personaName={<FormattedMessage id="index.testimonials.flink.person-full-name" />}
-          personaJobtitle={<FormattedMessage id="index.testimonials.flink.person-position" />}
-          personaQuoteText={<FormattedMessage id="index.testimonials.flink.quote" />}
-        />
-        <TestimonialSectionContentContainer
-          personaImage={HelgePlehn}
-          corporateLogo={MedikamentoLogo}
-          personaName={<FormattedMessage id="index.testimonials.medikamento.person-full-name" />}
-          personaJobtitle={<FormattedMessage id="index.testimonials.medikamento.person-position" />}
-          personaQuoteText={<FormattedMessage id="index.testimonials.medikamento.quote" />}
-        />
+        {testimonials.map((edge) => {
+          return (
+            <TestimonialSectionContentContainer
+              key={`testimonial-${edge.node.id}`}
+              personaImage={edge.node.profileImage.file.url}
+              corporateLogo={edge.node.logo.file.url}
+              personaName={edge.node.name}
+              personaJobtitle={edge.node.jobRole}
+              personaQuoteText={edge.node.testimonial.testimonial}
+            />
+          );
+        })}
       </div>
     </div>
   );
 };
 
+TestimonialSection.propTypes = {
+  testimonials: PropTypes.array.isRequired,
+};
+
 export default TestimonialSection;

src/components/nav-bar/NavBar.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocalization } from 'gatsby-theme-i18n';

src/components/seo/Seo.jsx

@@ -23,13 +23,8 @@ const SEO = ({ title, description, image }) => {
   const intl = useIntl();
   const { pathname } = useLocation();
   const { site } = useStaticQuery(query);
-  const {
-    defaultTitle,
-    titleTemplate,
-    defaultDescription,
-    siteUrl,
-    defaultImage,
-  } = site.siteMetadata;
+  const { defaultTitle, titleTemplate, defaultDescription, siteUrl, defaultImage } =
+    site.siteMetadata;
 
   const seo = {
     title: title ? intl.formatMessage({ id: title }) : defaultTitle,

src/components/text/AppKnockoutText.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 function AppKnockoutText({ children, className }) {
   return (
     <span
-      className={`font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r bg-gradient-to-r to-teal-400 from-blue-500 ${className}`}
+      className={`font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-hubblr-green ${className}`}
     >
       {children}
     </span>

src/css/components/_accordion.scss

@@ -1,9 +1,9 @@
 .accordion-heading {
-  @apply .text-2xl font-bold .py-5 text-left leading-tight tracking-tight;
+  @apply text-2xl font-bold py-5 text-left leading-tight tracking-tight;
 }
 
 .accordion-text-content {
-  @apply .text-2xl leading-tight font-light;
+  @apply text-2xl leading-tight font-light;
   transition: height .8s ease-in-out;
   overflow: hidden;
 }

src/css/components/_buttons.scss

@@ -1,55 +1,55 @@
 // different types of buttons
 .button {
-  @apply .rounded-lg;
+  @apply rounded-lg;
 
   &:not(.button-gradient) {
     &:not([class*='p-']) {
-      @apply .px-3 .py-1;
+      @apply px-3 py-1;
     }
   }
 
   &.button-theme-light {
-    @apply .text-hubblr-turquoise;
+    @apply text-hubblr-turquoise;
 
     &:not(.button-gradient) {
-      @apply .bg-white;
+      @apply bg-white;
       @extend .animate-bg-brand-gray-light;
     }
 
     &.button-gradient > .button-content-container {
-      @apply .bg-white;
+      @apply bg-white;
       @include animate-bg;
     }
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-brand-gray-light;
+        @apply bg-brand-gray-light;
       }
     }
   }
 
   &.button-theme-dark {
-    @apply .text-white;
+    @apply text-white;
 
     &:not(.button-gradient) {
-      @apply .bg-brand-gray-darkest;
+      @apply bg-brand-gray-darkest;
       @extend .animate-bg-brand-gray-darkest;
     }
 
     &.button-gradient > .button-content-container {
-      @apply .bg-brand-gray-darkest;
+      @apply bg-brand-gray-darkest;
       @include animate-bg;
     }
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-black;
+        @apply bg-black;
       }
     }
   }
 
   &.button-theme-transparent {
-    @apply .text-white;
+    @apply text-white;
 
     &:not(.button-gradient) {
       @extend .animate-bg-brand-gray-darkest;
@@ -61,16 +61,16 @@
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-black;
+        @apply bg-black;
       }
     }
   }
 }
 
 .round-button {
   &:not([class*='p-']) {
-    @apply .px-3 .py-3;
+    @apply px-3 py-3;
   }
 
-  @apply .rounded-full;
+  @apply rounded-full;
 }