aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/components/Content
diff options
context:
space:
mode:
authorQuentin Gliech <quentingliech@gmail.com>2020-02-13 00:53:29 +0100
committerQuentin Gliech <quentingliech@gmail.com>2020-02-13 00:53:29 +0100
commit8b85780d76ad45675582f4478eedb026b7ac25e1 (patch)
treeb6ffdc651259ec08ca608cb01acdf1dababccb55 /webui/src/components/Content
parent680dd91c0c0200bd4948173df0b601e16f511e6e (diff)
downloadgit-bug-8b85780d76ad45675582f4478eedb026b7ac25e1.tar.gz
webui: start reorganizing the component structure
Diffstat (limited to 'webui/src/components/Content')
-rw-r--r--webui/src/components/Content/ImageTag.tsx22
-rw-r--r--webui/src/components/Content/PreTag.tsx16
-rw-r--r--webui/src/components/Content/index.tsx26
3 files changed, 64 insertions, 0 deletions
diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx
new file mode 100644
index 00000000..bdb36873
--- /dev/null
+++ b/webui/src/components/Content/ImageTag.tsx
@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+const useStyles = makeStyles({
+ tag: {
+ maxWidth: '100%',
+ },
+});
+
+const ImageTag = ({
+ alt,
+ ...props
+}: React.ImgHTMLAttributes<HTMLImageElement>) => {
+ const classes = useStyles();
+ return (
+ <a href={props.src} target="_blank" rel="noopener noreferrer nofollow">
+ <img className={classes.tag} alt={alt} {...props} />
+ </a>
+ );
+};
+
+export default ImageTag;
diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx
new file mode 100644
index 00000000..d3b4c273
--- /dev/null
+++ b/webui/src/components/Content/PreTag.tsx
@@ -0,0 +1,16 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+const useStyles = makeStyles({
+ tag: {
+ maxWidth: '100%',
+ overflowX: 'auto',
+ },
+});
+
+const PreTag = (props: React.HTMLProps<HTMLPreElement>) => {
+ const classes = useStyles();
+ return <pre className={classes.tag} {...props}></pre>;
+};
+
+export default PreTag;
diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx
new file mode 100644
index 00000000..56e52e1e
--- /dev/null
+++ b/webui/src/components/Content/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import html from 'remark-html';
+import parse from 'remark-parse';
+import remark2react from 'remark-react';
+import unified from 'unified';
+
+import ImageTag from './ImageTag';
+import PreTag from './PreTag';
+
+type Props = { markdown: string };
+const Content: React.FC<Props> = ({ markdown }: Props) => {
+ const processor = unified()
+ .use(parse)
+ .use(html)
+ .use(remark2react, {
+ remarkReactComponents: {
+ img: ImageTag,
+ pre: PreTag,
+ },
+ });
+
+ const contents: React.ReactNode = processor.processSync(markdown).contents;
+ return <>{contents}</>;
+};
+
+export default Content;