feat: enable GA4 tracking

Set the measurement ID that replaces the Universal Analytics property
shut down in 2023, which leaves tracking disabled until now. Update
the README section, which still described the ID as empty.

README.md

@@ -171,6 +171,6 @@ resolved by the SPA as before.
 
 ## Google Analytics
 
-`GOOGLE_ANALYTICS_TRACKING_ID` in `src/config.ts` is empty, which disables
-tracking. Set a GA4 measurement ID (`G-XXXXXXXXXX`) to enable it; the old
-Universal Analytics property was shut down in 2023.
+`GOOGLE_ANALYTICS_TRACKING_ID` in `src/config.ts` carries the GA4 measurement
+ID that replaced the Universal Analytics property shut down in 2023. Emptying
+it disables tracking.

src/config.ts

@@ -1,8 +1,7 @@
 const SITE_TITLE = 'Visiome Platform';
 const SITE_SLOGAN = 'Digital archive for vision science';
-// GA4 measurement ID (G-XXXXXXXXXX); empty disables tracking.
-// The former Universal Analytics property (UA-2787276-1) was shut down in 2023.
-const GOOGLE_ANALYTICS_TRACKING_ID = '';
+// Replaces the Universal Analytics property (UA-2787276-1), shut down in 2023.
+const GOOGLE_ANALYTICS_TRACKING_ID = 'G-94PHTGFJ7S';
 const XOONIPS_ITEMTYPES = ['binder', 'model', 'data', 'stimulus', 'tool', 'presentation', 'paper', 'book', 'url'];
 const PICO_MODULES = ['manual_ja', 'primface'];
 

src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import 'modern-normalize/modern-normalize.css';
+import './normalize-overrides.css';
 import App from './App';
 import CreditsUtils from './credits/lib/CreditsUtils';
 import IndexUtil from './database/lib/IndexUtil';

src/normalize-overrides.css

@@ -0,0 +1,44 @@
+/*
+ * modern-normalize changes three things the XOOPS theme was not written for.
+ * The theme styles `body` and leaves the rest to the defaults it was authored
+ * against, so restate those defaults as explicit values here rather than
+ * leaving the rendering to depend on whichever browser is in use.
+ */
+
+/* The theme's widths and paddings are content-box measurements; modern-normalize
+   makes every element border-box. */
+*,
+::before,
+::after {
+    box-sizing: content-box;
+}
+
+/* Controls and tables are laid out as border-box, which is what the theme
+   assumes when it sizes them. */
+button,
+select,
+table,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    box-sizing: border-box;
+}
+
+/* modern-normalize puts a system font stack on `html`. Nothing visible
+   inherits it -- `body` below covers the whole document -- but state the
+   theme's own stack so there is a single font declaration for the page. */
+html {
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+/* modern-normalize makes form controls inherit the page font. The theme sizes
+   them as the unstyled controls they were: Arial at the control default. */
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: Arial, sans-serif;
+    font-size: 13.3333px;
+    line-height: normal;
+}

vite.config.ts

@@ -16,7 +16,11 @@ const staticContents = (): Plugin => {
     let dir: string;
     const mount = (middlewares: { use: (fn: Connect.NextHandleFunction) => void }, dev: boolean) => {
         if (fs.existsSync(dir)) {
-            middlewares.use(sirv(dir, { dev, etag: true }));
+            // maxAge 0 makes sirv send `Cache-Control: public, max-age=0`, so the
+            // browser revalidates against the ETag instead of falling back to
+            // heuristic caching. Without it a re-dump, or another site served
+            // from the same localhost port, is answered from a stale cache.
+            middlewares.use(sirv(dir, { dev, etag: true, maxAge: 0 }));
         }
     };
     return {