- add multiple languages

- switch from moment to dayjs

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

@@ -1,7 +1,7 @@
 @media screen {
   .container {
-    width: 794px;
-    min-height: 1122px;
+    width: 210mm;
+    min-height: 297mm;
     overflow: scroll;
     box-shadow: var(--shadow);
     @apply my-16 bg-white rounded;

src/components/dashboard/ResumePreview.js

@@ -1,10 +1,10 @@
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
-import moment from 'moment/min/moment-with-locales';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
+import dayjs from 'dayjs';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import ModalContext from '../../contexts/ModalContext';
 import styles from './ResumePreview.module.css';
@@ -84,7 +84,7 @@ const ResumePreview = ({ resume }) => {
         {resume.updatedAt && (
           <span>
             {t('dashboard.lastUpdated', {
-              timestamp: moment(resume.updatedAt)
+              timestamp: dayjs(resume.updatedAt)
                 .locale(i18n.language.substr(0, 2))
                 .fromNow(),
             })}

src/components/landing/Hero.js

@@ -1,7 +1,6 @@
+import { Link } from '@reach/router';
 import { navigate } from 'gatsby';
 import React, { memo, useContext } from 'react';
-import TypeIt from 'typeit-react';
-import { Link } from '@reach/router';
 import { useTranslation } from 'react-i18next';
 import ModalContext from '../../contexts/ModalContext';
 import UserContext from '../../contexts/UserContext';
@@ -25,20 +24,7 @@ const Hero = () => {
       </Link>
 
       <div className="mt-12 md:mt-0 md:ml-12">
-        <div className="text-5xl font-bold">
-          <TypeIt
-            getBeforeInit={(instance) => {
-              return instance
-                .type('Creative Resume')
-                .pause(500)
-                .move(-11)
-                .delete(4)
-                .pause(250)
-                .type('Reac')
-                .move('END');
-            }}
-          />
-        </div>
+        <h1 className="text-5xl font-bold">{t('shared.appName')}</h1>
         <h2 className="mt-1 text-3xl text-primary-500">
           {t('shared.shortDescription')}
         </h2>

src/i18n/index.js

@@ -3,6 +3,14 @@ import { initReactI18next } from 'react-i18next';
 import resources from './locales';
 
 const languages = [
+  {
+    code: 'da',
+    name: 'Danish (Dansk)',
+  },
+  {
+    code: 'nl',
+    name: 'Dutch (Nederlands)',
+  },
   {
     code: 'en',
     name: 'English (US)',
@@ -15,6 +23,10 @@ const languages = [
     code: 'fr',
     name: 'French (Français)',
   },
+  {
+    code: 'de',
+    name: 'German (Deutsche)',
+  },
   {
     code: 'kn',
     name: 'Kannada (ಕನ್ನಡ)',
@@ -31,10 +43,6 @@ const languages = [
     code: 'tr',
     name: 'Turkish (Türkçe)',
   },
-  {
-    code: 'nl',
-    name: 'Dutch (Nederlands)',
-  },
 ];
 
 i18n.use(initReactI18next).init({

src/i18n/locales/index.js

@@ -1,13 +1,17 @@
+import da from './da.json';
+import de from './de.json';
 import en from './en.json';
 import es from './es.json';
 import fi from './fi.json';
 import fr from './fr.json';
 import kn from './kn.json';
+import nl from './nl.json';
 import ptBr from './pt-br.json';
 import tr from './tr.json';
-import nl from './nl.json';
 
 export default {
+  da: { translation: da },
+  de: { translation: de },
   en: { translation: en },
   es: { translation: es },
   fi: { translation: fi },

src/modals/BaseModal.js

@@ -1,10 +1,8 @@
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import Modal from '@material-ui/core/Modal';
+import { Backdrop, Fade, Modal } from '@material-ui/core';
 import { isFunction } from 'lodash';
 import React, { forwardRef, memo, useImperativeHandle } from 'react';
-import { MdClose } from 'react-icons/md';
 import { useTranslation } from 'react-i18next';
+import { MdClose } from 'react-icons/md';
 import Button from '../components/shared/Button';
 import { handleKeyUp } from '../utils';
 import styles from './BaseModal.module.css';

src/modals/sections/ExportModal.js

@@ -1,6 +1,6 @@
+import download from 'downloadjs';
 import firebase from 'gatsby-plugin-firebase';
 import { clone } from 'lodash';
-import download from 'downloadjs';
 import React, { memo, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaPrint } from 'react-icons/fa';

src/pages/index.js

@@ -2,8 +2,7 @@ import { Link } from '@reach/router';
 import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { FaUserSecret } from 'react-icons/fa';
-import { GiWalkingBoot } from 'react-icons/gi';
+import { FaUserSecret, FaWalking } from 'react-icons/fa';
 import { IoIosRocket } from 'react-icons/io';
 import { RiRefreshLine } from 'react-icons/ri';
 import Hero from '../components/landing/Hero';
@@ -58,7 +57,7 @@ const Home = () => {
           </Feature>
 
           <Feature
-            icon={GiWalkingBoot}
+            icon={FaWalking}
             title="Kickstarting your career shouldn’t come at a cost."
           >
             There are brilliant alternatives to this app like Novoresume and

src/templates/blocks/Awards/AwardsA.js

@@ -1,4 +1,4 @@
-import moment from 'moment/min/moment-with-locales';
+import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
@@ -17,7 +17,7 @@ const AwardItem = (x) => {
         </div>
         {x.date && (
           <h6 className="text-xs font-medium text-right">
-            {moment(x.date)
+            {dayjs(x.date)
               .locale(i18n.language.substr(0, 2))
               .format('MMMM YYYY')}
           </h6>

src/templates/blocks/Certifications/CertificationsA.js

@@ -1,4 +1,4 @@
-import moment from 'moment/min/moment-with-locales';
+import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
@@ -17,7 +17,7 @@ const CertificationItem = (x) => {
         </div>
         {x.date && (
           <h6 className="text-xs font-medium text-right">
-            {moment(x.date)
+            {dayjs(x.date)
               .locale(i18n.language.substr(0, 2))
               .format('MMMM YYYY')}
           </h6>

src/templates/blocks/Projects/ProjectsA.js

@@ -1,4 +1,4 @@
-import moment from 'moment/min/moment-with-locales';
+import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
@@ -21,7 +21,7 @@ const ProjectItem = (x) => {
         </div>
         {x.date && (
           <h6 className="text-xs font-medium text-right">
-            {moment(x.date)
+            {dayjs(x.date)
               .locale(i18n.language.substr(0, 2))
               .format('MMMM YYYY')}
           </h6>

src/utils/dayjs.js

@@ -0,0 +1,14 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/da';
+import 'dayjs/locale/de';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import 'dayjs/locale/fi';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/kn';
+import 'dayjs/locale/nl';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/tr';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);

src/utils/index.js

@@ -1,5 +1,5 @@
+import dayjs from 'dayjs';
 import { get, isEmpty } from 'lodash';
-import moment from 'moment/min/moment-with-locales';
 import { useTranslation } from 'react-i18next';
 
 export const getModalText = (isEditMode, type) => {
@@ -25,12 +25,12 @@ export const isFileImage = (file) => {
 export const formatDateRange = ({ startDate, endDate }) => {
   const { i18n } = useTranslation();
 
-  const start = `${moment(startDate)
+  const start = `${dayjs(startDate)
     .locale(i18n.language.substr(0, 2))
-    .format('MMMM Y')}`;
+    .format('MMMM YYYY')}`;
 
-  const end = moment(endDate).isValid()
-    ? `${moment(endDate).locale(i18n.language.substr(0, 2)).format('MMMM Y')}`
+  const end = dayjs(endDate).isValid()
+    ? `${dayjs(endDate).locale(i18n.language.substr(0, 2)).format('MMMM YYYY')}`
     : 'Present';
 
   return `${start} - ${end}`;