feat(markdown): add gfm support

revert firebase changes

package-lock.json

@@ -51,6 +51,7 @@
         "react-markdown": "^6.0.2",
         "react-scroll": "^1.8.2",
         "react-toastify": "^7.0.4",
+        "remark-gfm": "^1.0.0",
         "short-unique-id": "^4.3.3",
         "uuid": "^8.3.2",
         "yup": "^0.32.9"

package.json

@@ -60,6 +60,7 @@
     "react-markdown": "^6.0.2",
     "react-scroll": "^1.8.2",
     "react-toastify": "^7.0.4",
+    "remark-gfm": "^1.0.0",
     "short-unique-id": "^4.3.3",
     "uuid": "^8.3.2",
     "yup": "^0.32.9"

src/components/shared/Markdown.js

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
+import cx from 'classnames';
+
+const Markdown = ({ children, className, ...props }) => (
+  <ReactMarkdown
+    className={cx('markdown', className)}
+    remarkPlugins={[gfm]}
+    {...props}
+  >
+    {children}
+  </ReactMarkdown>
+);
+
+export default memo(Markdown);

src/pages/app/dashboard.js

@@ -10,7 +10,7 @@ import TopNavbar from '../../components/dashboard/TopNavbar';
 const Dashboard = ({ user }) => {
   const { t } = useTranslation();
   const [resumes, setResumes] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const resumesRef = 'resumes';

src/styles/global.css

@@ -55,6 +55,52 @@ section {
   padding-left: 1.5em;
 }
 
+.markdown table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
+  overflow: auto;
+  word-break: normal;
+  word-break: keep-all;
+}
+
+.markdown table th {
+  font-weight: bold;
+}
+
+.markdown table th,
+.markdown table td {
+  padding: 6px 13px;
+  border: 1px solid #ddd;
+}
+
+.markdown table tr {
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+}
+
+.markdown table tr .odd {
+  background-color: #f8f8f8;
+}
+
+.markdown table tr .fail {
+  background-color: #f9f2f4;
+  color: #c7254e;
+  font-weight: bold;
+}
+
+.markdown table tr .pass {
+  background-color: #dff0d8;
+  color: #468847;
+  font-weight: bold;
+}
+
+.markdown table tr .warn {
+  background-color: #fcf8e3;
+  color: #ec971f;
+  font-weight: bold;
+}
+
 input[type="range"]::-webkit-slider-thumb {
   cursor: ew-resize;
   box-shadow: -405px 0 0 400px #605e5c;

src/templates/Pikachu.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../components/shared/Markdown';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
 import ContactA from './blocks/Contact/ContactA';
@@ -77,9 +77,9 @@ const Pikachu = ({ data }) => {
                       style={{ borderColor: data.metadata.colors.background }}
                     />
 
-                    <ReactMarkdown className="text-sm">
+                    <Markdown className="text-sm">
                       {data.objective.body}
-                    </ReactMarkdown>
+                    </Markdown>
                   </div>
                 )}
               </div>

src/templates/blocks/Awards/AwardsA.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import { formatDate, isItemVisible, safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
 
@@ -17,9 +17,7 @@ const AwardItem = ({ item, language }) => (
       )}
     </div>
     {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm">
-        {item.summary}
-      </ReactMarkdown>
+      <Markdown className="markdown mt-2 text-sm">{item.summary}</Markdown>
     )}
   </div>
 );

src/templates/blocks/Certifications/CertificationsA.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import { formatDate, isItemVisible, safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
 
@@ -17,9 +17,7 @@ const CertificationItem = ({ item, language }) => (
       )}
     </div>
     {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm">
-        {item.summary}
-      </ReactMarkdown>
+      <Markdown className="markdown mt-2 text-sm">{item.summary}</Markdown>
     )}
   </div>
 );

src/templates/blocks/Education/EducationA.js

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, isItemVisible, safetyCheck } from '../../../utils';
 
@@ -34,9 +34,7 @@ const EducationItem = ({ item, language }) => {
         </div>
       </div>
       {item.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm">
-          {item.summary}
-        </ReactMarkdown>
+        <Markdown className="markdown mt-2 text-sm">{item.summary}</Markdown>
       )}
     </div>
   );

src/templates/blocks/Objective/ObjectiveA.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import { safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
 
@@ -10,9 +10,7 @@ const ObjectiveA = () => {
     safetyCheck(data.objective, 'body') && (
       <div>
         <Heading>{data.objective.heading}</Heading>
-        <ReactMarkdown className="markdown text-sm">
-          {data.objective.body}
-        </ReactMarkdown>
+        <Markdown className="markdown text-sm">{data.objective.body}</Markdown>
       </div>
     )
   );

src/templates/blocks/Projects/ProjectsA.js

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, isItemVisible, safetyCheck } from '../../../utils';
 
@@ -33,9 +33,7 @@ const ProjectItem = ({ item, language }) => {
         )}
       </div>
       {item.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm">
-          {item.summary}
-        </ReactMarkdown>
+        <Markdown className="markdown mt-2 text-sm">{item.summary}</Markdown>
       )}
     </div>
   );

src/templates/blocks/References/ReferencesA.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import { isItemVisible, safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
 
@@ -10,7 +10,7 @@ const ReferenceItem = ({ id, name, position, phone, email, summary }) => (
     <span className="text-xs">{phone}</span>
     <span className="text-xs">{email}</span>
     {summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm">{summary}</ReactMarkdown>
+      <Markdown className="markdown mt-2 text-sm">{summary}</Markdown>
     )}
   </div>
 );

src/templates/blocks/References/ReferencesB.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import { isItemVisible, safetyCheck } from '../../../utils';
 import PageContext from '../../../contexts/PageContext';
 
@@ -10,7 +10,7 @@ const ReferenceItem = ({ id, name, position, phone, email, summary }) => (
     <span className="text-xs">{phone}</span>
     <span className="text-xs">{email}</span>
     {summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm">{summary}</ReactMarkdown>
+      <Markdown className="markdown mt-2 text-sm">{summary}</Markdown>
     )}
   </div>
 );

src/templates/blocks/Work/WorkA.js

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import React, { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from '../../../components/shared/Markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, isItemVisible, safetyCheck } from '../../../utils';
 
@@ -29,9 +29,7 @@ const WorkItem = ({ item, language }) => {
         )}
       </div>
       {item.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm">
-          {item.summary}
-        </ReactMarkdown>
+        <Markdown className="markdown mt-2 text-sm">{item.summary}</Markdown>
       )}
     </div>
   );