Add github markdown css styles

TODO.md

@@ -1,4 +1,3 @@
 # TODO
 
-1. Fix wrapping on code blocks
+1. Add filtering posts by tags
-2. Add filtering posts by tags

package-lock.json

@@ -5396,6 +5396,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-markdown-css": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-3.0.1.tgz",
+      "integrity": "sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ=="
+    },
     "glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -6757,7 +6762,7 @@
               "bundled": true,
               "optional": true,
               "requires": {
-                "ms": "2.1.1"
+                "ms": "^2.1.1"
               }
             },
             "deep-extend": {

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
+    "github-markdown-css": "^3.0.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-markdown": "^4.0.8",

src/components/About.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'github-markdown-css'
 import ReactMarkdown from 'react-markdown';
 import AboutMarkdown from '../static/about.md';
 
@@ -15,7 +16,7 @@ class About extends React.Component {
     render () {
         const { markdown } = this.state;
         return (
-            <div className="content">
+            <div className="markdown-body">
                 <ReactMarkdown source={markdown} />
             </div>
         );

src/components/Post.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import 'github-markdown-css'
 import { connect } from 'react-redux';
 import { fetchPost } from '../actions';
 import { Link } from 'react-router-dom';
@@ -32,10 +33,12 @@ class Post extends React.Component {
                             <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
                             <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
                             <h4>Posted {post.time_published}</h4>
+                            <div className="markdown-body">
                               <ReactMarkdown source={post.content} />
                             </div>
                         </div>
                     </div>
+                </div>
             );
         }
     }

src/components/PostList.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import 'github-markdown-css'
 import { connect } from 'react-redux';
 import { fetchPosts } from '../actions';
 import { Link } from 'react-router-dom';
@@ -22,10 +23,12 @@ class PostList extends React.Component {
                             <h2><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h2>
                             <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
                             <h4>Posted {post.time_published}</h4>
+                            <div className="markdown-body">
                               <ReactMarkdown source={post.content} />
                             </div>
                         </div>
                     </div>
+                </div>
             );
         }).reverse();
     }

src/components/User.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import 'github-markdown-css'
 import { connect } from 'react-redux';
 import { fetchUserProfile } from '../actions';
 import { Link } from 'react-router-dom';
@@ -26,10 +27,12 @@ class User extends React.Component {
                             <h2><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h2>
                             <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
                             <h4>Posted {post.time_published}</h4>
+                            <div className="markdown-body">
                               <ReactMarkdown source={post.content} />
                             </div>
                         </div>
                     </div>
+                </div>
             );
         });
     }