getting ready for real

2018-12-28 22:15:00 -08:00
parent 7d530df658
commit 948a22b10b
6 changed files with 30 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
  </head>
  <body>
    <div id="mount"><noscript>I don't like javascript, either.</noscript></div>
-    <script type="text/javascript" src="bundle.js"></script>
+    <script type="text/javascript" src="dist/bundle.js"></script>
  </body>
 </html>
--- 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",
--- a/site.css
+++ b/site.css
@@ -34,6 +34,9 @@ h2 {
 	border-bottom: 1px solid #eef;
 }

+.Grid {
+	margin-bottom: 45px;
+}

 .Grid-row {
 	margin: 0;
--- 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<Props, {}> {
  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<Props, {}> {
      this.props.onClose();
    }
  };
+
+  private _onEscape = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      this.props.onClose();
+    }
+  };
 }
--- a/src/components/picture.tsx
+++ b/src/components/picture.tsx
@@ -39,6 +39,10 @@ export class Picture extends React.PureComponent<Props, {}> {
      }
    });

+    if (srcs.length === 0) {
+      return `img/1600/${this.props.image.src} 1x`;
+    }
+
    return srcs.join(",");
  };
 }
--- 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" }
        ]
    },
+  }
 };