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

.github/workflows/build-and-deploy.yml

@@ -1,33 +0,0 @@
-name: Build and Deploy
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build:
-    name: Build and Deploy
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@master
-      - name: Install Dependencies
-        run: npm install
-      - name: Build
-        run: npm run build
-        env:
-          FIREBASE_APIKEY: ${{ secrets.FIREBASE_APIKEY }}
-          FIREBASE_APPID: ${{ secrets.FIREBASE_APPID }}
-          FIREBASE_AUTHDOMAIN: ${{ secrets.FIREBASE_AUTHDOMAIN }}
-          FIREBASE_DATABASEURL: ${{ secrets.FIREBASE_DATABASEURL }}
-          FIREBASE_MEASUREMENTID: ${{ secrets.FIREBASE_MEASUREMENTID }}
-          FIREBASE_MESSAGINGSENDERID: ${{ secrets.FIREBASE_MESSAGINGSENDERID }}
-          FIREBASE_PROJECTID: ${{ secrets.FIREBASE_PROJECTID }}
-          FIREBASE_STORAGEBUCKET: ${{ secrets.FIREBASE_STORAGEBUCKET }}
-      - name: Deploy to Firebase
-        uses: w9jds/firebase-action@master
-        with:
-          args: deploy --only hosting
-        env:
-          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

functions/package-lock.json

