+
+ );
+ }
+}
+
+ActionsBar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ navigatorPosition: PropTypes.string.isRequired,
+ isWideScreen: PropTypes.bool.isRequired,
+ setScrollToTop: PropTypes.func.isRequired,
+ setFontSizeIncrease: PropTypes.func.isRequired,
+ categories: PropTypes.array.isRequired,
+ setCategoryFilter: PropTypes.func.isRequired,
+ categoryFilter: PropTypes.string.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ navigatorPosition: state.navigatorPosition,
+ isWideScreen: state.isWideScreen,
+ categoryFilter: state.categoryFilter
+ };
+};
+
+const mapDispatchToProps = {
+ setNavigatorPosition,
+ setNavigatorShape,
+ setScrollToTop,
+ setFontSizeIncrease,
+ setCategoryFilter
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectSheet(styles)(ActionsBar));
diff --git a/src/components/ActionsBar/CategoryFilter.js b/src/components/ActionsBar/CategoryFilter.js
new file mode 100644
index 0000000..70a2f8f
--- /dev/null
+++ b/src/components/ActionsBar/CategoryFilter.js
@@ -0,0 +1,117 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import { MenuItem, MenuList } from "material-ui/Menu";
+import IconButton from "material-ui/IconButton";
+import { Manager, Target, Popper } from "react-popper";
+import ClickAwayListener from "material-ui/utils/ClickAwayListener";
+import Grow from "material-ui/transitions/Grow";
+import Paper from "material-ui/Paper";
+import classNames from "classnames";
+import FilterListIcon from "material-ui-icons/FilterList";
+
+const styles = theme => ({
+ fontSizeSetter: {
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {}
+ },
+ buttonRoot: {
+ "&:hover": {
+ background: "rgba(0, 0, 0, 0.04)"
+ }
+ },
+ buttonLabel: {
+ textTransform: "none",
+ fontSize: "1.4em",
+ color: "#777"
+ },
+ popperClose: {
+ pointerEvents: "none"
+ },
+ popper: {
+ zIndex: 1
+ }
+});
+
+class CategoryFilter extends React.Component {
+ state = {
+ anchorEl: null,
+ open: false
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timeout);
+ }
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ handleClose = () => {
+ if (!this.state.open) {
+ return;
+ }
+
+ this.timeout = setTimeout(() => {
+ this.setState({ open: false });
+ });
+ };
+
+ handleFiltering = e => {
+ const category = e.target.innerText.trim();
+ this.props.filterCategory(category);
+ this.handleClose();
+ };
+
+ render() {
+ const { classes, categories } = this.props;
+ const { anchorEl, open } = this.state;
+
+ return (
+
+ );
+ }
+}
+
+CategoryFilter.propTypes = {
+ classes: PropTypes.object.isRequired,
+ categories: PropTypes.array.isRequired,
+ filterCategory: PropTypes.func.isRequired
+};
+
+export default injectSheet(styles)(CategoryFilter);
diff --git a/src/components/ActionsBar/FontSetter.js b/src/components/ActionsBar/FontSetter.js
new file mode 100644
index 0000000..fb39489
--- /dev/null
+++ b/src/components/ActionsBar/FontSetter.js
@@ -0,0 +1,109 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import { MenuItem, MenuList } from "material-ui/Menu";
+import IconButton from "material-ui/IconButton";
+import { Manager, Target, Popper } from "react-popper";
+import ClickAwayListener from "material-ui/utils/ClickAwayListener";
+import Grow from "material-ui/transitions/Grow";
+import Paper from "material-ui/Paper";
+import classNames from "classnames";
+import FormatSizeIcon from "material-ui-icons/FormatSize";
+
+const styles = theme => ({
+ fontSizeSetter: {
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {}
+ },
+ buttonRoot: {
+ "&:hover": {
+ background: "rgba(0, 0, 0, 0.04)"
+ }
+ },
+ buttonLabel: {
+ textTransform: "none",
+ fontSize: "1.4em",
+ color: "#777"
+ },
+ popperClose: {
+ pointerEvents: "none"
+ }
+});
+
+class FontSetter extends React.Component {
+ state = {
+ anchorEl: null,
+ open: false
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timeout);
+ }
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ handleClose = () => {
+ if (!this.state.open) {
+ return;
+ }
+
+ this.timeout = setTimeout(() => {
+ this.setState({ open: false });
+ });
+ };
+
+ handleSetting = e => {
+ const val = e.target.innerText.replace("%", "");
+ const factor = +val / 100;
+ this.props.increaseFont(factor);
+ this.handleClose();
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { anchorEl, open } = this.state;
+
+ return (
+
+ );
+ }
+}
+
+FontSetter.propTypes = {
+ classes: PropTypes.object.isRequired,
+ increaseFont: PropTypes.func.isRequired
+};
+
+export default injectSheet(styles)(FontSetter);
diff --git a/src/components/ActionsBar/index.js b/src/components/ActionsBar/index.js
new file mode 100644
index 0000000..a3ceda4
--- /dev/null
+++ b/src/components/ActionsBar/index.js
@@ -0,0 +1 @@
+export { default } from "./ActionsBar";
diff --git a/src/components/ContactForm/ContactForm.js b/src/components/ContactForm/ContactForm.js
new file mode 100644
index 0000000..e56f25c
--- /dev/null
+++ b/src/components/ContactForm/ContactForm.js
@@ -0,0 +1,149 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import Button from "material-ui/Button";
+import { navigateTo } from "gatsby-link";
+import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
+
+function encode(data) {
+ return Object.keys(data)
+ .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+ .join("&");
+}
+
+const styles = theme => ({
+ submit: {
+ margin: "3em 0"
+ //width: "100%"
+ },
+ multilineInput: {
+ lineHeight: 1.4,
+ fontSize: "1.2em"
+ },
+ singleLineInput: {
+ lineHeight: 1.4,
+ fontSize: "1.2em",
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
+ width: "47%",
+ marginLeft: "3%",
+ "&:first-child": {
+ marginRight: "3%",
+ marginLeft: 0
+ }
+ }
+ },
+ submitError: {
+ background: "red",
+ color: "white"
+ }
+});
+
+class ContactForm extends React.Component {
+ state = {
+ name: "",
+ email: "",
+ message: "",
+ submitError: ""
+ };
+
+ handleChange = event => {
+ const target = event.target;
+ const value = target.value;
+ const name = target.name;
+
+ this.setState({ [name]: value });
+ };
+
+ handleNetworkError = e => {
+ this.setState({ submitError: "There was a network error." });
+ };
+
+ handleSubmit = e => {
+ fetch("/", {
+ method: "POST",
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ body: encode({ "form-name": "contact", ...this.state })
+ })
+ .then(() => {
+ console.log("Form submission success");
+ navigateTo("/success");
+ })
+ .catch(error => {
+ console.error("Form submission error:", error);
+ this.handleNetworkError();
+ });
+
+ e.preventDefault();
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { email, name, message, submitError } = this.state;
+
+ return (
+
+
+
+ {(isWideScreen || navigatorPosition !== "is-aside") && (
+
+
+
+
+ {navigatorPosition === "is-aside" &&
+ {this.state.fullscreen ?
+ )}
+
+
+
+ {submitError}
} +
+ 
+
+
+ + {config.infoTitle.replace(/ /g, "\u00a0")} + {config.infoTitleNote} +
+
+ {items.map(item => {
+ const Icon = icons[item.name];
+ return (
+
+
+ );
+};
+
+Socialcons.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(Socialcons);
diff --git a/src/components/InfoBox/StackIcons.js b/src/components/InfoBox/StackIcons.js
new file mode 100644
index 0000000..30e3485
--- /dev/null
+++ b/src/components/InfoBox/StackIcons.js
@@ -0,0 +1,95 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+
+import AlgoliaIcon from "../../images/svg-icons/algolia.svg";
+import ReactIcon from "../../images/svg-icons/react.svg";
+import GraphqlIcon from "../../images/svg-icons/graphql.svg";
+import JssIcon from "../../images/svg-icons/jss.svg";
+import MaterialUiIcon from "../../images/svg-icons/material-ui.svg";
+import ReduxIcon from "../../images/svg-icons/redux.svg";
+import GatsbyIcon from "../../images/svg-icons/gatsby.svg";
+import WebpackIcon from "../../images/svg-icons/webpack.svg";
+import BabelIcon from "../../images/svg-icons/babel.svg";
+import NetlifyIcon from "../../images/svg-icons/netlify.svg";
+
+const styles = theme => ({
+ stack: {
+ display: "none",
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ display: "block",
+ position: "absolute",
+ left: 0,
+ bottom: 0,
+ width: "100%",
+ padding: "1em 2em"
+ }
+ },
+ box: {
+ display: "flex",
+ justifyContent: "center",
+ flexWrap: "wrap"
+ },
+ link: {
+ display: "inline-block",
+ padding: "8px"
+ },
+ svg: {
+ width: "22px",
+ height: "22px"
+ },
+ header: {
+ textAlign: "center",
+ fontSize: ".85em",
+ letterSpacing: ".3em",
+ width: "100%",
+ margin: "0 0 .8em 0",
+ fontWeight: 300
+ }
+});
+
+const StackIcons = props => {
+ const { classes } = props;
+
+ const items = [
+ { name: "gatsby", url: "https://www.gatsbyjs.org/", comp: GatsbyIcon },
+ { name: "react", url: "https://reactjs.org/", comp: ReactIcon },
+ { name: "graphql", url: "http://graphql.org/", comp: GraphqlIcon },
+ { name: "jss", url: "http://cssinjs.org/", comp: JssIcon },
+ { name: "material-ui", url: "https://material-ui-next.com/", comp: MaterialUiIcon },
+ { name: "redux", url: "https://redux.js.org/", comp: ReduxIcon },
+ { name: "algolia", url: "https://www.algolia.com/", comp: AlgoliaIcon },
+ { name: "webpack", url: "https://webpack.js.org/", comp: WebpackIcon },
+ { name: "babel", url: "https://babeljs.io/", comp: BabelIcon },
+ { name: "netlify", url: "https://www.netlify.com/", comp: NetlifyIcon }
+ ];
+
+ return (
+
+
+ );
+};
+
+StackIcons.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(StackIcons);
diff --git a/src/components/InfoBox/index.js b/src/components/InfoBox/index.js
new file mode 100644
index 0000000..303f07e
--- /dev/null
+++ b/src/components/InfoBox/index.js
@@ -0,0 +1 @@
+export { default } from "./InfoBox";
diff --git a/src/components/Main/Article.js b/src/components/Main/Article.js
new file mode 100644
index 0000000..b9fdff4
--- /dev/null
+++ b/src/components/Main/Article.js
@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+
+const styles = theme => ({
+ article: {
+ maxWidth: theme.main.sizes.articleMaxWidth,
+ margin: "0 auto",
+ padding: `calc(${theme.bars.sizes.infoBar}px + 1.5rem) 1.5rem 1.5rem 1.5rem`,
+ "& strong, & b": {
+ letterSpacing: "-.02em"
+ },
+ "& a": {
+ fontWeight: "bold",
+ letterSpacing: "-.02em",
+ textShadow: `
+ 2px 2px ${theme.main.colors.background},
+ -2px 2px ${theme.main.colors.background},
+ -2px -2px ${theme.main.colors.background},
+ -2px 2px ${theme.main.colors.background},
+ -2px 0 ${theme.main.colors.background},
+ 2px 0 ${theme.main.colors.background}
+ `,
+ display: "inline-block",
+ textDecoration: "none",
+ transition: "0.3s",
+ "&:hover": {
+ color: theme.base.colors.linkHover
+ }
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
+ padding: `calc(2.5rem + ${theme.bars.sizes.infoBar}px) 3.5rem 2.5rem`
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ padding: "3.5rem"
+ }
+ }
+});
+
+const Article = props => {
+ const { children, classes } = props;
+
+ return built with:
+
+ {items.map(item => {
+ const Icon = item.comp;
+ return (
+
+
+ {children}
;
+ }
+};
+
+Content.propTypes = {
+ classes: PropTypes.object.isRequired,
+ html: PropTypes.string,
+ children: PropTypes.node,
+ setFontSizeIncrease: PropTypes.func.isRequired,
+ fontSizeIncrease: PropTypes.number.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ fontSizeIncrease: state.fontSizeIncrease
+ };
+};
+
+const mapDispatchToProps = {
+ setFontSizeIncrease
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectSheet(styles)(Content));
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
new file mode 100644
index 0000000..b6cd49c
--- /dev/null
+++ b/src/components/Main/Main.js
@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import SpringScrollbars from "../SpringScrollbars";
+
+const styles = theme => ({
+ main: {
+ position: "absolute",
+ top: 0,
+ left: 0,
+ bottom: 0,
+ width: "100%",
+ animationName: "main-entry",
+ animationDuration: ".5s",
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ width: `calc(100vw - ${theme.info.sizes.width}px - ${theme.bars.sizes.actionsBar}px)`,
+ left: `${theme.info.sizes.width}px`
+ }
+ },
+ article: {
+ maxWidth: theme.main.sizes.maxWidth,
+ margin: "0 auto",
+ padding: `calc(1.5rem + ${theme.info.sizes.height}px) 1.8rem 1.5rem 1.5rem`,
+ "& strong, & b": {
+ letterSpacing: "-.02em",
+ fontWeight: 600
+ },
+ "& a": {
+ fontWeight: 600,
+ letterSpacing: "-.02em",
+ textShadow: `
+ 2px 2px ${theme.main.colors.background},
+ -2px 2px ${theme.main.colors.background},
+ -2px -2px ${theme.main.colors.background},
+ -2px 2px ${theme.main.colors.background},
+ -2px 0 ${theme.main.colors.background},
+ 2px 0 ${theme.main.colors.background}
+ `,
+ display: "inline-block",
+ textDecoration: "none",
+ transition: "0.3s",
+ "&:hover": {
+ color: theme.base.colors.linkHover
+ }
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
+ padding: `calc(2.5rem + ${theme.info.sizes.height}px) 3.5rem 2.5rem`
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ padding: "3.5rem"
+ }
+ },
+ "@keyframes main-entry": {
+ "0%": {
+ opacity: 0,
+ transform: "translateY(20px)"
+ },
+ "100%": {
+ opacity: 1,
+ transform: "translateY(0)"
+ }
+ }
+});
+
+const Main = props => {
+ const { classes, children } = props;
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+List.propTypes = {
+ classes: PropTypes.object.isRequired,
+ posts: PropTypes.array.isRequired,
+ linkOnClick: PropTypes.func.isRequired,
+ expandOnClick: PropTypes.func.isRequired,
+ navigatorPosition: PropTypes.string.isRequired,
+ navigatorShape: PropTypes.string.isRequired,
+ categoryFilter: PropTypes.string.isRequired,
+ removeFilter: PropTypes.func.isRequired
+};
+
+export default injectSheet(styles)(List);
diff --git a/src/components/Navigator/ListHeader.js b/src/components/Navigator/ListHeader.js
new file mode 100644
index 0000000..bed29a4
--- /dev/null
+++ b/src/components/Navigator/ListHeader.js
@@ -0,0 +1,124 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import IconButton from "material-ui/IconButton";
+
+import CloseIcon from "material-ui-icons/Close";
+import ExpandLessIcon from "material-ui-icons/ExpandLess";
+
+const styles = theme => ({
+ closed: {
+ display: "none",
+ ".is-aside.closed &, .moving-featured.closed &": {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ position: "absolute",
+ top: 0,
+ left: 0,
+ width: "100%",
+ margin: 0,
+ height: `${theme.navigator.sizes.closedHeight}px`,
+ padding: "0 30px 0 40px"
+ },
+ "& h3": {
+ fontSize: "1.1em",
+ color: theme.navigator.colors.postsHeader,
+ fontWeight: 600,
+ margin: "-.2em 0 0 0",
+ textTransform: "uppercase",
+ "& small": {
+ fontSize: ".6em",
+ display: "block",
+ margin: "0 0 .1em",
+ fontWeight: 300,
+ letterSpacing: ".2em"
+ }
+ },
+ expand: {
+ position: "relative"
+ }
+ },
+ filter: {
+ margin: `0 calc(-.5rem + ${theme.base.sizes.linesMargin}) 1em calc(-.5rem + ${
+ theme.base.sizes.linesMargin
+ })`,
+ position: "relative",
+ fontSize: "1.2em",
+ lineHeight: 1,
+ color: theme.base.colors.accent,
+ borderBottom: `1px solid ${theme.base.colors.lines}`,
+ padding: "0 1em 1em",
+ fontWeight: 300,
+ "& strong": {
+ fontWeight: 600,
+ display: "block"
+ },
+ "& small": {
+ display: "block",
+ margin: "0 0 .3em 0"
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ margin: "0 0 1em 0",
+ padding: "0 1em 1.5em",
+ ".is-aside &": {
+ padding: "0 0 1em .5em",
+ margin: `0 calc(-.5rem + ${theme.base.sizes.linesMargin}) 1em calc(-.5rem + ${
+ theme.base.sizes.linesMargin
+ })`
+ }
+ }
+ },
+ clear: {
+ position: "absolute",
+ top: 0,
+ right: 0
+ }
+});
+
+const ListHeader = props => {
+ const { classes, expandOnClick, categoryFilter, navigatorShape, removeFilter } = props;
+
+ return (
+
+
+ -
+ {posts &&
+ posts.map((post, i) => (
+
+
+
+
+ )}
+ {navigatorShape === "open" &&
+ categoryFilter !== "all posts" && (
+ List of posts
+
+ Active category filter: {categoryFilter}
+
+
+
+ )}
+
+
+
+ 
+
+
+ {/*![]()
*/}
+
+
+
+
+ {post.node.frontmatter.title}
+ {post.node.frontmatter.subTitle &&{post.node.frontmatter.subTitle}
} +{title}
+ {algolia && ( + +
+
+ );
+};
+
+PostAuthor.propTypes = {
+ classes: PropTypes.object.isRequired,
+ author: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(PostAuthor);
diff --git a/src/components/Post/PostComments.js b/src/components/Post/PostComments.js
new file mode 100644
index 0000000..9f27310
--- /dev/null
+++ b/src/components/Post/PostComments.js
@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+require("core-js/fn/array/find");
+
+import config from "../../../content/meta/config";
+
+const styles = theme => ({
+ postComments: {
+ margin: "3em 0 0",
+ padding: "3em 0 0",
+ borderTop: "1px solid #ddd"
+ }
+});
+
+class PostComments extends React.Component {
+ componentDidMount() {
+ if (typeof FB !== "undefined") {
+ //eslint-disable-next-line no-undef
+ FB.XFBML.parse();
+ }
+ }
+
+ render() {
+ const { classes, post, slug } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+PostComments.propTypes = {
+ classes: PropTypes.object.isRequired,
+ post: PropTypes.object.isRequired,
+ slug: PropTypes.string.isRequired
+};
+
+export default injectSheet(styles)(PostComments);
diff --git a/src/components/Post/PostFooter.js b/src/components/Post/PostFooter.js
new file mode 100644
index 0000000..ffa4b0d
--- /dev/null
+++ b/src/components/Post/PostFooter.js
@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+require("core-js/fn/array/find");
+
+import asyncComponent from "../common/AsyncComponent/";
+import PostAuthor from "./PostAuthor";
+import PostComments from "./PostComments";
+
+const styles = theme => ({
+ footer: {
+ color: theme.main.colors.footer,
+ fontSize: `${theme.main.fonts.footer.size}em`,
+ lineHeight: theme.main.fonts.footer.lineHeight,
+ "& p": {
+ margin: 0
+ }
+ }
+});
+
+const PostShare = asyncComponent(() =>
+ import("./PostShare")
+ .then(module => {
+ return module;
+ })
+ .catch(error => {})
+);
+
+const PostFooter = ({ classes, author, post, slug }) => {
+ return (
+
+ );
+};
+
+PostFooter.propTypes = {
+ classes: PropTypes.object.isRequired,
+ author: PropTypes.object.isRequired,
+ post: PropTypes.object.isRequired,
+ slug: PropTypes.string.isRequired
+};
+
+export default injectSheet(styles)(PostFooter);
diff --git a/src/components/Post/PostHeader.js b/src/components/Post/PostHeader.js
new file mode 100644
index 0000000..dd5d047
--- /dev/null
+++ b/src/components/Post/PostHeader.js
@@ -0,0 +1,69 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+
+const styles = theme => ({
+ header: {
+ margin: "0 0 3em"
+ },
+ title: {
+ color: theme.main.colors.title,
+ fontSize: `${theme.main.fonts.title.size}em`,
+ letterSpacing: "-0.04em",
+ fontWeight: theme.main.fonts.title.weight,
+ lineHeight: theme.main.fonts.title.lineHeight,
+ margin: "0 0 0.4em",
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
+ fontSize: `${theme.main.fonts.title.sizeM}em`
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ fontSize: `${theme.main.fonts.title.sizeL}em`,
+ letterSpacing: "-0.05em"
+ }
+ },
+ subTitle: {
+ color: theme.main.colors.subTitle,
+ fontSize: `${theme.main.fonts.subTitle.size}em`,
+ lineHeight: theme.main.fonts.subTitle.lineHeight,
+ fontWeight: theme.main.fonts.subTitle.weight,
+ [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
+ fontSize: `${theme.main.fonts.subTitle.sizeM}em`
+ },
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ fontSize: `${theme.main.fonts.subTitle.sizeL}em`
+ }
+ },
+ meta: {
+ fontSize: `${theme.main.fonts.meta.size}em`,
+ fontWeight: theme.main.fonts.meta.weight,
+ color: theme.main.colors.meta
+ }
+});
+
+const PostHeader = props => {
+ const { classes, title, subTitle, date } = props;
+
+ function myDate(dateString) {
+ const dateObj = new Date(dateString);
+ const dateToShow = dateObj.toDateString();
+
+ return dateToShow;
+ }
+
+ return (
+ {title}
+{subTitle}
+{myDate(date)}
+
+ SHARE
+
+ );
+ }
+}
+
+PostShare.propTypes = {
+ post: PropTypes.object.isRequired,
+ classes: PropTypes.object.isRequired,
+ slug: PropTypes.string.isRequired
+};
+
+export default injectSheet(styles)(PostShare);
diff --git a/src/components/Post/index.js b/src/components/Post/index.js
new file mode 100644
index 0000000..705660a
--- /dev/null
+++ b/src/components/Post/index.js
@@ -0,0 +1 @@
+export { default } from "./Post";
diff --git a/src/components/Search/Hit.js b/src/components/Search/Hit.js
new file mode 100644
index 0000000..c57e3ae
--- /dev/null
+++ b/src/components/Search/Hit.js
@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import Link from "gatsby-link";
+
+const styles = theme => ({
+ link: {
+ padding: ".5em 0 1em 1em",
+ position: "relative",
+ fontSize: "1.2em",
+ display: "block",
+ width: "100%",
+ color: "#666",
+ "&::before": {
+ content: `"•"`,
+ position: "absolute",
+ top: ".5em",
+ left: ".1em",
+ color: theme.base.colors.accent
+ },
+ "& span": {
+ fontWeight: 300,
+ display: "block",
+ fontSize: ".9em",
+ margin: ".2em 0 0 0"
+ }
+ }
+});
+
+const Hit = props => {
+ const { classes, hit } = props;
+
+ return (
+
+ {hit.frontmatter.title}
+ {hit.frontmatter.subTitle && {hit.frontmatter.subTitle}}
+
+ );
+};
+
+Hit.propTypes = {
+ classes: PropTypes.object.isRequired,
+ hit: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(Hit);
diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js
new file mode 100644
index 0000000..6a807e7
--- /dev/null
+++ b/src/components/Search/Search.js
@@ -0,0 +1,107 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import { InstantSearch, SearchBox, Hits, Stats, Pagination } from "react-instantsearch/dom";
+
+import Hit from "./Hit";
+
+const styles = theme => ({
+ search: {
+ marginTop: "-1em",
+ "& .ais-SearchBox": {
+ width: "100%"
+ },
+ "& .ais-SearchBox-form": {
+ position: "relative",
+ borderBottom: "1px solid #aaa",
+ display: "flex",
+ justifyContent: "space-between"
+ },
+ "& .ais-SearchBox-input": {
+ border: "none",
+ fontFamily: theme.base.fonts.styledFamily,
+ padding: ".2em",
+ fontSize: "1.4em",
+ flexGrow: 1
+ },
+ "& .ais-SearchBox-submit, & .ais-SearchBox-reset": {
+ background: "none",
+ border: "none",
+ fill: "#666",
+ flexGrow: 0
+ },
+ "& .ais-Stats": {
+ margin: ".5em 0 2em .3em",
+ fontSize: ".9em",
+ color: "#999",
+ display: "block"
+ },
+ "& .ais-Hits-list": {
+ listStyle: "none",
+ padding: 0
+ },
+ "& .ais-Pagination-list": {
+ display: "flex",
+ listStyle: "none",
+ justifyContent: "center",
+ padding: 0
+ },
+ "& .ais-Pagination-item": {
+ "& a, & span": {
+ color: "#666",
+ fontSize: "1.2em",
+ display: "block",
+ padding: ".5em .5em 2em",
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ fontSize: "1.3em",
+ padding: ".5em .7em 0"
+ }
+ },
+ "& a": {
+ "&:hover": {
+ color: theme.base.colors.accent
+ }
+ },
+ "&.ais-Pagination-item--firstPage, &.ais-Pagination-item--previousPage, &.ais-Pagination-item--nextPage": {
+ "& a, & span": {
+ padding: ".4em .5em .6em",
+ [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+ padding: ".4em .7em .6em"
+ }
+ }
+ }
+ },
+ "& a": {
+ fontWeight: 400
+ }
+ }
+});
+
+const Search = props => {
+ const { classes, algolia } = props;
+
+ return (
+
+
+
+
+
+ {count =>
+
+
+
+ {count =>
+
+
+
+ {count =>
+
+
+ {filter(count)}
}
+ {filter(count)}
}
+ {filter(count)}
}
+
+ {algolia &&
+ algolia.appId && (
+
+
+ )}
+
+ );
+};
+
+Search.propTypes = {
+ classes: PropTypes.object.isRequired,
+ algolia: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(Search);
diff --git a/src/components/Search/index.js b/src/components/Search/index.js
new file mode 100644
index 0000000..4ff9149
--- /dev/null
+++ b/src/components/Search/index.js
@@ -0,0 +1 @@
+export { default } from "./Search";
diff --git a/src/components/Seo/Seo.js b/src/components/Seo/Seo.js
new file mode 100644
index 0000000..c8dcd4a
--- /dev/null
+++ b/src/components/Seo/Seo.js
@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Helmet from "react-helmet";
+import config from "../../../content/meta/config";
+
+const Seo = props => {
+ const { data, facebook } = props;
+ const postTitle = ((data || {}).frontmatter || {}).title;
+ const postDescription = ((data || {}).frontmatter || {}).description;
+ const postCover = ((data || {}).frontmatter || {}).cover;
+ const postSlug = ((data || {}).fields || {}).slug;
+
+ const title = postTitle ? `${postTitle} - ${config.shortSiteTitle}` : config.siteTitle;
+ const description = postDescription ? postDescription : config.siteDescription;
+ const image = postCover ? postCover : config.siteImage;
+ const url = config.siteUrl + config.pathPrefix + postSlug;
+
+ return (
+ Loading...
;
+ }
+ }
+ return AsyncComponent;
+}
diff --git a/src/components/common/AsyncComponent/index.js b/src/components/common/AsyncComponent/index.js
new file mode 100644
index 0000000..6df465d
--- /dev/null
+++ b/src/components/common/AsyncComponent/index.js
@@ -0,0 +1 @@
+export { default } from "./AsyncComponent";
diff --git a/src/components/common/Loading/Loading.js b/src/components/common/Loading/Loading.js
new file mode 100644
index 0000000..42c3681
--- /dev/null
+++ b/src/components/common/Loading/Loading.js
@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import { CircularProgress } from "material-ui/Progress";
+
+const styles = theme => ({
+ loading: {
+ display: "flex",
+ background: props =>
+ props.overrides && props.overrides.background
+ ? props.overrides.background
+ : theme.base.colors.background,
+ position: "absolute",
+ left: props => (props.overrides && props.overrides.left ? props.overrides.left : 0),
+ right: props => (props.overrides && props.overrides.right ? props.overrides.right : 0),
+ top: "0",
+ width: props => (props.overrides && props.overrides.width ? props.overrides.width : "100%"),
+ height: props => (props.overrides && props.overrides.height ? props.overrides.height : "100%"),
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ "&::after": {
+ content: props => (props.afterLeft || props.afterRight ? `""` : ``),
+ position: "absolute",
+ right: props => (props.afterRight ? 0 : ""),
+ left: props => (props.afterLeft ? 0 : ""),
+ top: theme.base.sizes.linesMargin,
+ bottom: theme.base.sizes.linesMargin,
+ width: 0,
+ borderRight: `1px solid ${theme.base.colors.lines}`
+ }
+ },
+ progress: {}
+});
+
+const Loading = props => {
+ const { classes, progressSize } = props;
+
+ return (
+
+
+ );
+};
+
+Loading.propTypes = {
+ classes: PropTypes.object.isRequired,
+ progressSize: PropTypes.number,
+ overrides: PropTypes.object
+};
+
+export default injectSheet(styles)(Loading);
diff --git a/src/components/common/Loading/index.js b/src/components/common/Loading/index.js
new file mode 100644
index 0000000..61edb38
--- /dev/null
+++ b/src/components/common/Loading/index.js
@@ -0,0 +1 @@
+export { default } from "./Loading";
diff --git a/src/favicon.png b/src/favicon.png
new file mode 100644
index 0000000..6a0ef56
Binary files /dev/null and b/src/favicon.png differ
diff --git a/src/html.js b/src/html.js
new file mode 100644
index 0000000..f2a6e71
--- /dev/null
+++ b/src/html.js
@@ -0,0 +1,52 @@
+/* eslint react/prop-types: 0 */
+import React from "react";
+
+let stylesStr;
+if (process.env.NODE_ENV === `production`) {
+ try {
+ stylesStr = require(`!raw-loader!../public/styles.css`);
+ } catch (e) {
+ console.log(e);
+ }
+}
+
+module.exports = class HTML extends React.Component {
+ render() {
+ let css;
+ if (process.env.NODE_ENV === `production`) {
+ css = ;
+ }
+ return (
+
+
+
+
+
+ {this.props.headComponents}
+ {css}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.props.preBodyComponents}
+
+ {this.props.postBodyComponents}
+
+
+ );
+ }
+};
diff --git a/src/images/app-icons/apple-icon.png b/src/images/app-icons/apple-icon.png
new file mode 100644
index 0000000..9a748f9
Binary files /dev/null and b/src/images/app-icons/apple-icon.png differ
diff --git a/src/images/app-icons/icon.png b/src/images/app-icons/icon.png
new file mode 100644
index 0000000..6a0ef56
Binary files /dev/null and b/src/images/app-icons/icon.png differ
diff --git a/src/images/jpg/avatar.jpg b/src/images/jpg/avatar.jpg
new file mode 100644
index 0000000..c301b51
Binary files /dev/null and b/src/images/jpg/avatar.jpg differ
diff --git a/src/images/svg-icons/algolia-full.svg b/src/images/svg-icons/algolia-full.svg
new file mode 100644
index 0000000..4702423
--- /dev/null
+++ b/src/images/svg-icons/algolia-full.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/images/svg-icons/algolia.svg b/src/images/svg-icons/algolia.svg
new file mode 100644
index 0000000..3f980ac
--- /dev/null
+++ b/src/images/svg-icons/algolia.svg
@@ -0,0 +1,2 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/babel.svg b/src/images/svg-icons/babel.svg
new file mode 100644
index 0000000..a06dfff
--- /dev/null
+++ b/src/images/svg-icons/babel.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/images/svg-icons/email.svg b/src/images/svg-icons/email.svg
new file mode 100644
index 0000000..b3a6788
--- /dev/null
+++ b/src/images/svg-icons/email.svg
@@ -0,0 +1 @@
+
diff --git a/src/images/svg-icons/facebook.svg b/src/images/svg-icons/facebook.svg
new file mode 100644
index 0000000..241e3a6
--- /dev/null
+++ b/src/images/svg-icons/facebook.svg
@@ -0,0 +1 @@
+
diff --git a/src/images/svg-icons/gatsby.svg b/src/images/svg-icons/gatsby.svg
new file mode 100644
index 0000000..f9abc54
--- /dev/null
+++ b/src/images/svg-icons/gatsby.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/github.svg b/src/images/svg-icons/github.svg
new file mode 100644
index 0000000..4c2fb18
--- /dev/null
+++ b/src/images/svg-icons/github.svg
@@ -0,0 +1 @@
+
diff --git a/src/images/svg-icons/graphql.svg b/src/images/svg-icons/graphql.svg
new file mode 100644
index 0000000..6a8a83a
--- /dev/null
+++ b/src/images/svg-icons/graphql.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/jss.svg b/src/images/svg-icons/jss.svg
new file mode 100644
index 0000000..bc19f85
--- /dev/null
+++ b/src/images/svg-icons/jss.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/material-ui.svg b/src/images/svg-icons/material-ui.svg
new file mode 100644
index 0000000..a871000
--- /dev/null
+++ b/src/images/svg-icons/material-ui.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/netlify.svg b/src/images/svg-icons/netlify.svg
new file mode 100644
index 0000000..548b6b1
--- /dev/null
+++ b/src/images/svg-icons/netlify.svg
@@ -0,0 +1,33 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/react.svg b/src/images/svg-icons/react.svg
new file mode 100644
index 0000000..a7fa409
--- /dev/null
+++ b/src/images/svg-icons/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/svg-icons/redux.svg b/src/images/svg-icons/redux.svg
new file mode 100644
index 0000000..63324e6
--- /dev/null
+++ b/src/images/svg-icons/redux.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/images/svg-icons/twitter.svg b/src/images/svg-icons/twitter.svg
new file mode 100644
index 0000000..0924960
--- /dev/null
+++ b/src/images/svg-icons/twitter.svg
@@ -0,0 +1 @@
+
diff --git a/src/images/svg-icons/webpack.svg b/src/images/svg-icons/webpack.svg
new file mode 100644
index 0000000..1ed7aa9
--- /dev/null
+++ b/src/images/svg-icons/webpack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 0000000..367507e
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,188 @@
+import React from "react";
+import injectSheet from "react-jss";
+import { MuiThemeProvider } from "material-ui/styles";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import theme from "../styles/theme";
+import globals from "../styles/globals";
+
+import { setFontSizeIncrease, setIsWideScreen } from "../state/store";
+
+import asyncComponent from "../components/common/AsyncComponent/";
+import Loading from "../components/common/Loading/";
+import Navigator from "../components/Navigator/";
+import ActionsBar from "../components/ActionsBar/";
+import InfoBar from "../components/InfoBar/";
+
+import { isWideScreen, timeoutThrottlerHandler } from "../utils/helpers";
+
+const InfoBox = asyncComponent(
+ () =>
+ import("../components/InfoBox/")
+ .then(module => {
+ return module;
+ })
+ .catch(error => {}),
+
+ {children()}
+
+
+
+ );
+ }
+}
+
+Index.propTypes = {
+ data: PropTypes.object.isRequired,
+ navigatorPosition: PropTypes.string.isRequired,
+ setNavigatorPosition: PropTypes.func.isRequired,
+ isWideScreen: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ navigatorPosition: state.navigatorPosition,
+ isWideScreen: state.isWideScreen
+ };
+};
+
+const mapDispatchToProps = {
+ setNavigatorPosition,
+ setNavigatorShape
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Index);
+
+//eslint-disable-next-line no-undef
+export const pageQuery = graphql`
+ query IndexQuery {
+ site {
+ siteMetadata {
+ facebook {
+ appId
+ }
+ }
+ }
+ }
+`;
diff --git a/src/pages/search.js b/src/pages/search.js
new file mode 100644
index 0000000..ca9d819
--- /dev/null
+++ b/src/pages/search.js
@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+require("core-js/fn/array/find");
+
+import Main from "../components/Main";
+import Article from "../components/Main/Article";
+import PageHeader from "../components/Page/PageHeader";
+import Search from "../components/Search";
+
+const SearchPage = props => {
+ const { data } = props;
+
+ return (
+