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);