Fallback to sponsors JSON if no sponsors in prismic (#2211)

* Fallback to sponsors JSON if no sponsors in prismic * Fix sponsors modal with Prismic * Use React markdown to display sponsor text * Fix test for sponros
responsible-ai-collaborative · Nov 16, 2023 · f3af18d · f3af18d
1 parent 0d3af99
commit f3af18d
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 45 deletions.
diff --git a/site/gatsby-site/cypress/e2e/integration/landingPage.cy.js b/site/gatsby-site/cypress/e2e/integration/landingPage.cy.js
@@ -25,6 +25,8 @@ describe('The Landing page', () => {
 
     cy.get('[data-cy="Waking Up Foundation-image"]', { timeout: 15000 }).scrollIntoView();
 
+    cy.waitForStableDOM();
+
     cy.get('[data-cy="Waking Up Foundation-image"]').click();
 
     cy.waitForStableDOM();

diff --git a/site/gatsby-site/i18n/locales/en/sponsors.json b/site/gatsby-site/i18n/locales/en/sponsors.json
@@ -1,8 +1,8 @@
 {
-    "sponsor-Waking Up Foundation": "On the recommendation of Longview Philanthropy, the [[Waking Up Foundation]] contributed a founding grant of $550k USD directed to the AI Incident Database. $33k of the total is committed to our fiscal sponsor for running the books and tax compliance for the organization. Approximately $5k is dedicated to maintaining the RAIC non-profit entity that directs the AIID programming sponsored by a fiscal sponsor. The remaining funds are all dedicated to programmatic outputs, including staff time for programming and research.",
-    "sponsor-Partnership on AI": "As a [[founding sponsor]] of the AI Incident Database (AIID), Partnership on AI supported the start-up of the database, including a grant to support the project prior to the founding of the Responsible AI Collaborative. Partnership on AI also invested in promoting the social benefits of the AIID to their Partners and other stakeholders and have an ongoing interest in supporting its outcomes.",
-    "sponsor-Mozilla Foundation": "The Responsible AI Collaborative received a $50,000 grant from the Mozilla Technology Fund for the development of AI risk checklists. For more details on the project, visit the cohort [[launch announcement]] and follow the Collab blog as we announce advancements.",
-    "sponsor-Netlify": "[[Netlify]] provides the Responsible AI Collaborative with free hosting, build minutes, and accounts for the open source development of the AI Incident Database.",
-    "sponsor-Cloudinary": "[[Cloudinary]] provides discounted image and video hosting on their cloud hosting service. They are the reason so many images load quickly across the database.",
-    "sponsor-Algolia": "[[Algolia]] provides the Responsible AI Collaborative with an instant search index of incident reports."
+    "sponsor-Waking Up Foundation": "On the recommendation of Longview Philanthropy, the [Waking Up Foundation](https://www.wakingup.com/foundation) contributed a founding grant of $550k USD directed to the AI Incident Database. $33k of the total is committed to our fiscal sponsor for running the books and tax compliance for the organization. Approximately $5k is dedicated to maintaining the RAIC non-profit entity that directs the AIID programming sponsored by a fiscal sponsor. The remaining funds are all dedicated to programmatic outputs, including staff time for programming and research.",
+    "sponsor-Partnership on AI": "As a [founding sponsor](https://partnershiponai.org/resource/tracking-when-ai-systems-fail/) of the AI Incident Database (AIID), Partnership on AI supported the start-up of the database, including a grant to support the project prior to the founding of the Responsible AI Collaborative. Partnership on AI also invested in promoting the social benefits of the AIID to their Partners and other stakeholders and have an ongoing interest in supporting its outcomes.",
+    "sponsor-Mozilla Foundation": "The Responsible AI Collaborative received a $50,000 grant from the Mozilla Technology Fund for the development of AI risk checklists. For more details on the project, visit the cohort [launch announcement](https://foundation.mozilla.org/en/blog/auditing-ai-announcing-the-2023-mozilla-technology-fund-cohort/) and follow the Collab blog as we announce advancements.",
+    "sponsor-Netlify": "[Netlify](https://www.netlify.com/) provides the Responsible AI Collaborative with free hosting, build minutes, and accounts for the open source development of the AI Incident Database.",
+    "sponsor-Cloudinary": "[Cloudinary](https://www.cloudinary.com/) provides discounted image and video hosting on their cloud hosting service. They are the reason so many images load quickly across the database.",
+    "sponsor-Algolia": "[Algolia](https://algolia.com/) provides the Responsible AI Collaborative with an instant search index of incident reports."
 }
diff --git a/site/gatsby-site/i18n/locales/es/sponsors.json b/site/gatsby-site/i18n/locales/es/sponsors.json
@@ -3,10 +3,10 @@
     "Database Founding Sponsor": "Patrocinador fundador de la base de datos",
     "Sponsors and Grants": "Patrocinadores y subvenciones",
     "In-Kind Sponsors": "Patrocinadores similares",
-    "sponsor-Waking Up Foundation": "Por recomendación de Longview Philanthropy, la [[Waking Up Foundation]] aportó una subvención fundacional de $550 000 USD dirigida a la base de datos de incidentes de IA. $33k del total están comprometidos con nuestro patrocinador fiscal para llevar los libros y el cumplimiento fiscal de la organización. Se dedican aproximadamente $5k al mantenimiento de la entidad sin fines de lucro RAIC que dirige la programación AIID patrocinada por un patrocinador fiscal. Todos los fondos restantes se dedican a productos programáticos, incluido el tiempo del personal para la programación y la investigación.",
-    "sponsor-Partnership on AI": "Como [[patrocinador fundador]] de la base de datos de incidentes de IA (AIID), Partnership on AI apoyó la puesta en marcha de la base de datos, incluida una subvención para apoyar el proyecto antes de la fundación de Responsible AI Collaborative. Partnership on AI también invirtió en promover los beneficios sociales de AIID entre sus socios y otras partes interesadas y tiene un interés continuo en respaldar sus resultados.",
-    "sponsor-Mozilla Foundation": "La Responsible AI Collaborative recibió una subvención de $ 50,000 del Mozilla Technology Fund para el desarrollo de listas de verificación de riesgos de IA. Para obtener más detalles sobre el proyecto, visite el [[anuncio de lanzamiento]] de la cohorte y siga el blog de Collab a medida que anunciamos los avances.",
-    "sponsor-Netlify": "[[Netlify]] proporciona a Responsible AI Collaborative alojamiento gratuito, minutos de compilación y cuentas para el desarrollo de código abierto de la base de datos de incidentes de IA.",
-    "sponsor-Cloudinary": "[[Cloudinary]] ofrece alojamiento de imágenes y videos con descuento en su servicio de alojamiento en la nube. Son la razón por la que tantas imágenes se cargan rápidamente en la base de datos.",
-    "sponsor-Algolia": "[[Algolia]] proporciona a Responsible AI Collaborative un índice de búsqueda instantánea de informes de incidentes. "
+    "sponsor-Waking Up Foundation": "Por recomendación de Longview Philanthropy, la [Waking Up Foundation](https://www.wakingup.com/foundation) aportó una subvención fundacional de $550 000 USD dirigida a la base de datos de incidentes de IA. $33k del total están comprometidos con nuestro patrocinador fiscal para llevar los libros y el cumplimiento fiscal de la organización. Se dedican aproximadamente $5k al mantenimiento de la entidad sin fines de lucro RAIC que dirige la programación AIID patrocinada por un patrocinador fiscal. Todos los fondos restantes se dedican a productos programáticos, incluido el tiempo del personal para la programación y la investigación.",
+    "sponsor-Partnership on AI": "Como [patrocinador fundador](https://partnershiponai.org/resource/tracking-when-ai-systems-fail/) de la base de datos de incidentes de IA (AIID), Partnership on AI apoyó la puesta en marcha de la base de datos, incluida una subvención para apoyar el proyecto antes de la fundación de Responsible AI Collaborative. Partnership on AI también invirtió en promover los beneficios sociales de AIID entre sus socios y otras partes interesadas y tiene un interés continuo en respaldar sus resultados.",
+    "sponsor-Mozilla Foundation": "La Responsible AI Collaborative recibió una subvención de $ 50,000 del Mozilla Technology Fund para el desarrollo de listas de verificación de riesgos de IA. Para obtener más detalles sobre el proyecto, visite el [anuncio de lanzamiento](https://foundation.mozilla.org/en/blog/auditing-ai-announcing-the-2023-mozilla-technology-fund-cohort/) de la cohorte y siga el blog de Collab a medida que anunciamos los avances.",
+    "sponsor-Netlify": "[Netlify](https://www.netlify.com/) proporciona a Responsible AI Collaborative alojamiento gratuito, minutos de compilación y cuentas para el desarrollo de código abierto de la base de datos de incidentes de IA.",
+    "sponsor-Cloudinary": "[Cloudinary](https://www.cloudinary.com/) ofrece alojamiento de imágenes y videos con descuento en su servicio de alojamiento en la nube. Son la razón por la que tantas imágenes se cargan rápidamente en la base de datos.",
+    "sponsor-Algolia": "[Algolia](https://algolia.com/) proporciona a Responsible AI Collaborative un índice de búsqueda instantánea de informes de incidentes. "
 }
diff --git a/site/gatsby-site/i18n/locales/fr/sponsors.json b/site/gatsby-site/i18n/locales/fr/sponsors.json
@@ -3,10 +3,10 @@
     "Database Founding Sponsor": "Commanditaire fondateur de la base de données",
     "Sponsors and Grants": "Commanditaires et subventions",
     "In-Kind Sponsors": "Commanditaires en nature",
-    "sponsor-Waking Up Foundation": "Avec la recommandation de Longview Philanthropy, la [[Waking Up Foundation]] a accordé une subvention de 550 000 $ à la base de données des incidents d'IA. 33 000 $ du total sont versés à notre commanditaire fiscal pour la tenue de livres et la conformité fiscale de l'organisation. Environ 5 000 $ sont consacrés au maintien de l'entité à but non lucratif de la RAIC qui gère la programmation AIID parrainée par un commanditaire fiscal. Tous les fonds restants sont consacrés aux résultats programmatiques, y compris le temps du personnel pour la programmation et la recherche.",
-    "sponsor-Partnership on AI": "En tant que [[sponsor fondateur]] de la base de données sur les incidents d'IA (AIID), Partnership on AI a soutenu le démarrage de la base de données, y compris une subvention pour soutenir le projet avant la création de la Responsible AI Collaborative. Le Partenariat sur l'IA a également investi dans la promotion des avantages sociaux de l'AIID auprès de ses partenaires et d'autres parties prenantes et a un intérêt continu à soutenir ses résultats.",
-    "sponsor-Mozilla Foundation": "Le Responsible AI Collaborative a reçu une subvention de 50 000 $ du Mozilla Technology Fund pour le développement de listes de contrôle des risques liés à l'IA. Pour plus de détails sur le projet, visitez la cohorte [[annonce de lancement]] et suivez le blog Collab pendant que nous annonçons les avancées.",
-    "sponsor-Netlify": "[[Netlify]] fournit à Responsible AI Collaborative un hébergement gratuit, des minutes de construction et des comptes pour le développement open source de la base de données d'incidents d'IA.",
-    "sponsor-Cloudinary": "[[Cloudinary]] propose un hébergement d'images et de vidéos à prix réduit sur son service d'hébergement cloud. Ils sont la raison pour laquelle tant d'images se chargent rapidement dans la base de données.",
-    "sponsor-Algolia": "[[Algolia]] fournit au Responsible AI Collaborative un index de recherche instantanée des rapports d'incidents."
+    "sponsor-Waking Up Foundation": "Avec la recommandation de Longview Philanthropy, la [Waking Up Foundation](https://www.wakingup.com/foundation) a accordé une subvention de 550 000 $ à la base de données des incidents d'IA. 33 000 $ du total sont versés à notre commanditaire fiscal pour la tenue de livres et la conformité fiscale de l'organisation. Environ 5 000 $ sont consacrés au maintien de l'entité à but non lucratif de la RAIC qui gère la programmation AIID parrainée par un commanditaire fiscal. Tous les fonds restants sont consacrés aux résultats programmatiques, y compris le temps du personnel pour la programmation et la recherche.",
+    "sponsor-Partnership on AI": "En tant que [sponsor fondateur](https://partnershiponai.org/resource/tracking-when-ai-systems-fail/) de la base de données sur les incidents d'IA (AIID), Partnership on AI a soutenu le démarrage de la base de données, y compris une subvention pour soutenir le projet avant la création de la Responsible AI Collaborative. Le Partenariat sur l'IA a également investi dans la promotion des avantages sociaux de l'AIID auprès de ses partenaires et d'autres parties prenantes et a un intérêt continu à soutenir ses résultats.",
+    "sponsor-Mozilla Foundation": "Le Responsible AI Collaborative a reçu une subvention de 50 000 $ du Mozilla Technology Fund pour le développement de listes de contrôle des risques liés à l'IA. Pour plus de détails sur le projet, visitez la cohorte [annonce de lancement](https://foundation.mozilla.org/en/blog/auditing-ai-announcing-the-2023-mozilla-technology-fund-cohort/) et suivez le blog Collab pendant que nous annonçons les avancées.",
+    "sponsor-Netlify": "[Netlify](https://www.netlify.com/) fournit à Responsible AI Collaborative un hébergement gratuit, des minutes de construction et des comptes pour le développement open source de la base de données d'incidents d'IA.",
+    "sponsor-Cloudinary": "[Cloudinary](https://www.cloudinary.com/) propose un hébergement d'images et de vidéos à prix réduit sur son service d'hébergement cloud. Ils sont la raison pour laquelle tant d'images se chargent rapidement dans la base de données.",
+    "sponsor-Algolia": "[Algolia](https://algolia.com/) fournit au Responsible AI Collaborative un index de recherche instantanée des rapports d'incidents."
 }
diff --git a/site/gatsby-site/src/components/landing/Sponsors.js b/site/gatsby-site/src/components/landing/Sponsors.js
@@ -2,15 +2,17 @@ import React, { useState } from 'react';
 import Link from 'components/ui/Link';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { StyledImage, StyledImageCover } from '../../elements/StyledImage';
+import { StyledImage, StyledImageCover, StyledImageModal } from '../../elements/StyledImage';
 import { Button, Card, Modal } from 'flowbite-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import { PrismicRichText } from '@prismicio/react';
 import { useLocalization } from 'plugins/gatsby-theme-i18n';
+import sponsorsJson from './sponsors.json';
+import ReactMarkdown from 'react-markdown';
 
-const SponsorModal = ({ setModalState, modalState, modalName, children, title }) => {
+const SponsorModal = ({ setModalState, modalState, modalName, children, title, logo, linkTo }) => {
   return (
     <>
       {modalState === modalName && (
@@ -22,7 +24,25 @@ const SponsorModal = ({ setModalState, modalState, modalName, children, title })
           <Modal.Header>
             <h5>{title}</h5>
           </Modal.Header>
-          <Modal.Body>{children}</Modal.Body>
+          <Modal.Body>
+            {children}
+            {logo.gatsbyImageData ? (
+              <div className="flex justify-center items-center mt-2">
+                <Link to={linkTo} target="_blank">
+                  <GatsbyImage
+                    alt={`${title} Logo`}
+                    className="img-fluid rounded-lg w-[85%] max-w-[200px] max-h-[80px]"
+                    imgClassName="object-fill"
+                    image={logo.gatsbyImageData}
+                  />
+                </Link>
+              </div>
+            ) : (
+              <div className="mt-2">
+                <StyledImageModal src={`/images/${logo}`} linkTo={linkTo} />
+              </div>
+            )}
+          </Modal.Body>
           <Modal.Footer>
             <div className="flex justify-end w-full">
               <Button color="dark" onClick={() => setModalState('close')} data-cy="close-modal">
@@ -41,10 +61,28 @@ export default function Sponsors({ sponsors = [] }) {
 
   const { locale } = useLocalization();
 
-  sponsors = sponsors.filter((sponsor) => sponsor?.node?.data?.language?.text === locale);
-
   const { t } = useTranslation(['sponsors']);
 
+  sponsors = sponsors
+    .filter((sponsor) => sponsor?.node?.data?.language?.text === locale)
+    .map((sponsor) => {
+      return {
+        name: sponsor.node.data?.title?.text,
+        items: sponsor.node.data?.items?.map((item) => {
+          return {
+            name: item.name?.text,
+            richText: item.description?.richText,
+            logo: item.logo,
+            link: item.link.url,
+          };
+        }),
+      };
+    });
+
+  if (sponsors.length <= 0) {
+    sponsors = sponsorsJson;
+  }
+
   return (
     <>
       <div className="block p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
@@ -98,22 +136,23 @@ export default function Sponsors({ sponsors = [] }) {
           <div className="flex justify-center items-center gap-5 md:gap-6 flex-nowrap flex-col flex-1">
             {sponsors.map((sponsor) => {
               return (
-                <div className="flex-1 w-full" key={`sponsor-${sponsor.node.data.title.text}`}>
+                <div className="flex-1 w-full" key={`sponsor-${sponsor.name}`}>
                   <Card>
                     <h6 className="text-lg dark:text-white mb-0">
-                      <Trans ns="landing">{t(sponsor.node.data.title.text)}</Trans>
+                      <Trans ns="landing">{t(sponsor.name)}</Trans>
                     </h6>
                     <div className="flex justify-around gap-4 items-center">
-                      {sponsor.node.data.items.map((item) => {
+                      {sponsor.items.map((item) => {
                         return (
                           <div
-                            key={`sponsor-item-${item.name.text}`}
+                            key={`sponsor-item-${item.name}`}
                             className="flex-1 max-w-xs w-full max-h-[90px] ml-0 mr-0 text-center"
-                            data-cy={`${item.name.text}-image`}
+                            data-cy={`${item.name}-image`}
                           >
                             <StyledImage
-                              src={`${item.logo.url}`}
-                              onClick={() => setModalState(item.name.text)}
+                              src={`${item.logo?.url ? item.logo.url : '/images/' + item.logo}`}
+                              onClick={() => setModalState(item.name)}
+                              data-cy={`${item.name}-modal-click`}
                               className="max-h-[90px] ml-0 mr-0 mb-0 inline-flex"
                             />
                           </div>
@@ -128,26 +167,28 @@ export default function Sponsors({ sponsors = [] }) {
         </div>
       </div>
       {sponsors.map((sponsor) => {
-        return sponsor?.node?.data?.items.map((item) => {
+        return sponsor?.items.map((item) => {
+          const translatedText = t(`sponsor-${item.name}`);
+
           return (
             <SponsorModal
-              key={`sponsor-${item.name.text}`}
+              key={`sponsor-${item.name}`}
               setModalState={setModalState}
               modalState={modalState}
-              modalName={item.name.text}
-              title={item.name.text}
+              modalName={item.name}
+              title={item.name}
+              logo={item.logo}
+              linkTo={item.link}
             >
-              <PrismicRichText field={item.description.richText} />
-              <div className="flex justify-center items-center">
-                <Link to={item.link.url} target="_blank">
-                  <GatsbyImage
-                    alt={`${item.name.text} Logo`}
-                    className="img-fluid rounded-lg w-[85%] max-w-[200px] max-h-[80px]"
-                    imgClassName="object-fill"
-                    image={item.logo.gatsbyImageData}
-                  />
-                </Link>
-              </div>
+              {item.richText ? (
+                <div className="prose">
+                  <PrismicRichText field={item.richText} />
+                </div>
+              ) : (
+                <ReactMarkdown className="react-markdown prose max-w-full">
+                  {translatedText}
+                </ReactMarkdown>
+              )}
             </SponsorModal>
           );
         });