solving bugs reported in GH issues

src/templates/Castform.js

@@ -57,6 +57,7 @@ const Castform = ({ data }) => {
         id="page"
         className="rounded"
         style={{
+          fontSize: 14,
           fontFamily: data.metadata.font,
           color: data.metadata.colors.text,
           backgroundColor: data.metadata.colors.background,

src/templates/blocks/Awards/AwardsA.js

@@ -5,38 +5,39 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const AwardItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          <span className="text-xs">{x.awarder}</span>
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
-        )}
+const AwardItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        <span className="text-xs">{item.awarder}</span>
       </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
       )}
     </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);
 
 const AwardsA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.awards) ? (
     <div>
       <Heading>{data.awards.heading}</Heading>
-      <div className="grid gap-4">{data.awards.items.map(AwardItem)}</div>
+      <div className="grid gap-4">
+        {data.awards.items.map((x) => (
+          <AwardItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Certifications/CertificationsA.js

@@ -5,39 +5,38 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const CertificationItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          <span className="text-xs">{x.issuer}</span>
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
-        )}
+const CertificationItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        <span className="text-xs">{item.issuer}</span>
       </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
       )}
     </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);
 
 const CertificationsA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.certifications) ? (
     <div>
       <Heading>{data.certifications.heading}</Heading>
       <div className="grid gap-4">
-        {data.certifications.items.map(CertificationItem)}
+        {data.certifications.items.map((x) => (
+          <CertificationItem key={x.id} item={x} i18n={i18n} />
+        ))}
       </div>
     </div>
   ) : null;

src/templates/blocks/Education/EducationA.js

@@ -1,40 +1,50 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const EducationItem = (x) => (
-  <div key={x.id}>
+const EducationItem = ({ item, i18n }) => (
+  <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.institution}</h6>
+        <h6 className="font-semibold">{item.institution}</h6>
         <span className="text-xs">
-          <strong>{x.degree}</strong> {x.field}
+          <strong>{item.degree}</strong> {item.field}
         </span>
       </div>
       <div className="flex flex-col items-end text-right">
-        {x.startDate && (
+        {item.startDate && (
           <h6 className="text-xs font-medium mb-1">
-            ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+            (
+            {formatDateRange({
+              startDate: item.startDate,
+              endDate: item.endDate,
+              language: i18n.language,
+            })}
+            )
           </h6>
         )}
-        <span className="text-sm font-medium">{x.gpa}</span>
+        <span className="text-sm font-medium">{item.gpa}</span>
       </div>
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
     )}
   </div>
 );
 
 const EducationA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.education) ? (
     <div>
       <Heading>{data.education.heading}</Heading>
       <div className="grid gap-4">
-        {data.education.items.map(EducationItem)}
+        {data.education.items.map((x) => (
+          <EducationItem key={x.id} item={x} i18n={i18n} />
+        ))}
       </div>
     </div>
   ) : null;

src/templates/blocks/Projects/ProjectsA.js

@@ -5,42 +5,43 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const ProjectItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          {x.link && (
-            <a href={x.link} className="text-xs">
-              {x.link}
-            </a>
-          )}
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
+const ProjectItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        {item.link && (
+          <a href={item.link} className="text-xs">
+            {item.link}
+          </a>
         )}
       </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
       )}
     </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);
 
 const ProjectsA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.projects) ? (
     <div>
       <Heading>{data.projects.heading}</Heading>
-      <div className="grid gap-4">{data.projects.items.map(ProjectItem)}</div>
+      <div className="grid gap-4">
+        {data.projects.items.map((x) => (
+          <ProjectItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Work/WorkA.js

@@ -1,34 +1,46 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const WorkItem = (x) => (
-  <div key={x.id}>
+const WorkItem = ({ item, i18n }) => (
+  <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.company}</h6>
-        <span className="text-xs">{x.position}</span>
+        <h6 className="font-semibold">{item.company}</h6>
+        <span className="text-xs">{item.position}</span>
       </div>
-      {x.startDate && (
+      {item.startDate && (
         <h6 className="text-xs font-medium text-right">
-          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+          (
+          {formatDateRange({
+            startDate: item.startDate,
+            endDate: item.endDate,
+            language: i18n.language,
+          })}
+          )
         </h6>
       )}
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
     )}
   </div>
 );
 
 const WorkA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.work) ? (
     <div>
       <Heading>{data.work.heading}</Heading>
-      <div className="grid gap-4">{data.work.items.map(WorkItem)}</div>
+      <div className="grid gap-4">
+        {data.work.items.map((x) => (
+          <WorkItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
     </div>
   ) : null;
 };