Review fixes

Signed-off-by: Kipruto <[email protected]>

apps/engineeringblog/.eslintrc.js

@@ -1,11 +1,16 @@
 module.exports = {
   root: true,
-  extends: ["next/core-web-vitals", "plugin:prettier/recommended"],
+  extends: [
+    "next/core-web-vitals",
+    "plugin:prettier/recommended",
+    "plugin:mdx/recommended",
+  ],
   settings: {
     "import/resolver": {
       webpack: {
         config: "./eslint.webpack.config.js",
       },
     },
+    "mdx/code-blocks": true,
   },
 };

apps/engineeringblog/components/Markdown/Markdown.tsx

@@ -1,5 +1,5 @@
 // Addapted from https://amirardalan.com/blog/syntax-highlight-code-in-markdown
-import { FC } from "react";
+import React from "react";
 import ReactMarkdown, { Components } from "react-markdown";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
@@ -29,10 +29,6 @@ SyntaxHighlighter.registerLanguage("python", python);
 SyntaxHighlighter.registerLanguage("jsx", jsx);
 SyntaxHighlighter.registerLanguage("java", java);
 
-type MarkdownProps = {
-  markdown: string;
-};
-
 const Pre = ({ children }: { children: JSX.Element }) => (
   <Box
     component="pre"
@@ -49,7 +45,11 @@ const Pre = ({ children }: { children: JSX.Element }) => (
   </Box>
 );
 
-const Markdown: FC<MarkdownProps> = ({ markdown }) => {
+const Markdown = React.forwardRef(function Markdown({
+  markdown,
+}: {
+  markdown: string;
+}) {
   const syntaxTheme = oneDark;
 
   const MarkdownComponents: Components = {
@@ -98,6 +98,6 @@ const Markdown: FC<MarkdownProps> = ({ markdown }) => {
   return (
     <ReactMarkdown components={MarkdownComponents}>{markdown}</ReactMarkdown>
   );
-};
+});
 
 export default Markdown;

apps/engineeringblog/components/NoPosts/NoPosts.tsx

@@ -1,9 +1,11 @@
 "use client";
+
 import { Section } from "@commons-ui/core";
 import React from "react";
-import bg from "@/engineeringblog/assets/images/1920x668px bg - 2 2.png";
 import { alpha, Box, Typography } from "@mui/material";
 
+import bg from "@/engineeringblog/assets/images/1920x668px bg - 2 2.png";
+
 const NoPosts = React.forwardRef(function NoPosts() {
   return (
     <Box

apps/engineeringblog/package.json

@@ -43,6 +43,7 @@
     "eslint-config-next": "catalog:",
     "eslint-config-prettier": "catalog:",
     "eslint-import-resolver-webpack": "catalog:",
+    "eslint-plugin-mdx": "catalog:",
     "eslint-plugin-import": "catalog:",
     "prettier": "catalog:",
     "typescript": "catalog:"