feat: link to media policy

lsst-epo · Feb 3, 2025 · 0aa7dab · 0aa7dab
1 parent b114cae
commit 0aa7dab
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 6 deletions.
diff --git a/app/[locale]/gallery/collections/[gallery]/[asset]/layout.tsx b/app/[locale]/gallery/collections/[gallery]/[asset]/layout.tsx
@@ -1,12 +1,16 @@
 import { FunctionComponent, PropsWithChildren } from "react";
+import { Trans } from "react-i18next/TransWithoutContext";
 import Container from "@rubin-epo/epo-react-lib/Container";
 import Stack from "@rubin-epo/epo-react-lib/Stack";
 import { getAssetBreadcrumb, getRecentAssets } from "@/lib/api/galleries/asset";
-import { useTranslation } from "@/lib/i18n";
+import { addLocaleUriSegment, useTranslation } from "@/lib/i18n";
 import { isMainGallery } from "@/lib/api/galleries";
+import { getMediaPolicyPage } from "@/lib/api/galleries/media-policy";
 import { buildParentPath } from "@/lib/helpers/gallery";
 import Breadcrumbs from "@/components/page/Breadcrumbs";
 import BackButton from "@/components/molecules/BackButton";
+import Center from "@rubin-epo/epo-react-lib/Center";
+import Link from "next/link";
 
 export async function generateStaticParams({
   params: { locale, gallery },
@@ -26,6 +30,8 @@ const AssetLayout: FunctionComponent<
     hasParentSlug,
   });
 
