fix(build): using browser related API only when inside browser

content/bolacha-acafrao.mdx

@@ -9,7 +9,7 @@ icon:
 ---
 
 import Recipe from '../src/components/Recipe';
-import { units } from '../src/utils/measure';
+import { units } from '../src/utils';
 
 import bol1 from '../static/recipes/bolacha-acafrao/1.jpg';
 import bol2 from '../static/recipes/bolacha-acafrao/2.jpg';

content/enchiladas-de-pepino.mdx

@@ -9,7 +9,7 @@ icon:
 ---
 
 import Recipe from '../src/components/Recipe';
-import { units } from '../src/utils/measure';
+import { units } from '../src/utils';
 
 import pep1 from '../static/recipes/enchiladas-de-pepino/1.jpg';
 import pep2 from '../static/recipes/enchiladas-de-pepino/2.jpg';

content/macarrao-molho-de-cenoura.mdx

@@ -9,7 +9,7 @@ icon:
 ---
 
 import Recipe from '../src/components/Recipe';
-import { units } from '../src/utils/measure';
+import { units } from '../src/utils';
 
 import mac1 from '../static/recipes/macarrao-molho-de-cenoura/1.jpg';
 import mac2 from '../static/recipes/macarrao-molho-de-cenoura/2.jpg';

content/pao-de-banana.mdx

@@ -9,7 +9,7 @@ icon:
 ---
 
 import Recipe from '../src/components/Recipe';
-import { units } from '../src/utils/measure';
+import { units } from '../src/utils';
 
 import pao1 from '../static/recipes/pao-de-banana/1.jpg';
 import pao2 from '../static/recipes/pao-de-banana/2.jpg';

src/components/Recipe.jsx

@@ -1,9 +1,8 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { navigate } from 'gatsby';
 import { Fieldset, Frame, Modal } from '@react95/core';
-import IconRenderer from '@react95/gatsby-theme/src/components/icon-renderer';
-import { TASKBAR_HEIGHT } from '@react95/gatsby-theme/src/utils/constants';
+import { TASKBAR_HEIGHT, IconRenderer } from '../utils';
 
 import Zoom from 'react-medium-image-zoom';
 import 'react-medium-image-zoom/dist/styles.css';
@@ -68,16 +67,25 @@ const Recipe = ({
   frontmatter,
 }) => {
   const ref = useRef(null);
+  const [buttons, setButtons] = useState([]);
 
   useEffect(() => {
     // I'm not proud of this
     ref.current.parentElement.style.overflow = 'auto';
   }, [ref.current]);
 
+  // ensure this code run only in browser
+  useEffect(() => {
+    const {
+      location: { href: url },
+    } = document;
+
+    if (navigator.canShare({ url })) {
+      setButtons([{ value: 'Compartilhar', onClick: () => share(url) }]);
+    }
+  }, [setButtons]);
+
   const { title, icon } = frontmatter;
-  const {
-    location: { href: url },
-  } = document;
 
   return (
     <Modal
@@ -89,11 +97,7 @@ const Recipe = ({
         width: '100%',
       }}
       closeModal={() => navigate('/')}
-      buttons={
-        navigator.canShare({ url })
-          ? [{ value: 'Compartilhar', onClick: () => share(url) }]
-          : []
-      }
+      buttons={buttons}
     >
       <RecipeWrapper boxShadow="none" ref={ref}>
         {ingredients.length > 0 && (

src/utils/index.js

@@ -0,0 +1,15 @@
+import IconRenderer from '@react95/gatsby-theme/src/components/icon-renderer';
+import { TASKBAR_HEIGHT } from '@react95/gatsby-theme/src/utils/constants';
+
+const units = {
+  XICARAS: 'Xícaras',
+  INTEIROS: 'Inteiros',
+  COLHER_DE_CHA: 'Colher de chá',
+  COLHER_DE_SOPA: 'Colher de sopa',
+  KG: 'Kg',
+  G: 'G',
+  ML: 'mL',
+  DENTES: 'Dentes',
+};
+
+export { units, IconRenderer, TASKBAR_HEIGHT };