Merge pull request #254 from nulib/deploy/staging

Update main.

.gitignore

@@ -43,3 +43,6 @@ yarn-error.log*
 
 # ephemeral build artifacts
 /lib/honeybadger/config.vars.js
+
+# vscode
+.vscode/*

README.md

@@ -51,6 +51,10 @@ A pre-commit hook will ensure code is linted before committed.
 
 ### End to end tests
 
+#### Setup
+
+We can run E2E tests against the test environment (...more coming soon)
+
 E2E tests use [Cypress](https://docs.cypress.io/), and are linted with [Cypress ESLint Plugin](https://github.com/cypress-io/eslint-plugin-cypress)
 
 To run the text suite:
@@ -59,10 +63,6 @@ To run the text suite:
 npm run cypress:open
 ```
 
-#### Fixtures
-
-E2E JSON API response fixtures are located in `/cypress/fixtures
-
 ### Unit tests
 
 Unit tests use Jest and Testing Library React. Convention is to write tests alongside their respective components:
@@ -86,13 +86,13 @@ npm run test
 
 Currently DC v2 hits a new DC API v2 for it's indexed data.
 
-`https://dcapi.rdc-staging.library.northwestern.edu/docs/v2`
+`https://dcapi.rdc.library.northwestern.edu/docs/v2`
 
 Behind the scenes, DC API v2 is using OpenSearch `v 1.2` or Elasticsearch `v 7.17`. (For documentation references).
 
 ### Endpoints
 
-The API endpoint is an environment variable which is accessed in a local dev environment via the `miscellany` Git repo.
+The API endpoint is an environment variable which is accessed in a local dev environment via the `miscellany` Git repo. The dev environment runs against Staging.
 
 ### Viewing OpenSearch data locally
 
@@ -128,6 +128,10 @@ curl -X POST '[URL]/search/collections' --data-binary '{"query": {"match_all": {
 
 See documentation in above link for more info
 
+## Optimizations
+
+`npm run analyze` will run the [Next Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) to show snapshots of the app's bundled JS.
+
 ## Design
 
 ### Icons

components/Facets/Filter/GroupList.test.tsx

@@ -75,12 +75,8 @@ describe("FacetsGroupList component", () => {
      * Looks like Radix puts this active state data attribute
      * on the element.... good for testing against:)
      */
-    expect(
-      screen.getAllByRole("tab", { exact: true })[0].dataset.state
-    ).toEqual("active");
-    expect(
-      screen.getAllByRole("tab", { exact: true })[1].dataset.state
-    ).toEqual("inactive");
+    expect(screen.getAllByRole("tab")[0].dataset.state).toEqual("active");
+    expect(screen.getAllByRole("tab")[1].dataset.state).toEqual("inactive");
   });
 
   it("renders facet aggregations when a facet is clicked upon", async () => {

components/Hero/Basic.styled.ts

@@ -10,6 +10,7 @@ const HeroBasicStyled = styled("section", {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
+  background: "url(/images/liz__O8A9903_final.jpg)",
 
   "&:before": {
     content: "",
@@ -18,7 +19,6 @@ const HeroBasicStyled = styled("section", {
     left: 0,
     width: "100%",
     height: "100%",
-    background: "url(/images/liz__O8A9903_final.jpg)",
     backgroundRepeat: "no-repeat",
     backgroundSize: "cover",
     backgroundPosition: "center, center",

components/Hero/Basic.tsx

@@ -10,7 +10,7 @@ const HeroBasic: React.FC<Props> = ({ bgImage, children }) => {
   return (
     <HeroBasicStyled
       css={{
-        heroBgImage: bgImage,
+        background: `url(${bgImage})`,
       }}
     >
       <Content>{children}</Content>

components/Hero/Hero.styled.ts

@@ -3,7 +3,7 @@ import { styled } from "@/stitches.config";
 /* eslint sort-keys: 0 */
 
 const HeroActions = styled("div", {
-  paddingTop: "$gr3",
+  marginTop: "$gr4",
 
   a: {
     textTransform: "uppercase",

components/layout.tsx

@@ -24,7 +24,7 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({
   children,
   header = "default",
-  title,
+  title = "Digital Collections - Northwestern University Libraries",
 }) => {
   const [isLoaded, setIsLoaded] = React.useState(false);
 

context/user-context.tsx

@@ -1,8 +1,11 @@
 import React, { ReactNode, createContext, useState } from "react";
-import { type User, type UserContext } from "@/types/context/user";
+import {
+  type User,
+  type UserContext as UserContextType,
+} from "@/types/context/user";
 import { getUser } from "@/lib/user-helpers";
 
-const UserContext = createContext<UserContext>({ user: null });
+const UserContext = createContext<UserContextType>({ user: null });
 
 const UserProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);

lib/constants/404.ts

@@ -0,0 +1,60 @@
+import { DC_URL } from "./endpoints";
+import { HeroCollection } from "./homepage";
+
+/* eslint sort-keys: 0 */
+
+export const pageNotFoundCollection: HeroCollection = {
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  id: "https://devbox.library.northwestern.edu:3000/homepage-hero.json",
+  type: "Collection",
+  label: {
+    none: ["Page Not Found"],
+  },
+  items: [
+    {
+      id: "https://api.dc.library.northwestern.edu/api/v2/works/f880a614-6e75-4cd0-9af6-8b86af34f370?as=iiif",
+      type: "Collection",
+      label: { none: ["Page Not Found"] },
+      summary: {
+        none: [
+          'Sorry the page you are looking for does not exist. It\'s possible the resource, work, or collection is no longer available. If you think you reached this page in error, please <a href="https://dc.rdc-staging.library.northwestern.edu/contact">contact us</a>.',
+        ],
+      },
+      thumbnail: [
+        {
+          id: `/full/3000,/0/default.jpg`,
+          type: "Image",
+          format: "image/jpeg",
+          service: [
+            {
+              id: "https://iiif.dc.library.northwestern.edu/iiif/2/2b1e0758-122f-4f45-b37b-393f2ab0427e",
+              profile: "http://iiif.io/api/image/2/level2.json",
+              type: "ImageService2",
+            },
+          ],
+          width: 1650,
+          height: 1309,
+        },
+      ],
+      homepage: [
+        {
+          id: `${DC_URL}`,
+          type: "Text",
+        },
+      ],
+      seeAlso: [
+        {
+          id: `${DC_URL}`,
+          type: "Text",
+          label: { none: ["To Homepage"] },
+        },
+        {
+          id: `${DC_URL}/search`,
+          type: "Text",
+          label: { none: ["Search Works"] },
+        },
+      ],
+      nul_hero_region: "350,200,5000,4000",
+    },
+  ],
+};

next.config.js

@@ -9,22 +9,31 @@ const {
   NEXT_PUBLIC_DC_URL,
 } = process.env;
 const NODE_ENV = process.env.HONEYBADGER_ENV || process.env.NODE_ENV;
-const HONEYBADGER_REVISION = process.env.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);
+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};`
 );
 
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 /** @type {import('next').NextConfig} */
-module.exports = {
+module.exports = withBundleAnalyzer({
   env: {
     HONEYBADGER_API_KEY,
     HONEYBADGER_ENV,
@@ -33,6 +42,10 @@ module.exports = {
     NUSSO_API_KEY: process.env.NUSSO_API_KEY,
     NUSSO_BASE_URL: process.env.NUSSO_BASE_URL,
   },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
   images: {
     domains: [
       "dcapi.rdc.library.northwestern.edu",
@@ -73,4 +86,4 @@ module.exports = {
 
     return config;
   },
-};
+});