From eff20ae4595e408184e1a49264e4a742502feb29 Mon Sep 17 00:00:00 2001
From: danysmall <dany.small.work@gmail.com>
Date: Fri, 21 Oct 2022 12:08:29 +0300
Subject: [PATCH 1/2] Mocked correct article body
---
src/article/data/articleAPIService.ts | 6 ++----
src/components/Markdown.tsx | 8 +-------
src/components/fetchAnArticle/AnArticleBody.tsx | 8 +++++++-
3 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/src/article/data/articleAPIService.ts b/src/article/data/articleAPIService.ts
index d61e3bd..cdb1589 100644
--- a/src/article/data/articleAPIService.ts
+++ b/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({
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index e28c8f2..ff3dccc 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
/* -------------------------------------------------------------------------- */
/* MarkDown */
/* -------------------------------------------------------------------------- */
@@ -18,19 +16,16 @@ 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";
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,
@@ -45,7 +40,6 @@ const Markdown = ({ markdown }: Props) => {
</Link>
);
},
-
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
diff --git a/src/components/fetchAnArticle/AnArticleBody.tsx b/src/components/fetchAnArticle/AnArticleBody.tsx
index 0329981..8186ca3 100644
--- a/src/components/fetchAnArticle/AnArticleBody.tsx
+++ b/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>
</>
)}
From 9939b1c8249249ab10b089080be211c77e87c14a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Fri, 21 Oct 2022 17:57:55 +0300
Subject: [PATCH 2/2] resolve headers, lists, link, paragraph..
---
src/components/Markdown.tsx | 134 ++++++++++++++++++++++++++++++++----
1 file changed, 121 insertions(+), 13 deletions(-)
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index ff3dccc..f8e05b7 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -16,6 +16,7 @@ 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 style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
export type Props = {
markdown: string;
@@ -27,19 +28,126 @@ const Markdown = ({ markdown }: Props) => {
remarkPlugins={[remarkGfm]}
children={markdown}
components={{
- h1: Heading,
- h2: Typography,
- a: (props) => {
- return (
- <Link
- href={props.href}
- className="text-sky-600 font-bold text-base"
- {...props}
- >
- {props.children}
- </Link>
- );
- },
+ ul: ({ node, ...props }) => (
+ <ul
+ style={{
+ listStyleType: "disc",
+ }}
+ className="mx-8"
+ {...props}
+ />
+ ),
+
+ 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 || "");
return !inline && match ? (