Add header + Footer, show posts from markdown

Author: Turbo

data/post.md renamed to content/20181101-the-thirsty-crow.md

@@ -1,6 +1,9 @@
 ---
 title: Kaalu – the Thirsty Crow 
 author: Unknown
+cover: "1.jpg"
+date: "2018-11-01"
+category: "Moral story"
 ---
 
 It was a hot summer day, and Kaalu the crow was very thirsty. He flew here and there looking for water. He saw a pot with water. He went close to the pot Kaalu saw that there was very little water in it. Kaalu could not reach the water. 

content/20181101-you-are-the-way-you-are.md

@@ -0,0 +1,21 @@
+---
+title: Be the way you are
+author: P!nk
+cover: "1.jpg"
+date: "2017-03-01"
+category: "Moral story"
+---
+
+A mom was driving her daughter home. The daughter said out of the blue, "Mama?" 
+The mom said: "Yes"
+She said, "I'm the ugliest girl I know." 
+The mom could not believe in what she hears. But she didn't say anything. Instead she went home made a Powerpoint presentation for her daughter. And, in that presentation, were androgynous rockstars and artists that live their truth, are probably made fun of every day of their life, and carry on, wave their flag, and inspire others.
+There are Michael Jackson and David Bowie and Freddie Mercury and Annie Lennox and Prince and Janis Joplin and George Michael, Elton John and many more artists, and the daughter's eyes glazed over.
+The mom then said, 'You know, I really wanna know why you feel this way about yourself.' 
+The daughter said, 'Well I look like a boy,'
+and the mom said, 'Well what do you think I look like?'
+'Well you're beautiful.' 
+'Well, thanks. But when people make fun of me, that's what they use. They say I look like a boy or I'm too masculine or I have too many opinions, my body is too strong.'
+The mom said again to the daughter, 'Do you see me growing my hair?' She said, 'No, Mama.' I said, 'Do you see me changing my body?' 'No, Mama.' 'Do you see me changing the way I present myself to the world?' 'No, Mama.' 'Do you see me selling out arenas all over the world?' 'Yes, Mama.' **'OK! So, baby girl. We don't change. We take the gravel and the shell and we make a pearl. And we help other people to change so they can see more kinds of beauty.'**
+
+The story is told by P!nk in the MTV Video Music Award ceremony about how she teach her daughter. That maybe something for us to learn as well.

content/20181108-if-you-want-to-go-far.md

@@ -0,0 +1,24 @@
+---
+title: If you want to go far 
+author: Turbo
+cover: "cover.jpg"
+date: "2018-11-08"
+category: "Quotes"
+---
+
+I heard Afrian proverb says this: “If you want to go quickly, go alone. If you want to go far, go together.” 
+
+Imagine you are building a business, and you wonder if you should have a partner or solely take care of everything. With partner or partners, there may come questions:
+* What if he argue with my decisions?
+  * What if he does not devote to this business?
+  * What if I have to work much more than him?
+Now, what if all questions are true down the road? Then you better go alone initially, establishing the foundation, hire people with skills you need and ask for partner when the company is stable. That will make your journey starts much faster. But achieving a certain business success is not everything.
+
+We as human, according to Simon Sinek, are social animal. We are not the strongest, the fastest, yet we are the longest species that survive, that is because we know how to help and build for each others. 
+
+There are too much things to bear in the world, even with our strongest man. That is where we need more people, to hold hand together, to continue generation after generation, term after term, sprint after sprint. A business which last long is an organization who knows how to connect people, inspire employees so they feel protected and do their best for the business.
+
+So you want to thrive, you have to inspire the people around you to believe in you, believe in your vision and work towards that vision. 
+ If you want to go quickly, go alone. If you want to go far, go together.
+
+And that is the lesson for today.

package.json

@@ -47,6 +47,7 @@
     "react-dom": "^16.7.0",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^4.6.3",
+    "react-redux-loading-bar": "^4.1.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-universal-component": "^3.0.3",

src/App/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import universal from 'react-universal-component';
 import { Route, Switch } from 'react-router';
 import Header from 'src/Components/Header';
-import Head from 'src/Components/Head';
+import Footer from 'src/Components/Footer';
 import Loading from 'src/Components/Loading';
 import { RedirectWithStatus } from 'src/Components/SSR';
 
