feat: support NOIRLab announcements

lsst-epo · Oct 29, 2024 · 4779b93 · 4779b93
1 parent fdb105a
commit 4779b93
Show file tree

Hide file tree

Showing 10 changed files with 595 additions and 157 deletions.
diff --git a/app/[locale]/[...uriSegments]/page.tsx b/app/[locale]/[...uriSegments]/page.tsx
@@ -10,7 +10,7 @@ import {
   getEntrySectionByUri,
 } from "@/lib/api/entries/index";
 import { getEntryDataByUri } from "@/lib/api/entry";
-import { generateReleaseMetadata } from "@/lib/api/noirlab";
+import { generateNOIRLabMetadata } from "@/lib/api/noirlab";
 import { resizeCantoImage } from "@/lib/api/canto/resize";
 import PageTemplate from "@/components/templates/Page";
 import NewsPageTemplate from "@/components/templates/NewsPage";
@@ -67,12 +67,13 @@ export async function generateMetadata(
     image = [],
     cantoAssetSingle = [],
     pressReleaseId,
+    postType,
   } = entry;
 
   const previousImages = (await parent).openGraph?.images || [];
 
   if (pressReleaseId) {
-    return generateReleaseMetadata(pressReleaseId, locale);
+    return generateNOIRLabMetadata(pressReleaseId, postType, locale);
   }
 
   const featuredImage = await pickFeaturedImage(image[0], cantoAssetSingle[0]);

diff --git a/components/templates/NewsPage/Contacts.js b/components/templates/NewsPage/Contacts.js
diff --git a/components/templates/NewsPage/Contacts/index.tsx b/components/templates/NewsPage/Contacts/index.tsx
@@ -0,0 +1,96 @@
+import { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import { ReleaseContact } from "@/lib/api/noirlab/codegen";
+import Stack from "@rubin-epo/epo-react-lib/Stack";
+import * as Styled from "../styles";
+
+interface ContactsProps {
+  contacts: Array<ReleaseContact> | (string | undefined);
+}
+
+const Contacts: FunctionComponent<ContactsProps> = ({ contacts = [] }) => {
+  const { t } = useTranslation();
+  const iconSize = 24;
+
+  return (
+    <>
+      <Styled.ArticleHeading>{t(`news.contacts`)}</Styled.ArticleHeading>
+      {Array.isArray(contacts) ? (
+        <Styled.ContactList>
+          {contacts.map((contact, i) => {
+            const { name, affiliation, city, telephone, email } = contact;
+            return (
+              <li key={name}>
+                <Styled.Contact>
+                  {name && (
+                    <Styled.ContactRow>
+                      <Styled.IconWrapper className="name">
+                        <Styled.ContactListItemIcon
+                          icon="Account"
+                          size={iconSize}
+                        />
+                      </Styled.IconWrapper>
+                      <div className="c-content-rte">{name}</div>
+                    </Styled.ContactRow>
+                  )}
+                  {affiliation && (
+                    <Styled.ContactRow>
+                      <Styled.IconWrapper className="affiliation">
+                        <Styled.ContactListItemIcon
+                          icon="Globe"
+                          size={iconSize}
+                        />
+                      </Styled.IconWrapper>
+                      <div className="c-content-rte">{affiliation}</div>
+                    </Styled.ContactRow>
+                  )}
+                  {city && (
+                    <Styled.ContactRow>
+                      <Styled.IconWrapper className="city">
+                        <Styled.ContactListItemIcon
+                          icon="Team"
+                          size={iconSize}
+                        />
+                      </Styled.IconWrapper>
+                      <div className="c-content-rte">{city}</div>
+                    </Styled.ContactRow>
+                  )}
+                  {telephone && (
+                    <Styled.ContactRow>
+                      <Styled.IconWrapper className="telephone">
+                        <Styled.ContactListItemIcon
+                          icon="Phone"
+                          size={iconSize}
+                        />
+                      </Styled.IconWrapper>
+                      <div className="c-content-rte">
+                        <a href={`tel:${telephone}`}>{telephone}</a>
+                        <a href={`tel:${telephone}`}>{telephone}</a>
+                      </div>
+                    </Styled.ContactRow>
+                  )}
+                  {email && (
+                    <Styled.ContactRow>
+                      <Styled.IconWrapper className="email">
+                        <Styled.ContactListItemIcon icon="Mail" />
+                      </Styled.IconWrapper>
+                      <div className="c-content-rte">
+                        <a href={`mailto:${email}`}>{email}</a>
+                      </div>
+                    </Styled.ContactRow>
+                  )}
+                </Styled.Contact>
+              </li>
+            );
+          })}
+        </Styled.ContactList>
+      ) : (
+        <Stack recursive>
+          <div dangerouslySetInnerHTML={{ __html: contacts }} />
+        </Stack>
+      )}
+    </>
+  );
+};
+
+export default Contacts;
diff --git a/components/templates/NewsPage/index.tsx b/components/templates/NewsPage/index.tsx
@@ -1,6 +1,9 @@
 import { FunctionComponent } from "react";
 import sanitizeHtml from "sanitize-html";
-import { ReleasesService } from "@/lib/api/noirlab/codegen";
+import {
+  AnnouncementsService,
+  ReleasesService,
+} from "@/lib/api/noirlab/codegen";
 import { Locale } from "@/lib/i18n/settings";
 import NewsPageClient from "./client";
 
@@ -9,9 +12,52 @@ const NewsPage: FunctionComponent<{
   data: PageEntry;
   locale: string;
 }> = async ({ data, section, locale }) => {
-  const { pressReleaseId } = data;
+  const { postType, pressReleaseId } = data;
+  const { slug } = postType[0];
 
-  if (pressReleaseId) {
+  // Announcements
+  if (slug !== "feature" && pressReleaseId) {
+    const { data: release, error } =
+      await AnnouncementsService.announcementsRetrieve({
+        path: { id: pressReleaseId },
+        query: {
+          lang: locale as Locale,
+          translation_mode: "fallback",
+        },
+      });
+
+    if (!error && release) {
+      const {
+        title,
+        url: releaseUrl,
+        description,
+        subtitle,
+        images,
+        videos,
+        release_date: date,
+        links,
+        contacts,
+      } = release;
+
+      const combinedData = {
+        ...data,
+        title,
+        releaseUrl,
+        subtitle,
+        releaseDescription: description ? sanitizeHtml(description) : undefined,
+        links: links ? sanitizeHtml(links) : links,
+        contacts,
+        date,
+        images,
+        videos,
+      };
+
+      return <NewsPageClient data={combinedData} {...{ section, locale }} />;
+    }
+  }
+
+  // Press Releases
+  if (slug === "press-release" && pressReleaseId) {
     const { data: release, error } = await ReleasesService.releasesRetrieve({
       path: { id: pressReleaseId },
       query: {
@@ -56,6 +102,7 @@ const NewsPage: FunctionComponent<{
     }
   }
 
+  // Craft news entries
   return <NewsPageClient {...{ data, section, locale }} />;
 };
 

diff --git a/lib/api/metadata/index.ts b/lib/api/metadata/index.ts
@@ -49,6 +49,9 @@ export async function getEntryMetadataByUri(
           title
         }
         ... on news_post_Entry {
+          postType {
+            slug
+          }
           pressReleaseId
           description: teaser
           title