Add single post page

Turbo · Turbo · commit 9d5879f60e38 · 2018-12-28T23:59:07.000+01:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -68,6 +68,11 @@ module.exports = {
         "int32Hint": true,
       }
     ],
+
+    // Disable react/destructuring-assignment
+    "react/destructuring-assignment": [
+      0,
+    ]
   },
 
   "settings": {
diff --git a/content/20181101-the-thirsty-crow.md b/content/20181101-the-thirsty-crow.md
@@ -1,5 +1,6 @@
 ---
-title: Kaalu – the Thirsty Crow 
+title: Kaalu – the Thirsty Crow
+slug: kaali-the-thirsty-crow
 author: Unknown
 cover: "1.jpg"
 date: "2018-11-01"
diff --git a/content/20181101-you-are-the-way-you-are.md b/content/20181101-you-are-the-way-you-are.md
@@ -1,5 +1,6 @@
 ---
 title: Be the way you are
+slug: be-the-way-you-are
 author: P!nk
 cover: "1.jpg"
 date: "2017-03-01"
diff --git a/content/20181108-if-you-want-to-go-far.md b/content/20181108-if-you-want-to-go-far.md
@@ -1,5 +1,6 @@
 ---
 title: If you want to go far 
+slug: if-you-want-to-go-far
 author: Turbo
 cover: "cover.jpg"
 date: "2018-11-08"
diff --git a/src/App/index.js b/src/App/index.js
@@ -40,6 +40,12 @@ export default ({ lang }) => (
         render={routeProps => <UniversalComponent page="Posts" {...routeProps} />}
       />
 
+      <Route
+        exact
+        path="/:lang/posts/:slug"
+        render={routeProps => <UniversalComponent page="Post" {...routeProps} />}
+      />
+
       {/* Define Redirect logic if any */}
       <RedirectWithStatus httpStatus={301} exact from="/:lang" to={`/${lang}`} />
       <RedirectWithStatus httpStatus={301} from="/:lang/users" to="/" />
diff --git a/src/Components/Badge/index.js b/src/Components/Badge/index.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Card } from 'rebass';
+
+const Badge = ({ ...rest }) => (
+  <StyledBadge {...rest} />
+);
+
+const StyledBadge = styled(Card)`
+  border-radius: ${props => props.theme.radius[3]}px;
+  font-family: ${props => props.theme.fonts.body};
+  font-weight: ${props => props.theme.fontWeights[7]};
+`;
+
+Badge.defaultProps = {
+  px: 2,
+  py: 1,
+  fontSize: 1,
+};
+
+export default Badge;
diff --git a/src/Pages/Post/index.js b/src/Pages/Post/index.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FlexBox from 'src/Components/FlexBox';
+import CardBox from 'src/Components/CardBox';
+import { H3, Span } from 'src/Components/Typo';
+import Head from 'src/Components/Head';
+import Badge from 'src/Components/Badge';
+
+// Import all files inside `data` via Webpack require.context
+// Read more:
+// https://goo.gl/315fi3 - Importing Multiple Markdown files into a React Component with Webpack
+const postContext = require.context('../../../content', false, /\.md$/);
+const postFiles = postContext
+  .keys()
+  .map(filename => postContext(filename));
+
+class Post extends React.Component {
+  state = {
+    post: {},
+  }
+
+  componentDidMount() {
+    const post = postFiles.find(p => p.slug === this.props.match.params.slug);
+    console.log(post);
+    this.setState(state => ({ ...state, post }));
+  }
+
+  render() {
+    /* eslint-disable react/no-array-index-key */
+    const { post } = this.state;
+
+    return (
+      <React.Fragment>
+        <Head title="Posts" />
+        <FlexBox
+          width={[1, 1 / 2, 1 / 2]}
+          mx="auto"
+          mt={[2, 3, 4]}
+          flexDirection="row"
+          alignItems="flex-start"
+          justifyContent="space-between"
+        >
+          <CardBox width={1} px={[1, 2, 3]} py={[0, 1, 2]} mx={[1, 2, 3]}>
+            <H3 dangerouslySetInnerHTML={{ __html: post.title }} />
+            <Span dangerouslySetInnerHTML={{ __html: post.__content }} />
+            <FlexBox width={1}>
+              <Badge bg="success" dangerouslySetInnerHTML={{ __html: post.category }} />
+              <Span float="right" dangerouslySetInnerHTML={{ __html: post.date }} />
+            </FlexBox>
+          </CardBox>
+        </FlexBox>
+      </React.Fragment>
+    );
+    /* eslint-enable react/no-array-index-key */
+  }
+}
+
+Post.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+      lang: PropTypes.string.isRequired,
+    }),
+  }).isRequired,
+};
+
+export default Post;
diff --git a/src/Pages/Posts/index.js b/src/Pages/Posts/index.js
@@ -1,11 +1,13 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 import truncate from 'src/helpers/truncate';
 import FlexBox from 'src/Components/FlexBox';
 import CardBox from 'src/Components/CardBox';
 import { H3, Span } from 'src/Components/Typo';
 import Head from 'src/Components/Head';
-import Footer from 'src/Components/Footer';
+import Badge from 'src/Components/Badge';
 
 // Import all files inside `data` via Webpack require.context
 // Read more:
@@ -18,17 +20,18 @@ const postFiles = postContext
 class Posts extends React.Component {
   state = {
     posts: [],
+    lang: 'en',
   }
 
   componentDidMount() {
     const posts = postFiles;
-
-    this.setState(state => ({ ...state, posts }));
+    const { lang } = this.props.match.params;
+    this.setState(state => ({ ...state, posts, lang }));
   }
 
   render() {
     /* eslint-disable react/no-array-index-key */
-    const { posts } = this.state;
+    const { posts, lang } = this.state;
 
     return (
       <React.Fragment>
@@ -43,18 +46,31 @@ class Posts extends React.Component {
         >
           {
             posts.map((post, i) => (
-              <CardBox key={i} width={[1, 1/3]} px={[1, 2, 3]} py={[0, 1, 2]} mx={[1, 2, 3]}>
-                <H3 dangerouslySetInnerHTML={{ __html: post.title }} />
+              <CardBox width={[1, 1/3]} px={[1, 2, 3]} py={[0, 1, 2]} mx={[1, 2, 3]}>
+                <Link key={i} to={`/${lang}/posts/${post.slug}`}>
+                  <H3 dangerouslySetInnerHTML={{ __html: post.title }} />
+                </Link>
                 <Span dangerouslySetInnerHTML={{ __html: truncate(post.__content) }} />
+                <FlexBox width={1}>
+                  <Badge bg="success" dangerouslySetInnerHTML={{ __html: post.category }} />
+                  <Span float="right" dangerouslySetInnerHTML={{ __html: post.date }} />
+                </FlexBox>
               </CardBox>
             ))
           }
         </FlexBox>
-        <Footer />
       </React.Fragment>
     );
     /* eslint-enable react/no-array-index-key */
   }
 }
 
+Posts.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      lang: PropTypes.string.isRequired,
+    }),
+  }).isRequired,
+};
+
 export default Posts;
diff --git a/src/routes.js b/src/routes.js
@@ -9,8 +9,8 @@ import loadData from 'src/helpers/loadData';
 const routes = [
   { path: '/', exact: true, component: Home },
   { path: '/login', component: Login },
-  { path: '/posts', component: Posts },
-  { path: '/books', component: Books, loadData: () => loadData('posts') },
+  { path: '/books', component: Books },
+  { path: '/posts', component: Posts, loadData: () => loadData('posts') },
   { component: NotFound404 },
 ];
 
