updates to dependencies, merging to production

firebase.json

@@ -2,11 +2,7 @@
   "hosting": {
     "target": "rxresume",
     "public": "./public",
-    "ignore": [
+    "ignore": ["**/.*", "firebase.json", "**/node_modules/**"]
-      "**/.*",
-      "firebase.json",
-      "**/node_modules/**"
-    ]
   },
   "emulators": {
     "functions": {

gatsby-config.js

@@ -36,9 +36,10 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     {
-      resolve: 'gatsby-plugin-prefetch-google-fonts',
+      resolve: 'gatsby-plugin-webfonts',
       options: {
-        fonts: [
+        fonts: {
+          google: [
             {
               family: 'Lato',
               variants: ['400', '700'],
@@ -74,6 +75,7 @@ module.exports = {
           ],
         },
       },
+    },
     {
       resolve: 'gatsby-plugin-create-client-paths',
       options: { prefixes: ['/app/*'] },

package.json

@@ -16,61 +16,63 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.2",
     "@reach/router": "^1.3.4",
     "animate.css": "^4.1.1",
     "array-move": "^3.0.1",
+    "autoprefixer": "^10.0.4",
     "classnames": "^2.2.6",
-    "dayjs": "^1.9.1",
+    "dayjs": "^1.9.6",
     "dotenv": "^8.2.0",
     "downloadjs": "^1.4.7",
-    "firebase": "^7.23.0",
+    "firebase": "^8.1.2",
-    "formik": "^2.2.0",
+    "formik": "^2.2.5",
-    "gatsby": "^2.24.73",
+    "gatsby": "^2.28.0",
-    "gatsby-image": "^2.4.21",
+    "gatsby-image": "^2.7.0",
-    "gatsby-plugin-create-client-paths": "^2.3.13",
+    "gatsby-plugin-create-client-paths": "^2.6.0",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
-    "gatsby-plugin-manifest": "^2.4.34",
+    "gatsby-plugin-manifest": "^2.8.0",
     "gatsby-plugin-material-ui": "^2.1.10",
-    "gatsby-plugin-offline": "^3.2.31",
+    "gatsby-plugin-offline": "^3.6.0",
-    "gatsby-plugin-postcss": "^3.0.1",
+    "gatsby-plugin-postcss": "^3.3.0",
-    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
+    "gatsby-plugin-react-helmet": "^3.6.0",
-    "gatsby-plugin-react-helmet": "^3.3.14",
+    "gatsby-plugin-sharp": "^2.10.0",
-    "gatsby-plugin-sharp": "^2.6.40",
+    "gatsby-plugin-sitemap": "^2.8.0",
-    "gatsby-plugin-sitemap": "^2.4.15",
+    "gatsby-plugin-webfonts": "^1.1.3",
-    "gatsby-source-filesystem": "^2.3.34",
+    "gatsby-source-filesystem": "^2.7.0",
     "gatsby-source-gravatar": "^1.0.0",
-    "gatsby-transformer-remark": "^2.8.38",
+    "gatsby-transformer-remark": "^2.12.0",
-    "gatsby-transformer-sharp": "^2.5.17",
+    "gatsby-transformer-sharp": "^2.8.0",
-    "i18next": "^19.8.2",
+    "i18next": "^19.8.4",
     "lodash": "^4.17.20",
-    "nanoevents": "^5.1.8",
+    "nanoevents": "^5.1.10",
-    "react": "^16.13.1",
+    "postcss": "^8.1.14",
+    "react": "^17.0.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.7.3",
+    "react-i18next": "^11.7.4",
-    "react-icons": "^3.11.0",
+    "react-icons": "^4.1.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^5.0.3",
     "react-scroll": "^1.8.1",
-    "react-toastify": "^6.0.9",
+    "react-toastify": "^6.1.0",
-    "short-unique-id": "^3.0.4",
+    "short-unique-id": "^3.2.0",
     "uuid": "^8.3.1",
-    "yup": "^0.29.3"
+    "yup": "^0.32.1"
   },
   "devDependencies": {
-    "eslint": "^7.11.0",
+    "eslint": "^7.15.0",
-    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react": "^7.21.5",
     "gatsby-plugin-eslint": "^2.0.8",
-    "prettier": "2.1.2",
+    "prettier": "2.2.1",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
-    "tailwindcss": "^1.8.13"
+    "tailwindcss": "^2.0.1"
   },
   "repository": {
     "type": "git",

postcss.config.js

@@ -1,5 +1,6 @@
-const tailwindcss = require('tailwindcss');
+module.exports = {
-
+  plugins: {
-module.exports = () => ({
+    autoprefixer: {},
-  plugins: [tailwindcss],
+    tailwindcss: {},
-});
+  },
+};

src/components/builder/center/Artboard.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,14 +13,9 @@ import styles from './Artboard.module.css';
 const Artboard = () => {
   const state = useSelector();
   const { t } = useTranslation();
-  const [width, setWidth] = useState(0);
   const { id, name, metadata } = state;
   const { template } = metadata;
 
-  useEffect(() => {
-    setWidth(typeof window !== `undefined` && window && window.innerWidth);
-  }, [typeof window !== `undefined` && window && window.innerWidth]);
-
   return (
     <>
       <Helmet>
@@ -30,14 +25,7 @@ const Artboard = () => {
         <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
       </Helmet>
 
-      <div
+      <div id="page" className={styles.container}>
-        id="page"
-        className={styles.container}
-        style={{
-          transform: `scale(${width / 1680})`,
-          transformOrigin: `${width / 1680 > 1.0 ? `top left` : ``}`,
-        }}
-      >
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}

src/components/builder/center/Artboard.module.css

@@ -1,10 +1,11 @@
 @media screen {
   .container {
     width: 210mm;
-    min-height: 297mm;
+    height: 297mm;
     overflow: scroll;
+    margin: 2rem auto;
     box-shadow: var(--shadow);
 
-    @apply my-16 bg-white rounded;
+    @apply bg-white rounded;
   }
 }

src/pages/app/builder.module.css

@@ -10,7 +10,9 @@
 }
 
 .center {
-  @apply relative z-0 h-screen overflow-scroll;
+  width: calc(100vw / 2);
+
+  @apply relative z-0 h-screen overflow-scroll flex flex-col justify-items-center;
 }
 
 .right {

src/pages/r/view.js

@@ -52,6 +52,7 @@ const ResumeViewer = ({ id }) => {
         </Helmet>
 
         <div
+          id="page"
           className={styles.page}
           style={{ backgroundColor: resume.metadata.colors.background }}
         >

src/templates/Castform.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -55,7 +55,6 @@ const Castform = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingD }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Celebi.js

@@ -14,7 +14,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -86,7 +86,6 @@ const Celebi = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingE }}>
       <div
-        id="page"
         className="relative rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Gengar.js

@@ -59,7 +59,6 @@ const Gengar = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingC }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Glalie.js

@@ -13,7 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -54,7 +54,6 @@ const Glalie = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Onyx.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateB from './blocks/BirthDate/BirthDateB'
+import BirthDateB from './blocks/BirthDate/BirthDateB';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -33,7 +33,6 @@ const Onyx = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingA }}>
       <div
-        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Pikachu.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateB from './blocks/BirthDate/BirthDateB'
+import BirthDateB from './blocks/BirthDate/BirthDateB';
 
 const Blocks = {
   work: WorkA,
@@ -32,7 +32,6 @@ const Pikachu = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
-        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/blocks/BirthDate/BirthDateA.js

@@ -14,13 +14,19 @@ const BirthDateA = () => {
           {t('builder.profile.birthDate')}
         </h6>
         <div>
-          <span>{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+          <span>
+            {formatDate({
+              date: data.profile.birthDate,
+              language: data.metadata.language,
+              includeDay: true,
+            })}
+          </span>
         </div>
       </div>
     );
   }
 
   return null;
-}
+};
 
 export default memo(BirthDateA);

src/templates/blocks/BirthDate/BirthDateB.js

@@ -1,12 +1,12 @@
 import React, { memo, useContext } from 'react';
-import PageContext from '../../../contexts/PageContext';
 import { get } from 'lodash';
+import PageContext from '../../../contexts/PageContext';
 import Icons from '../Icons';
 import { formatDate } from '../../../utils';
 
 const BirthDateB = () => {
   const { data } = useContext(PageContext);
-  const Icon = get(Icons, "birthdaycake");
+  const Icon = get(Icons, 'birthdaycake');
 
   if (data.profile.birthDate) {
     return (
@@ -16,12 +16,18 @@ const BirthDateB = () => {
           className="mr-2"
           style={{ color: data.metadata.colors.primary }}
         />
-        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        <span className="font-medium break-all">
+          {formatDate({
+            date: data.profile.birthDate,
+            language: data.metadata.language,
+            includeDay: true,
+          })}
+        </span>
       </div>
     );
   }
 
   return null;
-}
+};
 
 export default memo(BirthDateB);

src/templates/blocks/BirthDate/BirthDateC.js

@@ -1,12 +1,12 @@
 import React, { memo, useContext } from 'react';
-import PageContext from '../../../contexts/PageContext';
 import { get } from 'lodash';
+import PageContext from '../../../contexts/PageContext';
 import Icons from '../Icons';
 import { formatDate } from '../../../utils';
 
 const BirthDateC = () => {
   const { data } = useContext(PageContext);
-  const Icon = get(Icons, "birthdaycake");
+  const Icon = get(Icons, 'birthdaycake');
 
   if (data.profile.birthDate) {
     return (
@@ -16,12 +16,18 @@ const BirthDateC = () => {
           className="mr-2"
           style={{ color: data.metadata.colors.background }}
         />
-        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        <span className="font-medium break-all">
+          {formatDate({
+            date: data.profile.birthDate,
+            language: data.metadata.language,
+            includeDay: true,
+          })}
+        </span>
       </div>
     );
   }
 
   return null;
-}
+};
 
 export default memo(BirthDateC);

src/templates/blocks/Icons.js

@@ -9,7 +9,7 @@ import {
   FaStackOverflow,
   FaBehance,
   FaGitlab,
-  FaBirthdayCake
+  FaBirthdayCake,
 } from 'react-icons/fa';
 import { MdPhone, MdEmail } from 'react-icons/md';
 
@@ -26,7 +26,7 @@ const Icons = {
   stackoverflow: FaStackOverflow,
   behance: FaBehance,
   gitlab: FaGitlab,
-  birthdaycake: FaBirthdayCake
+  birthdaycake: FaBirthdayCake,
 };
 
 export default Icons;

src/templates/blocks/Projects/ProjectsA.js

@@ -33,7 +33,10 @@ const ProjectItem = ({ item, language }) => {
         )}
       </div>
       {item.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+        <ReactMarkdown
+          className="markdown mt-2 text-sm"
+          source={item.summary}
+        />
       )}
     </div>
   );

src/utils/index.js

@@ -21,8 +21,7 @@ export const isFileImage = (file) => {
 };
 
 export const formatDate = ({ date, language = 'en', includeDay = false }) => {
-  const monthYearTemplate = 'MMMM YYYY';
+  const template = includeDay ? 'DD MMMM YYYY' : 'MMMM YYYY';
-  const template = includeDay ? 'DD ' + monthYearTemplate : monthYearTemplate;
 
   return dayjs(date).locale(language.substr(0, 2)).format(template);
 };

stylelint.config.js

@@ -13,6 +13,7 @@ module.exports = {
         ],
       },
     ],
+    'font-family-no-missing-generic-family-keyword': null,
     'declaration-block-trailing-semicolon': null,
     'no-descending-specificity': null,
   },

tailwind.config.js

@@ -1,9 +1,6 @@
 module.exports = {
   purge: ['./src/**/*.js'],
-  future: {
+  darkMode: false,
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
   theme: {
     container: {
       center: true,