@verdaccio/ui-components 3.0.0-next.2 → 4.0.0-next-8.0

package/src/components/Readme/Readme.tsx

@@ -1,19 +1,46 @@
-import 'highlight.js/styles/default.css';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import React from 'react';
 
 import { useCustomTheme } from '../../';
-import ReadmeDark from './ReadmeDark';
-import ReadmeLight from './ReadmeLight';
+import './github-markdown.css';
 import { Props } from './types';
+import { parseReadme } from './utils';
 
 const Readme: React.FC<Props> = ({ description }) => {
   // @ts-ignore
   const { isDarkMode } = useCustomTheme();
 
-  return isDarkMode ? (
-    <ReadmeDark description={description} />
-  ) : (
-    <ReadmeLight description={description} />
+  // Stackoverflow theme fits well to Verdaccio dark colors
+  // https://highlightjs.org/examples
+  if (isDarkMode) {
+    require('highlight.js/styles/github-dark.css');
+  } else {
+    require('highlight.js/styles/github.css');
+  }
+
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="readme" sx={{ m: 2 }}>
+          <Wrapper
+            className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
+            dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 export default Readme;
+
+const Wrapper = styled('div')({
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+});