From a20ffe3364f4224d5e381e619ce39d142fe1efc4 Mon Sep 17 00:00:00 2001 From: Eyal Roth Date: Wed, 3 Jul 2019 22:10:06 +0300 Subject: [PATCH 01/26] Refactor the sidebar browser code to be part of the sidebar react component --- gatsby-browser.js | 144 -------------- src/assets/scss/_mixins.scss | 3 +- src/assets/scss/mixins/_toggle.scss | 15 ++ src/components/GlobalState/index.jsx | 16 ++ src/components/Home/index.jsx | 3 + src/components/Sidebar/index.jsx | 282 ++++++++++++++++++++++----- src/components/Sidebar/style.scss | 30 +-- src/components/Toggle/index.jsx | 14 ++ 8 files changed, 301 insertions(+), 206 deletions(-) create mode 100644 src/assets/scss/mixins/_toggle.scss create mode 100644 src/components/GlobalState/index.jsx create mode 100644 src/components/Toggle/index.jsx diff --git a/gatsby-browser.js b/gatsby-browser.js index 68e53ca..7b3c8e8 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,9 +5,6 @@ import littlefoot from 'littlefoot' import 'littlefoot/dist/littlefoot.css' import './src/assets/scss/_progress.scss' -var sidebarState = "main" -var lastUnderlineLink = null - export const onServiceWorkerUpdateReady = () => { const answer = window.confirm( `This application has been updated. ` + @@ -21,7 +18,6 @@ export const onServiceWorkerUpdateReady = () => { export function onRouteUpdate({ location }) { addLittlefoot() - addSidebarCollapse(location) } function addLittlefoot() { @@ -39,144 +35,4 @@ function addLittlefoot() { ` littlefoot({buttonTemplate: bt}) -} - -function addSidebarCollapse(location) { - - if (location.pathname == "/") { - sidebarState = "main" - lastUnderlineLink = null - } - - if (document.getElementById("sidebar")) { - const menu = document.getElementById("sidebar__menu") - const menuButton = document.getElementById("sidebar__menu-button") - const menuLinks = document.getElementsByClassName("sidebar__menu-list-item-link") - const menuUnderline = document.getElementById("sidebar__menu-underline") - - const contact = document.getElementById("sidebar__contact") - const contactButton = document.getElementById("sidebar__contact-button") - - const profileImage = document.getElementById("sidebar__author-img") - const authorTitle = document.getElementById("sidebar__author-title") - - setSidebarState(sidebarState) - setupUnderline(location) - - menuButton.addEventListener("click", () => toggle("menu-button")) - contactButton.addEventListener("click", () => toggle("contact-button")) - - function toggle(buttonClicked) { - if (buttonClicked == "menu-button") { - if (sidebarState == "menu") { - setSidebarState("main") - } else { - setSidebarState("menu") - } - } else if (buttonClicked == "contact-button") { - if (sidebarState == "contact") { - setSidebarState("main") - } else { - setSidebarState("contact") - } - } - } - - function setSidebarState(state) { - - sidebarState = state - - if (state == "main") { - enable(profileImage) - enable(authorTitle) - disable(menu) - disable(menuButton) - disable(contact) - disable(contactButton) - } else if (state == "menu") { - disable(profileImage) - disable(authorTitle) - enable(menu) - enable(menuButton) - disable(contact) - disable(contactButton) - } else if (state == "contact") { - enable(profileImage) - disable(authorTitle) - disable(menu) - disable(menuButton) - enable(contact) - enable(contactButton) - } - } - - function setupUnderline(location) { - - const lastLink = findMatchingLink(lastUnderlineLink) - const currentLink = findMatchingLink(location) - - if (currentLink) { - if (lastLink) { - setUnderline(lastLink) - shiftUnderline({from: lastLink, to: currentLink}) - } else { - if (menu.getBoundingClientRect().width > 0) { - setUnderline(currentLink) - } else { - menuButton.addEventListener('click', () => { - menu.addEventListener('transitionend', () => { - setUnderline(currentLink) - }, {once: true}) - }, {once: true}) - } - } - lastUnderlineLink = currentLink - } else { - lastUnderlineLink = null - } - - function setUnderline(link) { - const { left, width } = link.getBoundingClientRect() - menuUnderline.style.left = `${left}px` - menuUnderline.style.width = `${width}px` - } - - function shiftUnderline({from, to}) { - const { left: fromX } = from.getBoundingClientRect() - const { left: toX, width } = to.getBoundingClientRect() - menuUnderline.style.transform = `translateX(${toX - fromX}px)` - menuUnderline.style.width = `${width}px` - } - } - - function enable(item) { - item.classList.add(`${item.id}-enabled`) - item.classList.remove(`${item.id}-disabled`) - } - - function disable(item) { - item.classList.add(`${item.id}-disabled`) - item.classList.remove(`${item.id}-enabled`) - } - - function findMatchingLink(location) { - - if (location == null) { - return null - } - - for (let i = 0; i < menuLinks.length; i++) { - let link = menuLinks[i] - if (noTrailingSlash(link.pathname) == noTrailingSlash(location.pathname)) { - return link - } - } - - return null - - function noTrailingSlash(pathname) { - return pathname.replace(/\/$/, "") - } - } - } } \ No newline at end of file diff --git a/src/assets/scss/_mixins.scss b/src/assets/scss/_mixins.scss index 783c4f1..7c7acf7 100644 --- a/src/assets/scss/_mixins.scss +++ b/src/assets/scss/_mixins.scss @@ -3,4 +3,5 @@ @import "mixins/breakpoints"; @import "mixins/margin"; @import "mixins/padding"; -@import "mixins/line-height"; \ No newline at end of file +@import "mixins/line-height"; +@import "mixins/toggle"; \ No newline at end of file diff --git a/src/assets/scss/mixins/_toggle.scss b/src/assets/scss/mixins/_toggle.scss new file mode 100644 index 0000000..7d397be --- /dev/null +++ b/src/assets/scss/mixins/_toggle.scss @@ -0,0 +1,15 @@ +/** + * Toggle control + */ + +@mixin enabled { + .enabled > & { + @content; + } +} + +@mixin disabled { + .disabled > & { + @content; + } +} \ No newline at end of file diff --git a/src/components/GlobalState/index.jsx b/src/components/GlobalState/index.jsx new file mode 100644 index 0000000..9d87240 --- /dev/null +++ b/src/components/GlobalState/index.jsx @@ -0,0 +1,16 @@ +class GlobalState { + constructor() { + this.reset() + } + + reset() { + this.sidebar = { + mode: null, + lastUnderlinePath: null + } + } +} + +const globalState = new GlobalState() + +export default globalState \ No newline at end of file diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 448a8d1..a5f996e 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -4,10 +4,13 @@ import Helmet from 'react-helmet' import Links from '../Links' import ProfileImg from '../ProfileImg' import Footer from '../Footer' +import globalState from '../GlobalState' import './style.scss' class Home extends React.Component { render() { + globalState.reset() + return (
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 4c41cb6..d859c70 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -2,6 +2,8 @@ import React from 'react' import { Link, StaticQuery, graphql } from "gatsby" import Links from '../Links' import ProfileImg from '../ProfileImg' +import Toggle from '../Toggle' +import globalState from '../GlobalState' import './style.scss' const menuList = [ @@ -19,8 +21,28 @@ const menuList = [ }, ] +const SidebarMode = Object.freeze({ + Main: "main", + Menu: "menu", + Contact: "contact" +}) + class Sidebar extends React.Component { + constructor(props) { + super(props) + if (!globalState.sidebar.mode) { + globalState.sidebar.mode = SidebarMode.Main + } + this.state = { mode: globalState.sidebar.mode } + this.menuLinks = {} + } + + changeMode(newMode) { + this.setState({mode: newMode}) + globalState.sidebar.mode = newMode + } + render() { return ( -
    - {menuList.map(item => ( -
  • - - {item.label} - -
    • - ))} -
-
- - ) - - const contact = ( - - ) - - return ( - - ) + const { author, subtitle, copyright } = queryData.site.siteMetadata + + const profileImg = this.renderProfileImg(author) + const authorTitle = this.renderAuthorTitle(author, subtitle) + const menu = this.renderMenu() + const contact = this.renderContact(author) + const menuButton = this.renderMenuButton() + const contactButton = this.renderContactButton() + + return this.compose(profileImg, authorTitle, menu, contact, menuButton, contactButton) + } + + compose(profileImg, authorTitle, menu, contact, menuButton, contactButton) { + + return ( + + ) + } + + + renderProfileImg(author) { + return ( + + + + ) + } + + renderAuthorTitle(author, subtitle) { + return ( + + + {author.name} + +

+ {subtitle} +

+ + ) + } + + renderMenu() { + const underline = React.createRef() + const links = this.menuLinks + + return ( + + + + ) + + function createLink(item) { + return ( + { + links[noTrailingSlash(item.path)] = em + }} + to={item.path} + className="sidebar__menu-list-item-link" + > + {item.label} + + ) + } + + + function updateUnderline(menu) { + if (menu) { + const currentPath = noTrailingSlash(window.location.pathname) + const currentLink = links[currentPath] + if (currentLink) { + if (globalState.sidebar.lastUnderlinePath && globalState.sidebar.lastUnderlinePath != currentPath) { + const lastLink = links[globalState.sidebar.lastUnderlinePath] + shiftUnderline({from: lastLink, to: currentLink}) + } else { + if (menu.getBoundingClientRect().width > 0) { + setUnderline(currentLink) + } else { + menu.addEventListener('transitionend', () => { + setUnderline(currentLink) + }, {once: true}) + } + } + globalState.sidebar.lastUnderlinePath = currentPath + } else { + globalState.sidebar.lastUnderlinePath = null + } + } + } + + function setUnderline(link) { + if (underline.current) { + const { left, width } = link.getBoundingClientRect() + underline.current.setStyle({ + left, + width + }) + } + } + + function shiftUnderline({from, to}) { + if (underline.current) { + const { left: fromX } = from.getBoundingClientRect() + const { left: toX, width } = to.getBoundingClientRect() + underline.current.setStyle({ + left: fromX, + transform: `translateX(${toX - fromX}px)`, + width + }) + } + } + + function noTrailingSlash(pathname) { + return pathname.replace(/\/$/, "") + } + } + + renderContact(author) { + return ( + + + + ) + } + + renderMenuButton() { + let isEnabled = this.valueByMode(false, true, false) + let newMode + if (isEnabled) { + newMode = SidebarMode.Main + } else { + newMode = SidebarMode.Menu + } + + return ( + + + + ) + } + + renderContactButton() { + let isEnabled = this.valueByMode(false, false, true) + let newMode + if (isEnabled) { + newMode = SidebarMode.Main + } else { + newMode = SidebarMode.Contact + } + + return ( + + + + ) + } + + valueByMode(mainMode, menuMode, contactMode) { + switch(this.state.mode) { + case SidebarMode.Main: + return mainMode + case SidebarMode.Menu: + return menuMode + case SidebarMode.Contact: + return contactMode + } } } export default Sidebar + +class Stylized extends React.Component { + constructor(props) { + super(props); + this.state = {style: {}}; + } + + setStyle(style) { + this.setState({style}) + } + + render() { + return ( +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Sidebar/style.scss b/src/components/Sidebar/style.scss index 9ce6529..078b611 100644 --- a/src/components/Sidebar/style.scss +++ b/src/components/Sidebar/style.scss @@ -21,12 +21,12 @@ $transition-timing: 0.2s; position: absolute; left: 32%; transform: translate(0, $top-padding - 2px); - - &-enabled { + + @include enabled { transition: opacity $transition-timing ease-in; opacity: 1; } - &-disabled { + @include disabled { opacity: 0; } } @@ -38,11 +38,11 @@ $transition-timing: 0.2s; font-size: $typographic-base-font-size * 1; font-weight: 500; - &-enabled { + @include enabled { transition: opacity $transition-timing ease-in; opacity: 1; } - &-disabled { + @include disabled { opacity: 0; } } @@ -59,14 +59,14 @@ $transition-timing: 0.2s; padding-top: $top-padding; padding-bottom: $bottom-padding; - &-enabled { + @include enabled { transition: width $transition-timing ease-out, opacity $transition-timing cubic-bezier(0,0,1,0); opacity: 1; width: 100vw; } - &-disabled { + @include disabled { transition: width $transition-timing ease-out, opacity $transition-timing / 2 cubic-bezier(0,1,1,1); @@ -88,7 +88,7 @@ $transition-timing: 0.2s; border-right: 1px solid #E7E7E7; outline: none; - &-enabled { + @include enabled { color: $color-primary; } } @@ -134,14 +134,14 @@ $transition-timing: 0.2s; font-size: $typographic-base-font-size * 0.9; transform: translate(0, 1px); - &-enabled { + @include enabled { transition: width $transition-timing ease-out, opacity $transition-timing cubic-bezier(0,0,1,0); opacity: 1; width: 80vw; } - &-disabled { + @include disabled { transition: width $transition-timing ease-out, opacity $transition-timing / 2 cubic-bezier(0,1,1,1); @@ -163,7 +163,7 @@ $transition-timing: 0.2s; border-left: 1px solid #E7E7E7; outline: none; - &-enabled { + @include enabled { color: $color-primary; } } @@ -193,7 +193,7 @@ $transition-timing: 0.2s; position: unset; left: unset; transform: unset; - &-disabled { + @include disabled { opacity: unset; } } @@ -202,7 +202,7 @@ $transition-timing: 0.2s; position: unset; left: unset; transform: unset; - &-disabled { + @include disabled { opacity: unset; } } @@ -223,7 +223,7 @@ $transition-timing: 0.2s; &-button { display: none; } - &-disabled { + @include disabled { opacity: unset; width: unset; } @@ -257,7 +257,7 @@ $transition-timing: 0.2s; &-button { display: none; } - &-disabled { + @include disabled { opacity: unset; width: unset; } diff --git a/src/components/Toggle/index.jsx b/src/components/Toggle/index.jsx new file mode 100644 index 0000000..d9a5f2a --- /dev/null +++ b/src/components/Toggle/index.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +class Toggle extends React.Component { + + render() { + return ( +
+ {this.props.children} +
+ ) + } +} + +export default Toggle \ No newline at end of file From 53f0a574ada054e4a88d253f6e2e1ff6566f6877 Mon Sep 17 00:00:00 2001 From: Eyal Roth Date: Thu, 4 Jul 2019 16:17:39 +0300 Subject: [PATCH 02/26] Add a back profile image revealed when mousing-over / touching (depending on device) --- src/components/ProfileImg/index.jsx | 136 +++++++++++++++++++++++---- src/components/ProfileImg/style.scss | 19 ++++ src/components/utility.jsx | 11 +++ 3 files changed, 150 insertions(+), 16 deletions(-) create mode 100644 src/components/ProfileImg/style.scss create mode 100644 src/components/utility.jsx diff --git a/src/components/ProfileImg/index.jsx b/src/components/ProfileImg/index.jsx index 8616352..1a181f2 100644 --- a/src/components/ProfileImg/index.jsx +++ b/src/components/ProfileImg/index.jsx @@ -1,34 +1,138 @@ import React from "react" import { StaticQuery, graphql } from "gatsby" import Img from "gatsby-image" +import { addEventListener } from '../utility' +import './style.scss' + +export const squareImage = graphql` + fragment squareImage on File { + childImageSharp { + fluid(maxWidth: 145, maxHeight: 145, quality: 100) { + ...GatsbyImageSharpFluid_noBase64 + } + } + } +` class ProfileImg extends React.Component { + constructor(props) { + super(props) + this.state = {backWidth: 0} + } + + setBackWidth(newWidth) { + this.setState({backWidth: newWidth}) + } + + render() { - const { id, className, author } = this.props return ( ( -
- {author} -
- )} + render={data => this.renderWithQueryData(data)} />) } + + renderWithQueryData(data) { + const { className, author } = this.props + const _this = this + + function setupMove(div, eventType, extractCoordinates) { + if (div) { + addEventListener(div, eventType, (event) => { + const {x, y} = extractCoordinates(event) + const container = div.parentElement + const {left, top, bottom} = container.getBoundingClientRect() + + const mouseInContainer = y >= top && y <= bottom + + if (mouseInContainer) { + const newWidth = x - left + _this.setBackWidth(Math.max(newWidth, 0)) + } + return !mouseInContainer + }) + } + } + + function setupMouseMove(div) { + setupMove(div, 'mousemove', (event) => { + const { clientX: x, clientY: y } = event + return {x, y} + }) + } + + function setupTouchMove(div) { + setupMove(div, 'touchmove', (event) => { + const { clientX: x, clientY: y } = event.changedTouches[0] + return {x, y} + }) + } + + return ( +
+
+
+
+ {author} + {author} +
+
+ ) + } } export default ProfileImg \ No newline at end of file diff --git a/src/components/ProfileImg/style.scss b/src/components/ProfileImg/style.scss new file mode 100644 index 0000000..68a622e --- /dev/null +++ b/src/components/ProfileImg/style.scss @@ -0,0 +1,19 @@ +@import "../../assets/scss/variables"; +@import "../../assets/scss/mixins"; + +.profile-img { + &-mousemove { + display: none; + } +} + +@include breakpoint-sm { + .profile-img { + &-mousemove { + display: unset; + } + &-touchmove { + display: none; + } + } +} \ No newline at end of file diff --git a/src/components/utility.jsx b/src/components/utility.jsx new file mode 100644 index 0000000..bc42eb4 --- /dev/null +++ b/src/components/utility.jsx @@ -0,0 +1,11 @@ +export function addEventListener(target, type, listener) { + + function _listener(event) { + const shouldContinue = listener(event) + if (!shouldContinue) { + target.removeEventListener(type, _listener) + } + } + + target.addEventListener(type, _listener) +} \ No newline at end of file From df4ea1bedb271466fbf9c38808476405aa86fa0e Mon Sep 17 00:00:00 2001 From: Eyal Roth Date: Thu, 4 Jul 2019 18:37:01 +0300 Subject: [PATCH 03/26] Fix the profile image reveal so it won't "hide" the buttons bellow it (make them unclickable) --- src/components/ProfileImg/index.jsx | 24 ++++++++++-------------- src/components/utility.jsx | 11 ----------- 2 files changed, 10 insertions(+), 25 deletions(-) delete mode 100644 src/components/utility.jsx diff --git a/src/components/ProfileImg/index.jsx b/src/components/ProfileImg/index.jsx index 1a181f2..02b8909 100644 --- a/src/components/ProfileImg/index.jsx +++ b/src/components/ProfileImg/index.jsx @@ -1,7 +1,6 @@ import React from "react" import { StaticQuery, graphql } from "gatsby" import Img from "gatsby-image" -import { addEventListener } from '../utility' import './style.scss' export const squareImage = graphql` @@ -49,19 +48,13 @@ class ProfileImg extends React.Component { function setupMove(div, eventType, extractCoordinates) { if (div) { - addEventListener(div, eventType, (event) => { - const {x, y} = extractCoordinates(event) + div.addEventListener(eventType, (event) => { const container = div.parentElement - const {left, top, bottom} = container.getBoundingClientRect() - - const mouseInContainer = y >= top && y <= bottom - - if (mouseInContainer) { - const newWidth = x - left - _this.setBackWidth(Math.max(newWidth, 0)) - } - return !mouseInContainer - }) + const { x } = extractCoordinates(event) + const { left } = container.getBoundingClientRect() + const newWidth = x - left + _this.setBackWidth(Math.max(newWidth, 0)) + }, {once: true}) } } @@ -122,7 +115,10 @@ class ProfileImg extends React.Component { title={author} alt={author} style={{ - position: "unset", + position: "absolute", + width: "100%", + height: "100%", + top: 0, }} imgStyle={{ width: `${this.state.backWidth}px`, diff --git a/src/components/utility.jsx b/src/components/utility.jsx deleted file mode 100644 index bc42eb4..0000000 --- a/src/components/utility.jsx +++ /dev/null @@ -1,11 +0,0 @@ -export function addEventListener(target, type, listener) { - - function _listener(event) { - const shouldContinue = listener(event) - if (!shouldContinue) { - target.removeEventListener(type, _listener) - } - } - - target.addEventListener(type, _listener) -} \ No newline at end of file From 1e8435a658f3422d276080264925e9c7be62713f Mon Sep 17 00:00:00 2001 From: Eyal Roth Date: Fri, 5 Jul 2019 16:39:19 +0300 Subject: [PATCH 04/26] Make the back profile image reveal only with mouse drag (instead of just mouse hover) --- src/components/ProfileImg/index.jsx | 74 +++++++++++++++++++++++++--- src/components/ProfileImg/style.scss | 6 +++ 2 files changed, 73 insertions(+), 7 deletions(-) diff --git a/src/components/ProfileImg/index.jsx b/src/components/ProfileImg/index.jsx index 02b8909..28d2deb 100644 --- a/src/components/ProfileImg/index.jsx +++ b/src/components/ProfileImg/index.jsx @@ -16,11 +16,34 @@ export const squareImage = graphql` class ProfileImg extends React.Component { constructor(props) { super(props) - this.state = {backWidth: 0} + this.state = { + backWidth: 0, + isMouseUp: true + } + this.toggleMouse = this.toggleMouse.bind(this) + this.setMouseUp = this.setMouseUp.bind(this) + this.setMouseDown = this.setMouseDown.bind(this) } setBackWidth(newWidth) { - this.setState({backWidth: newWidth}) + this.setState({ + backWidth: newWidth + }) + } + + setMouseUp(event) { + this.toggleMouse(event, true) + } + + setMouseDown(event) { + this.toggleMouse(event, false) + } + + toggleMouse(event, isMouseUp) { + const isLeftClick = event.which == 1 + if (isLeftClick) { + this.setState({isMouseUp}) + } } @@ -57,12 +80,31 @@ class ProfileImg extends React.Component { }, {once: true}) } } + + function addToggleMouseListener(target, type, listener) { + target.removeEventListener(type, listener) + target.addEventListener(type, listener) + } + + function setupMouseUp(div) { + if (div && !_this.state.isMouseUp) { + addToggleMouseListener(div, 'mouseup', _this.setMouseUp) + } + } function setupMouseMove(div) { - setupMove(div, 'mousemove', (event) => { - const { clientX: x, clientY: y } = event - return {x, y} - }) + if (div) { + const toggleEvent = (_this.state.isMouseUp) ? 'mousedown' : 'mouseup' + const toggleAction = (_this.state.isMouseUp) ? _this.setMouseDown : _this.setMouseUp + addToggleMouseListener(div, toggleEvent,toggleAction) + } + + if (!_this.state.isMouseUp) { + setupMove(div, 'mousemove', (event) => { + const { clientX: x, clientY: y } = event + return {x, y} + }) + } } function setupTouchMove(div) { @@ -89,7 +131,23 @@ class ProfileImg extends React.Component { height: "100%", left: "-15%", position: "absolute", - zIndex: 1 + background: "transparent", + zIndex: 2 + }} + /> +
@@ -121,6 +180,7 @@ class ProfileImg extends React.Component { top: 0, }} imgStyle={{ + transition: "width 0.1s ease-out", width: `${this.state.backWidth}px`, objectPosition: "left", }} diff --git a/src/components/ProfileImg/style.scss b/src/components/ProfileImg/style.scss index 68a622e..7f4e601 100644 --- a/src/components/ProfileImg/style.scss +++ b/src/components/ProfileImg/style.scss @@ -5,6 +5,9 @@ &-mousemove { display: none; } + &-mouseup { + display: none; + } } @include breakpoint-sm { @@ -12,6 +15,9 @@ &-mousemove { display: unset; } + &-mouseup { + display: unset; + } &-touchmove { display: none; } From 86c1b8812d0a9da634d8d064ef526e0b386341b7 Mon Sep 17 00:00:00 2001 From: Eyal Roth Date: Fri, 5 Jul 2019 20:16:42 +0300 Subject: [PATCH 05/26] Re-design the posts lists for non-mobile (with very little effect on the mobile design) --- src/components/PostList/index.jsx | 15 +++- src/components/PostList/style.scss | 7 +- src/components/PostListItem/index.jsx | 36 +++++++- src/components/PostListItem/style.scss | 114 ++++++++++++++++++++----- 4 files changed, 147 insertions(+), 25 deletions(-) diff --git a/src/components/PostList/index.jsx b/src/components/PostList/index.jsx index b450260..7d1efe1 100644 --- a/src/components/PostList/index.jsx +++ b/src/components/PostList/index.jsx @@ -1,4 +1,5 @@ import React from 'react' +import moment from 'moment' import Layout from '../Layout' import PostListItem from '../PostListItem' import './style.scss' @@ -8,8 +9,20 @@ class PostList extends React.Component { const items = [] const { pageTitle, listTitle } = this.props const posts = this.props.data.allMarkdownRemark.edges + const years = new Set() + posts.forEach(post => { - items.push() + const year = moment(post.node.frontmatter.date).year() + const showYear = !years.has(year) + years.add(year) + + items.push( + + ) }) return ( diff --git a/src/components/PostList/style.scss b/src/components/PostList/style.scss index b203cc0..30f9053 100644 --- a/src/components/PostList/style.scss +++ b/src/components/PostList/style.scss @@ -7,7 +7,7 @@ &__title { @include margin-top(0.5); - font-size: $typographic-base-font-size * 2.5; + font-size: $typographic-base-font-size * 2.2; font-weight: 500; @include margin-bottom(0); text-align: center; @@ -18,7 +18,12 @@ .posts { padding-left: $page-sm-padding-left; padding-right: 5%; + + &__title { + text-align: left; + } } + } @include breakpoint-md { diff --git a/src/components/PostListItem/index.jsx b/src/components/PostListItem/index.jsx index 0dc03d4..ecd75da 100644 --- a/src/components/PostListItem/index.jsx +++ b/src/components/PostListItem/index.jsx @@ -5,6 +5,7 @@ import './style.scss' class PostListItem extends React.Component { render() { + const { showYear } = this.props const { title, date, @@ -43,12 +44,31 @@ class PostListItem extends React.Component { ] } - return ( -
-