Merge pull request #4 from FaberVitale/dev-1.0.4

1.0.4

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

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"
+    ]
   }
 }

src/components/BreadCrumb.js

@@ -8,7 +8,8 @@ type Link = {|
 
 type Props = {
   createLink: (link: Link, index: number) => React.ElementType,
-  links: Array<Link>
+  links: Array<Link>,
+  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<Props> {
         {link.label}
       </a>
     ),
-    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(
         <li key={links[i].path} className={classes.listItem}>
+          {i > 0 && <div aria-hidden={true}>{separator}</div>}
           {createLink(links[i], i, len)}
         </li>
       );

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<Props> {
   };
 
   render() {
-    const { classes, to, label } = this.props;
+    const { classes, to, label, children, current, ...rest } = this.props;
 
     return (
-      <Link className={classes.link} onClick={this.handleClick} to={to}>
-        {label}
+      <Link
+        className={classes.link}
+        onClick={this.handleClick}
+        to={to}
+        {...rest}
+      >
+        {label || children || "link"}
       </Link>
     );
   }
@@ -52,6 +60,15 @@ const Chip = withStyles(style)(ChipLink);
 
 export default Chip;
 
-export const createBreadcrumbLink = (link, index, len) => (
-  <Chip to={link.path} label={link.label} current={len - 1 === index} />
-);
+export const createBreadcrumbLink = (link, index, len) => {
+  const isLast = len - 1 === index;
+
+  return (
+    <Chip
+      to={link.path}
+      label={link.label}
+      current={isLast}
+      aria-current={isLast ? "page" : null}
+    />
+  );
+};

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

src/layouts/index.js

@@ -71,7 +71,7 @@ class Layout extends React.Component<Props> {
           <Helmet title={data.site.siteMetadata.title} />
           <AppBar>
             <ToolBarGroup>
-              <Hidden smUp>
+              <Hidden smUp implementation="css">
                 <MenuButton />
               </Hidden>
               <Link to="/" className={classes.heading}>

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 |

src/templates/article.js

@@ -15,7 +15,11 @@ type Props = {
   }
 };
 
-class Post extends React.Component<Props> {
+type State = {
+  description: string
+};
+
+class Post extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);