Ready to be deployed 🚀

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/background-fullscreen.tsx

@@ -1,20 +1,14 @@
 import React from "react";
 import Particles from "react-tsparticles";
 import { textAbovePrimaryColor } from "./theme";
-import { useHardwareConcurrency, useMemoryStatus } from "react-adaptive-hooks";
-import { isSafari, isDesktop } from "react-device-detect";
+import { isSafariDesktop, useIsPowerfulDesktop } from "../logic/device";
 
 export const BackgroundFullScreen: React.FC = () => {
-  const { deviceMemory } = useMemoryStatus({ deviceMemory: 4 });
-  const { numberOfLogicalProcessors } = useHardwareConcurrency();
+  const isPowerfulDesktop = useIsPowerfulDesktop();
 
   return (
     <div>
-      {((isSafari && isDesktop) ||
-        (isDesktop &&
-          deviceMemory >= 8 &&
-          numberOfLogicalProcessors != null &&
-          numberOfLogicalProcessors >= 8)) && (
+      {(isSafariDesktop() || isPowerfulDesktop) && (
         <Particles
           id="tsparticles"
           style={{

src/logic/device.ts

@@ -0,0 +1,16 @@
+import { isDesktop, isSafari } from "react-device-detect";
+import { useHardwareConcurrency, useMemoryStatus } from "react-adaptive-hooks";
+
+export const isSafariDesktop = () => isSafari && isDesktop;
+
+export const useIsPowerfulDesktop = () => {
+  const { deviceMemory } = useMemoryStatus({ deviceMemory: 1 });
+  const { numberOfLogicalProcessors } = useHardwareConcurrency();
+
+  return (
+    isDesktop &&
+    deviceMemory >= 8 &&
+    numberOfLogicalProcessors != null &&
+    numberOfLogicalProcessors >= 8
+  );
+};