Merge pull request #239 from nulib/deploy/staging

Update production

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 *.tfvars
 /terraform/.terraform
 /terraform/*.plan
+
+# ephemeral build artifacts
+/lib/honeybadger/config.vars.js

components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ export default function Footer() {
   return (
     <FooterStyled>
       <Container>
-        <NUFooter />
+        <NUFooter isCopyright />
       </Container>
     </FooterStyled>
   );

components/Header/Super.tsx

@@ -38,7 +38,6 @@ export default function HeaderSuper() {
   }, []);
 
   const userAuthContext = React.useContext(UserContext);
-
   const handleMenu = () => setIsExpanded(!isExpanded);
 
   return (

components/Search/Search.styled.ts

@@ -78,14 +78,53 @@ const Clear = styled("button", {
   },
 });
 
-const Results = styled("p", {
+const ResultsMessage = styled("span", {
   color: "$black50",
-  padding: "0 $gr4",
+  padding: "0 $gr4 $gr4",
   fontSize: "$gr3",
 
-  "@md": {
-    padding: "0",
+  "@lg": {
+    padding: "0 0 $gr3",
   },
 });
 
-export { Button, Clear, Input, Results, SearchStyled };
+const NoResultsMessage = styled("span", {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  height: "100%",
+  alignItems: "center",
+  alignSelf: "center",
+  color: "$black50",
+  padding: "0 0 $gr8",
+  margin: "0 auto",
+  fontSize: "$gr3",
+  fontFamily: "$northwesternSansLight",
+  textAlign: "center",
+  flexGrow: "1",
+
+  strong: {
+    color: "$black",
+    fontFamily: "$northwesternSansBold",
+    fontWeight: "400",
+    display: "block",
+    margin: "0 0 $gr2",
+    fontSize: "$gr4",
+  },
+});
+
+const ResultsWrapper = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "80vh",
+});
+
+export {
+  Button,
+  Clear,
+  Input,
+  NoResultsMessage,
+  ResultsMessage,
+  ResultsWrapper,
+  SearchStyled,
+};

context/user-context.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, createContext, useState } from "react";
 import { type User, type UserContext } from "@/types/context/user";
-import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
-import axios from "axios";
+import { getUser } from "@/lib/user-helpers";
 
 const UserContext = createContext<UserContext>({ user: null });
 
@@ -10,31 +9,25 @@ const UserProvider = ({ children }: { children: ReactNode }) => {
 
   React.useEffect(() => {
     /* Determine if user is authenticated via cookie */
-    axios
-      .get(`${DCAPI_ENDPOINT}/auth/whoami`, {
-        withCredentials: true,
-      })
-      .then((result) => {
-        if (!result.data) return;
-        const {
-          email,
-          isLoggedIn = false,
-          isReadingRoom = false,
-          name,
-          sub,
-        } = result.data;
-        setUser({
-          email,
-          isLoggedIn,
-          isReadingRoom,
-          name,
-          sub,
-        });
+    getUser().then((result) => {
+      if (!result) return;
+      const {
+        email,
+        isLoggedIn = false,
+        isReadingRoom = false,
+        name,
+        sub,
+      } = result;
+      setUser({
+        email,
+        isLoggedIn,
+        isReadingRoom,
+        name,
+        sub,
       });
+    });
   }, []);
 
-  //  165.124.167.1
-
   return (
     <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
   );

lib/constants/bucket.ts

@@ -0,0 +1,3 @@
+const DC_SITEMAP_BUCKET = process.env.NEXT_PUBLIC_DC_SITEMAP_BUCKET;
+
+export { DC_SITEMAP_BUCKET };

lib/dc-api.ts

