diff --git a/src/components/Blog.js b/src/components/Blog.js
index ca6d940..bd1fdf2 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
-import { Spinner, Header } from '.'
+import { Spinner, Header, SearchBox } from '.'
import '../stylesheets/globals.scss'
import MarkdownIt from 'markdown-it'
import styles from './Blog.scss'
@@ -39,8 +39,10 @@ export default class Blog extends Component {
return (
-
-
+
+
+
+
{postsHTML}
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
index 63abd14..ebb3642 100644
--- a/src/components/Blog.scss
+++ b/src/components/Blog.scss
@@ -24,3 +24,8 @@
.postListItem {
border-bottom: 5px solid $body;
}
+
+.headerContainer {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js
new file mode 100644
index 0000000..f0d9433
--- /dev/null
+++ b/src/components/SearchBox.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import '../stylesheets/globals.scss'
+import styles from './SearchBox.scss'
+
+export default class SearchBox extends Component {
+ static propTypes = {
+ query: PropTypes.string
+ }
+
+ render () {
+ return (
+
+
+
+
+ )
+ }
+}
diff --git a/src/components/SearchBox.scss b/src/components/SearchBox.scss
new file mode 100644
index 0000000..fafeb68
--- /dev/null
+++ b/src/components/SearchBox.scss
@@ -0,0 +1,34 @@
+@import "../stylesheets/variables.scss";
+
+.container {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ border: 2px $black;
+}
+
+.search {
+ position: relative;
+ padding: 15px 40px 15px 20px;
+ width: 20px;
+ color: $black;
+ font-size: 16px;
+ font-weight: 100;
+ letter-spacing: 2px;
+ border: none;
+ border-radius: 5px;
+ background: $body;
+ transition: width 0.4s ease;
+ outline: none;
+ box-sizing: border-box;
+
+ &:focus{ width: 300px; }
+}
+
+i{
+ position: relative;
+ left: -37px;
+ color: $black;
+}
diff --git a/src/components/index.js b/src/components/index.js
index a7f8b01..2097f35 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -12,3 +12,4 @@ export { default as SocialLinks } from './SocialLinks'
export { default as Column } from './Column'
export { default as Resume } from './Resume'
export { default as Footer } from './Footer'
+export { default as SearchBox } from './SearchBox'
diff --git a/src/containers/BlogContainer.js b/src/containers/BlogContainer.js
new file mode 100644
index 0000000..0fe9e3f
--- /dev/null
+++ b/src/containers/BlogContainer.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { Blog } from '../components'
+import PropTypes from 'prop-types'
+import '../stylesheets/globals.scss'
+
+export default class BlogContainer extends Component {
+ static propTypes = {
+ posts: PropTypes.arrayOf(PropTypes.object).isRequired
+ }
+
+ constructor (props) {
+ super(props)
+ this.state = {
+ isLoading: false,
+ posts: props.posts
+ }
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
index 87cf101..6d3d6a6 100644
--- a/src/containers/MainContainer.js
+++ b/src/containers/MainContainer.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import { About, Blog, Home, Wrapper, Column, Footer } from '../components'
+import { About, Home, Wrapper, Column, Footer } from '../components'
+import { BlogContainer } from '.'
export default class MainContainer extends Component {
static propTypes = {
@@ -37,8 +38,7 @@ export default class MainContainer extends Component {
about={this.state.about}/>
-
+
diff --git a/src/containers/index.js b/src/containers/index.js
index 45aa0e9..e56da6e 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,3 +1,4 @@
export { default as MainContainer } from './MainContainer'
export { default as ContentContainer } from './ContentContainer'
export { default as NotFoundContainer } from './NotFoundContainer'
+export { default as BlogContainer } from './BlogContainer'
diff --git a/src/server.js b/src/server.js
index 8fd5bbd..e16aacb 100644
--- a/src/server.js
+++ b/src/server.js
@@ -54,8 +54,10 @@ if (config.storage === 'file') {
storage = new MongoStorage(config)
}
-const postApi = new Api(storage)
-app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+if (config.storage === 'mongo') {
+ const postApi = new Api(storage)
+ app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+}
const scanner = new Scanner(config, storage)