@@ -13,7 +13,6 @@ const UniversalComponent = universal(props => import(`../Pages/${props.page}`),
 
 export default ({ lang }) => (
   <React.Fragment>
-    <Head />
     <Header lang={lang} />
 
     <Switch>
@@ -25,14 +24,14 @@ export default ({ lang }) => (
 
       <Route
         exact
-        path="/:lang/about"
-        render={routeProps => <UniversalComponent page="About" {...routeProps} />}
+        path="/:lang/login"
+        render={routeProps => <UniversalComponent page="Login" {...routeProps} />}
       />
 
       <Route
         exact
-        path="/:lang/login"
-        render={routeProps => <UniversalComponent page="Login" {...routeProps} />}
+        path="/:lang/books"
+        render={routeProps => <UniversalComponent page="Books" {...routeProps} />}
       />
 
       <Route
@@ -50,6 +49,7 @@ export default ({ lang }) => (
       <Route render={routeProps => <UniversalComponent page="404" {...routeProps} />} />
     </Switch>
 
+    <Footer />
     {/* Footer here */}
   </React.Fragment>
 );

src/Components/CardBox/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Card } from 'rebass';
+
+const CardBox = styled(Card)`
+  color: ${props => props.theme.colors.black};
+  box-shadow: ${props => props.theme.boxShadows[1]};
+`;
+
+export default CardBox;

src/Components/Footer/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Image, Box } from 'rebass';
+import FlexBox from 'src/Components/FlexBox';
+import { TextBlock } from 'src/Components/Typo';
+
+const imagePath = require('src/assets/images/full-logo.svg');
+
+const BoxWithFooter = Box.withComponent('footer');
+
+const StyledFooter = styled(BoxWithFooter)`
+  width: 100%;
+  min-height: max-content;
+  position: absolute;
+  bottom: 0;
+  color: ${props => props.theme.colors.black};
+  background: ${props => props.theme.colors.oldPaperDarker};
+  box-shadow: ${props => props.theme.boxShadows[0]};
+`;
+
+const Footer = () => (
+  <StyledFooter py={[2, 3, 4]} px={[3, 4, 5]}>
+    <FlexBox>
+      <Image src={imagePath} alt="Brightizen" width="100px" />
+
+      <TextBlock color="black">
+        Copyright © 2018 Brightizen
+      </TextBlock>
+    </FlexBox>
+  </StyledFooter>
+);
+
+export default Footer;

src/Components/FormElements/Input/InputField/index.js

@@ -1,25 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Container from 'src/Components/Container';
+// import Container from 'src/Components/Container';
 
 const arrowDown = 'static/icons/arrow_solid_black.svg';
 
-const StyledInputField = styled(Container)`
+const StyledInputField = styled.input`
   appearance: none;
   outline: 0;
   flex-grow: 1;
   box-shadow: none;
-  border-radius: ${props => props.theme.radius[1]};
+  border-radius: ${props => props.theme.radius[1]}px;
   padding: ${props => props.theme.space[2]}px;
-  border: 1px solid ${props => props.theme.colors.secondary};
+  border: 1.2px solid ${props => (props.isShow ? props.theme.colors.danger : props.theme.colors.primary)};
 
   &::placeholder {
     color: ${props => props.theme.colors.grey};
   }
 
   &:focus {
-    border: 1.2px solid ${props => props.theme.colors.primary};
+    border: 1.2px solid ${props => props.theme.colors.info};
     transition: all .3s ease-out;
   }
 
@@ -52,12 +52,12 @@ const StyledInputField = styled(Container)`
   }
 `;
 
-const StyledContainerInput = StyledInputField.withComponent('input');
+// const StyledContainerInput = StyledInputField.withComponent('input');
 
 const InputField = ({
   id, placeholder, type, ...rest
 }) => (
-  <StyledContainerInput id={id} placeholder={placeholder} type={type} {...rest} />
+  <StyledInputField id={id} placeholder={placeholder} type={type} {...rest} />
 );
 
 InputField.defaultProps = {

src/Components/FormElements/Input/Label/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { TextBlock } from 'src/Components/Typo';
+import { Text } from 'rebass';
 
 const Label = ({
   id, label, children, ...rest
@@ -12,9 +12,10 @@ const Label = ({
   </StyledLabel>
 );
 
-const TextBlockLabel = TextBlock.withComponent('label');
+const TextWithLabel = Text.withComponent('label');
 
-const StyledLabel = styled(TextBlockLabel)`
+const StyledLabel = styled(TextWithLabel)`
+  font-family: ${props => props.theme.fonts.body};
   display: flex;
   flex-direction: column;
   width: 100%;

src/Components/FormElements/Input/Validation/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import { Span } from 'src/Components/Typo';
 
 const FormValidation = ({
   isShow, messageType, message, ...rest
@@ -10,14 +11,14 @@ const FormValidation = ({
   </StyledFormValidation>
 );
 
-const StyledFormValidation = styled.span`
+const StyledFormValidation = styled(Span)`
   width: 100%;
   display: ${props => (props.isShow ? 'block' : 'none')};
   color: ${props => (props.messageType ? props.theme.colors[props.messageType] : props.theme.colors.black)};
   font-weight: normal;
-  font-size: ${props => props.theme.halfBaseline * 3}px;
+  font-size: ${props => props.theme.fontSizes[1]}px;
   line-height: 1;
-  margin-top: ${props => props.theme.halfBaseline * 3}px;
+  margin-top: 7px;
 `;
 
 FormValidation.defaultProps = {