diff --git a/README.md b/README.md index 0b76180..ee45b26 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ A statically rendered, progressive web app and personal blog created with: * `clean`: deletes `/public` ### hooks * `prebuild`: runs clean -* `precommit`: runs prettier +* `precommit`: runs flow eslint and prettier * `predeploy`: runs build ## To Do diff --git a/package.json b/package.json index dfb77a8..ef67f08 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "author": { "name": "Fabrizio A. Vitale" }, - "version": "1.0.3", + "version": "1.0.4", "dependencies": { "@material-ui/core": "^1.1.0", "@material-ui/icons": "^1.1.0", @@ -47,7 +47,13 @@ "slugify": "^1.3.0", "typeface-roboto": "^0.0.54" }, - "keywords": ["gatsby", "blog", "programming", "notes", "react"], + "keywords": [ + "gatsby", + "blog", + "programming", + "notes", + "react" + ], "license": "MIT", "scripts": { "clean": "rimraf public", @@ -60,9 +66,15 @@ "format": "prettier --write 'src/**/*.js'", "test": "echo \"Error: no test specified\" && exit 1", "flow": "flow", - "precommit": "lint-staged" + "precommit": "flow && lint-staged" }, "lint-staged": { - "src/**/*.{js,jsx,json,css}": ["prettier", "git add"] + "src/**/*.{js,jsx}": [ + "eslint --max-warnings 0" + ], + "src/**/*.{js,jsx,json,css}": [ + "prettier", + "git add" + ] } } diff --git a/src/components/BreadCrumb.js b/src/components/BreadCrumb.js index e39b354..d4c69dc 100644 --- a/src/components/BreadCrumb.js +++ b/src/components/BreadCrumb.js @@ -8,7 +8,8 @@ type Link = {| type Props = { createLink: (link: Link, index: number) => React.ElementType, - links: Array + links: Array, + separator: React.Node }; const style = { @@ -18,12 +19,10 @@ const style = { listStyle: "none" }, listItem: { - "&+&::before": { - color: "inherit", - padding: 4, - fontWeight: "bold", - content: '"/"' - } + display: "flex", + flexFlow: "row wrap", + alignItems: "center", + justifyContent: "flex-start" } }; @@ -34,17 +33,19 @@ class Breadcrumb extends React.Component { {link.label} ), - links: [] + links: [], + separator: "/" }; render() { - const { createLink, links, classes, ...rest } = this.props; + const { createLink, links, classes, separator, ...rest } = this.props; let list = []; for (let i = 0, len = links.length; i < len; i++) { list.push(
  • + {i > 0 &&
    {separator}
    } {createLink(links[i], i, len)}
  • ); diff --git a/src/components/BreadcrumbItem.js b/src/components/BreadcrumbItem.js index ad4cd4c..3c188f8 100644 --- a/src/components/BreadcrumbItem.js +++ b/src/components/BreadcrumbItem.js @@ -1,30 +1,33 @@ -import React from "react"; +import * as React from "react"; import Link from "gatsby-link"; import withStyles from "@material-ui/core/styles/withStyles"; type Props = { classes: MUIClasses, to: string, - current: boolean + current: boolean, + label?: string, + children?: React.Node }; const style = theme => ({ link: { + display: "block", + margin: "0 2px", cursor: "pointer", fontSize: "0.8em", color: "inherit", fontWeight: "bold", outline: "none", - borderRadius: 16, textDecoration: "none", padding: "4px 8px", "&:hover": { - backgroundColor: "white", - color: theme.palette.primary.dark + textDecoration: "underline" }, "&:focus": { color: "inherit", - backgroundColor: theme.palette.primary.dark + backgroundColor: theme.palette.primary.dark, + borderRadius: 16 } } }); @@ -38,11 +41,16 @@ class ChipLink extends React.Component { }; render() { - const { classes, to, label } = this.props; + const { classes, to, label, children, current, ...rest } = this.props; return ( - - {label} + + {label || children || "link"} ); } @@ -52,6 +60,15 @@ const Chip = withStyles(style)(ChipLink); export default Chip; -export const createBreadcrumbLink = (link, index, len) => ( - -); +export const createBreadcrumbLink = (link, index, len) => { + const isLast = len - 1 === index; + + return ( + + ); +}; diff --git a/src/components/Markdown.js b/src/components/Markdown.js index 847d052..7d18d9a 100644 --- a/src/components/Markdown.js +++ b/src/components/Markdown.js @@ -49,9 +49,18 @@ const A = withStyles(theme => ({ } } }))(({ classes, children, href, ...rest }) => { + const isExternal = !!href && href[0] !== "/" && href[0] !== "."; + + if (isExternal) { + return React.createElement( + ExtLink, + { className: classes.link, href, ...rest }, + children + ); + } return React.createElement( - href && (href[0] === "/" || href[0] === ".") ? Link : ExtLink, - { className: classes.link, href, ...rest }, + Link, + { to: href || "#", className: classes.link, ...rest }, children ); }); diff --git a/src/layouts/index.js b/src/layouts/index.js index dbf57fa..a61f3c1 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -71,7 +71,7 @@ class Layout extends React.Component { - + diff --git a/src/markdown/js/letVsVar.md b/src/markdown/js/letVsVar.md index b16cb5e..02a4fee 100644 --- a/src/markdown/js/letVsVar.md +++ b/src/markdown/js/letVsVar.md @@ -10,7 +10,7 @@ Before the 6th edition of the ecmascript specification in javascript you could o declare function-scoped variables with ```var```. ```let``` allows to declare block-scoped variables. -| | `let` | `var` | +| | let | var | |---|---|---| | scope | block | execution context | | visibility | after declaration | hoisted | diff --git a/src/templates/article.js b/src/templates/article.js index f9074eb..3ec829f 100644 --- a/src/templates/article.js +++ b/src/templates/article.js @@ -15,7 +15,11 @@ type Props = { } }; -class Post extends React.Component { +type State = { + description: string +}; + +class Post extends React.Component { constructor(props: Props) { super(props);