Centralized animation 🚀

Author: chicio

graphql-types.ts

@@ -258,6 +258,8 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
+  port?: Maybe<Scalars['Int']>;
+  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1009,6 +1011,8 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2183,6 +2187,8 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
+  | 'port'
+  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2284,6 +2290,8 @@ export type SiteGroupConnection = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

src/components/design-system/organism/modal-with-image.tsx

@@ -1,15 +1,7 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { CallToActionExternal } from "../atoms/call-to-action-external";
 import * as React from "react";
-
-const opacity = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
+import { opacity } from "../../opacity-keyframes";
 
 const ModalOverlay = styled.div`
   position: fixed;

src/components/design-system/organism/profile-presentation.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import { Heading2 } from "../atoms/heading2";
 import { slugs } from "../../../logic/slug";
 import { CallToActionInternalWithTracking } from "../../call-to-action-internal-with-tracking";
+import { opacity } from "../../opacity-keyframes";
 
 const Author = styled(Heading2)`
   color: ${(props) => props.theme.light.textAbovePrimaryColor};
@@ -36,17 +37,8 @@ const ProfileContainer = styled.div`
   justify-content: center;
   text-align: center;
   opacity: 0;
-  animation: show-profile-introduction 1s linear 0.5s;
+  animation: ${opacity} 1s linear 0.5s;
   animation-fill-mode: forwards;
-
-  @keyframes show-profile-introduction {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
 `;
 
 const ProfileImageContainer = styled.div`

src/components/opacity-keyframes.tsx

@@ -0,0 +1,10 @@
+import { keyframes } from "styled-components";
+
+export const opacity = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;