Pull changes from upstream.

README.md

@@ -5,7 +5,6 @@ An open-source static site generator designed for fast creation, contextualizati
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/canopy-iiif/canopy-iiif)
 
 - [Demo (Static)](https://canopy-iiif.github.io/canopy-iiif/)
-- [Demo (Vercel)](https://canopy-iiif.vercel.app/)
 - [Documentation](https://canopy-iiif.github.io/docs/)
 
 ![collage of canopy iiif views](https://github.com/canopy-iiif/canopy-iiif/assets/7376450/1779a0ce-1f62-4e9b-8186-110264c81bba)

config/locales/en.json

@@ -2,6 +2,10 @@
   "footerSourceCollection": "Source Collection",
   "footerToggleTheme": "Toggle Theme",
   "homepageHighlightedWorks": "Highlighted Works",
+  "primitiveHomepage": "Homepage",
+  "primitivePartOf": "Parent collections",
+  "primitiveRendering": "Alternative formats",
+  "primitiveSeeAlso": "See also",
   "searchButton": "Search",
   "searchResults": "Results",
   "searchFilter": "Filter",

content/works/_layout.mdx

@@ -18,6 +18,7 @@
         <Tabs.Content value="details">
           <Work.Metadata />
           <Work.RequiredStatement />
+          <Work.LinkingProperty />
           <Work.ManifestId />
         </Tabs.Content>
 

package.json

@@ -25,7 +25,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.0.2",
-    "@samvera/clover-iiif": "^2.7.5",
+    "@samvera/clover-iiif": "^2.8.2",
     "@stitches/react": "^1.2.8",
     "axios": "^0.24.0",
     "clsx": "^1.1.1",

src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from "react";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { Heading } from "@radix-ui/themes";
 import { Label } from "@samvera/clover-iiif/primitives";
-import Link from "next/link";
+import Link from "@components/Shared/Link";
 import Locale from "@components/Shared/Locale/Locale";
 import Nav from "@components/Nav/Nav";
 import Search from "@components/Search/Search";

src/components/Hero/Hero.tsx

@@ -7,9 +7,9 @@ import { Autoplay, EffectFade, Keyboard, Navigation } from "swiper";
 import { Label, Thumbnail } from "@samvera/clover-iiif/primitives";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import Container from "../Shared/Container";
+import Container from "@components/Shared/Container";
 import { HeroStyled } from "@components/Hero/Hero.styled";
-import Link from "next/link";
+import Link from "@components/Shared/Link";
 import React from "react";
 
 interface HeroProps {

src/components/Map/Map.tsx

@@ -1,6 +1,7 @@
 import "leaflet/dist/leaflet.css";
 import "leaflet.markercluster/dist/MarkerCluster.css";
 import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
 import {
   FeatureGroup,
   LayersControl,
@@ -11,10 +12,11 @@ import {
 } from "react-leaflet";
 import { Label, Thumbnail } from "@samvera/clover-iiif/primitives";
 import { useEffect, useRef, useState } from "react";
+
 import Container from "@components/Shared/Container";
 import { InternationalString } from "@iiif/presentation-3";
 import Leaflet from "leaflet";
-import Link from "next/link";
+import Link from "@components/Shared/Link";
 import { MapStyled } from "@components/Map/Map.styled";
 import MarkerClusterGroup from "@components/Map/MarkerClusterGroup";
 import { getBounds } from "@lib/iiif/navPlace";

src/components/Shared/Button/Button.tsx

@@ -1,6 +1,6 @@
 import { BaseButtonProps } from "@radix-ui/themes/dist/cjs/components/base-button";
 import { ButtonStyled } from "@components/Shared/Button/Button.styled";
-import Link from "next/link";
+import Link from "@components/Shared/Link";
 import React from "react";
 
 interface ButtonProps extends BaseButtonProps {

src/components/Shared/DefinitionList.styled.ts

@@ -14,6 +14,11 @@ const DefinitionListWrapper = styled("div", {
     dd: {
       padding: "0 0 $gr1",
       margin: "0",
+
+      a: {
+        color: "var(--accent-11)",
+        textDecoration: "none",
+      }
     },
   },
 });

src/components/Work/LinkingProperty.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { LocaleString } from "@hooks/useLocale";
+import {
+  Homepage,
+  PartOf,
+  PrimitivesExternalWebResource,
+  PrimitivesIIIFResource,
+  Rendering,
+  SeeAlso
+} from "@samvera/clover-iiif/primitives";
+import { styled } from "@styles/stitches";
+
+const WorkLinkingProperty = ({
+  homepage, partOf, rendering, seeAlso
+}: {
+  homepage?: PrimitivesExternalWebResource[];
+  partOf?: PrimitivesIIIFResource[];
+  rendering?: PrimitivesExternalWebResource[];
+  seeAlso?: PrimitivesExternalWebResource[];
+}) => {
+
+  return (
+    <StyledLinkingProperty>
+      {rendering && (
+        <dl>
+          <dt>{LocaleString("primitiveRendering") || "Alternate formats"}</dt>
+          <dd><Rendering rendering={rendering} /></dd>
+        </dl>
+      )}
+      {seeAlso && (
+        <dl>
+          <dt>{LocaleString("primitiveSeeAlso") || "See also"}</dt>
+          <dd><SeeAlso seeAlso={seeAlso} /></dd>
+        </dl>
+      )}
+      {homepage && (
+        <dl>
+          <dt>{LocaleString("primitiveHomepage") || "Homepage"}</dt>
+          <dd><Homepage homepage={homepage} /></dd>
+        </dl>
+      )}
+      {partOf && (
+        <dl>
+          <dt>{LocaleString("primitivePartOf")  || "Parent collections"}</dt>
+          <dd><PartOf partOf={partOf} /></dd>
+        </dl>
+      )}
+    </StyledLinkingProperty>
+  );
+};
+
+export default WorkLinkingProperty;
+
+const StyledLinkingProperty = styled("div", {
+    dl: {
+      margin: "0",
+
+      dt: {
+        padding: "$gr2 0 $gr1",
+        fontWeight: "500",
+        color: "var(--gray-10)",
+        fontSize: "$gr2",
+      },
+
+      dd: {
+        padding: "0 0 $gr1",
+
+        a: {
+          color: "var(--accent-11)",
+          textDecoration: "none",
+        },
+
+        ul: {
+          listStyle: "none",
+          listStyleType: "none",
+          margin: "0",
+          paddingInlineStart: "0px",
+
+          li: {
+            listStyle: "none",
+            listStyleType: "none",
+          }
+        }
+      },
+    }
+  },
+);

src/components/Work/Metadata.tsx

@@ -1,6 +1,6 @@
 import { DefinitionListWrapper } from "../Shared/DefinitionList.styled";
 import FACETS from "@.canopy/facets.json";
-import { Link } from "@radix-ui/themes";
+import Link from "@components/Shared/Link";
 import { Metadata } from "@samvera/clover-iiif/primitives";
 import { MetadataItem } from "@iiif/presentation-3";
 import React from "react";

src/lib/build/slug.js

@@ -14,8 +14,8 @@ function getNumber(number) {
   return number ? number + 1 : 1;
 }
 
-function getSlug(text = "") {
-  return limit(slugify(text, config), 100);
+function getSlug(text) {
+  return limit(slugify(String(text), config), 100);
 }
 
 function getUniqueSlug(text, allSlugs) {

src/pages/metadata.tsx

@@ -3,11 +3,11 @@ import {
   ContentWrapper,
 } from "@components/Shared/Content.styled";
 
-import Container from "../components/Shared/Container";
+import Container from "@components/Shared/Container";
 import FACETS from "@.canopy/facets.json";
 import Heading from "@components/Shared/Heading/Heading";
 import Layout from "@components/layout";
-import { Link } from "@radix-ui/themes";
+import Link from "@components/Shared/Link";
 import React from "react";
 import { styled } from "@styles/stitches";
 

src/pages/works/[slug].tsx

@@ -19,6 +19,7 @@ import WorkViewer from "@src/components/Work/Viewer";
 import WorkScroll from "@src/components/Work/Scroll";
 import WorkReferencingContent from "@src/components/Work/ReferencingContent";
 import WorkRequiredStatement from "@src/components/Work/RequiredStatement";
+import WorkLinkingProperty from "@components/Work/LinkingProperty";
 
 interface WorkProps {
   manifest: Manifest;
@@ -33,12 +34,12 @@ export default function WorkPage({
   related,
   source,
 }: WorkProps) {
-  const { id, label, metadata, requiredStatement, summary } = manifest;
-
+  const { id, homepage, label, metadata, rendering, requiredStatement, partOf, seeAlso, summary } = manifest;
   const Work = () => <></>;
 
   Work.ManifestId = () => <WorkManifestId manifestId={id} />;
   Work.Metadata = () => <WorkMetadata metadata={metadata} />;
+  Work.LinkingProperty = (props) => <WorkLinkingProperty {...props} homepage={homepage} partOf={partOf} rendering={rendering} seeAlso={seeAlso} />;
   Work.RequiredStatement = () => (
     <WorkRequiredStatement requiredStatement={requiredStatement} />
   );