Merge pull request #230 from NYPL/release/0.1.17

Release 0.1.17

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+npm run update-changelog
+npx lint-staged

CHANGELOG.md

@@ -7,11 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## [0.1.16-alpha] 2024-11-8
+## [0.1.17] 2024-11-14
 
 ### Updated
 
 - Updated cards to use Next Image (DR-3056)
+- Refactored Repo API handler with added timeout errors (DR-3251)
+- Removed canonical tag to old DC (DR-3264)
+- Refactored Adobe Analytics page names (DR-3257)
+- Updated New Relic server configurations to its default settings to capture transactions (DR-3261)
+- Updated metadata to include specific Open Graph titles (DR-3273)
+
+### Fixed
+
+- Fixed division titles on division landing pages (DR-3274)
 
 ## [0.1.16] 2024-10-31
 

README.md

@@ -408,15 +408,15 @@ $ npm test -- src/[path/to/file]
 To run the homepage swimlane image loading test script against the qa environment, run
 
 ```
-npm run hompageImageLoadingTestQa
+npm run homepageImageLoadingTestQa
 ```
 
 (requires accessination with nypl-dams-dev)
 
 To run the same test script against the production environment, run
 
 ```
-npm run hompageImageLoadingTestProd
+npm run homepageImageLoadingTestProd
 ```
 
 The test waits for the 24 swim lane images to load, including the 12 that load after scrolling, and has succeeded if it does not time out. It simulates a single user loading the homepage one time.

app/collections/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { Metadata } from "next";
 import PageLayout from "../../src/components/pageLayout/pageLayout";
 import SearchResults from "@/src/components/search/results";
 import { mockItems } from "__tests__/__mocks__/data/mockItems";
