Fix/open graph - use gatsby head

site/gatsby-site/cypress/e2e/integration/blog.cy.js

@@ -54,9 +54,6 @@ describe('Blog', () => {
 
     cy.title().should('eq', title);
 
-    cy.get('head meta[name="title"]').should('have.attr', 'content', title);
-    cy.get('head meta[name="description"]').should('have.attr', 'content', description);
-
     cy.get('head meta[name="twitter:site"]').should('have.attr', 'content', '@IncidentsDB');
     cy.get('head meta[name="twitter:creator"]').should('have.attr', 'content', '@IncidentsDB');
 

site/gatsby-site/cypress/e2e/integration/cite.cy.js

@@ -599,9 +599,6 @@ describe('Cite pages', () => {
 
       const description = incident.description;
 
-      cy.get('head meta[name="title"]').should('have.attr', 'content', title);
-      cy.get('head meta[name="description"]').should('have.attr', 'content', description);
-
       cy.get('head meta[name="twitter:site"]').should('have.attr', 'content', '@IncidentsDB');
       cy.get('head meta[name="twitter:creator"]').should('have.attr', 'content', '@IncidentsDB');
 

site/gatsby-site/cypress/e2e/integration/pages.cy.js

@@ -164,6 +164,26 @@ describe('Pages', () => {
             });
         }
       );
+
+      it(`/${code}${path} Should have open graph tags`, () => {
+        const canonicalPath = switchLocalizedPath({ newLang: code, path });
+
+        cy.visit(canonicalPath);
+
+        cy.waitForStableDOM();
+
+        cy.get('head meta[name="twitter:site"]').should('exist');
+        cy.get('head meta[name="twitter:creator"]').should('exist');
+
+        cy.get('head meta[property="og:url"]').should('exist');
+        cy.get('head meta[property="og:type"]').should('exist');
+        cy.get('head meta[property="og:title"]').should('exist');
+        cy.get('head meta[property="og:description"]').should('exist');
+        cy.get('head meta[property="og:image"]').first().should('exist');
+        cy.get('head meta[property="twitter:title"]').should('exist');
+        cy.get('head meta[property="twitter:description"]').should('exist');
+        cy.get('head meta[property="twitter:image"]').should('exist');
+      });
     });
   });
 });

site/gatsby-site/i18n/locales/en/translation.json

@@ -1,5 +1,5 @@
 {
    "csetCharts": "The CSET AI Harm Taxonomy for AIID is the second edition of the CSET incident taxonomy. It characterizes the harms, entities, and technologies involved in AI incidents and the circumstances of their occurrence. The charts below show select fields from the CSET AI Harm Taxonomy for AIID. Details about each field can be found <1>here</1>. However, brief descriptions of the field are provided above each chart.",
    "csetChartDeveloped": "CSET has developed specific definitions for the underlined phrases that may differ from other organizations’ definitions. As a result, other organizations may make different assessments on whether any particular AI incident is (or is not) AI harm. Details about CSET’s definitions for AI harm can be found <1>here</1>.",
-   "csetChartMail": "Every incident is independently classified by two CSET annotators. Annotations are peer-reviewed and finally randomly selected for quality control ahead of publication. Despite this rigorous process, mistakes do happen, and readers are invited to <1>report</1> any errors they might discover while browsing."
+   "csetChartMail": "Every incident is independently classified by two CSET annotators. Annotations are peer-reviewed and finally randomly selected for quality control ahead of publication. Despite this rigorous process, mistakes do happen, and readers are invited to <1>report</1> any errors they might discover while browsing."   
 }

site/gatsby-site/i18n/locales/es/incidents.json

@@ -3,5 +3,6 @@
     "This is a simple numeric listing of all incidents and their reports within the database. If you would like to explore the contents of the reports, you should work through the<1> Discover app</1>.": "Se trata de una lista numérica simple de todos los incidentes y sus reportes dentro de la base de datos. Si desea explorar el contenido de los reportes, debe navegar a través de<1> Descubrir Incidentes</1>.",
     "Sort by incident ID": "Ordenar por ID de incidente",
     "ascending": "ascendente",
-    "descending": "descendente"
+    "descending": "descendente",
+    "Summary of all the incidents present in the database": "Resumen de todos los incidentes presentes en la base de datos"
 }

site/gatsby-site/i18n/locales/es/submit.json

@@ -58,5 +58,6 @@
   "Progress saved!": "¡Progreso guardado!",
   "Your changes are saved. You can continue filling out the report or come back later.": "Sus cambios se están guardando. Puede continuar completando el reporte o volver más tarde.",
   "Clear Form": "Limpiar Formulario",
