From e1f38107f1f77975e760123b06c2f81f32ea33d9 Mon Sep 17 00:00:00 2001
From: Blake Mason <bmason@lsst.org>
Date: Mon, 12 Feb 2024 15:57:41 -0800
Subject: [PATCH] [F] NewsPost sidebar assets reorg

 - Hero image is auto-added to mediaAssets
 - Manual ImageAssets are added to mediaAssets (excluded from manual sections)
 - Fix issue where non-press-release type news posts were missing any/all assets
---
 components/templates/NewsPage/MediaAssets.js | 13 ++++---
 components/templates/NewsPage/NewsAside.js   | 28 +++++++-------
 components/templates/NewsPage/index.js       | 39 +++++++++++++++++---
 lib/api/fragments/news-post.js               |  1 +
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/components/templates/NewsPage/MediaAssets.js b/components/templates/NewsPage/MediaAssets.js
index 705bc454..aec1289c 100644
--- a/components/templates/NewsPage/MediaAssets.js
+++ b/components/templates/NewsPage/MediaAssets.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { ResponsiveImage } from "@rubin-epo/epo-react-lib";
+import { ResponsiveImage, Figure } from "@rubin-epo/epo-react-lib";
 import ReleaseAssets from "./ReleaseAssets";
 import * as Styled from "./styles";
 
@@ -15,11 +15,12 @@ export default function MediaAssets({
   if (!contentBlockAssets && !releaseImages && !releaseVideos) return null;
 
   if (
-    contentBlockAssets?.length <= 0 &&
-    releaseImages?.length <= 0 &&
-    releaseVideos?.length <= 0
+    contentBlockAssets?.length === 0 &&
+    releaseImages?.length === 0 &&
+    releaseVideos?.length === 0
   )
     return null;
+
   return (
     <Styled.AsideSecondary>
       <h3>{t(`media`)}</h3>
@@ -27,7 +28,9 @@ export default function MediaAssets({
         if (asset.image?.[0].url) {
           return (
             <Link key={i} prefetch={false} href={asset.image?.[0].url}>
-              <ResponsiveImage image={asset.image?.[0]} ratio="8:5" />
+              <Figure caption={asset.caption}>
+                <ResponsiveImage image={asset.image?.[0]} ratio="8:5" />
+              </Figure>
             </Link>
           );
         }
diff --git a/components/templates/NewsPage/NewsAside.js b/components/templates/NewsPage/NewsAside.js
index 096e79de..e325c47a 100644
--- a/components/templates/NewsPage/NewsAside.js
+++ b/components/templates/NewsPage/NewsAside.js
@@ -1,30 +1,32 @@
 import PropTypes from "prop-types";
 import Link from "next/link";
-import { ResponsiveImage, IconComposer } from "@rubin-epo/epo-react-lib";
+import {
+  ResponsiveImage,
+  IconComposer,
+  Figure,
+} from "@rubin-epo/epo-react-lib";
 import Tags from "./Tags";
 import MediaAssets from "./MediaAssets";
 import * as Styled from "./styles";
 
 export default function NewsAside({
-  newsAssets,
+  manualAssets,
   contentBlockAssets,
   releaseImages,
   releaseVideos,
   tags,
   rootHomeLink,
 }) {
-  // This sets up the automatic media grabber -- if there are no manual media set
-  let manualMedia = false;
   // This adds the document icon from the designs, if there is a text-style link near the start.
-  let manualDoc = newsAssets.some(
+  let manualDoc = manualAssets.some(
     (a, i) => i < 4 && (a.textLink?.length > 0 || a.externalLink?.length > 0)
   );
 
   return (
     <Styled.Aside>
-      {newsAssets?.length > 0 && (
+      {manualAssets?.length > 0 && (
         <Styled.AsidePrimary>
-          {newsAssets.map((a, i) => {
+          {manualAssets.map((a, i) => {
             if (a.assetHeader) {
               return (
                 <h3 key={i}>
@@ -53,14 +55,14 @@ export default function NewsAside({
                 </a>
               );
             } else if (a.image?.length > 0) {
-              manualMedia = true;
               return (
-                <a href={a.image[0].url} key={i}>
-                  <ResponsiveImage image={a.image[0]} />
-                </a>
+                <Link key={i} prefetch={false} href={a.image[0].url}>
+                  <Figure caption={a.caption}>
+                    <ResponsiveImage image={a.image[0]} ratio="8:5" />
+                  </Figure>
+                </Link>
               );
             } else if (a.galleryItem?.length > 0) {
-              manualMedia = true;
               if (a.galleryItem[0].uri) {
                 return (
                   <Link
@@ -89,7 +91,7 @@ export default function NewsAside({
 }
 
 NewsAside.propTypes = {
-  newsAssets: PropTypes.array,
+  manualAssets: PropTypes.array,
   contentBlockAssets: PropTypes.array,
   releaseImages: PropTypes.array,
   releaseVideos: PropTypes.array,
diff --git a/components/templates/NewsPage/index.js b/components/templates/NewsPage/index.js
index ed1d9773..9c5f22d3 100644
--- a/components/templates/NewsPage/index.js
+++ b/components/templates/NewsPage/index.js
@@ -48,13 +48,40 @@ export default function NewsPage({ data }) {
     title,
     active: true,
   };
-  const imageContentBlocks = [...contentBlocksNews].filter(
-    (block) => block.typeHandle === "image"
+  const manualAssets = [];
+  const heroBlock =
+    hero?.length > 0
+      ? {
+          id: id + "hero",
+          typeHandle: "image",
+          image: hero,
+          caption: heroCaption,
+        }
+      : null;
+  const mediaContentBlocks = [...contentBlocksNews].filter(
+    (block) => block.typeHandle === "image" || block.typeHandle === "video"
   );
 
+  newsAssets.forEach((a, i) => {
+    if (a.image?.length > 0) {
+      // If there are manually added news assets combine them with the content block media assets
+      mediaContentBlocks.push({
+        id: id + i,
+        typeHandle: "image",
+        image: a.image,
+        caption: a.caption,
+      });
+    } else {
+      manualAssets.push(a);
+    }
+  });
+  // If there is a hero then combine it with the content block media assets
+  if (heroBlock) mediaContentBlocks.unshift(heroBlock);
+
+  // Only show the aside if there are news assets
   const showAside =
-    newsAssets?.length > 0 ||
-    imageContentBlocks?.length > 0 ||
+    manualAssets?.length > 0 ||
+    mediaContentBlocks?.length > 0 ||
     releaseImages?.length > 0 ||
     releaseVideos?.length > 0 ||
     postTags?.length > 0;
@@ -77,8 +104,8 @@ export default function NewsPage({ data }) {
         )}
         {showAside && (
           <NewsAside
-            newsAssets={newsAssets}
-            contentBlockAssets={imageContentBlocks}
+            manualAssets={manualAssets}
+            contentBlockAssets={mediaContentBlocks}
             releaseImages={releaseImages}
             releaseVideos={releaseVideos}
             tags={postTags}
diff --git a/lib/api/fragments/news-post.js b/lib/api/fragments/news-post.js
index da14c4e0..c4a75c2f 100644
--- a/lib/api/fragments/news-post.js
+++ b/lib/api/fragments/news-post.js
@@ -88,6 +88,7 @@ export const newsPostFragmentFull = `
             ${getImageFields("crop", 900, 550)}
             }
           }
+          caption
         }
         ... on newsAssets_galleryItem_BlockType {
           galleryItem {