blog

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "1.1.18",
+  "version": "1.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.1.18",
+      "version": "1.2.1",
       "dependencies": {
         "@faceless-ui/slider": "^1.1.14",
         "@faceless-ui/window-info": "^2.1.1",
@@ -38,10 +38,11 @@
         "react-helmet-async": "^1.3.0",
         "react-intersection-observer": "^9.4.1",
         "react-mailchimp-subscribe": "^2.1.3",
-        "react-markdown": "^8.0.0",
+        "react-markdown": "^8.0.5",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "react-useanimations": "^2.10.0",
+        "rehype-highlight": "^6.0.0",
         "styled-components": "^5.3.5",
         "tailwind.macro": "^0.5.10",
         "web-vitals": "^2.1.3",
@@ -7808,6 +7809,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -8194,6 +8207,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/formik": {
       "version": "2.2.9",
       "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
@@ -8588,6 +8609,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hast-util-is-element": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+      "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-text": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+      "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@@ -8610,6 +8659,14 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "node_modules/highlight.js": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
+      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/history": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
@@ -11583,6 +11640,20 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
+    "node_modules/lowlight": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.1.tgz",
+      "integrity": "sha512-HCaGL61RKc1MYzEYn3rFoGkK0yslzCVDFJEanR19rc2L0mb8i58XM55jSRbzp9jcQrFzschPlwooC0vuNitk8Q==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -14713,21 +14784,22 @@
       }
     },
     "node_modules/react-markdown": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.0.tgz",
-      "integrity": "sha512-qbrWpLny6Ef2xHqnYqtot948LXP+4FtC+MWIuaN1kvSnowM+r1qEeEHpSaU0TDBOisQuj+Qe6eFY15cNL3gLAw==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.5.tgz",
+      "integrity": "sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A==",
       "dependencies": {
         "@types/hast": "^2.0.0",
+        "@types/prop-types": "^15.0.0",
         "@types/unist": "^2.0.0",
         "comma-separated-tokens": "^2.0.0",
         "hast-util-whitespace": "^2.0.0",
         "prop-types": "^15.0.0",
         "property-information": "^6.0.0",
-        "react-is": "^17.0.0",
+        "react-is": "^18.0.0",
         "remark-parse": "^10.0.0",
         "remark-rehype": "^10.0.0",
         "space-separated-tokens": "^2.0.0",
-        "style-to-object": "^0.3.0",
+        "style-to-object": "^0.4.0",
         "unified": "^10.0.0",
         "unist-util-visit": "^4.0.0",
         "vfile": "^5.0.0"
@@ -14742,9 +14814,9 @@
       }
     },
     "node_modules/react-markdown/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-refresh": {
       "version": "0.11.0",
@@ -15029,6 +15101,22 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
+      "integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-text": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -16110,9 +16198,9 @@
       }
     },
     "node_modules/style-to-object": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
-      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
+      "integrity": "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==",
       "dependencies": {
         "inline-style-parser": "0.1.1"
       }
@@ -16866,6 +16954,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-generated": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",
@@ -23720,6 +23821,14 @@
         "reusify": "^1.0.4"
       }
     },
+    "fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
     "faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -23991,6 +24100,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="
+    },
     "formik": {
       "version": "2.2.9",
       "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
@@ -24274,6 +24388,26 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "hast-util-is-element": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+      "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      }
+    },
+    "hast-util-to-text": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+      "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      }
+    },
     "hast-util-whitespace": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@@ -24289,6 +24423,11 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "highlight.js": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
+      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
+    },
     "history": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
@@ -26450,6 +26589,16 @@
         }
       }
     },
+    "lowlight": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.1.tgz",
+      "integrity": "sha512-HCaGL61RKc1MYzEYn3rFoGkK0yslzCVDFJEanR19rc2L0mb8i58XM55jSRbzp9jcQrFzschPlwooC0vuNitk8Q==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.7.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -28532,30 +28681,31 @@
       }
     },
     "react-markdown": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.0.tgz",
