Stash.

nulib · Oct 11, 2024 · 4eb82d9 · 4eb82d9
1 parent 305d8c5
commit 4eb82d9
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 17 deletions.
diff --git a/components/Shared/IIIF/Share.tsx b/components/Shared/IIIF/Share.tsx
@@ -1,5 +1,75 @@
-const IIIFShare = ({ uri }) => {
-  return <>resource: {uri}</>;
+import * as Dropdown from "@radix-ui/react-dropdown-menu";
+
+import CopyText from "../CopyText";
+import IIIFLogo from "../SVG/IIIF";
+import Icon from "../Icon";
+import { IconArrowForward } from "../SVG/Icons";
+import { styled } from "@/stitches.config";
+
+const IIIFShare = ({ uri }: { uri: string }) => {
+  return (
+    <StyledIIIFShare>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Icon>
+            <IIIFLogo />
+          </Icon>
+          View as IIIF
+          <Icon>
+            <IconArrowForward />
+          </Icon>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>
+            <CopyText textPrompt="Copy IIIF" textToCopy={uri} />
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <a href={uri} target="_blank" rel="noreferrer">
+              View IIIF JSON
+            </a>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <a
+              href="https://iiif.io/get-started/why-iiif/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              What is IIIF?
+            </a>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </StyledIIIFShare>
+  );
 };
 
+const StyledIIIFShare = styled("div", {
+  position: "relative",
+  zIndex: 1,
+
+  "> button": {
+    backgroundColor: "$gray6",
+    color: "$black50",
+    fill: "$black50",
+    fontFamily: "$northwesternSansRegular",
+    fontSize: "$gr2",
+    borderRadius: "38px",
+    border: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    cursor: "pointer",
+
+    "&:hover, &:active ": {
+      color: "$black",
+      fill: "$black",
+      backgroundColor: "$black10",
+    },
+  },
+
+  [`${Dropdown.Content}`]: {
+    backgroundColor: "$white",
+  },
+});
+
 export default IIIFShare;
diff --git a/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx b/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx
@@ -48,18 +48,19 @@ const IIIFManifest: React.FC<IIIFManifestProps> = ({ manifest, work }) => {
             manifestId={manifest.id}
           />
         </ShareURLActions>
-        {(isWorkInstitution || isWorkPrivate) && (
-          <Announcement
-            css={{
-              marginTop: "1rem",
-            }}
-            data-testid="mirador-announcement"
-          >
-            Opening in external tools like Mirador is not supported for works
-            that require authentication.
-          </Announcement>
-        )}
       </ShareURL>
+
+      {(isWorkInstitution || isWorkPrivate) && (
+        <Announcement
+          css={{
+            marginTop: "1rem",
+          }}
+          data-testid="mirador-announcement"
+        >
+          Opening in external tools like Mirador is not supported for works that
+          require authentication.
+        </Announcement>
+      )}
     </>
   );
 };

diff --git a/lib/dc-api.ts b/lib/dc-api.ts
@@ -1,7 +1,7 @@
+import { DCAPI_ENDPOINT, DC_API_SEARCH_URL } from "./constants/endpoints";
 import axios, { AxiosError, RawAxiosRequestHeaders } from "axios";
 
 import type { ApiSearchRequestBody } from "@/types/api/request";
-import { DC_API_SEARCH_URL } from "./constants/endpoints";
 import { NextRouter } from "next/router";
 
 interface ApiGetRequestParams {
@@ -74,13 +74,26 @@ async function getIIIFResource<R>(
   }
 }
 
-function iiifSearchUrl(query: NextRouter["query"], size?: number): string {
+function iiifSearchUri(query: NextRouter["query"], size?: number): string {
   const url = new URL(DC_API_SEARCH_URL);
   Object.keys(query).forEach((key) => {
     url.searchParams.append(key, query[key] as string);
   });
+
+  if (size) url.searchParams.append("size", size.toString());
+  url.searchParams.append("as", "iiif");
+
+  return url.toString();
+}
+
+function iiifCollectionUri(id?: string, size?: number): string | undefined {
+  if (!id) return;
+
+  const url = new URL(`${DCAPI_ENDPOINT}/collections/${id}`);
+
   if (size) url.searchParams.append("size", size.toString());
   url.searchParams.append("as", "iiif");
+
   return url.toString();
 }
 
@@ -108,5 +121,6 @@ export {
   apiPostRequest,
   getIIIFResource,
   handleError,
-  iiifSearchUrl,
+  iiifCollectionUri,
+  iiifSearchUri,
 };
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
@@ -38,6 +38,7 @@ import Layout from "components/layout";
 import ReadMore from "@/components/Shared/ReadMore";
 import { buildDataLayer } from "@/lib/ga/data-layer";
 import { getHeroCollection } from "@/lib/iiif/collection-helpers";
+import { iiifCollectionUri } from "@/lib/dc-api";
 import { loadCollectionStructuredData } from "@/lib/json-ld";
 import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
 import { useRouter } from "next/router";
@@ -58,6 +59,8 @@ const Collection: NextPage = () => {
 
   const description = collection?.description;
 
+  const iiifResource = iiifCollectionUri(collection?.id);
+
   /** Get the Collection */
   useEffect(() => {
     async function getData() {
@@ -173,7 +176,7 @@ const Collection: NextPage = () => {
                 </Facts>
               </Container>
             </Interstitial>
-            <IIIFShare />
+            <IIIFShare uri={iiifResource} />
             <Container>
               <Tabs defaultValue="explore">
                 <TabsList aria-label="Explore">