diff --git a/config/variables.scss b/config/variables.scss index 8a3db43..70cb7b2 100644 --- a/config/variables.scss +++ b/config/variables.scss @@ -4,5 +4,6 @@ $white: #fdfdfd; $black: #2f2f2f; $blue: #144A98; $grey: #A9A9A9; +$body: #f1f1f1; $navbar: #1B4367; $break-large: 992px; diff --git a/package.json b/package.json index 318e0a6..05a7120 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "prop-types": "^15.7.2", "react": "^16.7.0", "react-dom": "^16.7.0", + "react-head": "^3.1.1", "react-router-dom": "^5.0.1", "serialize-javascript": "^2.1.0" }, diff --git a/src/components/About.js b/src/components/About.js index 31e3a27..1d58915 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -27,7 +27,7 @@ export default class About extends Component { const classes = `${contentStyle.contentWrapper} ${style.about}` return ( -
+
diff --git a/src/components/Blog.js b/src/components/Blog.js index c99f24e..58959af 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { Spinner, Header } from '.' import '../stylesheets/globals.scss' +import MarkdownIt from 'markdown-it' import styles from './Blog.scss' import contentStyle from '../stylesheets/content.scss' @@ -12,6 +13,8 @@ export default class Blog extends Component { } render () { + const md = MarkdownIt() + if (this.props.isLoading) { return (
@@ -23,15 +26,15 @@ export default class Blog extends Component { let posts = this.props.posts.sort((a, b) => { return new Date(b.published) - new Date(a.published) }) - let postsHTML = posts.map((post) => - - - {post.published} - - + let postsHTML = posts.map((post) => +
+
{post.title} - - + {post.published} +
+
+
+
) const classes = `${contentStyle.contentWrapper} ${styles.blog}` @@ -40,12 +43,8 @@ export default class Blog extends Component {
-
- - - {postsHTML} - -
+
+ {postsHTML}
diff --git a/src/components/Blog.scss b/src/components/Blog.scss index 4f1ae7d..2094450 100644 --- a/src/components/Blog.scss +++ b/src/components/Blog.scss @@ -1,7 +1,7 @@ @import "../../config/variables.scss"; .postDate { - margin-right: 50px; + float: right; } .postTitle { @@ -10,17 +10,19 @@ text-transform: capitalize; font-family: $font-header; font-size: 1.2em; + float: left; } -.postsWrapper { +.postHeader { + overflow: hidden; +} + +.postsList { margin-top: 20px; } .postListItem { - margin: 8px; - td { - vertical-align: top; - } + border-bottom: 5px solid $body; } .blog { diff --git a/src/components/Home.scss b/src/components/Home.scss index 6cfc428..8b0de37 100644 --- a/src/components/Home.scss +++ b/src/components/Home.scss @@ -1,7 +1,7 @@ @import "../../config/variables.scss"; #coverPage { - background: url(../static/images/benjamin-child-6msS8vT5pzw-unsplash.jpg) no-repeat center center fixed; + background: url(../../config/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; diff --git a/src/static/images/background-cover-converted.jpg b/src/static/images/background-cover-converted.jpg deleted file mode 100644 index 5bd7ebd..0000000 Binary files a/src/static/images/background-cover-converted.jpg and /dev/null differ diff --git a/src/stylesheets/content.scss b/src/stylesheets/content.scss index 82bf16b..5805142 100644 --- a/src/stylesheets/content.scss +++ b/src/stylesheets/content.scss @@ -5,6 +5,7 @@ overflow: auto; box-sizing: border-box; padding: 20px; + margin: 20px; a { color: $blue; } @@ -12,8 +13,7 @@ @media (min-width: $break-large) { width: 960px; } - min-height: 100vh; - height: 100vh; + background-color: $white; } .content { diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss index ff3b8e8..5287963 100644 --- a/src/stylesheets/globals.scss +++ b/src/stylesheets/globals.scss @@ -7,6 +7,7 @@ :global(body) { font-family: $font-paragraph; color: $black; + background-color: $body; margin: 0; } diff --git a/src/utils/scanner.js b/src/utils/scanner.js index f382011..195f223 100644 --- a/src/utils/scanner.js +++ b/src/utils/scanner.js @@ -56,10 +56,13 @@ export class Scanner { published = moment() } + const summary = frontMatter.body.split('\n\n', 1)[0] + const post = { published: published.format('MMMM DD, YYYY'), filename: metadata.filename, title: frontMatter.attributes.title, + summary: summary, link: '/post/' + metadata.filename } diff --git a/yarn.lock b/yarn.lock index 0fa9790..906989c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -724,6 +724,13 @@ pirates "^4.0.0" source-map-support "^0.5.9" +"@babel/runtime@^7.0.0": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f" + integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0": version "7.6.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205" @@ -5882,6 +5889,14 @@ react-dom@^16.7.0: prop-types "^15.6.2" scheduler "^0.15.0" +react-head@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/react-head/-/react-head-3.1.1.tgz#9587a9261960c66e81c98a4ea365422f9c4ab4ca" + integrity sha512-mazFkea4439J8wk0MJL0k9OV97AZUMJzf8pDE6VRgK94SYYhbuUusCvQYVeMpltz5qsVvdOCa9qhd3IPW5yfaA== + dependencies: + "@babel/runtime" "^7.0.0" + tiny-invariant "^1.0.0" + react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.9.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" @@ -6927,7 +6942,7 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= -tiny-invariant@^1.0.2: +tiny-invariant@^1.0.0, tiny-invariant@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==