-      "integrity": "sha512-qbrWpLny6Ef2xHqnYqtot948LXP+4FtC+MWIuaN1kvSnowM+r1qEeEHpSaU0TDBOisQuj+Qe6eFY15cNL3gLAw==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.5.tgz",
+      "integrity": "sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A==",
       "requires": {
         "@types/hast": "^2.0.0",
+        "@types/prop-types": "^15.0.0",
         "@types/unist": "^2.0.0",
         "comma-separated-tokens": "^2.0.0",
         "hast-util-whitespace": "^2.0.0",
         "prop-types": "^15.0.0",
         "property-information": "^6.0.0",
-        "react-is": "^17.0.0",
+        "react-is": "^18.0.0",
         "remark-parse": "^10.0.0",
         "remark-rehype": "^10.0.0",
         "space-separated-tokens": "^2.0.0",
-        "style-to-object": "^0.3.0",
+        "style-to-object": "^0.4.0",
         "unified": "^10.0.0",
         "unist-util-visit": "^4.0.0",
         "vfile": "^5.0.0"
       },
       "dependencies": {
         "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         }
       }
     },
@@ -28773,6 +28923,18 @@
         }
       }
     },
+    "rehype-highlight": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
+      "integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-text": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -29581,9 +29743,9 @@
       "requires": {}
     },
     "style-to-object": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
-      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
+      "integrity": "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==",
       "requires": {
         "inline-style-parser": "0.1.1"
       }
@@ -30128,6 +30290,15 @@
         "@types/unist": "^2.0.0"
       }
     },
+    "unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      }
+    },
     "unist-util-generated": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",

frontend/package.json

@@ -33,10 +33,11 @@
     "react-helmet-async": "^1.3.0",
     "react-intersection-observer": "^9.4.1",
     "react-mailchimp-subscribe": "^2.1.3",
-    "react-markdown": "^8.0.0",
+    "react-markdown": "^8.0.5",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "react-useanimations": "^2.10.0",
+    "rehype-highlight": "^6.0.0",
     "styled-components": "^5.3.5",
     "tailwind.macro": "^0.5.10",
     "web-vitals": "^2.1.3",

frontend/src/App.js

@@ -18,6 +18,7 @@ const DiligentLife = lazy(() => import('./pages/DiligentLife'));
 const DiligentMinds = lazy(() => import('./pages/DiligentMinds'));
 const EventsTimeline = lazy(() => import('./pages/EventsTimeline'));
 const About = lazy(() => import('./pages/About'));
+const Blog = lazy(() => import('./pages/Blog'));
 const BlogPost = lazy(() => import('./components/BlogPost'));
 const ProcessPage = lazy(() => import('./pages/ProcessPage'));
 const ContactPage = lazy(() => import('./pages/ContactPage'));
@@ -30,6 +31,7 @@ const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
 const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
 const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 import NavigationNew from './components/shared/NavigationNew';
+import ArticlePage from './pages/ArticlePage';
 
 // Navigation Links
 const links = routes.filter(item => item.nav === true);