@@ -601,9 +601,9 @@
       "optional": true
     },
     "date-and-time": {
-      "version": "0.14.1",
+      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.14.2.tgz",
-      "integrity": "sha512-M4RggEH5OF2ZuCOxgOU67R6Z9ohjKbxGvAQz48vj53wLmL0bAgumkBvycR32f30pK+Og9pIR+RFDyChbaE4oLA==",
+      "integrity": "sha512-EFTCh9zRSEpGPmJaexg7HTuzZHh6cnJj1ui7IGCFNXzd2QdpsNh05Db5TF3xzJm30YN+A8/6xHSuRcQqoc3kFA==",
       "optional": true
     },
     "debug": {

gatsby-config.js

@@ -6,7 +6,7 @@ module.exports = {
     title: 'Reactive Resume',
     siteUrl: 'https://rxresu.me',
     description: 'A free and open source resume builder.',
-    version: '2.4.3',
+    version: '2.5.1',
   },
   plugins: [
     'gatsby-plugin-react-helmet',

package.json

@@ -7,14 +7,13 @@
   "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.2",
@@ -23,36 +22,36 @@
     "array-move": "^3.0.1",
     "autoprefixer": "^10.1.0",
     "classnames": "^2.2.6",
-    "dayjs": "^1.9.7",
+    "dayjs": "^1.9.8",
     "dotenv": "^8.2.0",
     "downloadjs": "^1.4.7",
     "firebase": "^8.2.1",
     "formik": "^2.2.6",
-    "gatsby": "^2.29.1",
+    "gatsby": "^2.29.3",
     "gatsby-image": "^2.8.0",
     "gatsby-plugin-create-client-paths": "^2.7.0",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
-    "gatsby-plugin-manifest": "^2.9.0",
+    "gatsby-plugin-manifest": "^2.9.1",
     "gatsby-plugin-material-ui": "^2.1.10",
-    "gatsby-plugin-offline": "^3.7.0",
+    "gatsby-plugin-offline": "^3.7.1",
     "gatsby-plugin-postcss": "^3.4.0",
     "gatsby-plugin-react-helmet": "^3.7.0",
-    "gatsby-plugin-sharp": "^2.11.1",
+    "gatsby-plugin-sharp": "^2.11.2",
     "gatsby-plugin-sitemap": "^2.9.0",
     "gatsby-plugin-webfonts": "^1.1.3",
-    "gatsby-source-filesystem": "^2.8.0",
+    "gatsby-source-filesystem": "^2.8.1",
     "gatsby-source-gravatar": "^1.0.0",
-    "gatsby-transformer-remark": "^2.13.0",
+    "gatsby-transformer-remark": "^2.13.1",
     "gatsby-transformer-sharp": "^2.9.0",
     "i18next": "^19.8.4",
     "lodash": "^4.17.20",
     "nanoevents": "^5.1.10",
-    "postcss": "^8.2.1",
+    "postcss": "^8.2.2",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.8.4",
+    "react-i18next": "^11.8.5",
     "react-icons": "^4.1.0",
     "react-markdown": "^5.0.3",
     "react-scroll": "^1.8.1",
@@ -62,20 +61,14 @@
     "yup": "^0.32.8"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
+    "eslint": "^7.17.0",
-    "@testing-library/react": "^11.2.2",
-    "babel-jest": "^26.6.3",
-    "babel-preset-gatsby": "^0.9.0",
-    "eslint": "^7.16.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.1.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "gatsby-plugin-eslint": "^2.0.8",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
     "prettier": "2.2.1",
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",

src/components/builder/right/RightSidebar.js

@@ -10,6 +10,7 @@ import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
 import Settings from './sections/Settings';
 import Templates from './sections/Templates';
+import FontSize from './sections/FontSize';
 
 const getComponent = (id) => {
   switch (id) {
@@ -27,6 +28,8 @@ const getComponent = (id) => {
       return Settings;
     case 'about':
       return About;
+    case 'font-size':
+      return FontSize;
     default:
       throw new Error();
   }

src/components/builder/right/sections/FontSize.js

@@ -0,0 +1,68 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { memo, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import fontSizeOptions from '../../../../data/fontSizeOptions';
+import Heading from '../../../shared/Heading';
+
+const FontSizes = ({ id }) => {
+  // precompute some stuff for the logarithmic slider
+  const logMax = 2.5;
+  const logDefault = 1;
+  const logMin = 0.6;
+  const steps = 20;
+  const logRange = logMax / logMin;
+  const logStepSize = logRange ** (1 / steps);
+  const min = 0;
+  const max = min + steps - 1;
+  const scaleDefault = Math.log(logDefault / logMin) / Math.log(logStepSize);
+
+  const dispatch = useDispatch();
+  const fontSize = useSelector('metadata.fontSize');
+  const [fontScale, setFontScale] = useState(fontSize || scaleDefault);
+
+  // translate a linearly scaled value from the slider into a scale factor
+  const scale = (value) => logStepSize ** (value - min) * logMin;
+
+  useEffect(() => {
+    /* loop through the css variables we need to set and set them to the default
+       for that variable multiplied by the scale factor */
+    for (const [key, sizeDefault] of Object.entries(fontSizeOptions)) {
+      document.documentElement.style.setProperty(
+        key,
+        `${scale(fontScale) * sizeDefault}rem`,
+      );
+    }
+  }, [fontScale]);
+
+  const onChange = (event) => {
+    const { value } = event.target;
+
+    setFontScale(value);
+
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path: 'metadata.fontSize',
+        value,
+      },
+    });
+  };
+
+  return (
+    <section>
+      <Heading id={id} />
+
+      <input
+        step={1}
+        min={min}
+        max={max}
+        type="range"
+        onChange={onChange}
+        defaultValue={fontScale}
+        className="rounded-lg overflow-hidden appearance-none bg-gray-400 h-4 w-full"
+      />
+    </section>
+  );
+};
+
+export default memo(FontSizes);

src/data/demoState.json

@@ -138,6 +138,7 @@
       "text": "#212121"
     },
     "font": "Open Sans",
+    "fontSize": 12,
     "language": "en",
     "layout": {
       "castform": [

src/data/fontSizeOptions.js

@@ -0,0 +1,18 @@
+const fontSizeOptions = {
+  '--text-xs-size': 0.75,
+  '--text-sm-size': 0.875,
+  '--text-lg-size': 1.125,
+  '--text-xl-size': 1.25,
+  '--text-2xl-size': 1.5,
+  '--text-3xl-size': 1.875,
+  '--text-4xl-size': 2.25,
+  '--text-xs-line-height': 1,
+  '--text-sm-line-height': 1.25,
+  '--text-lg-line-height': 1.75,
+  '--text-xl-line-height': 1.75,
+  '--text-2xl-line-height': 2,
+  '--text-3xl-line-height': 2.25,
+  '--text-4xl-line-height': 2.5,
+};
+
+export default fontSizeOptions;

src/data/initialState.json

@@ -74,6 +74,7 @@
     "language": "en",
     "template": "onyx",
     "font": "Montserrat",
+    "fontSize": 12,
     "layout": {
       "onyx": [
         ["objective", "work", "education", "projects"],

src/data/rightSections.js

@@ -6,6 +6,7 @@ import {
   MdInfo,
   MdSettings,
   MdStyle,
+  MdFormatSize,
 } from 'react-icons/md';
 
 export default [
@@ -25,6 +26,10 @@ export default [
     id: 'fonts',
     icon: MdFontDownload,
   },
+  {
+    id: 'font-size',
+    icon: MdFormatSize,
+  },
   {
     id: 'actions',
     icon: MdImportExport,

src/i18n/locales/en.json

@@ -87,6 +87,7 @@
       "templates": "Templates",
       "layout": "Layout",
       "colors": "Colors",
+      "font-size": "Font Size",
       "fonts": "Fonts",
       "actions": "Actions",
       "settings": "Settings",

src/i18n/locales/nl.json

@@ -9,7 +9,7 @@
       "required": "vereist",
       "website": "Website",
       "date": "Datum",
-      "present": "Aanwezig",
+      "present": "Heden",
       "position": "Functie",
       "startDate": "Startdatum",
       "endDate": "Einddatum",

src/styles/global.css

@@ -55,6 +55,13 @@ section {
   padding-left: 1.5em;
 }
 
+input[type="range"]::-webkit-slider-thumb {
+  cursor: ew-resize;
+  box-shadow: -405px 0 0 400px #605e5c;
+
+  @apply w-4 h-4 bg-white rounded-full appearance-none;
+}
+
 @page {
   margin: 0;
 }

src/styles/tailwind.css

@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+#page .text-xs {
+  font-size:  var(--text-xs-size);
+  line-height: var(--text-xs-line-height);
+}
+#page .text-sm {
+  font-size:  var(--text-sm-size);
+  line-height: var(--text-sm-line-height);
+}
+#page .text-lg {
+  font-size:  var(--text-lg-size);
+  line-height: var(--text-lg-line-height);
+}
+#page .text-xl {
+  font-size:  var(--text-xl-size);
+  line-height: var(--text-xl-line-height);
+}
+#page .text-2xl {
+  font-size:  var(--text-2xl-size);
+  line-height: var(--text-2xl-line-height);
+}
+#page .text-3xl {
+  font-size:  var(--text-3xl-size);
+  line-height: var(--text-3xl-line-height);
+}
+#page .text-4xl {
+  font-size:  var(--text-4xl-size);
+  line-height: var(--text-4xl-line-height);
+}

