API-3275 Panneau pour indiquer que l'API est migrée sur data.gouv.fr

components/api/apiDescription.tsx

@@ -4,14 +4,22 @@ import RichReactMarkdown from '../../components/richReactMarkdown';
 import Section from '../../components/api/section';
 import { IGuideElementShort } from '../../model';
 import { H3WithAnchor } from '../../uiComponents/titleWithAnchor';
+import { kebabCase } from 'lodash';
 
 const ApiDescription: React.FC<{
   content_intro?: string;
   body: string;
   guides: IGuideElementShort[];
-}> = ({ content_intro, guides, body }) => (
+  title: string;
+}> = ({ content_intro, guides, body, title }) => (
   <Section id="api-description" title="Description">
     <>
+      <div style={{backgroundColor: "#FFE9E6", color: "#B34000", padding: "1rem"}}>
+        <strong>⚠️ Ces informations ne sont plus mises à jour depuis le 06/09/2024.</strong><br />
+        Le site API.gouv.fr va progressivement être fusionné dans le catalogue unique data.gouv.fr. <br /><br />
+        Retrouvez la fiche d'information à jour de cette API sur la nouvelle page API de Data.gouv.fr <a href={`https://data.gouv.fr/fr/dataservices/${kebabCase(title)}`} target="_blank" rel="noopener noreferrer">⇢ Consulter la fiche à jour</a>
+      </div>
+
       {content_intro && <RichReactMarkdown source={content_intro} />}
       {guides.length > 0 && (
         <>

layouts/page.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { Footer, PreFooter, Header, Meta, DocHeader } from '../components';
 import { Question } from '../uiComponents/question';
+import { AlertFusion } from '../uiComponents/alertFusion';
 
 interface IProps {
   title: string;
@@ -35,6 +36,7 @@ const Page: React.FC<PropsWithChildren<IProps>> = ({
       canonical={canonical}
     />
     {useDocHeader ? <DocHeader /> : <Header headerKey={headerKey || 'home'} />}
+    <AlertFusion/>
     <main>{children}</main>
     <Question />
     {usePreFooter && <PreFooter background={preFooterBackground} />}

pages/les-api/[slug].tsx

@@ -90,6 +90,7 @@ const API: React.FC<IProps> = ({ api, guides, datagouvDatasets }) => {
               guides={guides}
               body={body}
               content_intro={content_intro}
+              title={title}
             />
 
             {datagouvDatasets.length > 0 && (

uiComponents/alertFusion/index.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+export const AlertFusion: React.FC<{}> = () => (
+  <>
+    <div className="fr-notice fr-notice--info">
+      <div className="fr-container">
+        <div className="fr-notice__body">
+          <p><span className="fr-notice__title">⚠️ Le site API.gouv.fr fusionne dans le catalogue unique Data.gouv.fr :</span> <span className="fr-notice__desc">Pour découvrir les nouvelles API et obtenir les informations les plus à jour, rendez-vous sur </span>
+          <a target="_blank" rel="noopener external" title="Page API du catalogue Data.gouv.fr - nouvelle fenêtre" href="https://www.data.gouv.fr/api" className="fr-notice__link">⇢ data.gouv.fr/api</a>.
+          </p>
+          </div>
+        </div>
+      </div>
+
+    <style jsx>{`
+      /* ¯¯¯¯¯¯¯¯¯ *\
+          ALERT MIGRATION
+        \* ˍˍˍˍˍˍˍˍˍ */
+        .fr-notice {
+          position: relative;
+
+          --title-spacing: 0;
+          --text-spacing: 0;
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          background-color: var(--background-contrast-grey);
+          color: var(--text-title-grey);
+        }
+
+        .fr-notice__body {
+          position: relative;
+
+        }
+
+        .fr-notice__body::before {
+          --icon-size: 1.5rem;
+          flex: 0 0 auto;
+          display: inline-block;
+          vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+          background-color: currentColor;
+          width: var(--icon-size);
+          height: var(--icon-size);
+          -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+          position: absolute;
+          left: 0;
+        }
+
+        .fr-notice__title {
+          position: relative;
+          font-size: 1rem;
+          line-height: 1.5rem;
+          font-weight: 700;
+        }
+
+        .fr-notice--info .fr-notice__body::before {
+          -webkit-mask-image: url("icons/system/fr--info-fill.svg");
+          mask-image: url("icons/system/fr--info-fill.svg");
+          content: "";
+        }
+
+        .fr-notice--info {
+          background-color: var(--background-contrast-info);
+
+          --hover: var(--background-contrast-info-hover);
+          --active: var(--background-contrast-info-active);
+          color: var(--text-default-info);
+        }
+
+        /**
+        * reset des marges dans le bandeau
+        */
+        .fr-notice__title,
+        .fr-notice p {
+          margin: 0;
+        }
+
+        .fr-notice--info .fr-notice__body::before {
+          background-image: url("icons/system/fr--info-fill.svg");
+          width: 1.5rem;
+          height: 1.5rem;
+          color: transparent;
+        }
+
+        .fr-notice .fr-btn--close::before,
+        .fr-notice .fr-btn--close::after {
+          background-color: transparent;
+          background-size: 100%;
+          background-repeat: no-repeat;
+          background-image: url("icons/system/close-line.svg");
+          width: 1rem;
+          height: 1rem;
+        }
+
+        .fr-notice {
+          background-color: #eee;
+          color: #161616;
+        }
+
+        .fr-notice--info {
+          background-color: #FFE9E6;
+          color: #B34000;
+        }
+
+        .fr-notice__link {
+          font-weight: 700;
+        }
+    `}</style>
+  </>
+);