@@ -101,6 +103,8 @@ function App() {
           <Route exact path="/diligentminds" element={<DiligentMinds />}/>
           <Route exact path="/eventstimeline" element={<EventsTimeline />}/>
           <Route exact path="/about" element={<About />}/>
+          <Route exact path="/blog" element={<Blog />}/>
+          <Route exact path="/articles/:slug" element={<ArticlePage />} />
           <Route exact path="/contact" element={<ContactPage />}/>
           <Route exact path="/casestudybi" element={<CaseStudyBI />}/>
           <Route exact path="/casestudystrata" element={<CaseStudyStrata />}/>

frontend/src/assets/icons/back-triangle.svg

@@ -0,0 +1,9 @@
+<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7333 17.959C14.7333 19.6146 12.8366 20.5532 11.5203 19.5491L1.08484 11.589C0.035417 10.7885 0.0355058 9.20887 1.08502 8.40849L11.5205 0.450163C12.8368 -0.55374 14.7333 0.38498 14.7333 2.04048L14.7333 17.959Z" fill="url(#paint0_linear_1067_34641)"/>
+<defs>
+<linearGradient id="paint0_linear_1067_34641" x1="14.7333" y1="10" x2="-1.00006" y2="10" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CB87D1"/>
+<stop offset="1" stop-color="#8F8EC3"/>
+</linearGradient>
+</defs>
+</svg>

frontend/src/components/LatestArticles.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { strapiApiBuilder } from './../utils/strapiApiBuilder';
+import useFetchCollections from './../hooks/useFetchCollections';
+import { formatDate } from './../utils/formatDate';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+    'AuthorImage',
+    'ArticleImage',
+    'article_category',
+];
+
+const LatestArticles = () => {
+    const strapi = strapiApiBuilder('articles', strapiPopulate, '?sort[0]=date&pagination[pageSize]=3');
+
+    const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+  return (
+    <div className='col-span-1 md:col-span-2 flex flex-col gap-4'>
+      <h4 className='text-n-subhead font-semibold text-dark-gray mb-8'>Latest Blog Posts</h4>
+      {data && data.map((element,index) => (
+          <a
+          key={index}
+          className={'card box flex flex-col items-center justify-between gap-[24px]'}
+          href={`/articles/${element.attributes.Slug}`}
+        >
+          <div className="flex flex-col gap-[4px]">
+            <div className="flex gap-2">
+              <img
+                className="max-h-[36px] object-fit rounded-full"
+                src={api_url + element.attributes.AuthorImage.data.attributes.url}
+                alt={api_url + element.attributes.AuthorImage.data.attributes.alternativeText}
+              />
+              <div className="flex flex-col items-start">
+                <p className="paragraph">{element.attributes.Author}</p>
+                <p className="text-small-subhead text-gray-400 leading-normal">
+                  {element.attributes.AuthorTitle}
+                </p>
+              </div>
+            </div>
+            <div className='text-left flex flex-col gap-[8px]'>
+              <h2 className="n-paragraph-title text-dark-gray leading-normal">{element.attributes.ArticleTitle}</h2>
+            </div>
+    
+          
+          </div>
+          <img
+            src={api_url + element.attributes.ArticleImage.data.attributes.url}
+            alt={api_url + element.attributes.ArticleImage.data.attributes.alternativeText}
+          />
+    
+        </a>
+      ))}
+    </div>
+  )
+}
+
+export default LatestArticles;

frontend/src/components/OneArticleGrid.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const OneArticlesGrid = ({children}) => {
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-6 gap-8'>
+        {children}
+    </div>
+  )
+}
+
+OneArticlesGrid.propTypes = {}
+
+export default OneArticlesGrid

frontend/src/components/shared/ArticleCard.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { formatDate } from './../../utils/formatDate';
+import CategoryNugget from './CategoryNugget';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const temp = {
+  ArticleTitle: 'BI Healthcare Monitoring System',
+  ArticleLeadingParagraph:
+    'Our philosophy is based on the idea of ​​innovation. We work tirelessly to provide useful solutions.',
+};
+
+const ArticleCard = ({ data }) => {
+  //console.log(data);
+  return (
+    // <div className={"card box" + (isLarge ? ' col-span-2' : '')}>
+    <a
+      className={'card box my-2 flex flex-col md:flex-row items-center justify-between gap-[72px]'}
+      href={`/articles/${data.Slug}`}
+    >
+      <div className="flex flex-col gap-[18px]">
+        <div className="flex gap-4">
+          <img
+            className="max-h-[45px] object-fit rounded-full"
+            src={api_url + data.AuthorImage.data.attributes.url}
+            alt={api_url + data.AuthorImage.data.attributes.alternativeText}
+          />
+          <div className="flex flex-col items-start">
+            <p className="paragraph">{data.Author}</p>
+            <p className="text-small-subhead text-gray-400 leading-normal">
+              {data.AuthorTitle}
+            </p>
+          </div>
+        </div>
+        <div className='text-left flex flex-col gap-[8px]'>
+          <h2 className="n-h3-heading text-dark-gray">{temp.ArticleTitle}</h2>
+          <p className="n-paragraph">{temp.ArticleLeadingParagraph}</p>
+        </div>
+
+        <div className="flex gap-4 items-center">
+          <p className="text-small-subhead text-gray-400 leading-normal">
+            {formatDate(data.Date)}
+          </p>
+          {data.article_category.data && (
+            <CategoryNugget data={data.article_category.data.attributes.Name} />
+          )}
+        </div>
+      </div>
+      <img
+        src={api_url + data.ArticleImage.data.attributes.url}
+        alt={api_url + data.ArticleImage.data.attributes.alternativeText}
+      />
+
+      {/* <img src={api_url + data.img} alt={api_url + data.alt} className={'mb-12 mx-auto self-center'}></img> */}
+    </a>
+  );
+};
+
+export default ArticleCard;

