Add copy manifest functionality, what is iiif link?

nulib · May 5, 2023 · aa23b6d · aa23b6d
1 parent de1bd27
commit aa23b6d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/components/Shared/CopyText.styled.ts b/components/Shared/CopyText.styled.ts
@@ -23,6 +23,7 @@ const StyledCopyText = styled("button", {
   cursor: "pointer",
   color: "$purple",
   fontWeight: "700",
+  fontFamily: "$northwesternSans",
   fontSize: "$gr3",
   whiteSpace: "nowrap",
 

diff --git a/components/Work/ActionsDialog/DownloadAndShare.styled.ts b/components/Work/ActionsDialog/DownloadAndShare.styled.ts
@@ -5,18 +5,18 @@ import { styled } from "@/stitches.config";
 
 const EmbedViewer = styled("div", {
   border: "2px dashed $black10",
-  width: "calc(100% - $4)",
-  padding: "$3 $4",
+  width: "calc(100% - $gr4)",
+  padding: "$gr4",
 
   "@sm": {
     width: "100%",
   },
 
   pre: {
-    margin: "$3 0",
+    margin: "0 0 $gr3",
     whiteSpace: "break-spaces",
     borderRadius: "3px",
-    fontSize: "$3",
+    fontSize: "$gr2",
     lineHeight: "1.55em",
     wordBreak: "break-word",
   },
@@ -39,13 +39,13 @@ const EmbedHTMLActionRow = styled("div", {
 const ItemActions = styled("ul", {
   display: "flex",
   padding: "0",
-  margin: "$3 0",
+  margin: "$gr3 0",
   fontWeight: "400",
 
   li: {
     listStyle: "none",
-    margin: "0 $3 0 0",
-    fontSize: "$3",
+    margin: "0 $gr3 0 0",
+    fontSize: "$gr3",
 
     [`${StyledCopyText}`]: {
       color: "$black50",
@@ -111,6 +111,28 @@ const ItemStyled = styled("div", {
   margin: "$4 0 0",
 });
 
+const ShareURL = styled(EmbedHTML, {
+  "> a": {
+    fontSize: "$gr3",
+  },
+});
+
+const ShareURLActions = styled(EmbedHTMLActionRow, {
+  marginTop: "$gr3",
+
+  "> a, > button": {
+    marginLeft: "$gr3",
+    color: "$black50",
+    fontSize: "$gr3",
+    textDecoration: "underline",
+    fontWeight: "400",
+
+    "&:first-child": {
+      marginLeft: "0",
+    },
+  },
+});
+
 export {
   EmbedHTML,
   EmbedHTMLActionRow,
@@ -120,4 +142,6 @@ export {
   ItemRow,
   ItemStyled,
   ItemThumbnail,
+  ShareURL,
+  ShareURLActions,
 };
diff --git a/components/Work/ActionsDialog/DownloadAndShare.tsx b/components/Work/ActionsDialog/DownloadAndShare.tsx
@@ -12,14 +12,16 @@ import {
   ItemRow,
   ItemStyled,
   ItemThumbnail,
+  ShareURL,
+  ShareURLActions,
 } from "@/components/Work/ActionsDialog/DownloadAndShare.styled";
 import { Label, Thumbnail } from "@samvera/nectar-iiif";
 import { makeBlob, mimicDownload } from "@samvera/image-downloader";
 
 import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
 import Announcement from "@/components/Shared/Announcement";
 import CopyText from "@/components/Shared/CopyText";
-import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled";
+import Heading from "@/components/Heading/Heading";
 import IIIF from "@/components/Shared/SVG/IIIF";
 import React from "react";
 import SharedSocial from "@/components/Shared/Social";
@@ -66,19 +68,35 @@ const DownloadAndShare: React.FC = () => {
       </ActionsDialogAside>
       <Content>
         {!isSharedLinkPage && (
-          <DefinitionListWrapper>
-            <dl>
-              <dt>IIIF Manifest</dt>
-              <dd>
-                <a href={manifest.id} target="_blank" rel="noreferrer">
-                  {manifest.id}
+          <>
+            <Heading as="h3" css={{ marginTop: "0" }}>
+              IIIF Manifest
+            </Heading>
+            <ShareURL>
+              <a href={manifest.id} target="_blank" rel="noreferrer">
+                {manifest.id}
+              </a>
+              <ShareURLActions>
+                <CopyText
+                  renderIcon={IIIF}
+                  textPrompt="Copy Manifest Link"
+                  textToCopy={manifest.id}
+                />
+                <a href="https://iiif.io/get-started/why-iiif/" target="_blank">
+                  What is IIIF?
                 </a>
-              </dd>
-            </dl>
-          </DefinitionListWrapper>
+                <a
+                  href={`https://projectmirador.org/embed/?iiif-content=${manifest.id}`}
+                  target="_blank"
+                >
+                  View in Mirador
+                </a>
+              </ShareURLActions>
+            </ShareURL>
+          </>
         )}
 
-        <h3>Embed Viewer</h3>
+        <Heading as="h3">Embed Viewer</Heading>
         {showEmbedWarning && <Announcement>{embedWarningMessage}</Announcement>}
         {!showEmbedWarning && (
           <EmbedViewer>
@@ -89,7 +107,7 @@ const DownloadAndShare: React.FC = () => {
 
         {Array.isArray(manifest?.items) && (
           <>
-            <h3>Download and Embed</h3>
+            <Heading as="h3">Download and Embed</Heading>
 
             {isWorkRestricted && !isSharedLinkPage && (
               <Announcement>