@@ -47,7 +47,10 @@ async function apiPostRequest<R>(
 async function getIIIFResource<R>(uri: string | null): Promise<R | undefined> {
   if (!uri) return Promise.resolve(undefined);
   try {
-    const response = await axios(uri);
+    const response = await axios({
+      url: uri,
+      withCredentials: true,
+    });
     return response.data;
   } catch (err) {
     handleError(err);
@@ -56,7 +59,6 @@ async function getIIIFResource<R>(uri: string | null): Promise<R | undefined> {
 
 function handleError(err: unknown) {
   const error = err as AxiosError;
-  //const error = err as AxiosError;
   if (error.response) {
     // The request was made and the server responded with a status code
     // that falls out of the range of 2xx
@@ -73,4 +75,4 @@ function handleError(err: unknown) {
     console.log("Error", error.message);
   }
 }
-export { apiGetRequest, apiPostRequest, getIIIFResource };
+export { apiGetRequest, apiPostRequest, getIIIFResource, handleError };

lib/ga/data-layer.ts

@@ -52,7 +52,6 @@ export function buildWorkDataLayer(work: Work): DataLayer {
     adminset: work?.library_unit || "",
     collections: work?.collection?.title ? work.collection.title : null,
     creatorsContributors,
-    isLoggedIn: false,
     pageTitle: work?.title || "",
     rightsStatement: work?.rights_statement?.label
       ? work.rights_statement.label

lib/honeybadger/config.js

@@ -1,30 +1,35 @@
+import {
+  HONEYBADGER_API_KEY,
+  HONEYBADGER_ENV,
+  HONEYBADGER_REVISION,
+} from "./config.vars.js";
 import Honeybadger from "@honeybadger-io/js";
 
 const setupHoneyBadger = () => {
   // https://docs.honeybadger.io/lib/javascript/reference/configuration.html
   const sharedHoneybadgerConfig = {
-    apiKey: process.env.HONEYBADGER_API_KEY,
-    environment: process.env.HONEYBADGER_ENV || process.env.NODE_ENV,
+    apiKey: HONEYBADGER_API_KEY,
+    environment: HONEYBADGER_ENV || process.env.NODE_ENV,
     projectRoot: "webpack://_N_E/./",
 
     // Uncomment to report errors in development:
     reportData: true,
 
-    revision: process.env.AWS_COMMIT_ID,
+    revision: HONEYBADGER_REVISION,
   };
-
+  
   if (typeof window === "undefined") {
     // Node config
     const projectRoot = process.cwd();
     Honeybadger.configure({
       ...sharedHoneybadgerConfig,
       projectRoot: "webpack:///./",
     }).beforeNotify((notice) => {
-      notice.backtrace.forEach((line) => {
+      notice.backtrace = notice.backtrace.map((line) => {
         if (line.file) {
           line.file = line.file.replace(
             `${projectRoot}/.next/server`,
-            `${process.env.HONEYBADGER_ASSETS_URL}/..`
+            `${process.env.NEXT_PUBLIC_DC_URL}/_next/..`
           );
         }
         return line;
@@ -35,6 +40,16 @@ const setupHoneyBadger = () => {
     Honeybadger.configure({
       ...sharedHoneybadgerConfig,
       projectRoot: "webpack://_N_E/./",
+    }).beforeNotify((notice) => {
+      notice.backtrace = notice.backtrace.map((line) => {
+        if (line.file) {
+          line.file = line.file.replace(
+            /^.+\/_next\//,
+            `${process.env.NEXT_PUBLIC_DC_URL}/_next/`
+          );
+        }
+        return line;
+      });
     });
   }
 

lib/user-helpers.ts

@@ -0,0 +1,14 @@
+import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
+import axios from "axios";
+import { handleError } from "./dc-api";
+
+export async function getUser() {
+  try {
+    const response = await axios.get(`${DCAPI_ENDPOINT}/auth/whoami`, {
+      withCredentials: true,
+    });
+    return response.data;
+  } catch (err) {
+    handleError(err);
+  }
+}

next.config.js

@@ -1,14 +1,27 @@
+const fs = require("fs");
 const HoneybadgerSourceMapPlugin = require("@honeybadger-io/webpack");
 
 // Use the HoneybadgerSourceMapPlugin to upload the source maps during build step
 const {
   HONEYBADGER_API_KEY,
   HONEYBADGER_ENV,
-  HONEYBADGER_ASSETS_URL,
   HONEYBADGER_REPORT_DATA,
+  NEXT_PUBLIC_DC_URL,
 } = process.env;
 const NODE_ENV = process.env.HONEYBADGER_ENV || process.env.NODE_ENV;
-const HONEYBADGER_REVISION = process.env.AWS_COMMIT_ID;
+const HONEYBADGER_REVISION = process.env.HONEYBADGER_REVISION || process.env.AWS_COMMIT_ID;
+
+const HoneybadgerConfig = JSON.stringify({
+  HONEYBADGER_API_KEY,
+  HONEYBADGER_ENV,
+  HONEYBADGER_REPORT_DATA,
+  HONEYBADGER_REVISION,
+}, null, 2);
+
+fs.writeFileSync(
+  "lib/honeybadger/config.vars.js",
+  `module.exports = ${HoneybadgerConfig};`
+);
 
 /** @type {import('next').NextConfig} */
 module.exports = {
@@ -28,30 +41,29 @@ module.exports = {
     ],
   },
   reactStrictMode: true,
-  swcMinify: false,
+  swcMinify: true,
   webpack: (config) => {
     // When all the Honeybadger configuration env variables are
     // available/configured The Honeybadger webpack plugin gets pushed to the
     // webpack plugins to build and upload the source maps to Honeybadger.
     // This is an alternative to manually uploading the source maps.
     // See https://docs.honeybadger.io/lib/javascript/guides/using-source-maps.html
     // Note: This is disabled in development mode.
+
     if (
       HONEYBADGER_API_KEY &&
-      HONEYBADGER_ASSETS_URL &&
-      NODE_ENV === "production"
+      (NODE_ENV === "production" || NODE_ENV === "staging")
     ) {
       // `config.devtool` must be 'hidden-source-map' or 'source-map' to properly pass sourcemaps.
       // Next.js uses regular `source-map` which doesnt pass its sourcemaps to Webpack.
       // https://github.com/vercel/next.js/blob/89ec21ed686dd79a5770b5c669abaff8f55d8fef/packages/next/build/webpack/config/blocks/base.ts#L40
       // Use the hidden-source-map option when you don't want the source maps to be
       // publicly available on the servers, only to the error reporting
       config.devtool = "hidden-source-map";
-
       config.plugins.push(
         new HoneybadgerSourceMapPlugin({
           apiKey: HONEYBADGER_API_KEY,
-          assetsUrl: HONEYBADGER_ASSETS_URL,
+          assetsUrl: `${NEXT_PUBLIC_DC_URL}/_next`,
           revision: HONEYBADGER_REVISION,
         })
       );

package.json

@@ -19,7 +19,7 @@
     "@honeybadger-io/webpack": "^4.8.2",
     "@iiif/parser": "^1.0.10",
     "@nulib/dcapi-types": "^2.0.0-rc.4",
-    "@nulib/design-system": "^1.6.1",
+    "@nulib/design-system": "^1.6.2",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.0.1",
     "@radix-ui/react-aspect-ratio": "^1.0.1",