[2.5.2] Fix fontSize not reflecting in exported PDF

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.5.1',
+    version: '2.5.2',
   },
   plugins: [
     'gatsby-plugin-react-helmet',

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

@@ -2,42 +2,31 @@
 import React, { memo, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import fontSizeOptions from '../../../../data/fontSizeOptions';
+import { scaler } from '../../../../utils';
 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);
+  const [scale, setScale] = useState(fontSize || 7);
-
-  // 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`,
+        `${scaler(scale) * sizeDefault}rem`,
       );
     }
-  }, [fontScale]);
+  }, [scale]);
 
   const onChange = (event) => {
     const { value } = event.target;
 
-    setFontScale(value);
+    setScale(value);
 
     dispatch({
       type: 'on_input',
@@ -58,7 +47,7 @@ const FontSizes = ({ id }) => {
         max={max}
         type="range"
         onChange={onChange}
-        defaultValue={fontScale}
+        defaultValue={scale}
         className="rounded-lg overflow-hidden appearance-none bg-gray-400 h-4 w-full"
       />
     </section>

src/pages/r/view.js

@@ -12,6 +12,8 @@ import Onyx from '../../templates/Onyx';
 import Pikachu from '../../templates/Pikachu';
 import styles from './view.module.css';
 import Celebi from '../../templates/Celebi';
+import fontSizeOptions from '../../data/fontSizeOptions';
+import { scaler } from '../../utils';
 
 const ResumeViewer = ({ id }) => {
   const { t, i18n } = useTranslation();
@@ -33,6 +35,14 @@ const ResumeViewer = ({ id }) => {
 
       setResume(data);
       i18n.changeLanguage(data.metadata.language || 'en');
+
+      for (const [key, sizeDefault] of Object.entries(fontSizeOptions)) {
+        document.documentElement.style.setProperty(
+          key,
+          `${scaler(data.metadata.fontSize) * sizeDefault}rem`,
+        );
+      }
+
       return setLoading(false);
     })();
   }, [id]);

src/utils/index.js

@@ -18,6 +18,17 @@ export const isFileImage = (file) => {
   return file && acceptedImageTypes.includes(file.type);
 };
 
+export const scaler = (value) => {
+  const logMax = 2.5;
+  const logMin = 0.6;
+  const steps = 20;
+  const logRange = logMax / logMin;
+  const logStepSize = logRange ** (1 / steps);
+  const min = 0;
+
+  return logStepSize ** (value - min) * logMin;
+};
+
 export const formatDate = ({ date, language = 'en', includeDay = false }) => {
   const template = includeDay ? 'DD MMMM YYYY' : 'MMMM YYYY';