diff --git a/index.html b/index.html index 8db4df7..b21d713 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/package.json b/package.json index 82436af..0f44e23 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "prettier": "prettier --write $(git ls-files \"*.ts*\")", - "dev": "webpack-dev-server" + "dev": "webpack-dev-server --env dev" }, "repository": { "type": "git", diff --git a/site.css b/site.css index e72cf7b..a40191b 100644 --- a/site.css +++ b/site.css @@ -34,6 +34,9 @@ h2 { border-bottom: 1px solid #eef; } +.Grid { + margin-bottom: 45px; +} .Grid-row { margin: 0; diff --git a/src/components/big_picture.tsx b/src/components/big_picture.tsx index a096b34..5e8e99f 100644 --- a/src/components/big_picture.tsx +++ b/src/components/big_picture.tsx @@ -11,6 +11,14 @@ export interface Props { export class BigPicture extends React.PureComponent { static displayName = "BigPicture"; + componentDidMount() { + window.addEventListener("keyup", this._onEscape as any); + } + + componentWillUnmount() { + window.removeEventListener("keyup", this._onEscape as any); + } + render() { const src = `img/1600/${this.props.image.src}`; return ( @@ -47,4 +55,10 @@ export class BigPicture extends React.PureComponent { this.props.onClose(); } }; + + private _onEscape = (e: React.KeyboardEvent) => { + if (e.key === "Escape") { + this.props.onClose(); + } + }; } diff --git a/src/components/picture.tsx b/src/components/picture.tsx index 1f31ed1..28bb76e 100644 --- a/src/components/picture.tsx +++ b/src/components/picture.tsx @@ -39,6 +39,10 @@ export class Picture extends React.PureComponent { } }); + if (srcs.length === 0) { + return `img/1600/${this.props.image.src} 1x`; + } + return srcs.join(","); }; } diff --git a/webpack.config.js b/webpack.config.js index 536420b..52cf23b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,18 +1,22 @@ var path = require("path"); -module.exports = { +module.exports = (env) => { + const mode = env === "dev" ? "development" : "production"; + + return { entry: "./src/index.tsx", output: { filename: "bundle.js", path: __dirname + "/dist" }, - mode: "development", + mode: mode, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", devServer: { + publicPath: "/dist/", port: 8080 }, @@ -30,4 +34,5 @@ module.exports = { { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] }, + } };