Merge pull request 'feature/markdown-styling' (#169) from feature/markdown-styling into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/169

src/article/data/articleAPIService.ts

@@ -9,13 +9,11 @@ const articleEndpoint = "/papers/"
 
 async function getArticle(id: string): Promise<Article> {
   try {
-    // await new Promise((res, _) => {
-    //   setTimeout(() => res(null), 2000);
-    // });
     const response = await integratorApiClient.get<FetchArticleByIdDTO>(
       // `https://run.mocky.io/v3/62cd4581-d864-4d46-b1d6-02b45b5d1994/${id}`
       // `https://jsonplaceholder.typicode.com/posts/${id}`
-      articleEndpoint + id
+      `https://run.mocky.io/v3/066be3d8-0568-439a-8b20-062deed49a97`
+      // articleEndpoint + id
     );
     const dto = response.data;
     return create({

src/components/Markdown.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 /* -------------------------------------------------------------------------- */
 /*                                  MarkDown                                  */
 /* -------------------------------------------------------------------------- */
@@ -18,33 +16,137 @@ import Heading from "./typography/Heading";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import Link from "./typography/Link";
-import { indexOf } from "lodash";
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
 
 export type Props = {
   markdown: string;
 };
 
 const Markdown = ({ markdown }: Props) => {
-  let newMarkdown = markdown.replace(/\n/g, "  \n");
-
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
-      children={newMarkdown}
+      children={markdown}
       components={{
-        h1: Heading,
-        h2: Typography,
-        a: (props) => {
-          return (
-            <Link
-              href={props.href}
-              className="text-sky-600 font-bold text-base"
+        ul: ({ node, ...props }) => (
+          <ul
+            style={{
+              listStyleType: "disc",
+            }}
+            className="mx-8"
             {...props}
-            >
-              {props.children}
-            </Link>
-          );
-        },
+          />
+        ),
+
+        ol: ({ node, ...props }) => (
+          <ol className="list-decimal mx-8" {...props} />
+        ),
+
+        h1: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+              marginBlockStart: 11,
+              marginBlockEnd: 11,
+
+              fontSize: 32,
+            }}
+            {...props}
+          />
+        ),
+
+        h2: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 13.28,
+              marginBlockEnd: 13.28,
+
+              fontSize: 24,
+            }}
+            {...props}
+          />
+        ),
+
+        h3: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 16,
+              marginBlockEnd: 16,
+
+              fontSize: 18.72,
+            }}
+            {...props}
+          />
+        ),
+
+        h4: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 21.28,
+              marginBlockEnd: 21.28,
+            }}
+            {...props}
+          />
+        ),
+
+        h5: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 26.72,
+              marginBlockEnd: 26.72,
+
+              fontSize: 13.28,
+            }}
+            {...props}
+          />
+        ),
+
+        h6: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 37.28,
+              marginBlockEnd: 37.28,
+
+              fontSize: 10.72,
+            }}
+            {...props}
+          />
+        ),
+        p: Typography,
+
+        a: ({ node, ...props }) => (
+          <Link
+            className=" inline-flex text-sm font-bold text-blue-500"
+            {...props}
+          />
+        ),
 
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");

src/components/fetchAnArticle/AnArticleBody.tsx

@@ -12,6 +12,7 @@ import * as ArticlePart from "../../components/Article/Article";
 import BaseLayout from "components/BaseLayout";
 import Container from "components/Container";
 import NotFound from "./NotFound";
+import Markdown from "components/Markdown";
 
 const AnArticleBody = () => {
   const store = useArticleStore();
@@ -46,7 +47,12 @@ const AnArticleBody = () => {
               <ArticlePart.Article.Title className="text-3xl">
                 {article?.title}
               </ArticlePart.Article.Title>
-              <div className="py-6">{article?.content}</div>
+
+              <div className="py-6">
+                <Markdown
+                  markdown={article?.content ?? ''}
+                />
+              </div>
             </div>
           </>
         )}