+  const mediaPolicyPage = await getMediaPolicyPage(locale);
+
   const parentPath = buildParentPath({
     locale,
     gallery,
@@ -45,6 +51,22 @@ const AssetLayout: FunctionComponent<
           >
             {t("gallery.back-to-gallery")}
           </BackButton>
+          <Center className="c-content-rte">
+            <Trans t={t} i18nKey="gallery.media-policy">
+              Information about
+              {mediaPolicyPage && (
+                <Link
+                  href={addLocaleUriSegment(locale, mediaPolicyPage.uri)}
+                  rel="license"
+                  title={mediaPolicyPage.title}
+                  prefetch={false}
+                >
+                  Usage of Rubin Observatory images, videos, web texts, and
+                  music
+                </Link>
+              )}
+            </Trans>
+          </Center>
         </Stack>
       </Container>
     </>

diff --git a/app/[locale]/gallery/collections/[gallery]/[asset]/page.tsx b/app/[locale]/gallery/collections/[gallery]/[asset]/page.tsx
@@ -5,6 +5,7 @@ import { getAssetFromGallery } from "@/lib/api/galleries/asset";
 import { assetTitle, assetToPageMetadata } from "@/lib/api/canto/metadata";
 import { SupportedCantoAssetScheme } from "@/lib/api/galleries/schema";
 import { isMainGallery } from "@/lib/api/galleries";
+import { getMediaPolicyPage } from "@/lib/api/galleries/media-policy";
 import { buildParentPath } from "@/lib/helpers/gallery";
 import CantoFigure from "@/components/organisms/gallery/CantoFigure";
 import SingleMediaAsset from "@/components/templates/SingleMediaAsset";
@@ -14,6 +15,7 @@ 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";
+import { addLocaleUriSegment } from "@/lib/i18n";
 
 export async function generateMetadata({
   params: { locale, gallery, asset: id },
@@ -89,14 +91,21 @@ const GalleryAsset: FunctionComponent<GalleryAssetProps> = async ({
 
   const Asset = assetComponent[scheme];
   const dateCreated = new Date(DateCreated);
+  const mediaPolicyPage = await getMediaPolicyPage(locale);
+  const license = mediaPolicyPage
+    ? `${process.env.NEXT_PUBLIC_BASE_URL}${addLocaleUriSegment(
+        locale,
+        mediaPolicyPage.uri
+      )}`
+    : undefined;
 
   return (
     <SingleMediaAsset
       title={assetTitle(additional, locale) || name}
       asset={
         <CantoFigure
           downloadUrl={directUrlOriginal}
-          asset={<Asset {...{ asset, locale }} />}
+          asset={<Asset {...{ asset, locale, license }} />}
           {...{
             locale,
             additional,

diff --git a/components/organisms/gallery/CantoDocument/index.tsx b/components/organisms/gallery/CantoDocument/index.tsx
@@ -10,9 +10,10 @@ import { resizeCantoImage } from "@/lib/api/canto/resize";
 interface CantoDocumentProps {
   locale: string;
   asset: CantoAssetDetailed;
+  license?: string;
 }
 
-const CantoDocument: FC<CantoDocumentProps> = ({ locale, asset }) => {
+const CantoDocument: FC<CantoDocumentProps> = ({ locale, asset, license }) => {
   const { additional, url, width, height } = asset;
 
   const aspectRatio = width / height;
@@ -27,6 +28,7 @@ const CantoDocument: FC<CantoDocumentProps> = ({ locale, asset }) => {
     encodingFormat: asset.default.ContentType,
     dateCreated: asset.default.DateCreated,
     thumbnailUrl: resizeCantoImage(url.directUrlPreview, 100),
+    license,
   };
 
   return (

diff --git a/components/organisms/gallery/CantoImage/index.tsx b/components/organisms/gallery/CantoImage/index.tsx
@@ -10,9 +10,14 @@ import { resizeCantoImage } from "@/lib/api/canto/resize";
 interface CantoImageProps {
   locale: string;
   asset: CantoAssetDetailed;
+  license?: string;
 }
 
-const CantoImage: FunctionComponent<CantoImageProps> = ({ locale, asset }) => {
+const CantoImage: FunctionComponent<CantoImageProps> = ({
+  locale,
+  asset,
+  license,
+}) => {
   const { additional, url, width, height } = asset;
 
   const aspectRatio = width / height;
@@ -33,6 +38,7 @@ const CantoImage: FunctionComponent<CantoImageProps> = ({ locale, asset }) => {
       "@type": "ImageObject",
       contentUrl: resizeCantoImage(url.directUrlPreview, 100),
     },
+    license,
   };
 
   return (

diff --git a/components/organisms/gallery/CantoVideo/index.tsx b/components/organisms/gallery/CantoVideo/index.tsx
@@ -8,9 +8,14 @@ import { assetCaption } from "@/lib/api/canto/metadata";
 interface CantoVideoProps {
   locale: string;
   asset: CantoAssetDetailed;
+  license?: string;
 }
 
-const CantoVideo: FunctionComponent<CantoVideoProps> = ({ locale, asset }) => {
+const CantoVideo: FunctionComponent<CantoVideoProps> = ({
+  locale,
+  asset,
+  license,
+}) => {
   const {
     width,
     height,
@@ -27,6 +32,7 @@ const CantoVideo: FunctionComponent<CantoVideoProps> = ({ locale, asset }) => {
     dateCreated: asset.default.DateCreated,
     height: `${width}px`,
     width: `${height}px`,
+    license,
   };
 
   return (

diff --git a/gql/gql.ts b/gql/gql.ts
@@ -32,6 +32,8 @@ const documents = {
     types.GalleryMetadataQueryDocument,
   "\n    query GalleryQuery(\n      $site: [String]\n      $uri: [String]\n      $whereIn: WhereInFiltersInput\n      $whereNotIn: WhereNotInFiltersInput\n      $whereContainsIn: WhereContainsInFilterInput\n      $forPage: ForPageInput\n    ) {\n      galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          id\n          title\n          description\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            forPage: $forPage\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            additional {\n              AltTextEN\n              AltTextES\n              TitleEN\n              TitleES\n            }\n            height\n            id\n            name\n            scheme\n            url {\n              directUrlOriginal\n              directUrlPreview\n              directUrlPreviewPlay\n            }\n            width\n          }\n        }\n      }\n      metaGalleries: galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            id\n          }\n        }\n      }\n    }\n  ":
     types.GalleryQueryDocument,
+  '\n    query MediaPolicyPage($site: [String]) {\n      pagesEntries(site: $site, slug: "media-policy") {\n        ... on pages_pages_Entry {\n          __typename\n          uri\n          title\n        }\n      }\n    }\n  ':
+    types.MediaPolicyPageDocument,
   '\n    query getNavigationItems($site: [String]) {\n      navigationItems: entries(\n        section: ["pages", "galleries"]\n        site: $site\n        level: 1\n        isVisible: true\n      ) {\n        id\n        title\n        uri\n        children(isVisible: true) {\n          id\n          title\n          uri\n          children(isVisible: true) {\n            id\n            title\n            uri\n          }\n        }\n      }\n      galleriesEntries(isVisible: true) {\n        ... on galleries_gallery_Entry {\n          id\n          title\n          uri\n        }\n      }\n    }\n  ':
     types.GetNavigationItemsDocument,
   "\n    query SearchResultsPage($site: [String]) {\n      searchResultsEntries(site: $site) {\n        ... on searchResults_searchResults_Entry {\n          title\n          id\n          dynamicComponent\n        }\n      }\n    }\n  ":
@@ -106,6 +108,12 @@ export function graphql(
 export function graphql(
   source: "\n    query GalleryQuery(\n      $site: [String]\n      $uri: [String]\n      $whereIn: WhereInFiltersInput\n      $whereNotIn: WhereNotInFiltersInput\n      $whereContainsIn: WhereContainsInFilterInput\n      $forPage: ForPageInput\n    ) {\n      galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          id\n          title\n          description\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            forPage: $forPage\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            additional {\n              AltTextEN\n              AltTextES\n              TitleEN\n              TitleES\n            }\n            height\n            id\n            name\n            scheme\n            url {\n              directUrlOriginal\n              directUrlPreview\n              directUrlPreviewPlay\n            }\n            width\n          }\n        }\n      }\n      metaGalleries: galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            id\n          }\n        }\n      }\n    }\n  "
 ): (typeof documents)["\n    query GalleryQuery(\n      $site: [String]\n      $uri: [String]\n      $whereIn: WhereInFiltersInput\n      $whereNotIn: WhereNotInFiltersInput\n      $whereContainsIn: WhereContainsInFilterInput\n      $forPage: ForPageInput\n    ) {\n      galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          id\n          title\n          description\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            forPage: $forPage\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            additional {\n              AltTextEN\n              AltTextES\n              TitleEN\n              TitleES\n            }\n            height\n            id\n            name\n            scheme\n            url {\n              directUrlOriginal\n              directUrlPreview\n              directUrlPreviewPlay\n            }\n            width\n          }\n        }\n      }\n      metaGalleries: galleriesEntries(site: $site, uri: $uri) {\n        ... on galleries_gallery_Entry {\n          assetAlbum(\n            whereNotIn: $whereNotIn\n            whereIn: $whereIn\n            whereContainsIn: $whereContainsIn\n          ) {\n            id\n          }\n        }\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n    query MediaPolicyPage($site: [String]) {\n      pagesEntries(site: $site, slug: "media-policy") {\n        ... on pages_pages_Entry {\n          __typename\n          uri\n          title\n        }\n      }\n    }\n  '
+): (typeof documents)['\n    query MediaPolicyPage($site: [String]) {\n      pagesEntries(site: $site, slug: "media-policy") {\n        ... on pages_pages_Entry {\n          __typename\n          uri\n          title\n        }\n      }\n    }\n  '];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/gql/graphql.ts b/gql/graphql.ts
@@ -56828,6 +56828,30 @@ export type GalleryQueryQuery = {
   } | null> | null;
 };
 
+export type MediaPolicyPageQueryVariables = Exact<{
+  site: InputMaybe<
+    | Array<InputMaybe<Scalars["String"]["input"]>>
+    | InputMaybe<Scalars["String"]["input"]>
+  >;
+}>;
+
+export type MediaPolicyPageQuery = {
+  __typename: "Query";
+  pagesEntries: Array<
+    | { __typename: "pages_educatorPages_Entry" }
+    | { __typename: "pages_galleryLandingPage_Entry" }
+    | { __typename: "pages_investigationLandingPage_Entry" }
+    | {
+        __typename: "pages_pages_Entry";
+        uri: string | null;
+        title: string | null;
+      }
+    | { __typename: "pages_redirectPage_Entry" }
+    | { __typename: "pages_studentPages_Entry" }
+    | null
+  > | null;
+};
+
 export type GetNavigationItemsQueryVariables = Exact<{
   site: InputMaybe<
     | Array<InputMaybe<Scalars["String"]["input"]>>
@@ -146601,6 +146625,83 @@ export const GalleryQueryDocument = {
     },
   ],
 } as unknown as DocumentNode<GalleryQueryQuery, GalleryQueryQueryVariables>;
+export const MediaPolicyPageDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "MediaPolicyPage" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "site" } },
+          type: {
+            kind: "ListType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pagesEntries" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "site" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "site" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "slug" },
+                value: {
+                  kind: "StringValue",
+                  value: "media-policy",
+                  block: false,
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "InlineFragment",
+                  typeCondition: {
+                    kind: "NamedType",
+                    name: { kind: "Name", value: "pages_pages_Entry" },
+                  },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "__typename" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "uri" } },
+                      { kind: "Field", name: { kind: "Name", value: "title" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  MediaPolicyPageQuery,
+  MediaPolicyPageQueryVariables
+>;
 export const GetNavigationItemsDocument = {
   kind: "Document",
   definitions: [

diff --git a/lib/api/galleries/media-policy.ts b/lib/api/galleries/media-policy.ts
@@ -0,0 +1,33 @@
+import { graphql } from "@/gql/gql";
+import queryAPI from "@/lib/api/client/query";
+import { getSiteFromLocale } from "@/lib/helpers/site";
+
+export const getMediaPolicyPage = async (locale: string) => {
+  const site = getSiteFromLocale(locale);
+
+  const query = graphql(`
+    query MediaPolicyPage($site: [String]) {
+      pagesEntries(site: $site, slug: "media-policy") {
+        ... on pages_pages_Entry {
+          __typename
+          uri
+          title
+        }
+      }
+    }
+  `);
+
+  const { data } = await queryAPI({ query, variables: { site } });
+
+  if (!data || !data.pagesEntries || !data.pagesEntries[0]) return;
+
+  const [mediaPolicyPage] = data.pagesEntries;
+
+  if (mediaPolicyPage.__typename !== "pages_pages_Entry") return;
+
+  const { uri, title } = mediaPolicyPage;
+
+  if (uri === null || title === null) return;
+
+  return { uri, title };
+};
diff --git a/lib/i18n/localeStrings/en/translation.json b/lib/i18n/localeStrings/en/translation.json
@@ -148,7 +148,8 @@
     "credit": "Credit: {{credit}}",
     "date-created": "Date created",
     "date-published": "Publication date",
-    "collections": "Collections"
+    "collections": "Collections",
+    "media-policy": "Information about <1>Usage of Rubin Observatory images, videos, web texts, and music</1>"
   },
   "jobs": {
     "job": "Job",