Merge pull request #1137 from jboolean/tote-bag-frontend

Tote bag frontend rendering

Author: jboolean

backend/package-lock.json

@@ -21,6 +21,7 @@
     "@sentry/react": "^7.119.2",
     "@sentry/tracing": "^7.114.0",
     "@stripe/stripe-js": "^1.42.0",
+    "@turf/turf": "^7.2.0",
     "@types/grecaptcha": "^3.0.4",
     "@types/react-router": "^5.1.20",
     "axios": "^1.7.9",

frontend/package-lock.json

@@ -6,6 +6,7 @@ import AnnouncementBanner from './screens/AnnouncementBanner';
 import MapPane from './screens/MapPane';
 import Shutdown from './screens/Shutdown';
 import ThankYou from './screens/TipJar/ThankYou';
+import ToteBag from './screens/ToteBag';
 import ViewerPane from './screens/ViewerPane';
 import Welcome from './screens/Welcome';
 
@@ -16,14 +17,14 @@ import Outtakes from './screens/Outtakes';
 import { OptimizeExperimentsProvider } from 'shared/utils/OptimizeExperiments';
 import 'utils/optimize';
 import AdminRoutes from './screens/Admin/AdminRoutes';
+import Corrections from './screens/Corrections';
 import CreditPurchaseModal, {
   CreditPurchaseSuccessMessage,
 } from './screens/CreditPurchaseModal';
 import EditStory from './screens/EditStory';
 import FeatureFlags from './screens/FeatureFlags';
 import SubmitStoryWizard from './screens/SubmitStoryWizard';
 import TipJar, { useTipJarStore } from './screens/TipJar';
-import Corrections from './screens/Corrections';
 
 const IS_SHUTDOWN = false;
 
@@ -33,8 +34,10 @@ const thankYouInitial = searchParams.has('tipSuccess');
 const creditSuccessInitial = searchParams.has('creditPurchaseSuccess');
 const openTipJarOnLoad = searchParams.has('openTipJar');
 const noWelcome = searchParams.has('noWelcome');
+const noTipJar = searchParams.has('noTipJar');
 
 if (noWelcome) searchParams.delete('noWelcome');
+if (noTipJar) searchParams.delete('noTipJar');
 history.replace({
   pathname: history.location.pathname,
   hash: history.location.hash,
@@ -87,7 +90,7 @@ function Modals(): JSX.Element {
           setCreditPurchaseSuccessOpen(false);
         }}
       />
-      <TipJar />
+      {noTipJar ? null : <TipJar />}
     </>
   );
 }
