add markdown with greentext

src/components/markdown/index.ts

@@ -0,0 +1 @@
+export { default } from './markdown';

src/components/markdown/markdown.module.css

@@ -0,0 +1,17 @@
+.markdown a {
+  color: var(--post-link-text-color);
+  text-decoration: none;
+}
+
+.markdown a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: none;
+}
+
+.markdown ol {
+  padding-left: 15px;
+}
+
+.markdown ul {
+  padding-left: 40px;
+}

src/components/markdown/markdown.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import styles from './markdown.module.css';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+import supersub from 'remark-supersub';
+import { visit } from 'unist-util-visit';
+
+interface MarkdownProps {
+  content: string;
+}
+
+const MAX_LENGTH_FOR_GFM = 10000; // remarkGfm lags with large content
+
+const blockquoteToGreentext = () => (tree: any) => {
+  tree.children.forEach((node: any) => {
+    if (node.type === 'blockquote') {
+      node.children.forEach((child: any) => {
+        if (child.type === 'paragraph' && child.children.length > 0) {
+          const prefix = {
+            type: 'text',
+            value: '>',
+          };
+          child.children.unshift(prefix);
+        }
+      });
+      node.type = 'div';
+      node.data = {
+        hName: 'div',
+        hProperties: {
+          className: 'greentext',
+        },
+      };
+    }
+  });
+};
+
+const Markdown = ({ content }: MarkdownProps) => {
+  const remarkPlugins: any[] = [[supersub]];
+
+  if (content.length <= MAX_LENGTH_FOR_GFM) {
+    remarkPlugins.push([remarkGfm, { singleTilde: false }]);
+  }
+
+  const customSchema = useMemo(
+    () => ({
+      ...defaultSchema,
+      tagNames: [...(defaultSchema.tagNames || []), 'div'],
+      attributes: {
+        ...defaultSchema.attributes,
+        div: ['className'],
+      },
+    }),
+    [],
+  );
+
+  remarkPlugins.push([blockquoteToGreentext]);
+
+  return (
+    <span className={styles.markdown}>
+      <ReactMarkdown
+        children={content}
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={[[rehypeSanitize, customSchema]]}
+        components={{
+          img: ({ src }) => <span>{src}</span>,
+          video: ({ src }) => <span>{src}</span>,
+          iframe: ({ src }) => <span>{src}</span>,
+          source: ({ src }) => <span>{src}</span>,
+        }}
+      />
+    </span>
+  );
+};
+
+export default Markdown;

src/index.css

@@ -7,11 +7,15 @@ body {
   background-color: white;
 }
 
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, iframe {
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, th, td, iframe {
   margin: 0;
   padding: 0;
 }
 
+.greentext {
+  color: var(--post-greentext-color);
+}
+
 @media (max-width: 640px) {
   .button {
     text-transform: capitalize;

src/themes.css

@@ -71,6 +71,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #000080;
+  --post-menu-button-color-hover: red;
+  --post-greentext-color: #789922;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -151,6 +154,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #34345c;
+  --post-menu-button-color-hover: #d00;
+  --post-greentext-color: #789922;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -208,6 +214,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #000080;
+  --post-menu-button-color-hover: red;
+  --post-greentext-color: #789922;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -279,6 +288,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #34345c;
+  --post-menu-button-color-hover: #d00;
+  --post-greentext-color: #789922;
   
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -348,6 +360,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #c5c8c6;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #5F89AC;
+  --post-menu-button-color-hover: #81a2be;
+  --post-greentext-color: #b5bd68;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -412,6 +427,9 @@
   --post-subject-font-weight: 700;
   --post-name-text-color: #004a99;
   --post-name-font-weight: 700;
+  --post-menu-button-color: #FF6600;
+  --post-menu-button-color-hover: #FF3300;
+  --post-greentext-color: #789922;
 
   /* post form */
   --post-form-toggle-font-size: 22px;