frontend/src/components/shared/ArticlesGrid.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ArticlesGrid = ({children}) => {
+  return (
+    <div className='flex flex-col md:mx-32'>
+        {children}
+    </div>
+  )
+}
+
+ArticlesGrid.propTypes = {}
+
+export default ArticlesGrid

frontend/src/components/shared/BlogArticlesDataWrapper.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { strapiApiBuilder } from './../../utils/strapiApiBuilder';
+import useFetchCollections from './../../hooks/useFetchCollections';
+import Wrapper from '../../layout/Wrapper';
+import Animation_Diligent from '../../assets/animation_diligent.webm';
+import ArticlesGrid from './ArticlesGrid';
+import ArticleCard from './ArticleCard';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+    'AuthorImage',
+    'ArticleImage',
+    'article_category',
+];
+
+const BlogArticlesDataWrapper = () => {
+  const strapi = strapiApiBuilder('articles', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+
+  if (isLoading) {
+    return (
+      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  } else {
+    return <>{data && <Wrapper>
+        <ArticlesGrid>
+                {data.map((element,index) => (
+                    <div key={index}>
+                        <ArticleCard data={element.attributes} />
+                    </div>
+                )  
+                )}
+             </ArticlesGrid>
+        </Wrapper>}</>;
+  }
+};
+export default BlogArticlesDataWrapper;

frontend/src/components/shared/CategoryNugget.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CategoryNugget = ({data}) => {
+  return (
+    <div className='rounded-full border-[1px] border-dg-secondary text-dg-secondary text-p px-[18px]'>{data}</div>
+  )
+}
+
+export default CategoryNugget;

frontend/src/hooks/useFetchCollections.js

@@ -0,0 +1,88 @@
+import axios from "axios";
+import React, { useEffect, useReducer, useState } from "react";
+
+
+
+const dataFetchReducer = (state, action) => {
+  switch (action.type) {
+    case 'FETCH_INIT':
+      return {
+        ...state,
+        isLoading: true,
+        isError: false
+      };
+    case 'FETCH_SUCCESS':
+      return {
+        ...state,
+        isLoading: false,
+        isError: false,
+        data: action.payload,
+      };
+    case 'FETCH_FAILURE':
+      return {
+        ...state,
+        isLoading: false,
+        isError: true,
+      };
+    default:
+      throw new Error();
+  }
+};
+
+
+const useFetchCollections = (initialUrl, initialData) => {
+  const [url, setUrl] = useState(initialUrl);
+
+  const [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: initialData,
+  });
+    //getData
+    useEffect(() => {
+        const fetchData = async () => {
+          dispatch({ type: 'FETCH_INIT' });
+    
+          try {
+            const result = await axios(url);
+    
+            dispatch({ type: 'FETCH_SUCCESS', payload: result.data.data });
+          } catch (error) {
+            dispatch({ type: 'FETCH_FAILURE' });
+          }
+        };
+    
+        fetchData();
+      }, [url]);
+  
+
+  useEffect(() => {
+    let didCancel = false;
+
+    const fetchData = async () => {
+      dispatch({ type: 'FETCH_INIT' });
+
+      try {
+        const result = await axios(url);
+
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_SUCCESS', payload: result.data.data });
+        }
+      } catch (error) {
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_FAILURE' });
+        }
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      didCancel = true;
+    };
+  }, [url]);
+
+  return [state, setUrl];
+};
+
+export default useFetchCollections

frontend/src/index.css

@@ -1,6 +1,6 @@
 @tailwind base;
 