src/templates/blocks/Awards/AwardsA.js

@@ -7,7 +7,7 @@ const AwardItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{item.title}</h6>
+        <h6 className="font-semibold text-sm">{item.title}</h6>
         <span className="text-xs">{item.awarder}</span>
       </div>
       {item.date && (

src/templates/blocks/Certifications/CertificationsA.js

@@ -7,7 +7,7 @@ const CertificationItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{item.title}</h6>
+        <h6 className="font-semibold text-sm">{item.title}</h6>
         <span className="text-xs">{item.issuer}</span>
       </div>
       {item.date && (

src/templates/blocks/Education/EducationA.js

@@ -10,7 +10,7 @@ const EducationItem = ({ item, language }) => {
     <div>
       <div className="flex justify-between items-center">
         <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{item.institution}</h6>
+          <h6 className="font-semibold text-sm">{item.institution}</h6>
           <span className="text-xs">
             <strong>{item.degree}</strong> {item.field}
           </span>

src/templates/blocks/Hobbies/HobbiesA.js

@@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
 
 const HobbyA = (x) => (
   <div key={x.id}>
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
   </div>
 );
 

src/templates/blocks/Languages/LanguagesA.js

@@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
 
 const LanguageItem = (x) => (
   <div key={x.id} className="flex flex-col">
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
     <span className="text-xs">{x.fluency}</span>
   </div>
 );

src/templates/blocks/Languages/LanguagesB.js

@@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
 
 const LanguageItem = (x) => (
   <div key={x.id} className="flex flex-col">
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
     <span className="text-xs">{x.fluency}</span>
   </div>
 );

src/templates/blocks/Projects/ProjectsA.js

@@ -10,7 +10,7 @@ const ProjectItem = ({ item, language }) => {
     <div>
       <div className="flex justify-between items-center">
         <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{item.title}</h6>
+          <h6 className="font-semibold text-sm">{item.title}</h6>
           {item.link && (
             <a href={item.link} className="text-xs">
               {item.link}

src/templates/blocks/References/ReferencesA.js

@@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils';
 
 const ReferenceItem = (x) => (
   <div key={x.id} className="flex flex-col">
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
     <span className="text-xs">{x.position}</span>
     <span className="text-xs">{x.phone}</span>
     <span className="text-xs">{x.email}</span>

src/templates/blocks/References/ReferencesB.js

@@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils';
 
 const ReferenceItem = (x) => (
   <div key={x.id} className="flex flex-col">
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
     <span className="text-xs">{x.position}</span>
     <span className="text-xs">{x.phone}</span>
     <span className="text-xs">{x.email}</span>

src/templates/blocks/Skills/SkillsA.js

@@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
 
 const SkillItem = (x) => (
   <div key={x.id} className="flex flex-col">
-    <h6 className="font-semibold">{x.name}</h6>
+    <h6 className="font-semibold text-sm">{x.name}</h6>
     <span className="text-xs">{x.level}</span>
   </div>
 );

src/templates/blocks/Work/WorkA.js

@@ -10,7 +10,7 @@ const WorkItem = ({ item, language }) => {
     <div>
       <div className="flex justify-between items-center">
         <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{item.company}</h6>
+          <h6 className="font-semibold text-sm">{item.company}</h6>
           <span className="text-xs">{item.position}</span>
         </div>
         {item.startDate && (