Gatsby 5 🚀 (#113)

* Gatsby 5 upgrade 🚀

* Update changelog 🚀

* Fix image

.storybook/main.js

@@ -1,3 +1,5 @@
+const webpack = require('webpack');
+
 module.exports = {
   stories: [
     "../__stories__/**/*.stories.mdx",
@@ -14,7 +16,15 @@ module.exports = {
     reactDocgen: false
   },
   webpackFinal: async config => {
+    // To load react without having the jsx runtime issues
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        React: 'react',
+      })
+    );
     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
+    // Remove core-js to prevent issues with Storybook
+    config.module.rules[0].exclude= [/core-js/]
     config.module.rules[0].use[0].loader = require.resolve("babel-loader")
     config.module.rules[0].use[0].options.presets = [
       require.resolve("@babel/preset-react"),

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log
 All changes to Chicio coding will be documented in this file.
 
+## [6.0.0](https://github.com/chicio/chicio.github.io/releases/tag/v6.0.0)
+Release date: 2022-11-09
+
+#### Added
+
+- gatsby graphql typegen
+
 ## [5.5.0](https://github.com/chicio/chicio.github.io/releases/tag/v5.5.0)
 Release date: 2022-07-01
 

__stories__/atoms/call-to-action-internal.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import { CallToActionInternal } from "../../src/components/design-system/atoms/call-to-action-internal";
 
-export const Internal: React.VFC = () => (
+export const Internal: React.FC = () => (
   <CallToActionInternal to={""}>Example</CallToActionInternal>
 );
 

__stories__/atoms/container-fullscreen.stories.tsx

@@ -7,7 +7,7 @@ const ContainerWithColor = styled(ContainerFullscreen)`
   background-color: ${(props) => props.theme.light.primaryColor};
 `;
 
-export const FullScreen: React.VFC = () => (
+export const FullScreen: React.FC = () => (
   <ContainerWithColor>{"A fluid Container"}</ContainerWithColor>
 );
 

__stories__/atoms/container-section.stories.tsx

@@ -7,7 +7,7 @@ const ContainerWithColor = styled(ContainerSection)`
   background-color: ${(props) => props.theme.light.primaryColor};
 `;
 
-export const Section: React.VFC = () => (
+export const Section: React.FC = () => (
   <ContainerWithColor>{"A fluid Container"}</ContainerWithColor>
 );
 

__stories__/atoms/heading.stories.tsx

@@ -8,7 +8,7 @@ import { Heading5 } from "../../src/components/design-system/atoms/heading5";
 import { Heading6 } from "../../src/components/design-system/atoms/heading6";
 import { Heading7 } from "../../src/components/design-system/atoms/heading7";
 
-export const Heading: React.VFC = () => (
+export const Heading: React.FC = () => (
   <div>
     <Heading1>{"Heading 1"}</Heading1>
     <Heading2>{"Heading 2"}</Heading2>

__stories__/atoms/links.stories.tsx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import { StandardInternalLink } from "../../src/components/design-system/atoms/standard-internal-link";
 import { StandardExternalLink } from "../../src/components/design-system/atoms/standard-external-link";
 
-export const Links: React.VFC = () => (
+export const Links: React.FC = () => (
   <>
     <div>
       <StandardInternalLink to={""}>An internal link</StandardInternalLink>

__stories__/atoms/overlay.stories.tsx

@@ -1,14 +1,17 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Overlay,
   OverlayProps,
 } from "../../src/components/design-system/atoms/overlay";
 import { Paragraph } from "../../src/components/design-system/atoms/paragraph";
 
+const OverlayContainer: React.FC<OverlayProps> = (args) => (
+  <Overlay {...args} />
+);
+
 const Template: Story<OverlayProps> = (args) => (
   <>
-    <Overlay {...args} />
+    <OverlayContainer {...args} />
     <Paragraph>
       {"An overlay covers 100% of the visible contain with opacity"}
     </Paragraph>

__stories__/atoms/syntax.stories.tsx

@@ -124,7 +124,7 @@ const StyledExampleCode = styled.div`
   ${syntax}
 `;
 
-export const Code: React.VFC = () => (
+export const Code: React.FC = () => (
   <>
     <StyledExampleCode dangerouslySetInnerHTML={{ __html: htmlSwift }} />
     <StyledExampleCode dangerouslySetInnerHTML={{ __html: htmlKotlin }} />

__stories__/atoms/time.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import { Time } from "../../src/components/design-system/atoms/time";
 
-export const TimeContainer: React.VFC = () => (
+export const TimeContainer: React.FC = () => (
   <>
     <div>
       <Time>{"24 Apr 2021"}</Time>

__stories__/molecules/close.stories.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import { Meta } from "@storybook/react";
+import React from "react";
 import { Close } from "../../src/components/design-system/molecules/close";
 
-export const CloseContainer: React.VFC = () => (
+export const CloseContainer: React.FC = () => (
   <Close onClick={() => alert("click")} />
 );
 

__stories__/molecules/down-arrow.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import { DownArrow } from "../../src/components/design-system/molecules/down-arrow";
 
-export const DownArrowContainer: React.VFC = () => <DownArrow />;
+export const DownArrowContainer: React.FC = () => <DownArrow />;
 
 // @ts-ignore
 DownArrowContainer.storyName = "Down Arrow";

__stories__/molecules/hamburger-menu.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 import { HamburgerMenu } from "../../src/components/design-system/molecules/hamburger-menu";
 

__stories__/molecules/menu-item.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   MenuItem,

__stories__/molecules/page-title.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/react";
 import { PageTitle } from "../../src/components/design-system/molecules/page-title";
 import React from "react";
 
-export const PageTitleContainer: React.VFC = () => (
+export const PageTitleContainer: React.FC = () => (
   <PageTitle>{"Page Title"}</PageTitle>
 );
 

__stories__/molecules/pagination-navigation.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   PageNavigationProps,

__stories__/molecules/post-authors.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {

__stories__/molecules/post-card.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   PostCard,
@@ -16,8 +15,7 @@ PostCardStory.args = {
     backgroundColor: "#e8c8c8",
     images: {
       fallback: {
-        src:
-          "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg",
+        src: "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg",
         srcSet:
           "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/20c4c/mockk-junit5-kotlin.jpg 750w,\nhttps://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg 1000w",
         sizes: "100vw",

__stories__/molecules/post-meta.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   PostMeta,

__stories__/molecules/post-tags.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   PostTags,

__stories__/molecules/project.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Project,
@@ -30,15 +29,11 @@ ProjectStory.args = {
         Physically based ray tracer with multiple shading models support and
         Color Rendering Index (CRI) evaluation. Project developed for my master
         degree thesis at{" "}
-        <StandardExternalLink
-          href="https://www.disco.unimib.it"
-        >
+        <StandardExternalLink href="https://www.disco.unimib.it">
           University Milano-Bicocca
         </StandardExternalLink>{" "}
         -
-        <StandardExternalLink
-          href="http://www.ivl.disco.unimib.it"
-        >
+        <StandardExternalLink href="http://www.ivl.disco.unimib.it">
           Imaging and Vision Laboratory
         </StandardExternalLink>
         .

__stories__/molecules/recent-post-card.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   RecentPostCard,
@@ -19,8 +18,7 @@ RecentPostCardStory.args = {
     backgroundColor: "#e8c8c8",
     images: {
       fallback: {
-        src:
-          "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg",
+        src: "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg",
         srcSet:
           "https://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/20c4c/mockk-junit5-kotlin.jpg 750w,\nhttps://www.fabrizioduroni.it/static/3abc914507de97c6aad016c603c0ce5f/05276/mockk-junit5-kotlin.jpg 1000w",
         sizes: "100vw",

__stories__/molecules/social-contact.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   SocialContact,

__stories__/molecules/tabs.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Tabs,

__stories__/molecules/tag.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Tag,

__stories__/organism/blog-header.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import { BlogHeader } from "../../src/components/design-system/organism/blog-header";
 
-export const BlogHeaderContainer: React.VFC = () => <BlogHeader />;
+export const BlogHeaderContainer: React.FC = () => <BlogHeader />;
 
 // @ts-ignore
 BlogHeaderContainer.storyName = "Blog Header";

__stories__/organism/blog-menu.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   BlogMenu,

__stories__/organism/footer.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Footer,

__stories__/organism/gallery.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Gallery,

__stories__/organism/modal-with-image.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   ModalWithImage,

__stories__/organism/profile-presentation.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   ProfilePresentation,

__stories__/organism/projects.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import { Projects } from "../../src/components/design-system/organism/projects";
 
-export const ProjectsStory: React.VFC = () => <Projects />;
+export const ProjectsStory: React.FC = () => <Projects />;
 
 // @ts-ignore
 ProjectsStory.storyName = "Projects";

__stories__/organism/recent-posts.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   RecentPosts,

__stories__/organism/resume.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Resume } from "../../src/components/design-system/organism/resume";
 

__stories__/organism/social-contacts.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   SocialContacts,

__stories__/organism/technologies.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   Technologies,

__stories__/organism/timeline.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Timeline } from "../../src/components/design-system/organism/timeline";
 

__stories__/templates/blog-generic-post-list-page-template.stories.tsx

@@ -1,14 +1,12 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   BlogGenericPostListPageTemplate,
   BlogGenericPostListPageProps,
 } from "../../src/components/design-system/templates/blog-generic-post-list-page-template";
 import { OgPageType } from "../../src/logic/seo";
 
-export const BlogGenericPostListPagePageTemplateStory: Story<BlogGenericPostListPageProps> = (
-  args
-) => <BlogGenericPostListPageTemplate {...args} />;
+export const BlogGenericPostListPagePageTemplateStory: Story<BlogGenericPostListPageProps> =
+  (args) => <BlogGenericPostListPageTemplate {...args} />;
 BlogGenericPostListPagePageTemplateStory.args = {
   title: "Archive",
   posts: [

__stories__/templates/blog-page-template.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   BlogPageTemplate,

__stories__/templates/showcase-page-template.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { BlogPageProps } from "../../src/components/design-system/templates/blog-page-template";
 import { OgPageType } from "../../src/logic/seo";
@@ -10,6 +9,7 @@ import { blogTheme } from "../../src/components/design-system/theme";
 
 export const ShowcasePageTemplateStory: Story<BlogPageProps> = () => (
   <ShowcasePageTemplate
+    cookieConsentColor={"#FF0000"}
     location={{
       pathname: "/",
       url: "http://localhost:8000/",

__tests__/resume.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";
-import React from "react";
 import { Resume } from "../src/components/design-system/organism/resume";
 
 describe("Resume", () => {

gatsby-node.ts

@@ -12,11 +12,8 @@ export const createPages: GatsbyNode["createPages"] = async ({
   const { createPage } = actions;
   const result: any = await graphql(
     `
-      {
-        allMarkdownRemark(
-          sort: { fields: [frontmatter___date], order: DESC }
-          limit: 1000
-        ) {
+      query BlogPosts {
+        allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 1000) {
           edges {
             node {
               fields {
@@ -26,7 +23,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
           }
         }
         tagsGroup: allMarkdownRemark(limit: 2000) {
-          group(field: frontmatter___tags) {
+          group(field: { frontmatter: { tags: SELECT } }) {
             fieldValue
           }
         }