feat: document type asset pages

Author: alexgoff

app/[locale]/gallery/collections/[gallery]/[asset]/page.tsx

@@ -12,6 +12,7 @@ import ImageSizes from "@/components/organisms/gallery/metadata/Sizes";
 import AssetTags from "@/components/organisms/gallery/metadata/Tags";
 import CantoImage from "@/components/organisms/gallery/CantoImage";
 import CantoVideo from "@/components/organisms/gallery/CantoVideo";
+import CantoDocument from "@/components/organisms/gallery/CantoDocument";
 import AssetMetadata from "@/components/organisms/gallery/metadata/Asset";
 
 export async function generateMetadata({
@@ -29,6 +30,7 @@ export async function generateMetadata({
 const assetComponent: Record<SupportedCantoAssetScheme, ComponentType> = {
   image: CantoImage,
   video: CantoVideo,
+  document: CantoDocument,
 };
 
 const GalleryAsset: FunctionComponent<GalleryAssetProps> = async ({
@@ -72,17 +74,21 @@ const GalleryAsset: FunctionComponent<GalleryAssetProps> = async ({
     image: (
       <>
         <ImageSizes
-          width={parseInt(width)}
-          height={parseInt(height)}
-          {...{ directUrlPreview, directUrlOriginal }}
+          {...{ width, height, directUrlPreview, directUrlOriginal }}
         />
         <AssetTags tags={validTagsOnly} parentUri={parentUri} />
       </>
     ),
     video: <AssetTags tags={validTagsOnly} parentUri={parentUri} />,
+    document: (
+      <>
+        <AssetTags tags={validTagsOnly} parentUri={parentUri} />
+      </>
+    ),
   };
 
   const Asset = assetComponent[scheme];
+  const dateCreated = new Date(DateCreated);
 
   return (
     <SingleMediaAsset
@@ -100,14 +106,15 @@ const GalleryAsset: FunctionComponent<GalleryAssetProps> = async ({
             parentUri,
             id,
             name,
+            scheme,
+            dateCreated,
           }}
         />
       }
       metadataBlocks={
         <AssetMetadata
           size={parseInt(size)}
-          dateCreated={new Date(DateCreated)}
-          {...{ scheme, width, height }}
+          {...{ scheme, width, height, dateCreated }}
         />
       }
       metadataLinks={links[scheme]}

components/atomic/Tile/patterns/SlideTile/styles.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import styled from "styled-components";
 import { MixedLink as BaseMixedLink } from "@rubin-epo/epo-react-lib";
-import SharePopupComponent from "@/layout/SharePopup";
+import SharePopupComponent from "@/components/molecules/SharePopup";
 import {
   BREAK_PHABLET,
   BREAK_PHABLET_MIN,
@@ -899,10 +899,12 @@ export const PlayButton = styled.span`
 `;
 
 export const SharePopup = styled(SharePopupComponent)`
+  --color-background-button: transparent;
+  --color-font-button: var(--neutral40);
+
   position: absolute;
   inset-block-end: 30px;
   inset-inline-end: 30px;
-  color: var(--neutral40);
 
   @media (max-width: ${BREAK_TABLET}) {
     display: none;

components/atomic/Tile/styles.js

@@ -2,7 +2,7 @@
 import styled from "styled-components";
 import BaseMixedLink from "@rubin-epo/epo-react-lib/MixedLink";
 import BaseResponsiveImage from "@rubin-epo/epo-react-lib/ResponsiveImage";
-import SharePopupComponent from "@/layout/SharePopup";
+import SharePopupComponent from "@/components/molecules/SharePopup";
 import {
   BREAK_PHABLET,
   BREAK_PHABLET_MIN,
@@ -818,7 +818,7 @@ export const MixedLink = styled(BaseMixedLink)`
   }
 
   &.padded-bottom {
-    padding-bottom: 49px;
+    padding-bottom: calc(15px + var(--size-spacing-m));
 
     @media (max-width: ${BREAK_TABLET}) {
       padding-bottom: 0;
@@ -909,9 +909,8 @@ export const PlayButton = styled.span`
 
 export const SharePopup = styled(SharePopupComponent)`
   position: absolute;
-  right: 12px;
-  bottom: 0;
-  color: var(--neutral40);
+  inset-block-end: 15px;
+  inset-inline-end: 15px;
 
   @media (max-width: ${BREAK_TABLET}) {
     display: none;

components/content-blocks/Callout/CalloutEntry/styles.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { MixedLink } from "@rubin-epo/epo-react-lib";
-import SharePopupComponent from "@/layout/SharePopup";
+import SharePopupComponent from "@/components/molecules/SharePopup";
 import {
   fluidScale,
   containerRegular,
@@ -201,10 +201,12 @@ export const FooterButton = styled(MixedLink)`
 `;
 
 export const SharePopup = styled(SharePopupComponent)`
+  --color-background-button: transparent;
+  --color-font-button: var(--neutral40);
+
   position: absolute;
   inset-block-end: 30px;
   inset-inline-end: 30px;
-  color: var(--neutral40);
 
   @media (max-width: ${tokens.BREAK_TABLET}) {
     display: none;

components/layout/SharePopup/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { FC, useState } from "react";
+import { Popover } from "@headlessui/react";
+import { usePopper } from "react-popper";
+import { useTranslation } from "react-i18next";
+import IconComposer from "@rubin-epo/epo-react-lib/IconComposer";
+import { isAbsoluteUrl } from "@/helpers";
+import ShareButtons from "@/atomic/Share";
+import styles from "./styles.module.css";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+function createFinalUrl(url: string) {
+  if (isAbsoluteUrl(url)) return url;
+
+  const urlObj = new URL(url, BASE_URL);
+  return urlObj.toString();
+}
+
+interface SharePopupProps {
+  title: string;
+  url: string;
+  className?: string;
+}
+
+const SharePopup: FC<SharePopupProps> = ({ title, url, className }) => {
+  const { t } = useTranslation();
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+  const { styles: popperStyles, attributes } = usePopper(
+    referenceElement,
+    popperElement,
+    {
+      modifiers: [{ name: "offset", options: { offset: [0, 10] } }],
+    }
+  );
+
+  return (
+    <Popover className={className}>
+      <Popover.Button ref={setReferenceElement} className={styles.button}>
+        <IconComposer size="0.75em" icon="shareToggle" />
+        <span className="a-hidden">{t("share.label_item", { title })}</span>
+      </Popover.Button>
+      <Popover.Panel
+        ref={setPopperElement}
+        style={popperStyles.popper}
+        {...attributes.popper}
+        className={styles.panel}
+      >
+        <ShareButtons title={title} url={createFinalUrl(url)} />
+      </Popover.Panel>
+    </Popover>
+  );
+};
+
+SharePopup.displayName = "Layout.SharePopup";
+
+export default SharePopup;

components/layout/SharePopup/styles.js

@@ -0,0 +1,33 @@
+.button {
+  aspect-ratio: 1;
+  background-color: var(
+    --color-background-button,
+    var(--color-background-tile-light)
+  );
+  border-radius: calc(var(--size-spacing-m) / 2);
+  border: 1px solid transparent;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 16%);
+  color: var(--color-font-button, #313333);
+  font-size: var(--size-spacing-m);
+  width: var(--size-spacing-m);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:not(:disabled):hover,
+  &[data-headlessui-state="open"] {
+    border-color: var(--color-border-button-hover, #707070);
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.panel {
+  padding: var(--size-spacing-2xs);
+  background-color: var(--white);
+  border-radius: 5px;
+  box-shadow: 5px 15px 35px 8px rgba(0, 0, 0, 13%);
+}

components/molecules/SharePopup/index.tsx

@@ -0,0 +1,51 @@
+import { FC } from "react";
+import { DigitalDocument } from "schema-dts";
+import Image from "next/image";
+import StructuredData from "@/components/atomic/StructuredData";
+import { CantoAssetDetailed } from "@/lib/api/galleries/schema";
+import { assetAlt } from "@/lib/api/canto/metadata";
+import { tokens } from "@rubin-epo/epo-react-lib/styles";
+import { resizeCantoImage } from "@/lib/api/canto/resize";
+
+interface CantoDocumentProps {
+  locale: string;
+  asset: CantoAssetDetailed;
+}
+
+const CantoDocument: FC<CantoDocumentProps> = ({ locale, asset }) => {
+  const { additional, url, width, height } = asset;
+
+  const aspectRatio = width / height;
+  const landscapeSizes = `(max-width: ${tokens.BREAK_TABLET}) 100vw, 1435px`;
+  const portraitSizes = `(max-width: ${tokens.BREAK_TABLET}) 100vw, 700px`;
+
+  const structuredData: DigitalDocument = {
+    "@type": "DigitalDocument",
+    size: asset.size,
+    url: url.directUrlOriginal,
+    creditText: asset.additional.Credit || undefined,
+    encodingFormat: asset.default.ContentType,
+    dateCreated: asset.default.DateCreated,
+    thumbnailUrl: resizeCantoImage(url.directUrlPreview, 100),
+  };
+
+  return (
+    <>
+      <StructuredData jsonLd={structuredData} />
+      <Image
+        {...{ width, height }}
+        data-cy="canto-image"
+        alt={assetAlt(additional, locale)}
+        src={resizeCantoImage(url.directUrlPreview, 2050)}
+        sizes={aspectRatio < 1 ? portraitSizes : landscapeSizes}
+        quality={85}
+        priority
+        title={asset.name}
+      />
+    </>
+  );
+};
+
+CantoDocument.displayName = "Organism.Gallery.CantoDocument";
+
+export default CantoDocument;

components/molecules/SharePopup/styles.module.css

@@ -19,7 +19,7 @@ const CantoDownload: FunctionComponent<CantoDownloadProps> = async ({
     <Buttonish
       data-cy="canto-download"
       url={`/api/canto/${scheme}/${contentId}/${directUrlOriginalHash}${search}`}
-      text={t("gallery.download-original")}
+      text={t(`gallery.download-${scheme}`)}
       download={searchParams.get("name")}
       rel="alternate"
     />