feat(landing): upgrade lui (#3033)

#### Motivation LUI is a linz branding library with all the logos we need, some logos changed a while back and we never updated. ![image](https://github.com/linz/basemaps/assets/1082761/4db13ade-b207-451f-bca8-37dcb5a08f8b) #### Modification upgrades lui to the latest which modifies a few styles like the header and footer height and logos. #### Checklist _If not applicable, provide explanation of why._ - [ ] Tests updated - [ ] Docs updated - [ ] Issue linked in Title
linz · Dec 11, 2023 · 47919bb · 47919bb
1 parent 00c6c9f
commit 47919bb
Show file tree

Hide file tree

Showing 8 changed files with 1,432 additions and 1,323 deletions.
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -24,7 +24,7 @@ jobs:
       # TODO: running a giant copy command to import CSS and SVG files into the docs file in not super ideal
       - name: Build docs
         run: |
-          cp packages/landing/node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
+          cp node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
           docker run --rm -v ${PWD}:/docs ghcr.io/linz/basemaps-mkdocs:v1 build
 
       - name: Store docs artifact
@@ -85,7 +85,7 @@ jobs:
         run: |
           # dist folder must exist or it will be owned by root
           mkdir -p packages/landing/dist 
-          cp packages/landing/node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
+          cp node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
 
           docker run \
             --rm \
@@ -140,7 +140,7 @@ jobs:
         run: |
           # dist folder must exist or it will be owned by root
           mkdir -p packages/landing/dist 
-          cp packages/landing/node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
+          cp node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg docs/
 
           docker run \
             --rm \

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/landing/package.json b/packages/landing/package.json
@@ -33,15 +33,15 @@
     "@basemaps/geo": "^7.0.0",
     "@basemaps/infra": "^7.0.0",
     "@basemaps/shared": "^7.0.0",
-    "@linzjs/lui": "^17.16.2",
+    "@linzjs/lui": "^21.12.1",
     "@servie/events": "^3.0.0",
     "@types/proj4": "^2.5.2",
     "@types/react-dom": "^18.0.6",
     "maplibre-gl": "^3.6.2",
     "mime-types": "^2.1.35",
     "proj4": "^2.8.0",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react": "^18.2.0",
     "ulid": "^2.3.0"
   },
   "publishConfig": {
@@ -53,15 +53,15 @@
   ],
   "bundle": [
     {
-      "entry": "./node_modules/@linzjs/lui/dist/assets/images/nz-govt-logo-rev.svg",
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/images/nz-govt-logo-rev.svg",
       "outfile": "dist/assets/logo-nz-govt.svg"
     },
     {
-      "entry": "./node_modules/@linzjs/lui/dist/assets/images/linz-logo-col-n-white-txt.svg",
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg",
       "outfile": "dist/assets/logo-linz.svg"
     },
     {
-      "entry": "./node_modules/@linzjs/lui/dist/assets/fonts",
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/fonts",
       "outfile": "dist/assets/fonts"
     },
     {

diff --git a/packages/landing/serve.mjs b/packages/landing/serve.mjs
@@ -1,6 +1,8 @@
-import fs from 'fs';
-import http from 'http';
-import path from 'path';
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+
+import mime from 'mime-types';
 
 /**
  * Very basic http server that redirects all 404's back to index.html
@@ -10,17 +12,24 @@ const srv = http.createServer(function (request, response) {
   const target = path.join('dist', request.url);
   const stat = fs.existsSync(target);
   if (!request.url.endsWith('/') && stat) {
+    const type = mime.lookup(target);
+    response.statusCode = 200;
+    response.setHeader('content-type', type);
+
     fs.createReadStream(target, {
       bufferSize: 4 * 1024,
     }).pipe(response);
+    console.log(new Date().toISOString(), 200, type, request.url);
     return;
   }
+
+  response.statusCode = 200;
   fs.createReadStream('dist/index.html', {
     bufferSize: 4 * 1024,
   }).pipe(response);
 });
 
-const port = process.env.PORT ? Number(process.env.PORT) : 3000;
+const port = process.env.PORT ? Number(process.env.PORT) : 5000;
 srv.listen(port, () => {
   process.stdout.write(`listening.. http://localhost:${port}\n`);
 });
diff --git a/packages/landing/src/components/layer.switcher.dropdown.tsx b/packages/landing/src/components/layer.switcher.dropdown.tsx
@@ -1,13 +1,9 @@
 import { ChangeEventHandler, Component, ReactNode } from 'react';
-import * as reactSelect from 'react-select';
+import Select from 'react-select';
 
 import { Config, GaEvent, gaEvent } from '../config.js';
 import { LayerInfo, MapConfig } from '../config.map.js';
 
-// TODO the typing here appears to be broken
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Select = reactSelect.default as any;
-
 type CategoryMap = Map<string, { label: string; options: { label: string; value: string }[] }>;
 
 const Categories = [

diff --git a/packages/landing/src/components/layout.footer.tsx b/packages/landing/src/components/layout.footer.tsx
@@ -20,10 +20,10 @@ export class Footer extends Component {
         <div className="lui-footer-columns">
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <Link href="http://www.govt.nz/" ariaLabel="New Zealand Government">
-              <img src="/assets/logo-nz-govt.svg" />
+              <img src="/assets/logo-nz-govt.svg" width="211px" />
             </Link>
           </div>
-          <div className="justify-end">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
             <ul className="lui-footer-list">
               <li className="lui-footer-inline-list-item">
                 <Link href="https://www.linz.govt.nz/contact-us">Contact</Link>

diff --git a/packages/landing/src/components/layout.header.tsx b/packages/landing/src/components/layout.header.tsx
@@ -44,19 +44,19 @@ export class Header extends Component<unknown, HeaderState> {
     const isMenuOpen = this.state?.isMenuOpen ?? false;
     if (Config.map.isDebug) return;
     return (
-      <header className="lui-header">
-        <div className="lui-header-row">
-          <div className="lui-header-col">
-            <div className="lui-header-logo">
-              <img className="linz-logo" src="/assets/logo-linz.svg" />
+      <header className="LuiHeaderV2 LuiHeaderV2-small">
+        <div className="LuiHeaderV2-row">
+          <div className="LuiHeaderV2-col">
+            <div className="LuiHeaderV2-logo">
+              <img className="LuiHeaderV2-linz-motif" src="/assets/logo-linz.svg" width="150px" />
             </div>
-            <div className="lui-header-title">
+            <div className="LuiHeaderV2-title">
               <h1>Basemaps</h1>
             </div>
           </div>
-          <div className="lui-header-col">
-            <div className="lui-header-menu-item">
-              <div className="lui-header-menu-icon">
+          <div className="LuiHeaderV2-col">
+            <div className="LuiHeaderV2-menu-item">
+              <div className="LuiHeaderV2-menu-icon">
                 <i className="material-icons-round md-36" onClick={this.menuToggle} style={{ cursor: 'pointer' }}>
                   {isMenuOpen ? 'close' : 'menu'}
                 </i>

diff --git a/packages/landing/static/index.css b/packages/landing/static/index.css
@@ -33,6 +33,8 @@ button {
   width: 450px;
   padding: 24px;
   z-index: 100;
+  margin-top: 56px;
+  padding-top: 0;
 }
 
 .lui-menu-drawer.lui-menu-drawer-wide.lui-menu-drawer-closed {
@@ -198,30 +200,6 @@ button {
   height: 40px;
 }
 
-.date-range {
-  background:rgba(255, 255, 255, 0.8);
-  box-shadow: 0 0 8px 8px rgb(0 0 0 / 10%);
-  border: 2px solid rgba(255, 255, 255);
-  border-radius: 8px;
-  padding: 16px 16px 16px 16px;
-  position: absolute;
-  right: 16px;
-  bottom: 32px;
-}
-
-.date-range__year {
-  border:1px solid gray;
-  backgroundColor:white;
-}
-
-.date-range__year--selected {
-  border:2px solid blue;
-  backgroundColor:lightblue;
-}
-
-.date-range p {
-  margin-top: 16px;
-}
 
 /*
 The additional #layer-selector id selector is needed to ensure these styles
@@ -233,3 +211,14 @@ have higher specifity than the default styles of the react-select component
   letter-spacing: 1px;
 }
 
+
+/** Force the footer links to be centered */
+.lui-footer.lui-footer .lui-footer-list li {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/** Attempt to align the hamburger menu to the map controls */
+.LuiHeaderV2-menu-icon {
+  padding-right: 8px;
+}