Update webpack setup (#20)

* Move live TS into src dir, set up webpack chunking

* match old site HTML more closely

* webpack dev server is working

* js -> bundle

* update bundle, instructions

* type checker

.gitignore

@@ -1 +1,2 @@
 node_modules
+dist

README.md

@@ -14,17 +14,13 @@ Then open http://localhost:8080/.
 
 ## Development
 
-Modifications to the HTML and CSS files should show up immediately.
-
-The JavaScript files are bundled for serving, so changes to individual files
-won't show up on the site until you rebuild the bundle. To do this, run:
+Install dependencies:
 
     yarn
-    yarn webpack
 
-after saving your changes, or set up a watch process:
+To develop the site:
 
-    yarn webpack --watch
+    yarn serve
 
 Don't modify the data files (`lat-lon-counts.js`, `by-location`,
 `id4-to-location`) directly. Changes to these files should come from the
@@ -37,7 +33,7 @@ To run lint checks and type check:
 
 To publish an update, run:
 
-    yarn webpack --mode production
+    yarn build
 
 Then commit and push.
 

bundle/main.d513373d36236aded622.js.LICENSE.txt

@@ -0,0 +1,60 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

index.html

@@ -30,8 +30,7 @@
   </script>
   <meta name="twitter:widgets:csp" content="on">
   <script src="//platform.twitter.com/widgets.js"></script>
-  <script src="/lat-lon-counts.js"></script>
-  <script src="js/bundle/main.js"></script>
+  <script src="/static/lat-lon-counts.js"></script>
 
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -42,5 +41,5 @@
     ga('create', 'UA-54335760-1', 'auto');
     ga('send', 'pageview');
   </script>
-</body>
+<script src="bundle/main.d513373d36236aded622.js"></script></body>
 </html>

package.json

@@ -5,7 +5,9 @@
   "main": "js/viewer.js",
   "scripts": {
     "test": "npm run lint",
-    "lint": "eslint js/*.js"
+    "lint": "eslint js/*.js",
+    "serve": "webpack serve",
+    "build": "webpack --mode production && rm -rf bundle && cp -r dist/index.html dist/bundle ."
   },
   "repository": {
     "type": "git",
@@ -33,6 +35,7 @@
     "@types/zeroclipboard": "^2.0.35",
     "eslint": "^2.10.2",
     "eslint-plugin-import": "^1.8.0",
+    "html-webpack-plugin": "^5.6.0",
     "ts-loader": "^9.4.4",
     "typescript": "^5.5.4",
     "webpack": "^5.88.2",

js/ImageDetails.tsx → src/ImageDetails.tsx

@@ -13,6 +13,7 @@ import { FeedbackType, getFeedbackText, sendFeedback } from "./feedback";
 import { useResource } from "./use-resource";
 import { SuspenseImage } from "./grid/SuspenseImage";
 import classNames from "classnames";
+import { GridImage } from "./grid/grid";
 
 export function DetailView({
   image,

src/index.template.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>OldNYC: Mapping Historical Photographs of New York City</title>
+
+  <link rel="stylesheet" href="styles/octicons/octicons.css">
+  <link rel="stylesheet" href="styles/rc-slider.css">
+  <link rel="stylesheet" href="styles/grid.css" />
+  <link rel="stylesheet" href="styles/viewer.css" />
+
+  <meta property="fb:app_id" content="598168753565519"/>
+  <meta property="og:title" content="OldNYC" />
+  <meta property="og:site_name" content="OldNYC" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.oldnyc.org/" />
+  <meta property="og:description" content="OldNYC shows 40,000 historical images from the New York Public Library's Milstein Collection on a map. Find photos of your apartment, work, or favorite park!" />
+  <meta property="og:image" content="https://oldnyc-assets.nypl.org/600px/723905f-a.jpg" />
+
+  <meta name="Description" content="OldNYC shows 40,000 historical images from the New York Public Library's Milstein Collection on a map. Find photos of your apartment, work, or favorite park!" />
+
+  <meta name="apple-itunes-app" content="app-id=1097347396, affiliate-data=oldnyc-site, app-argument=oldnyc.org">
+</head>
+
+<body>
+  <div id="app"></div>
+
+  <script type="text/javascript"
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClCA1LViYi4KLQfgMlfr3PS0tyxwqzYjA">
+  </script>
+  <meta name="twitter:widgets:csp" content="on">
+  <script src="//platform.twitter.com/widgets.js"></script>
+  <script src="/static/lat-lon-counts.js"></script>
+
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-54335760-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+</body>
+</html>

tsconfig.json

@@ -108,13 +108,12 @@
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
   "files": [
-    "js/entry.ts",
-    "js/ocr-tool.ts",
-    "js/v2.tsx",
+    // "js/ocr-tool.ts",
+    "src/main.tsx",
   ],
   "include": [
-    "js/*.d.ts",
-    "js/**/*.ts",
-    "js/**/*.tsx",
+    "src/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
   ]
 }

webpack.config.js

@@ -1,14 +1,17 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 /*eslint-env node */
 module.exports = {
   mode: 'development',
   entry: {
-    main: './js/main.tsx',
-    ocr: './js/ocr-tool.ts'
+    main: './src/main.tsx'
+    // ocr: './js/ocr-tool.ts'
   },
   // devtool: '#cheap-module-source-map',
   output: {
-    path: __dirname + '/js/bundle',
-    filename: '[name].js'
+    clean: true,
+    path: __dirname + '/dist',
+    filename: 'bundle/[name].[contenthash].js'
   },
   resolve: {
     // Add `.ts` and `.tsx` as a resolvable extension.
@@ -36,5 +39,26 @@ module.exports = {
     // require("jquery") is external and available
     //  on the global var jQuery
     "jquery": "jQuery"
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: __dirname + '/src/index.template.html',
+      filename: __dirname + '/dist/index.html',
+      inject: 'body',
+      scriptLoading: 'blocking',
+      chunks: ["main"],
+      minify: false
+    })
+  ],
+  devServer: {
+    static: [
+      'static',
+      'images',
+      'id4-to-location',
+      'by-location',
+      'rotated-assets',
+      'styles'
+    ].map(dir => ({ directory: dir, publicPath: `/${dir}` })),
+    port: 8080
   }
 };