updates to dependencies, merging to production

2025-11-09 20:12:26 +10:00 · 2020-12-05 15:22:45 +05:30
parent cc8729e889
commit cd0c847606
23 changed files with 5406 additions and 4395 deletions
--- a/firebase.json
+++ b/firebase.json
@ -2,11 +2,7 @@
  "hosting": {
    "target": "rxresume",
    "public": "./public",
-    "ignore": [
-      "**/.*",
-      "firebase.json",
-      "**/node_modules/**"
-    ]
+    "ignore": ["**/.*", "firebase.json", "**/node_modules/**"]
  },
  "emulators": {
    "functions": {
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -36,42 +36,44 @@ module.exports = {
    },
    `gatsby-plugin-offline`,
    {
-      resolve: 'gatsby-plugin-prefetch-google-fonts',
+      resolve: 'gatsby-plugin-webfonts',
      options: {
-        fonts: [
-          {
-            family: 'Lato',
-            variants: ['400', '700'],
-          },
-          {
-            family: 'Montserrat',
-            variants: ['400', '500', '600', '700'],
-          },
-          {
-            family: 'Nunito',
-            variants: ['400', '600', '700'],
-          },
-          {
-            family: 'Open Sans',
-            variants: ['400', '600', '700'],
-          },
-          {
-            family: 'Raleway',
-            variants: ['400', '500', '700'],
-          },
-          {
-            family: 'Rubik',
-            variants: ['400', '500', '700'],
-          },
-          {
-            family: 'Source Sans Pro',
-            variants: ['400', '600', '700'],
-          },
-          {
-            family: 'Titillium Web',
-            variants: ['400', '600', '700'],
-          },
-        ],
+        fonts: {
+          google: [
+            {
+              family: 'Lato',
+              variants: ['400', '700'],
+            },
+            {
+              family: 'Montserrat',
+              variants: ['400', '500', '600', '700'],
+            },
+            {
+              family: 'Nunito',
+              variants: ['400', '600', '700'],
+            },
+            {
+              family: 'Open Sans',
+              variants: ['400', '600', '700'],
+            },
+            {
+              family: 'Raleway',
+              variants: ['400', '500', '700'],
+            },
+            {
+              family: 'Rubik',
+              variants: ['400', '500', '700'],
+            },
+            {
+              family: 'Source Sans Pro',
+              variants: ['400', '600', '700'],
+            },
+            {
+              family: 'Titillium Web',
+              variants: ['400', '600', '700'],
+            },
+          ],
+        },
      },
    },
    {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-    "formik": "^2.2.0",
-    "gatsby": "^2.24.73",
-    "gatsby-image": "^2.4.21",
-    "gatsby-plugin-create-client-paths": "^2.3.13",
+    "firebase": "^8.1.2",
+    "formik": "^2.2.5",
+    "gatsby": "^2.28.0",
+    "gatsby-image": "^2.7.0",
+    "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-postcss": "^3.0.1",
-    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
-    "gatsby-plugin-react-helmet": "^3.3.14",
-    "gatsby-plugin-sharp": "^2.6.40",
-    "gatsby-plugin-sitemap": "^2.4.15",
-    "gatsby-source-filesystem": "^2.3.34",
+    "gatsby-plugin-offline": "^3.6.0",
+    "gatsby-plugin-postcss": "^3.3.0",
+    "gatsby-plugin-react-helmet": "^3.6.0",
+    "gatsby-plugin-sharp": "^2.10.0",
+    "gatsby-plugin-sitemap": "^2.8.0",
+    "gatsby-plugin-webfonts": "^1.1.3",
+    "gatsby-source-filesystem": "^2.7.0",
    "gatsby-source-gravatar": "^1.0.0",
-    "gatsby-transformer-remark": "^2.8.38",
-    "gatsby-transformer-sharp": "^2.5.17",
-    "i18next": "^19.8.2",
+    "gatsby-transformer-remark": "^2.12.0",
+    "gatsby-transformer-sharp": "^2.8.0",
+    "i18next": "^19.8.4",
    "lodash": "^4.17.20",
-    "nanoevents": "^5.1.8",
-    "react": "^16.13.1",
+    "nanoevents": "^5.1.10",
+    "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-icons": "^3.11.0",
-    "react-markdown": "^4.3.1",
+    "react-i18next": "^11.7.4",
+    "react-icons": "^4.1.0",
+    "react-markdown": "^5.0.3",
    "react-scroll": "^1.8.1",
-    "react-toastify": "^6.0.9",
-    "short-unique-id": "^3.0.4",
+    "react-toastify": "^6.1.0",
+    "short-unique-id": "^3.2.0",
    "uuid": "^8.3.1",
-    "yup": "^0.29.3"
+    "yup": "^0.32.1"
  },
  "devDependencies": {
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint": "^7.15.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
    "eslint-loader": "^4.0.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-react": "^7.21.5",
    "gatsby-plugin-eslint": "^2.0.8",
-    "prettier": "2.1.2",
-    "stylelint": "^13.7.2",
+    "prettier": "2.2.1",
+    "stylelint": "^13.8.0",
    "stylelint-config-standard": "^20.0.0",
-    "tailwindcss": "^1.8.13"
+    "tailwindcss": "^2.0.1"
  },
  "repository": {
    "type": "git",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +1,6 @@
-const tailwindcss = require('tailwindcss');
-
-module.exports = () => ({
-  plugins: [tailwindcss],
-});
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {},
+  },
+};
--- a/src/components/builder/center/Artboard.js
+++ b/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
-        id="page"
-        className={styles.container}
-        style={{
-          transform: `scale(${width / 1680})`,
-          transformOrigin: `${width / 1680 > 1.0 ? `top left` : ``}`,
-        }}
-      >
+      <div id="page" className={styles.container}>
        {template === 'onyx' && <Onyx data={state} />}
        {template === 'pikachu' && <Pikachu data={state} />}
        {template === 'gengar' && <Gengar data={state} />}
--- a/src/components/builder/center/Artboard.module.css
+++ b/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;
  }
 }
--- a/src/pages/app/builder.module.css
+++ b/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 {
--- a/src/pages/r/view.js
+++ b/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 }}
        >
--- a/src/templates/Castform.js
+++ b/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,
--- a/src/templates/Celebi.js
+++ b/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,
--- a/src/templates/Gengar.js
+++ b/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,
--- a/src/templates/Glalie.js
+++ b/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,
--- a/src/templates/Onyx.js
+++ b/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,
--- a/src/templates/Pikachu.js
+++ b/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,
--- a/src/templates/blocks/BirthDate/BirthDateA.js
+++ b/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);
--- a/src/templates/blocks/BirthDate/BirthDateB.js
+++ b/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);
--- a/src/templates/blocks/BirthDate/BirthDateC.js
+++ b/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);
--- a/src/templates/blocks/Icons.js
+++ b/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;
--- a/src/templates/blocks/Projects/ProjectsA.js
+++ b/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">
-              (
-              {formatDateRange(
-                {
-                  startDate: item.date,
-                  endDate: item.endDate,
-                  language,
-                },
-                t,
-              )}
-              )
-            </h6>
-          )}
+          <h6 className="text-xs font-medium text-right">
+            (
+            {formatDateRange(
+              {
+                startDate: item.date,
+                endDate: item.endDate,
+                language,
+              },
+              t,
+            )}
+            )
+          </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>
  );
--- a/src/utils/index.js
+++ b/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 ' + monthYearTemplate : monthYearTemplate;
+  const template = includeDay ? 'DD MMMM YYYY' : 'MMMM YYYY';

  return dayjs(date).locale(language.substr(0, 2)).format(template);
 };
--- a/stylelint.config.js
+++ b/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,
  },
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,9 +1,6 @@
 module.exports = {
  purge: ['./src/**/*.js'],
-  future: {
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
+  darkMode: false,
  theme: {
    container: {
      center: true,