feat(): Adding the article viewer feature

Author: ar1603

jest.js

@@ -25,3 +25,9 @@ jest.mock('@fontsource/space-mono', () => {
     default: jest.fn(),
   };
 });
+
+// React markdown preview mock.
+jest.mock('@uiw/react-markdown-preview', () => ({
+  __esModule: true,
+  default: 'markdown-preview',
+}));

package.json

@@ -44,6 +44,7 @@
     "@types/node": "^16.18.91",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "axios": "^1.7.9",
     "framer-motion": "^11.1.9",
     "fuse.js": "^7.0.0",

src/components/ArticleCard/ArticleCard.tsx

@@ -1,6 +1,10 @@
 import { Box, HStack, Img, Text } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCursor } from '../Cursor';
 
 type ArticleCardProps = {
+  article_key: string;
   title: string;
   image: string;
   description: string;
@@ -11,6 +15,7 @@ type ArticleCardProps = {
 };
 
 const ArticleCard = ({
+  article_key,
   title,
   last_updated,
   image,
@@ -19,14 +24,28 @@ const ArticleCard = ({
   views,
   likes,
 }: ArticleCardProps) => {
+  const navigation = useNavigate();
+  const { setCursorType } = useCursor();
+  useEffect(() => {
+    setCursorType('none');
+  }, [setCursorType]);
+
   return (
     <Box
-      bg={'black'}
+      zIndex={1}
+      _hover={{
+        transform: 'scale(1.02)',
+        cursor: 'pointer',
+      }}
+      transition={'all 0.4s ease'}
+      bg={'rgba(0, 0, 0, 0.4)'}
+      backdropFilter={'blur(10px)'}
       padding={4}
       borderRadius={10}
-      border={'1px solid #ffffffa0'}
+      border={'1px solid gray'}
       width={'300px'}
       color={'white'}
+      onClick={() => navigation(article_key)}
     >
       <Text fontSize="2xl" fontWeight="bold" color="brand.900" marginBottom={2}>
         {title}

src/components/MdPreview/MdPreview.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import markdownStyle from './css/Markdown.module.css';
+import { MdPreviewProps } from './types';
+
+const MdPreview = ({ mdString }: MdPreviewProps) => {
+  return (
+    <Box width={'100%'} maxW={'70vw'} data-color-mode={'dark'}>
+      <MarkdownPreview className={markdownStyle.markdown} source={mdString} />
+    </Box>
+  );
+};
+
+export default MdPreview;

src/components/MdPreview/__tests__/MdPreview.test.tsx

@@ -0,0 +1,18 @@
+import MdPreview from '../MdPreview';
+import { render } from '@testing-library/react';
+
+describe('MdPreview', () => {
+  it('should render MdPreview', () => {
+    const { container } = render(
+      <MdPreview mdString={''} variant={'withSide'} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render MdPreview', () => {
+    const { container } = render(
+      <MdPreview mdString={'test'} variant={'withoutSide'} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/MdPreview/__tests__/__snapshots__/MdPreview.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MdPreview should render MdPreview 1`] = `
+<div>
+  <div
+    class="css-1npfbn5"
+    data-color-mode="dark"
+  >
+    <markdown-preview
+      source=""
+    />
+  </div>
+</div>
+`;
+
+exports[`MdPreview should render MdPreview 2`] = `
+<div>
+  <div
+    class="css-1npfbn5"
+    data-color-mode="dark"
+  >
+    <markdown-preview
+      source="test"
+    />
+  </div>
+</div>
+`;

src/components/MdPreview/css/Markdown.module.css

@@ -0,0 +1,192 @@
+.markdown {
+  width: 100%;
+  padding: 2rem;
+  margin: 0.5rem 0;
+  border-radius: 6px;
+  font-size: 1rem;
+  color: #fffffff0;
+  background-color: transparent;
+  line-height: 1.5;
+}
+
+.markdown a {
+  color: #ffffffa0;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.markdown h3 {
+  cursor: pointer;
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #ffffffa0;
+}
+
+.markdown h2 {
+  cursor: pointer;
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-top: 2rem;
+  color: #fffffff0;
+}
+
+.markdown h1 {
+  display: none;
+}
+
+.markdown div ul {
+  background-color: light-dark(#ddffaa, #39422c);
+  box-shadow:
+    0 0 0 1px #ffffffc0,
+    0 0 0 0 transparent;
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid #39422c;
+  border-radius: 1rem;
+}
+
+.markdown div ol {
+  width: '100vw';
+  background-color: light-dark(#ddffaa, #39422c);
+  box-shadow:
+    0 0 0 1px #ffffffc0,
+    0 0 0 0 transparent;
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid #39422c;
+  border-radius: 1rem;
+}
+
+.markdown table {
+  width: 'fit-content';
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid #39422c;
+  border-radius: 1rem;
+}
+
+.markdown pre {
+  background-color: #ffffff20;
+  box-shadow:
+    0 0 0 1px #ffffffc0,
+    0 0 0 0 transparent;
+  width: auto;
+  padding: 2rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.markdown pre code {
+  content: 'light only';
+  background-color: transparent;
+  box-shadow: 0 0 0 0 transparent;
+  padding: 0.25rem;
+  z-index: 0;
+}
+
+.markdown code {
+  content: 'light only';
+  background-color: #ffffff90;
+  padding: 0.25rem;
+  z-index: 0;
+}
+
+.markdown li {
+  list-style: disc;
+}
+
+@media screen and (max-width: 1021px) {
+  .markdown {
+    column-count: 1;
+    column-gap: 0rem;
+    padding: 1rem;
+  }
+
+  .markdown a {
+    font-weight: 500;
+  }
+
+  .markdown h3 {
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .markdown h2 {
+    cursor: pointer;
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-top: 2rem;
+    margin: 0;
+  }
+
+  .markdown div ul {
+    margin: 0.5rem;
+    padding: 1rem;
+  }
+
+  @media screen and (max-width: 1021px) {
+    .markdown {
+      width: 100%;
+      column-count: 1;
+      column-gap: 0rem;
+      padding: 1rem;
+      margin: 0.5rem 0;
+    }
+
+    .markdown a {
+      font-weight: 400;
+      font-size: medium;
+    }
+
+    .markdown h3 {
+      font-size: 1.3rem;
+      font-weight: 500;
+      margin: 0;
+    }
+
+    .markdown h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-top: 2rem;
+      margin: 0;
+    }
+  }
+  .markdown div ul {
+    margin: 0.6rem;
+    padding: 0.7rem;
+    font-size: medium;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .markdown {
+    width: 100%;
+    padding: 1rem;
+    margin: 0.5rem 0;
+  }
+
+  .markdown a {
+    font-weight: 300;
+    font-size: small;
+  }
+
+  .markdown h3 {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  .markdown h2 {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  .markdown div ul {
+    margin: 0.5rem;
+    padding: 0.5rem;
+    font-size: small;
+  }
+}

src/components/MdPreview/index.ts

@@ -0,0 +1,3 @@
+export { default as MdPreview } from './MdPreview';
+export { getMdFileDataInString } from './utils';
+export * from './types';

src/components/MdPreview/types.ts

@@ -0,0 +1 @@
+export type MdPreviewProps = { mdString: string };

src/components/MdPreview/utils.ts

@@ -0,0 +1,30 @@
+import { isEmpty } from 'lodash';
+
+/**
+ * Function to fetch the markdown string data from the path.
+ * @param path Path of the markdown file.
+ * @param responseHandler Function to handle the response.
+ * @returns
+ */
+export const getMdFileDataInString = (
+  path: string,
+  responseHandler: (dataString: string) => void,
+) => {
+  if (isEmpty(path)) return;
+
+  // Fetch the markdown file data.
+  import(`../../${path}.md`)
+    .then((res) => {
+      fetch(res.default)
+        .then((res) => {
+          return res.text();
+        })
+        .then((res: string) => {
+          responseHandler(res);
+        })
+        // eslint-disable-next-line no-console
+        .catch((error) => console.log(error));
+    })
+    // eslint-disable-next-line no-console
+    .catch((error) => console.log(error));
+};