Merge remote-tracking branch 'upstream/develop' into develop

.firebaserc

@@ -1,5 +1,6 @@
 {
   "projects": {
+    "rx-resume": "rx-resume",
     "default": "rx-resume"
   },
   "targets": {

firebase.json

@@ -1,13 +1,19 @@
 {
-  "hosting": {
+  "hosting": [{
-    "target": "rxresume",
+    "site": "rxresume",
-    "public": "./public",
+    "public": "public",
     "ignore": [
-      "**/.*",
       "firebase.json",
+      "**/.*",
       "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
     ]
-  },
+  }],
   "emulators": {
     "functions": {
       "port": 5001

gatsby-config.js

@@ -5,7 +5,7 @@ module.exports = {
     title: 'Reactive Resume',
     siteUrl: 'https://rxresu.me',
     description: 'A free and open source resume builder.',
-    version: '2.2.1',
+    version: '2.3',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
@@ -36,42 +36,44 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     {
-      resolve: 'gatsby-plugin-prefetch-google-fonts',
+      resolve: 'gatsby-plugin-webfonts',
       options: {
-        fonts: [
+        fonts: {
-          {
+          google: [
-            family: 'Lato',
+            {
-            variants: ['400', '700'],
+              family: 'Lato',
-          },
+              variants: ['400', '700'],
-          {
+            },
-            family: 'Montserrat',
+            {
-            variants: ['400', '500', '600', '700'],
+              family: 'Montserrat',
-          },
+              variants: ['400', '500', '600', '700'],
-          {
+            },
-            family: 'Nunito',
+            {
-            variants: ['400', '600', '700'],
+              family: 'Nunito',
-          },
+              variants: ['400', '600', '700'],
-          {
+            },
-            family: 'Open Sans',
+            {
-            variants: ['400', '600', '700'],
+              family: 'Open Sans',
-          },
+              variants: ['400', '600', '700'],
-          {
+            },
-            family: 'Raleway',
+            {
-            variants: ['400', '500', '700'],
+              family: 'Raleway',
-          },
+              variants: ['400', '500', '700'],
-          {
+            },
-            family: 'Rubik',
+            {
-            variants: ['400', '500', '700'],
+              family: 'Rubik',
-          },
+              variants: ['400', '500', '700'],
-          {
+            },
-            family: 'Source Sans Pro',
+            {
-            variants: ['400', '600', '700'],
+              family: 'Source Sans Pro',
-          },
+              variants: ['400', '600', '700'],
-          {
+            },
-            family: 'Titillium Web',
+            {
-            variants: ['400', '600', '700'],
+              family: 'Titillium Web',
-          },
+              variants: ['400', '600', '700'],
-        ],
+            },
+          ],
+        },
       },
     },
     {

package.json

@@ -7,77 +7,72 @@
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "prebuild": "npm run test",
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "jest"
+    "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": {
-    "@testing-library/jest-dom": "^5.11.6",
+    "eslint": "^7.15.0",
-    "@testing-library/react": "^11.2.2",
+    "eslint-config-airbnb": "^18.2.1",
-    "babel-jest": "^26.6.3",
+    "eslint-config-prettier": "^6.15.0",
-    "babel-preset-gatsby": "^0.7.0",
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.12.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",
-    "identity-obj-proxy": "^3.0.0",
+    "prettier": "2.2.1",
-    "jest": "^26.6.3",
+    "stylelint": "^13.8.0",
-    "prettier": "2.1.2",
-    "stylelint": "^13.7.2",
     "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/i18n/locales/fr.json

@@ -9,7 +9,7 @@
       "required": "Requis",
       "website": "Site web",
       "date": "Date",
-      "present": "Aujourd’hui",
+      "present": "Présent",
       "position": "Poste",
       "startDate": "Début",
       "endDate": "Fin",

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

@@ -13,7 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesB from './blocks/References/ReferencesB';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateC from './blocks/BirthDate/BirthDateC'
+import BirthDateC from './blocks/BirthDate/BirthDateC';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -59,7 +59,6 @@ const Gengar = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingC }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,
@@ -80,14 +79,28 @@ const Gengar = ({ data }) => {
               <Profile />
             </div>
 
+            <div className="flex flex-col mt-4 text-xs">
+              <h6 className="font-bold text-xs uppercase tracking-wide mb-1">
+                Address
+              </h6>
+              <span>{data.profile.address.line1}</span>
+              <span>{data.profile.address.line2}</span>
+              <span>
+                {data.profile.address.city} {data.profile.address.pincode}
+              </span>
+            </div>
+
             <hr
               className="w-1/4 my-5 opacity-25"
               style={{ borderColor: data.metadata.colors.background }}
             />
 
             <div className="grid gap-4">
-              <BirthDateC />
+              <h6 className="font-bold text-xs uppercase tracking-wide mb-1">
+                Contacts
+              </h6>
               <ContactB />
+              <BirthDateC />
             </div>
           </div>
 

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);
+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);
+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);
+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

@@ -18,22 +18,25 @@ const ProjectItem = ({ item, language }) => {
           )}
         </div>
         {item.date && (
-            <h6 className="text-xs font-medium text-right">
+          <h6 className="text-xs font-medium text-right">
-              (
+            (
-              {formatDateRange(
+            {formatDateRange(
-                {
+              {
-                  startDate: item.date,
+                startDate: item.date,
-                  endDate: item.endDate,
+                endDate: item.endDate,
-                  language,
+                language,
-                },
+              },
-                t,
+              t,
-              )}
+            )}
-              )
+            )
-            </h6>
+          </h6>
-          )}
+        )}
       </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,