-@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 @tailwind components;
 @tailwind utilities;

frontend/src/pages/About.jsx

@@ -45,7 +45,7 @@ const strapiPopulate = [
 ];
 
 export default function About() {
-  const strapi = strapiApiBuilder('aboutpage', strapiPopulate);
+  const strapi = strapiApiBuilder('aboutpage', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/pages/ArticlePage.jsx

@@ -0,0 +1,86 @@
+import React, { Children, Fragment, useEffect } from 'react';
+import CustomLink from '../components/root/CustomLink';
+import ActionCard from '../components/shared/ActionCard';
+
+import ReactMarkdown from 'react-markdown';
+import useDataApi from '../hooks/useDataApi';
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+
+import PageLayout from '../layout/PageLayout';
+
+import rehypeHighlight from 'rehype-highlight';
+
+import '../App.css';
+import useAnalytics from './../hooks/useAnalytics';
+import { strapiApiBuilder } from './../utils/strapiApiBuilder';
+import ReactHelmet from './../components/shared/ReactHelmet';
+
+import { useLocation } from 'react-router-dom';
+import useFetchCollections from './../hooks/useFetchCollections';
+import OneArticlesGrid from '../components/OneArticleGrid';
+import LatestArticles from './../components/LatestArticles';
+
+import { ReactComponent as BackArrowSVG } from '../assets/icons/back-triangle.svg';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [];
+
+export default function ArticlePage() {
+  const slug = useLocation();
+
+  const helperString = slug.pathname.split('/').pop();
+
+  const strapi = strapiApiBuilder(
+    `articles?filters[Slug][$eq]=${helperString}`,
+    strapiPopulate,
+    '',
+  );
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+  //console.log(data);
+
+  useAnalytics('');
+
+  useEffect(() => {
+    document.title = '';
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  } else {
+    return (
+      <PageLayout>
+        {data && (
+          <div className="mt-[48px] md:mt-[180px]">
+            <Wrapper>
+              <div className="flex flex-col gap-12">
+                <a href={'/blog'} className="flex gap-4 items-center">
+                  <BackArrowSVG />
+                  <p className='n-paragraph'>Back to Blog Page</p>
+                </a>
+                <OneArticlesGrid>
+                  <div className="col-span-1 md:col-span-4">
+                    <ReactMarkdown rehypePlugins={[rehypeHighlight]} className="article">
+                      {data[0].attributes.Body}
+                    </ReactMarkdown>
+                  </div>
+                  <LatestArticles />
+                </OneArticlesGrid>
+              </div>
+            </Wrapper>
+          </div>
+        )}
+      </PageLayout>
+    );
+  }
+}

frontend/src/pages/Blog.jsx

@@ -1,26 +1,76 @@
-import SocialNetworks from '../components/shared/SocialNetworks';
-import Contact from '../components/shared/Contact';
-import BlogSection from '../components/BlogSection';
+import React, { Children, Fragment, useEffect } from 'react';
+import CustomLink from '../components/root/CustomLink';
+import ActionCard from '../components/shared/ActionCard';
+
+import useDataApi from '../hooks/useDataApi';
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+
 import PageLayout from '../layout/PageLayout';
+import PageTitleOneFont from '../components/shared/PageTitleOneFont';
+import GradientWrapper from '../components/shared/GradientWrapper';
+
+import '../App.css';
+import useAnalytics from './../hooks/useAnalytics';
+import { strapiApiBuilder } from './../utils/strapiApiBuilder';
+import ReactHelmet from './../components/shared/ReactHelmet';
+import WorkClientForm from './../components/WorkClientForm';
+
+import { useState } from 'react';
+import PageTitle from './../components/shared/PageTitle';
+import BlogArticlesDataWrapper from '../components/shared/BlogArticlesDataWrapper';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+  'Heading',
+  'SEO',
+  'SEO.metaSocial',
+  'SEO.metaImage',
+  'SEO.metaSocial.image',
+];
+
+export default function Blog() {
+  const [formSuccess, setFormSuccess] = useState(false);
+
+  const strapi = strapiApiBuilder('blogpage', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
+
+  useAnalytics('Blog');
+
+  useEffect(() => {
+    document.title = 'Blog';
+  }, []);
 
-export default function Blog({forwardedRef}) {
-  return (
-    <PageLayout>
-    <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
-      <BlogSection bgColor="bg-white dark:bg-dg-primary-1700" padding="py-16" />
-      {/* Social Networks Section */}
-      <section
-        id="posts"
-        className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center px-4"
-      >
-        <SocialNetworks bgColor="bg-white" />
-      </section>
-
-      {/* Contact Section */}
-      <section id="contact" className="h-fit bg-white dark:bg-dg-primary-1700 px-4 " ref={forwardedRef}>
-        <Contact defaultIndex={0} />
-      </section>
-    </div>
-    </PageLayout>
-  );
-}
+  if (isLoading) {
+    return (
+      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  } else {
+    return (
+      <PageLayout>
+        {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
+        <div className="mt-[48px] md:mt-[180px]">
+          <Wrapper padding={' py-[48px]'}>
+            {data ? (
+              <Fragment>
+                <PageTitle
+                  heading={data.Heading.title}
+                  subheading={data.Heading.subtitle}
+                  left
+                />
+              </Fragment>
+            ) : null}
+          </Wrapper>
+          <BlogArticlesDataWrapper />
+        </div>
+      </PageLayout>
+    );
+  }
+};

frontend/src/pages/Careers.jsx

@@ -170,7 +170,7 @@ const _data = {
 export default function Careers({ forwardedRef }) {
   const [clickedPosition, setClickedPosition] = useState('');
 
-  const strapi = strapiApiBuilder('n-careerspage', strapiPopulate);
+  const strapi = strapiApiBuilder('n-careerspage', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/pages/ContactPage.jsx

@@ -22,7 +22,7 @@ const strapiPopulate = [
 
 function ContactPage({tab, position}) {
 
-  const strapi = strapiApiBuilder('w-home-page', strapiPopulate);
+  const strapi = strapiApiBuilder('w-home-page', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/pages/Home.jsx

@@ -70,7 +70,7 @@ const strapiPopulate = [
 
 export default function Home({ forwardedRef }) {
 
-  const strapi = strapiApiBuilder('w-home-page', strapiPopulate);
+  const strapi = strapiApiBuilder('w-home-page', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/pages/ProcessPage.jsx

@@ -33,7 +33,7 @@ const strapiPopulate = [
 const ProcessPage = () => {
   const [isMobile, setIsMobile] = useState(false);
 
-  const strapi = strapiApiBuilder('processpage', strapiPopulate);
+  const strapi = strapiApiBuilder('processpage', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/pages/WorkWithUs.jsx

@@ -62,7 +62,7 @@ const NumberIcon = ({ number }) => {
 const WorkWithUs = () => {
   const [formSuccess, setFormSuccess] = useState(false);
 
-  const strapi = strapiApiBuilder('work-with-us-page', strapiPopulate);
+  const strapi = strapiApiBuilder('work-with-us-page', strapiPopulate, '');
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 

frontend/src/routes.js

@@ -16,6 +16,7 @@ import WorkWithUs from "./pages/WorkWithUs";
 import EventsTimeline from "./pages/EventsTimeline";
 import DiligentLife from "./pages/DiligentLife";
 import DiligentMinds from "./pages/DiligentMinds";
+import Blog from './pages/Blog';
 const routes = [
     {
       path: '/',
@@ -111,6 +112,13 @@ const routes = [
           // },
         ],
       },
+    {
+      path: '/blog',
+      component: <Blog />,
+      title: 'Blog',
+      exact: true,
+      nav:true,
+    },
       {
         path: '/about',
         component: <About/>,

frontend/src/styles/cards.css

@@ -4,7 +4,7 @@
 
 @layer components {
     .card {
-      @apply px-12 py-12 bg-white dark:bg-dg-primary-1700 text-dark-gray dark:text-white shadow-md dark:border-dg-primary-1500 dark:border-solid dark:border text-center rounded-xl cursor-pointer z-10 transition-all hover:scale-105 hover:transition-all;
+      @apply block px-12 py-12 bg-white dark:bg-dg-primary-1700 text-dark-gray dark:text-white shadow-md dark:border-dg-primary-1500 dark:border-solid dark:border text-center rounded-xl cursor-pointer z-10 transition-all hover:scale-105 hover:transition-all;
     }
 
     .card_post {

frontend/src/styles/import.styles.css

@@ -1,3 +1,4 @@
 @import './buttons.css';
 @import './text.css';
-@import './cards.css';
+@import './cards.css';
+@import './reactMarkdown.css';

frontend/src/styles/reactMarkdown.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .article h1 {
+     @apply font-secondary font-bold text-dark-gray dark:text-white text-n-head-mobile md:text-n-head;
+    }
+
+    
+
+  }

frontend/src/utils/formatDate.js

@@ -0,0 +1,7 @@
+export const formatDate = dateString => {
+  var datePart = dateString.match(/\d+/g),
+    year = datePart[0].substring(2), // get only two digits
+    month = datePart[1],
+    day = datePart[2];
+  return day + '.' + month + '.' + year;
+};

frontend/src/utils/strapiApiBuilder.js

@@ -1,6 +1,6 @@
 const api_url = process.env.REACT_APP_API_URL;
 
-export const strapiApiBuilder = (page, stringArray) => {
+export const strapiApiBuilder = (page, stringArray, filter) => {
   const api = `${api_url}/api/${page}`;
   let query = '';
   stringArray.map((field, index) => {
@@ -9,5 +9,5 @@ export const strapiApiBuilder = (page, stringArray) => {
       query += `&populate[${index}]=${field}`;
     }
   });
-  return api + query;
+  return api + query + filter;
 };

frontend/tailwind.config.js

@@ -138,6 +138,10 @@ module.exports = {
           lineHeight: '18px',
         },
       ],
+      'small-subhead' : ['12px', {
+        letterSpacing: '0px',
+        lineHeight: '28px',
+      }],
 
 
     },

frontend/yarn.lock

@@ -1966,7 +1966,7 @@
   "resolved" "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.3.tgz"
   "version" "2.4.3"
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.0.0":
   "integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
   "resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   "version" "15.7.5"
@@ -4543,6 +4543,13 @@
   dependencies:
     "reusify" "^1.0.4"
 
+"fault@^2.0.0":
+  "integrity" "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ=="
+  "resolved" "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "format" "^0.2.0"
+
 "faye-websocket@^0.11.3":
   "integrity" "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g=="
   "resolved" "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz"
@@ -4713,6 +4720,11 @@
     "combined-stream" "^1.0.8"
     "mime-types" "^2.1.12"
 
+"format@^0.2.0":
+  "integrity" "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="
+  "resolved" "https://registry.npmjs.org/format/-/format-0.2.2.tgz"
+  "version" "0.2.2"
+
 "formik@^2.2.9":
   "integrity" "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA=="
   "resolved" "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz"
@@ -4999,6 +5011,24 @@
   dependencies:
     "function-bind" "^1.1.1"
 
+"hast-util-is-element@^2.0.0":
+  "integrity" "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA=="
+  "resolved" "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz"
+  "version" "2.1.3"
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+
+"hast-util-to-text@^3.0.0":
+  "integrity" "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw=="
+  "resolved" "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz"
+  "version" "3.1.2"
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+    "hast-util-is-element" "^2.0.0"
+    "unist-util-find-after" "^4.0.0"
+
 "hast-util-whitespace@^2.0.0":
   "integrity" "sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg=="
   "resolved" "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz"
@@ -5014,6 +5044,11 @@
   "resolved" "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz"
   "version" "1.0.8"
 
+"highlight.js@~11.7.0":
+  "integrity" "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
+  "resolved" "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz"
+  "version" "11.7.0"
+
 "history@^5.2.0":
   "integrity" "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig=="
   "resolved" "https://registry.npmjs.org/history/-/history-5.2.0.tgz"
@@ -6323,6 +6358,15 @@
   dependencies:
     "tslib" "^2.0.3"
 
+"lowlight@^2.0.0":
+  "integrity" "sha512-HCaGL61RKc1MYzEYn3rFoGkK0yslzCVDFJEanR19rc2L0mb8i58XM55jSRbzp9jcQrFzschPlwooC0vuNitk8Q=="
+  "resolved" "https://registry.npmjs.org/lowlight/-/lowlight-2.8.1.tgz"
+  "version" "2.8.1"
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "fault" "^2.0.0"
+    "highlight.js" "~11.7.0"
+
 "lru-cache@^6.0.0":
   "integrity" "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="
   "resolved" "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -8002,16 +8046,16 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   "version" "16.13.1"
 
-"react-is@^17.0.0":
-  "integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-  "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
-  "version" "17.0.2"
-
 "react-is@^17.0.1":
   "integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   "version" "17.0.2"
 
+"react-is@^18.0.0":
+  "integrity" "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  "version" "18.2.0"
+
 "react-mailchimp-subscribe@^2.1.3":
   "integrity" "sha512-ZRuPZMnX/9pHQLnAQavsgB5xIF+gNqjNCCq1vvTs23cn+93W2oOp17qjg3LpDBEt1HJi6IHXMwpKXn0taY8FHw=="
   "resolved" "https://registry.npmjs.org/react-mailchimp-subscribe/-/react-mailchimp-subscribe-2.1.3.tgz"
@@ -8021,22 +8065,23 @@
     "prop-types" "^15.5.10"
     "to-querystring" "^1.0.4"
 
-"react-markdown@^8.0.0":
-  "integrity" "sha512-qbrWpLny6Ef2xHqnYqtot948LXP+4FtC+MWIuaN1kvSnowM+r1qEeEHpSaU0TDBOisQuj+Qe6eFY15cNL3gLAw=="
-  "resolved" "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.0.tgz"
-  "version" "8.0.0"
+"react-markdown@^8.0.5":
+  "integrity" "sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A=="
+  "resolved" "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.5.tgz"
+  "version" "8.0.5"
   dependencies:
     "@types/hast" "^2.0.0"
+    "@types/prop-types" "^15.0.0"
     "@types/unist" "^2.0.0"
     "comma-separated-tokens" "^2.0.0"
     "hast-util-whitespace" "^2.0.0"
     "prop-types" "^15.0.0"
     "property-information" "^6.0.0"
-    "react-is" "^17.0.0"
+    "react-is" "^18.0.0"
     "remark-parse" "^10.0.0"
     "remark-rehype" "^10.0.0"
     "space-separated-tokens" "^2.0.0"
-    "style-to-object" "^0.3.0"
+    "style-to-object" "^0.4.0"
     "unified" "^10.0.0"
     "unist-util-visit" "^4.0.0"
     "vfile" "^5.0.0"
@@ -8248,6 +8293,17 @@
   dependencies:
     "jsesc" "~0.5.0"
 
+"rehype-highlight@^6.0.0":
+  "integrity" "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw=="
+  "resolved" "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz"
+  "version" "6.0.0"
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "hast-util-to-text" "^3.0.0"
+    "lowlight" "^2.0.0"
+    "unified" "^10.0.0"
+    "unist-util-visit" "^4.0.0"
+
 "relateurl@^0.2.7":
   "integrity" "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
   "resolved" "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz"
@@ -8939,10 +8995,10 @@
   "resolved" "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz"
   "version" "3.3.1"
 
-"style-to-object@^0.3.0":
-  "integrity" "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA=="
-  "resolved" "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz"
-  "version" "0.3.0"
+"style-to-object@^0.4.0":
+  "integrity" "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw=="
+  "resolved" "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz"
+  "version" "0.4.1"
   dependencies:
     "inline-style-parser" "0.1.1"
 
@@ -9404,6 +9460,14 @@
   dependencies:
     "@types/unist" "^2.0.0"
 
+"unist-util-find-after@^4.0.0":
+  "integrity" "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw=="
+  "resolved" "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz"
+  "version" "4.0.1"
+  dependencies:
+    "@types/unist" "^2.0.0"
+    "unist-util-is" "^5.0.0"
+
 "unist-util-generated@^2.0.0":
   "integrity" "sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw=="
   "resolved" "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz"