reactph · jromest · Apr 21, 2024 · Apr 21, 2024 · Apr 21, 2024 · Apr 21, 2024
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -54,6 +54,7 @@ module.exports = {
       },
     },
     `gatsby-plugin-emotion`,
+    `gatsby-plugin-theme-ui`,
     {
       resolve: `gatsby-plugin-env-variables`,
       options: {

diff --git a/package.json b/package.json
@@ -5,60 +5,64 @@
   "version": "0.1.0",
   "author": "ReactJS PH <reactjs.ph@yahoo.com>",
   "dependencies": {
-    "@emotion/core": "^10.0.16",
-    "@emotion/styled": "^10.0.15",
-    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-brands-svg-icons": "^5.10.2",
-    "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@reach/dialog": "^0.8.6",
-    "@react-hook/intersection-observer": "^2.0.10",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdx-js/react": "^3.0.1",
+    "@reach/dialog": "^0.18.0",
+    "@react-hook/intersection-observer": "^3.1.1",
     "@rebass/preset": "^4.0.3",
+    "@theme-ui/mdx": "^0.16.2",
+    "@theme-ui/presets": "^0.16.2",
     "babel-eslint": "^10.1.0",
-    "csshake": "^1.5.3",
-    "date-fns": "^2.10.0",
-    "emotion-reset": "^2.0.2",
-    "emotion-theming": "^10.0.14",
-    "fabric": "3.6.2",
-    "formik": "^2.1.3",
-    "gatsby": "^2.24.80",
-    "gatsby-image": "^2.1.2",
-    "gatsby-plugin-emotion": "^4.1.2",
-    "gatsby-plugin-env-variables": "^2.0.0",
-    "gatsby-plugin-manifest": "^2.1.1",
-    "gatsby-plugin-offline": "^2.1.1",
-    "gatsby-plugin-react-helmet": "^3.0.12",
-    "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sharp": "^2.1.3",
-    "gatsby-source-filesystem": "^2.0.38",
-    "gatsby-transformer-json": "2.11.0",
-    "gatsby-transformer-sharp": "^2.1.21",
+    "csshake": "^1.7.0",
+    "date-fns": "^3.6.0",
+    "emotion-reset": "^3.0.1",
+    "fabric": "5.3.0",
+    "formik": "^2.4.5",
+    "gatsby": "^5.13.4",
+    "gatsby-image": "^3.11.0",
+    "gatsby-plugin-emotion": "^8.13.1",
+    "gatsby-plugin-env-variables": "^2.3.0",
+    "gatsby-plugin-manifest": "^5.13.1",
+    "gatsby-plugin-offline": "^6.13.2",
+    "gatsby-plugin-react-helmet": "^6.13.1",
+    "gatsby-plugin-react-svg": "^3.3.0",
+    "gatsby-plugin-sharp": "^5.13.1",
+    "gatsby-plugin-theme-ui": "^0.16.2",
+    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-transformer-json": "5.13.1",
+    "gatsby-transformer-sharp": "^5.13.1",
     "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-error-boundary": "^3.0.2",
-    "react-google-recaptcha": "^2.0.1",
-    "react-helmet": "^5.2.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
+    "react-google-recaptcha": "^3.1.0",
+    "react-helmet": "^6.1.0",
     "rebass": "^4.0.3",
-    "yup": "^0.28.1"
+    "theme-ui": "^0.16.2",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
-    "eslint": "6.2.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.1.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "gh-pages": "^2.1.1",
-    "husky": "^3.0.4",
-    "inquirer": "^8.2.0",
-    "joi": "^17.2.1",
-    "lint-staged": "^9.2.3",
-    "prettier": "^1.17.1",
-    "prettier-eslint-cli": "^5.0.0"
+    "eslint": "9.1.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "gh-pages": "^6.1.1",
+    "husky": "^9.0.11",
+    "inquirer": "^9.2.19",
+    "joi": "^17.12.3",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "prettier-eslint-cli": "^8.0.1"
   },
   "license": "MIT",
   "scripts": {
@@ -93,4 +97,4 @@
       "pre-push": "node ./scripts/pre-push"
     }
   }
-}
+}
diff --git a/src/components/circleButton.js b/src/components/circleButton.js
@@ -1,6 +1,6 @@
 import React from "react"
 
-import { Flex, Text } from "rebass"
+import { Flex, Text } from "theme-ui"
 
 const CircleButton = ({ children, ...props }) => (
   <Flex

diff --git a/src/components/contact.js b/src/components/contact.js
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react"
 import PropTypes from "prop-types"
-import { Box, Text, Button } from "rebass"
+import { Box, Text, Button } from "theme-ui"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons"
 import { Formik } from "formik"

diff --git a/src/components/container.js b/src/components/container.js
@@ -1,9 +1,17 @@
 import React from "react"
-import { Box } from "rebass"
+import { Box } from "theme-ui"
 import PropTypes from "prop-types"
 
 const Container = ({ children, ...props }) => (
-  <Box width="100%" maxWidth={1200} mx="auto" px={[2, 3]} {...props}>
+  <Box
+    sx={{
+      width: "100%",
+      maxWidth: 1200,
+    }}
+    mx="auto"
+    px={[2, 3]}
+    {...props}
+  >
     {children}
   </Box>
 )

diff --git a/src/components/devBio.js b/src/components/devBio.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Box, Flex, Image, Text } from "rebass"
+import { Box, Flex, Image, Text } from "theme-ui"
 import {
   faBehance,
   faGithub,
@@ -59,7 +59,7 @@ const DevBio = ({
           {blurb}
         </Text>
         <Box as="ul" mb={1}>
-          {skills.slice(0, 5).map(skill => (
+          {skills.slice(0, 5).map((skill) => (
             <Box
               as="li"
               display="inline-block"
@@ -80,7 +80,7 @@ const DevBio = ({
           ))}
         </Box>
         <ul>
-          {contacts.slice(0, 5).map(contact => (
+          {contacts.slice(0, 5).map((contact) => (
             <Box as="li" display="inline-block" mr={1}>
               <a href={contact.url} target="_blank" rel="noreferrer noopener">
                 <FontAwesomeIcon

diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Flex, Text, Link } from "rebass"
+import { Box, Flex, Text, Link } from "theme-ui"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
   faFacebook,
@@ -49,19 +49,19 @@ const Footer = () => (
         }}
       >
         <Box
-          width="100%"
           m={["auto", null, 0]}
           sx={{
             gridArea: "TopLeft",
             borderBottom: "1px solid rgba(255, 255, 255, .8)",
+            width: "100%",
           }}
         />
         <Box
-          width="100%"
           m={["auto", null, 0]}
           sx={{
             gridArea: "TopRight",
             borderBottom: "1px solid rgba(255, 255, 255, .8)",
+            width: "100%",
           }}
         />
         <Box sx={{ gridArea: "BottomLeft" }}>
@@ -79,26 +79,28 @@ const Footer = () => (
 )
 
 const FooterBrandLogo = () => (
-  <Box px={[1, null, 3]} textAlign="center">
+  <Box px={[1, null, 3]} sx={{ textAlign: "center" }}>
     <GatsbyLink to="/">
       <Box
         as={Brandmark}
         alt="React JS Philippines"
-        width={["8rem", null, "10.88rem"]}
+        sx={{
+          width: ["8rem", null, "10.88rem"],
+        }}
       />
     </GatsbyLink>
   </Box>
 )
 
 const FooterContentLeft = () => (
-  <Box mt={2} textAlign={["center", null, "left"]}>
-    <Text fontSize={1}>
+  <Box mt={2} sx={{ textAlign: ["center", null, "left"] }}>
+    <Text sx={{ fontSize: 1 }}>
       {`Designed by `}
       <Link href={designerLink} color="white">
         Miguel N. Galace.
       </Link>
     </Text>
-    <Text fontSize={1}>
+    <Text sx={{ fontSize: 1 }}>
       © {new Date().getFullYear()} ReactJS Philippines. All rights reserved.
     </Text>
   </Box>
@@ -115,23 +117,27 @@ const FooterContentRight = () => {
 
   return (
     <Flex
-      flex={1}
-      justifyContent="flex-end"
-      alignItems={["center", null, "flex-end"]}
       mt={2}
-      flexDirection="column"
+      sx={{
+        flex: 1,
+        justifyContent: "flex-end",
+        alignItems: ["center", null, "flex-end"],
+        flexDirection: "column",
+      }}
     >
       <Text
-        fontSize={2}
-        fontWeight="bold"
-        textAlign="right"
         mb="1"
-        sx={{ textTransform: "uppercase" }}
+        sx={{
+          textTransform: "uppercase",
+          fontSize: 2,
+          fontWeight: "bold",
+          textAlign: "right",
+        }}
       >
         Join the community
       </Text>
 
-      <Text fontSize={3}>
+      <Text sx={{ fontSize: 3 }}>
         <Link href={discord} color="white" mr={2}>
           <FontAwesomeIcon icon={faDiscord} />
         </Link>

diff --git a/src/components/header.js b/src/components/header.js
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Link as GatsbyLink } from "gatsby"
-import { Box, Flex, Link, Text } from "rebass"
+import { Box, Flex, Link, Text } from "theme-ui"
 import { Brandmark } from "../images"
 import Container from "./container"
 
@@ -25,48 +25,58 @@ const Header = ({ siteTitle }) => (
     <Container>
       <Flex
         color="white"
-        alignItems="center"
-        justifyContent="space-between"
         py={2}
+        sx={{
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
       >
         <Flex
           as={GatsbyLink}
           to="/"
-          alignItems="center"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: "none", alignItems: "center" }}
         >
           <Box as={Brandmark} title={siteTitle} height="4rem" mr={1} />
           <Text
-            display={["none", "initial"]}
             as="h1"
-            fontSize={3}
-            fontWeight="heading"
-            lineHeight={1}
-            sx={{ textTransform: "uppercase" }}
+            sx={{
+              textTransform: "uppercase",
+              display: ["none", "initial"],
+              fontSize: 3,
+              fontWeight: "heading",
+              lineHeight: 1,
+            }}
           >
-            <Text as="span" display="block" color="lightBlue">
+            <Text as="span" color="lightBlue" sx={{ display: "block" }}>
               ReactJS
             </Text>
-            <Text as="span" display="block" color="gold">
+            <Text as="span" color="gold" sx={{ display: "block" }}>
               Philippines
             </Text>
           </Text>
         </Flex>
 
-        <Box
+        <Flex
           as="ul"
-          display="flex"
-          flexDirection={["column", "row"]}
-          textAlign="right"
+          sx={{
+            flexDirection: ["column", "row"],
+            textAlign: "right",
+          }}
         >
           {menus.map((menu, i) => (
             <Box as="li" key={menu.label} ml={i !== 0 ? 2 : 0}>
-              <Link variant="nav" href={menu.path} fontSize={[1, 2]}>
+              <Link
+                variant="variants.nav"
+                href={menu.path}
+                sx={{
+                  fontSize: [1, 2],
+                }}
+              >
                 {menu.label}
               </Link>
             </Box>
           ))}
-        </Box>
+        </Flex>
       </Flex>
     </Container>
   </Box>