@@ -96,8 +99,13 @@ export default function App(): JSX.Element {
   return (
     <OptimizeExperimentsProvider>
       <div className={stylesheet.outermostContainer}>
-        <AnnouncementBanner />
         <Router history={history}>
+          <Switch>
+            <Route path="/render-merch"></Route>
+            <Route>
+              <AnnouncementBanner />
+            </Route>
+          </Switch>
           <div className={stylesheet.mainContentWrapper}>
             <div className={stylesheet.mainContentContainer}>
               <Modals />
@@ -129,6 +137,9 @@ export default function App(): JSX.Element {
                 <Route path="/admin">
                   <AdminRoutes />
                 </Route>
+                <Route path="/render-merch/tote-bag">
+                  <ToteBag />
+                </Route>
                 {!IS_SHUTDOWN && <Redirect to="/map" />}
               </Switch>
             </div>

frontend/package.json

@@ -3,19 +3,19 @@ import React from 'react';
 import {
   // withRouter,
   useHistory,
-  useRouteMatch,
   useLocation,
+  useRouteMatch,
 } from 'react-router-dom';
 
-import mapboxgl from 'mapbox-gl';
 import classnames from 'classnames';
+import mapboxgl from 'mapbox-gl';
 
 import * as overlays from './overlays';
 
 export { OverlayId } from './overlays';
 
-import stylesheet from './MainMap.less';
 import { RouteComponentProps } from 'react-router';
+import stylesheet from './MainMap.less';
 
 const MAPBOX_STYLE = __DEV__
   ? 'mapbox://styles/julianboilen/ck5jrzrs11r1p1imia7qzjkm1/draft'
@@ -77,6 +77,12 @@ class MainMap extends React.PureComponent<PropsWithRouter> {
 
       this.syncUI();
     });
+
+    // Added to remove layers outside the viewport, to make the attribution correct
+    map.on('moveend', () => {
+      if (!map.isStyleLoaded()) return;
+      this.syncUI();
+    });
   }
 
   componentDidUpdate(prevProps: PropsWithRouter): void {

frontend/src/screens/App/index.tsx

@@ -1,5 +1,9 @@
 // import canUseWebP from 'utils/canUseWebP';
 
+import { bboxPolygon, booleanIntersects } from '@turf/turf';
+import { Feature } from 'geojson';
+import boroughBoundaries from './Borough Boundaries simplified.json';
+
 const LAYER_IDS = [
   'arial-1924',
   'arial-1951',
@@ -21,6 +25,16 @@ export type OverlayId =
   | 'atlas-1930'
   | 'atlas-1956';
 
+const MANHATTAN_BOUNDS_GEOJSON = boroughBoundaries.features.find(
+  (feature) => feature.properties['boro_name'] === 'Manhattan'
+) as Feature;
+
+const attributionBoundaries: Partial<Record<LayerId, Feature>> = {
+  'atlas-1930': MANHATTAN_BOUNDS_GEOJSON,
+  'atlas-1956': MANHATTAN_BOUNDS_GEOJSON,
+  'atlas-1916': MANHATTAN_BOUNDS_GEOJSON,
+};
+
 // For tiles recompressed at edge
 // const ext = canUseWebP() ? 'webp' : 'png';
 
@@ -33,7 +47,7 @@ const overlaysToLayers: { [overlay in OverlayId]: LayerId[] } = {
   },
   get 'default-arial'() {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return
-    return [...this['default-map'], ...this['arial-1951']];
+    return [...this['arial-1951']];
   },
   'arial-1924': ['arial-1924', 'nyc-label'],
   'arial-1951': ['arial-1951', 'nyc-label'],
@@ -134,11 +148,25 @@ export const setOverlay = (
   overlayId: OverlayId | null
 ): void => {
   const visibleLayers = overlayId ? overlaysToLayers[overlayId] : [];
+  const mapBounds = map.getBounds();
+
+  // Convert the map bounds into a Turf polygon
+  const viewportPolygon = bboxPolygon([
+    mapBounds.getWest(),
+    mapBounds.getSouth(),
+    mapBounds.getEast(),
+    mapBounds.getNorth(),
+  ]);
   LAYER_IDS.forEach((layerId) => {
+    const layerAttributionBounds = attributionBoundaries[layerId];
     map.setLayoutProperty(
       layerId,
       'visibility',
-      visibleLayers.includes(layerId) ? 'visible' : 'none'
+      visibleLayers.includes(layerId) &&
+        (!layerAttributionBounds ||
+          booleanIntersects(viewportPolygon, layerAttributionBounds))
+        ? 'visible'
+        : 'none'
     );
   });
 };

frontend/src/screens/App/screens/MapPane/components/MainMap/Borough Boundaries simplified.json

@@ -0,0 +1,96 @@
+@import '../../../../shared/styles/colors.less';
+@import '../../../../shared/styles/fonts.less';
+
+:local {
+  @dpi: 150px;
+
+  .container {
+    display: block;
+    width: 17 * @dpi;
+    height: 33 * @dpi;
+    overflow: hidden;
+  }
+
+  .front {
+    display: block;
+    height: 50%;
+    position: relative;
+
+    background-color: @green;
+
+    overflow: hidden;
+
+    .logo {
+      display: inline-block;
+      margin-left: 50%;
+      position: relative;
+      transform: translateX(-50%);
+      top: 5.2 * @dpi;
+
+      padding: 0.4 * @dpi 0.9 * @dpi;
+
+      font-family: @font-family-serif-heading;
+      font-size: 159px;
+      font-variant-numeric: lining-nums;
+      text-align: center;
+
+      color: @creme;
+
+      border: 28px solid @creme;
+    }
+  }
+
+  .back {
+    display: block;
+    height: 50%;
+    overflow: hidden;
+    position: relative;
+
+    transform: rotate(180deg);
+    .box {
+      position: absolute;
+      left: 3.5 * @dpi;
+      bottom: 2.3 * @dpi;
+      max-width: 4 * @dpi;
+
+      font-size: 34px;
+      font-family: @font-family-sans;
+      line-height: 1.5;
+    }
+
+    .hugLines {
+      padding: 5px;
+      padding-right: 5px;
+      box-decoration-break: clone;
+    }
+
+    .subhead > .hugLines {
+      background-color: @green;
+      color: @creme;
+    }
+
+    .attribution > .hugLines {
+      background-color: @creme;
+      color: @font-color-dark;
+    }
+
+    .map {
+      display: block;
+      width: 50%;
+      height: 50%;
+
+      transform: scale(2);
+      transform-origin: top left;
+
+      :global(.mapbox-improve-map) {
+        display: none;
+      }
+
+      // Text is copied to our own element
+      :global(.mapboxgl-ctrl-attrib-inner),
+      :global(.mapboxgl-ctrl-attrib mapboxgl-compact) {
+        display: none;
+      }
+    }
+  }
+}

frontend/src/screens/App/screens/MapPane/components/MainMap/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import MainMap from '../MapPane/components/MainMap';
+
+import stylesheet from './ToteBag.less';
+
+export default function ToteBag(): JSX.Element {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [attributionText, setAttributionText] = React.useState<string>('');
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const attributionEl = container.querySelector(
+      '.mapboxgl-ctrl-attrib-inner'
+    );
+    if (!attributionEl) return;
+
+    const observer = new MutationObserver(() => {
+      const text = (attributionEl as HTMLElement).innerText;
+      const improveText =
+        attributionEl.querySelector('.mapbox-improve-map')?.textContent || '';
+
+      if (text) {
+        setAttributionText(text.replace(improveText, ''));
+      }
+    });
+
+    observer.observe(attributionEl, { childList: true });
+
+    return () => observer.disconnect();
+  }, [containerRef]);
+
+  return (
+    <div
+      className={classNames(stylesheet.container)}
+      id="render-content"
+      ref={containerRef}
+    >
+      <div className={stylesheet.front}>
+        <h1 className={stylesheet.logo}>1940s.nyc</h1>
+      </div>
+      <div className={stylesheet.back}>
+        <div className={stylesheet.map}>
+          <MainMap panOnClick={false} overlay="default-map" />
+        </div>
+        <div className={stylesheet.box}>
+          <div className={stylesheet.subhead}>
+            <span className={stylesheet.hugLines}>
+              Street-level view of 1940s New York with thousands of your stories
+            </span>
+          </div>
+          <div className={stylesheet.attribution}>
+            <span className={stylesheet.hugLines}>Maps: {attributionText}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}