-  "Saving changes...": "Guardando cambios..."
+  "Saving changes...": "Guardando cambios...",
+  "Submit a new incident report to the Artificial Intelligence Incident Database": "Enviar un nuevo informe de incidente a la Base de Datos de Incidentes de Inteligencia Artificial"
 }

site/gatsby-site/i18n/locales/es/translation.json

@@ -290,5 +290,22 @@
   "Incident and Issue Reports": "Incidentes e Informes de Problemas",
   "Issue Reports": "Informes de Problemas",
   "found": "encontrados",
-  "results found": "resultados encontrados"
+  "results found": "resultados encontrados",
+  "Artificial Intelligence Incident Database - Discover": "Base de datos de incidentes de inteligencia artificial - Descubrir",
+  "AIID incidents list": "Lista de incidentes de AIID",
+  "Find AI related incidents and reports": "Encuentra incidentes e informes relacionados con la IA",
+  "Explore AIID's articles": "Explora los artículos de AIID",
+  "Sign up for an account": "Regístrate para obtener una cuenta",
+  "AIID - Sign Up": "AIID - Registrarse",
+  "AIID - Login": "AIID - Iniciar sesión",
+  "Login to your account": "Inicia sesión en tu cuenta",
+  "Related News Digest": "Resumen de noticias relacionadas",
+  "This summary features AI-related news, identified and matched to our database via NLP for textual similarity, including potential incidents and highlighted harm keywords.": "Este resumen presenta noticias relacionadas con la IA, identificadas y emparejadas con nuestra base de datos mediante PNL para similitud textual, incluyendo incidentes potenciales y palabras clave de daño destacadas.",
+  "Website's list of incidents and reports.": "Lista de incidentes e informes del sitio web.",
+  "Incidents Over Time": "Incidentes a lo largo del tiempo",
+  "View how the number of incidents and reports has changed over time.": "Ver cómo ha cambiado el número de incidentes e informes a lo largo del tiempo.",
+  "Leaderboard of top submitters, authors, and domains by count.": "Ranking de los principales remitentes, autores y dominios por cantidad.",
+  "Submissions Leaderboard": "Ranking de envíos",
+  "Database Backups and Snapshots": "Copias de seguridad y capturas de la base de datos",
+  "Find and download the latest Database Backups and snapshots": "Encuentra y descarga las últimas copias de seguridad y capturas de la base de datos"
 }

site/gatsby-site/i18n/locales/es/variants.json

@@ -33,5 +33,6 @@
   "Inputs / Outputs": "Salidas / Entradas",
   "The sequence of data inputs into the intelligent system and outputs produced by the system involved in the incident. For a chatbot, this will generally present a back and forth between a human and the chatbot's responses.": "La secuencia de entradas de datos en el sistema inteligente y salidas producidas por el sistema involucrado en el incidente. Para un chatbot, esto generalmente presentará un ida y vuelta entre las respuestas de un ser humano y las del chatbot.",
   "Add Row": "Agregar fila",
-  "Delete Row": "Borrar fila"
+  "Delete Row": "Borrar fila",
+  "View all the variants in the database.": "Ver todas las variantes en la base de datos."
 }

site/gatsby-site/i18n/locales/fr/incidents.json

@@ -3,5 +3,6 @@
     "This is a simple numeric listing of all incidents and their reports within the database. If you would like to explore the contents of the reports, you should work through the<1> Discover app</1>.": "Il s'agit d'une simple liste numérique de tous les incidents et de leurs rapports dans la base de données. Si vous souhaitez explorer le contenu des rapports, vous devez parcourir <1> Découvrir les incidents</1>.",
     "Sort by incident ID": "Trier par ID d'incident",
     "ascending": "ascendant",
-    "descending": "descendant"
+    "descending": "descendant",
+    "Summary of all the incidents present in the database": "Résumé de tous les incidents présents dans la base de données"
 }

site/gatsby-site/i18n/locales/fr/submit.json

@@ -55,5 +55,6 @@
   "Progress saved!": "Progrès sauvegardé !",
   "Your changes are saved. You can continue filling out the report or come back later.": "Vos modifications sont en cours d'enregistrement. Vous pouvez continuer à remplir le rapport ou revenir plus tard.",
   "Clear Form": "Effacer le formulaire",
-  "Saving changes...": "Enregistrement des modifications..."
+  "Saving changes...": "Enregistrement des modifications...",
+  "Submit a new incident report to the Artificial Intelligence Incident Database.": "Soumettre un nouveau rapport d'incident à la base de données des incidents d'intelligence artificielle."
 }

site/gatsby-site/i18n/locales/fr/translation.json

@@ -278,5 +278,22 @@
   "Incident and Issue Reports": "Incidents et rapports de problèmes",
   "Issue Reports": "Rapports de problèmes",
   "found": "trouvés",
-  "results found": "résultats trouvés"
+  "results found": "résultats trouvés",
+  "Artificial Intelligence Incident Database - Discover": "Base de données des incidents d'intelligence artificielle - Découvrir",
+  "AIID incidents list": "Liste des incidents AIID",
+  "Find AI related incidents and reports": "Trouver des incidents et des rapports liés à l'IA",
+  "Explore AIID's articles": "Explorer les articles de l'AIID",
+  "Sign up for an account": "Créer un compte",
+  "AIID - Sign Up": "AIID - Créer un compte",
+  "AIID - Login": "AIID - Se connecter",
+  "Login to your account": "Connectez-vous à votre compte",
+  "Related News Digest": "Résumé des actualités connexes",
+  "This summary features AI-related news, identified and matched to our database via NLP for textual similarity, including potential incidents and highlighted harm keywords.": "Ce résumé présente des actualités liées à l'IA, identifiées et appariées à notre base de données via le TAL pour une similarité textuelle, incluant des incidents potentiels et des mots-clés de dommage mis en évidence.",
+  "Website's list of incidents and reports.": "Liste des incidents et des rapports du site Web.",
+  "Incidents Over Time": "Incidents au fil du temps",
+  "View how the number of incidents and reports has changed over time.": "Voir comment le nombre d'incidents et de rapports a changé au fil du temps.",
+  "Leaderboard of top submitters, authors, and domains by count.": "Classement des meilleurs soumissionnaires, auteurs et domaines par nombre.",
+  "Submissions Leaderboard": "Classement des soumissions",
+  "Database Backups and Snapshots": "Sauvegardes et instantanés de la base de données",
+  "Find and download the latest Database Backups and snapshots": "Trouver et télécharger les dernières sauvegardes et instantanés de la base de données"
 }

site/gatsby-site/i18n/locales/fr/variants.json

@@ -33,5 +33,6 @@
   "Inputs / Outputs": "Entrées / Sorties",
   "The sequence of data inputs into the intelligent system and outputs produced by the system involved in the incident. For a chatbot, this will generally present a back and forth between a human and the chatbot's responses.": "La séquence des entrées de données dans le système intelligent et des sorties produites par le système impliqué dans l'incident. Pour un chatbot, cela présentera généralement un va-et-vient entre un humain et les réponses du chatbot.",
   "Add Row": "Ajouter une ligne",
-  "Delete Row": "Supprimer la ligne"
+  "Delete Row": "Supprimer la ligne",
+  "View all the variants in the database.": "Voir toutes les variantes dans la base de données."
 }

site/gatsby-site/src/components/HeadContent.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import config from '../../config';
+
+const HeadContent = ({
+  children,
+  metaTitle = null,
+  metaDescription = null,
+  path,
+  metaImage = null,
+  metaType = 'website',
+}) => {
+  const twitter = config.siteMetadata.twitterAccount;
+
+  metaImage ||= config.siteMetadata.ogImage;
+
+  const canonicalUrl = config.gatsby.siteUrl + path;
+
+  return (
+    <>
+      {metaTitle && (
+        <>
+          <title>{metaTitle}</title>
+          <meta property="og:title" content={metaTitle} />
+          <meta property="twitter:title" content={metaTitle} />
+        </>
+      )}
+
+      {metaDescription && (
+        <>
+          <meta property="og:description" content={metaDescription} />
+          <meta property="twitter:description" content={metaDescription} />
+        </>
+      )}
+
+      {metaImage && (
+        <>
+          <meta property="twitter:image" content={metaImage} />
+          <meta property="og:image" content={metaImage} />
+        </>
+      )}
+
+      <meta property="og:type" content={metaType} />
+
+      {twitter && (
+        <>
+          <meta name="twitter:site" content={twitter} />
+          <meta name="twitter:creator" content={twitter} />
+        </>
+      )}
+
+      {canonicalUrl && (
+        <>
+          <link rel="canonical" href={canonicalUrl} />
+          <meta property="og:url" content={canonicalUrl} />
+        </>
+      )}
+
+      <meta property="twitter:card" content="summary_large_image" />
+      {config.siteMetadata.favicon && (
+        <link rel="shortcut icon" type="image/svg" href={config.siteMetadata.favicon} />
+      )}
+
+      {children}
+    </>
+  );
+};
+
+export default HeadContent;

site/gatsby-site/src/components/blog/PostsListing.js

