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

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 && (