+import { createAdobeAnalyticsPageName } from "@/src/utils/utils";
 
 type CollectionProps = {
   params: { slug: string };
@@ -14,11 +15,13 @@ export async function generateMetadata({
   const slug = params.slug; //  TODO: this needs to support both a slug or a uuid. we will need to update this later to check if slug is a uuid and then get the slugified title of the collection
   return {
     title: `${slug} - NYPL Digital Collections`,
+    openGraph: {
+      title: `${slug} - NYPL Digital Collections`,
+    },
   };
 }
 
 export default function Collections({ params }: CollectionProps) {
-  const pageName = `collections|${params.slug}`; // TODO: make sure this is the slugified title
   return (
     <PageLayout
       activePage="lane"
@@ -30,7 +33,10 @@ export default function Collections({ params }: CollectionProps) {
           url: `/collections/${params.slug}`,
         },
       ]}
-      adobeAnalyticsPageName={pageName}
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName(
+        "collections",
+        params.slug
+      )}
     >
       <SearchResults showFilter={false} isSearchPage={false} data={mockItems} />
     </PageLayout>

app/collections/lane/[slug]/page.tsx

@@ -10,10 +10,12 @@ type LaneProps = {
 export async function generateMetadata({
   params,
 }: LaneProps): Promise<Metadata> {
-  const slug = params.slug;
   const title = slugToString(params.slug);
   return {
     title: `${title} - NYPL Digital Collections`,
+    openGraph: {
+      title: `${title} - NYPL Digital Collections`,
+    },
   };
 }
 

app/collections/page.tsx

@@ -5,6 +5,9 @@ import { mockCollectionCards } from "__tests__/__mocks__/data/mockCollectionCard
 
 export const metadata: Metadata = {
   title: "Collections - NYPL Digital Collections",
+  openGraph: {
+    title: "Collections - NYPL Digital Collections",
+  },
 };
 
 export default async function Collections() {

app/divisions/[slug]/page.tsx

@@ -17,6 +17,9 @@ export async function generateMetadata({
   const slug = slugToString(params.slug);
   return {
     title: `${slug} - NYPL Digital Collections`,
+    openGraph: {
+      title: `${slug} - NYPL Digital Collections`,
+    },
   };
 }
 

app/divisions/page.tsx

@@ -6,6 +6,9 @@ import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
   title: "Divisions - NYPL Digital Collections",
+  openGraph: {
+    title: "Divisions - NYPL Digital Collections",
+  },
 };
 
 export default async function Divisions() {

app/error.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 
 import PageLayout from "./src/components/pageLayout/pageLayout";
 import ErrorPage from "./src/components/pages/errorPage/errorPage";
+import { createAdobeAnalyticsPageName } from "./src/utils/utils";
 
 export default function Error({
   error,
@@ -19,7 +20,12 @@ export default function Error({
   }, [error]);
 
   return (
-    <PageLayout activePage="serverError">
+    <PageLayout
+      activePage="serverError"
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName(
+        "internal-server-error"
+      )}
+    >
       <ErrorPage />
     </PageLayout>
   );

app/items/[uuid]/page.tsx

@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import PageLayout from "../../src/components/pageLayout/pageLayout";
 import Item from "../../src/components/items/item";
 import { getItemData } from "../../src/utils/api";
-import { stringToSlug } from "../../src/utils/utils";
+import { createAdobeAnalyticsPageName } from "../../src/utils/utils";
 import { ItemModel } from "../../src/models/item";
 
 type ItemProps = {
@@ -26,12 +26,14 @@ export async function generateMetadata({
   params.item = item;
   return {
     title: `${item.title} - NYPL Digital Collections`, //should be item title
+    openGraph: {
+      title: `${item.title} - NYPL Digital Collections`,
+    },
   };
 }
 
 export default async function ItemPage({ params }: ItemProps) {
   const item = await getItemModel(params.uuid);
-  const pageName = `items|${stringToSlug(item.title)}`;
   return (
     <PageLayout
       activePage="item"
@@ -43,7 +45,7 @@ export default async function ItemPage({ params }: ItemProps) {
           url: `/items/${params.uuid}`,
         },
       ]}
-      adobeAnalyticsPageName={pageName}
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName("items", item.title)}
     >
       <Item item={item} />
     </PageLayout>

app/layout.tsx

@@ -10,9 +10,6 @@ export const metadata: Metadata = {
   title: "NYPL Digital Collections",
   description:
     "NYPL's Digital Collections is a living database featuring prints, photographs, maps, manuscripts, video, and more unique research materials.",
-  alternates: {
-    canonical: "https://digitalcollections.nypl.org/",
-  },
   openGraph: {
     title: "NYPL Digital Collections",
     description:

app/search/index/page.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import PageLayout from "../../src/components/pageLayout/pageLayout";
 import SearchResults from "../../src/components/search/results";
 import { mockItems } from "../../../__tests__/__mocks__/data/mockItems"; // TODO: render mockItems
+import { createAdobeAnalyticsPageName } from "@/src/utils/utils";
 
 export type SearchProps = {
   params: { slug: string };
@@ -16,7 +17,10 @@ export default async function Search() {
         { text: "Home", url: "/" },
         { text: "Keyword Search", url: "/search/index" },
       ]}
-      adobeAnalyticsPageName="search"
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName(
+        "search-results",
+        ""
+      )} //TODO: if there are no query params, page name should be createAdobeAnalyticsPageName("all-items", "")
     >
       <SearchResults showFilter={false} isSearchPage data={mockItems} />
     </PageLayout>

app/src/components/card/cardImage.tsx

@@ -33,6 +33,7 @@ export const CardImage = ({ record, imageHeight }: CardImageProps) => {
           minHeight: "100%",
           height: "auto",
         }}
+        placeholder="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8WQ8AAlcBas53/MIAAAAASUVORK5CYII="
         width={initialImageHeight * 2}
         height={initialImageHeight}
         onError={(_event) => {

app/src/components/lane/laneLoading.tsx

@@ -14,7 +14,7 @@ export default function LaneLoading({ withTitle = true }) {
           <SkeletonLoader contentSize={0} showImage={false} headingSize={1} />
         </Flex>
       )}
-      <DCSimpleGrid>
+      <DCSimpleGrid marginTop="s">
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />

app/src/components/pages/aboutPage/aboutPage.tsx

@@ -2,6 +2,7 @@
 import { Box } from "@nypl/design-system-react-components";
 import aboutPageElements from "../../../data/aboutPageElements";
 import PageLayout from "../../pageLayout/pageLayout";
+import { createAdobeAnalyticsPageName } from "@/src/utils/utils";
 
 export default function AboutPage() {
   function createSection(heading: React.JSX.Element, body: React.JSX.Element) {
@@ -14,7 +15,10 @@ export default function AboutPage() {
   }
 
   return (
-    <PageLayout activePage="about" adobeAnalyticsPageName="about">
+    <PageLayout
+      activePage="about"
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName("about")}
+    >
       <Box
         id="mainContent"
         sx={{

app/src/components/pages/collectionLanePage/collectionLanePage.tsx

@@ -6,7 +6,10 @@ import {
 } from "@nypl/design-system-react-components";
 import { useParams } from "next/navigation";
 import { headerBreakpoints } from "../../../utils/breakpoints";
-import { slugToString } from "../../../utils/utils";
+import {
+  slugToString,
+  createAdobeAnalyticsPageName,
+} from "../../../utils/utils";
 import { mockCollections } from "__tests__/__mocks__/data/mockCollections";
 import { CardsGrid } from "../../grids/cardsGrid";
 import React, { useEffect, useRef, useState } from "react";
@@ -20,7 +23,6 @@ export default function CollectionLanePage() {
   const slug = params.slug as string;
   const title = slugToString(slug);
   const [isLoaded, setIsLoaded] = useState(false);
-  const pageName = `collections|lane|${slug}`;
   const { isLargerThanLargeTablet } = useBreakpoints();
   const cardRef = useRef<HTMLDivElement>(null);
   const tooltipOffset = useTooltipOffset(cardRef);
@@ -37,7 +39,10 @@ export default function CollectionLanePage() {
         { text: "Collections", url: "/collections" },
         { text: `${title}`, url: `/collections/lane/${slug}` },
       ]}
-      adobeAnalyticsPageName={pageName}
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName(
+        "collections|lane",
+        slug
+      )}
     >
       <Box
         sx={{

app/src/components/pages/collectionsPage/collectionsPage.tsx

@@ -9,6 +9,7 @@ import {
   SearchBar,
 } from "@nypl/design-system-react-components";
 import { headerBreakpoints } from "../../../utils/breakpoints";
+import { createAdobeAnalyticsPageName } from "@/src/utils/utils";
 
 export const CollectionsPage = ({ data }) => {
   return (
@@ -18,7 +19,7 @@ export const CollectionsPage = ({ data }) => {
         { text: "Home", url: "/" },
         { text: "Collections", url: "/collections" },
       ]}
-      adobeAnalyticsPageName="all-collections"
+      adobeAnalyticsPageName={createAdobeAnalyticsPageName("all-collections")}
     >
       <Box
         sx={{