@@ -3,6 +3,8 @@ import PostPreview from './PostPreview';
 import PrismicPostPreview from './PrismicPostPreview';
 
 export default function PostsListing({ posts, mdxBlogPosts }) {
+  let sortedPosts = [];
+
   // Add an mdx field to each object and flatten the structure
   const mdxBlogPostsWithFlag = mdxBlogPosts.map((post) => ({
     ...post,
@@ -18,7 +20,7 @@ export default function PostsListing({ posts, mdxBlogPosts }) {
 
   const mergedPosts = [...mdxBlogPostsWithFlag, ...postsWithFlag];
 
-  const sortedPosts = mergedPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+  sortedPosts = mergedPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
 
   return (
     <>

site/gatsby-site/src/components/blog/PrismicBlogPost.js

@@ -9,21 +9,10 @@ import { Trans } from 'react-i18next';
 import config from '../../../config';
 import { useLayoutContext } from 'contexts/LayoutContext';
 import Outline from 'components/Outline';
-import AiidHelmet from 'components/AiidHelmet';
 
 const PrismicBlogPost = ({ post, location }) => {
   const metaTitle = post.data.metatitle;
 
-  const metaDescription = post.data.metaDescription;
-
-  const postImage = post.data.image?.gatsbyImageData?.images?.fallback?.src;
-
-  let metaImage = null;
-
-  if (postImage) {
-    metaImage = `${config.gatsby.siteUrl}${postImage}`;
-  }
-
   const canonicalUrl = config.gatsby.siteUrl + location.pathname;
 
   const loc = new URL(canonicalUrl);
@@ -42,7 +31,6 @@ const PrismicBlogPost = ({ post, location }) => {
 
   return (
     <>
-      <AiidHelmet {...{ metaTitle, metaDescription, path: location.pathname, metaImage }} />
       <div className={'titleWrapper'}>
         <LocalizedLink to="/blog" className="text-lg">
           <Trans>AIID Blog</Trans>

site/gatsby-site/src/components/doc/PrismicDocPost.js

@@ -6,7 +6,6 @@ import { Trans } from 'react-i18next';
 import config from '../../../config';
 import { useLayoutContext } from 'contexts/LayoutContext';
 import Outline from 'components/Outline';
-import AiidHelmet from 'components/AiidHelmet';
 import Leaderboards from 'components/landing/Leaderboards';
 import Sponsors from 'components/landing/Sponsors';
 import { RichText } from 'prismic-reactjs';
@@ -19,14 +18,6 @@ const PrismicDocPost = ({ doc, location }) => {
     Sponsors: <Sponsors />,
   };
 
-  if (!doc) return <></>;
-
-  const metaTitle = doc.data.metatitle;
-
-  const metaDescription = doc.data.metadescription;
-
-  let metaImage = null;
-
   const canonicalUrl = config.gatsby.siteUrl + location.pathname;
 
   const loc = new URL(canonicalUrl);
@@ -45,7 +36,6 @@ const PrismicDocPost = ({ doc, location }) => {
 
   return (
     <>
-      <AiidHelmet {...{ metaTitle, metaDescription, path: location.pathname, metaImage }} />
       <div className={'titleWrapper'}>
         <h1>{doc.data.title}</h1>
       </div>

site/gatsby-site/src/components/taxa/CsetTaxonomyPage.js

@@ -3,7 +3,6 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import { getClassificationValue } from 'utils/classifications';
 
-import AiidHelmet from 'components/AiidHelmet';
 import { isAiHarm } from 'utils/cset';
 import GroupBarChart from 'components/taxa/GroupBarChart';
 
@@ -33,10 +32,6 @@ export default function CsetTaxonomyPage(props) {
 
   return (
     <>
-      <AiidHelmet {...{ metaTitle }} path={props.location.pathname}>
-        <meta property="og:type" content="website" />
-      </AiidHelmet>
-
       <div className={'titleWrapper'}>
         <h1>{metaTitle}</h1>
       </div>

site/gatsby-site/src/components/taxa/FacetTaxonomyPage.js

@@ -7,7 +7,6 @@ import BillboardJS from '@billboard.js/react';
 import Link from 'components/ui/Link';
 import LocationMap from 'components/visualizations/LocationMap';
 import { Card, Badge, Button } from 'flowbite-react';
-import AiidHelmet from 'components/AiidHelmet';
 import { getClassificationValue } from 'utils/classifications';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
@@ -37,8 +36,6 @@ export default function FacetTaxonomyPage(props) {
 
   return (
     <>
-      <AiidHelmet metaTitle={'Taxonomy: ' + namespace} path={props.location.pathname} />
-
       <div className={'titleWrapper'}>
         <h1>{namespace}</h1>
       </div>