datactivist · etienne0101 · Feb 15, 2024 · Feb 15, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/components/Layout.js b/components/Layout.js
@@ -67,8 +67,8 @@ const Layout = ({ children }) => {
                 <Image
                   src="/images/footer/logo-datactivist.png"
                   alt="Datactivist logo"
-                  width={220}
-                  height={220}
+                  width={180}
+                  height={180}
                   priority
                   className={styles.logo}
                 />

diff --git a/components/docs/DocsMetadata.js b/components/docs/DocsMetadata.js
@@ -87,6 +87,22 @@ const DocsMetadata = ({ metadata }) => {
           </button>
           </p>
         )}
+        {license === 'ccbysa' && (
+        <div className={styles.metadataRow}>
+          <div className={styles.ccBySaWrapper}>
+            <img
+              src="/images/icons/cc-by-sa.png"
+              alt="cc-by-sa"
+              className={styles.ccBySaImage}
+            />
+            <div className={styles.ccBySaLightbox}>
+              🔄 Vous pouvez partager et adapter ce contenu librement, à
+              condition de le créditer et de le partager sous une licence
+              compatible.
+            </div>
+          </div>
+        </div>
+      )}
       </div>
       {tagsArray && (
         <div className={styles.metadataRow}>
@@ -111,22 +127,6 @@ const DocsMetadata = ({ metadata }) => {
           />
         </div>
       )}
-      {license === 'ccbysa' && (
-        <div className={styles.metadataRow}>
-          <div className={styles.ccBySaWrapper}>
-            <img
-              src="/images/icons/cc-by-sa.png"
-              alt="cc-by-sa"
-              className={styles.ccBySaImage}
-            />
-            <div className={styles.ccBySaLightbox}>
-              🔄 Vous pouvez partager et adapter ce contenu librement, à
-              condition de le créditer et de le partager sous une licence
-              compatible.
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

diff --git a/components/docs/MarkdownDocs.js b/components/docs/MarkdownDocs.js
@@ -12,6 +12,7 @@ import Partners from '../nav/Partners';
 import ImageGallery from './ImageGallery';
 import Head from 'next/head';
 
+
 const MarkdownDocs = ({ filename }) => {
   const [metadata, setMetadata] = useState({});
   const [content, setContent] = useState('');
@@ -198,7 +199,6 @@ const MarkdownDocs = ({ filename }) => {
 
     fetchMarkdownContent();
   }, [filename]);
-
 
   useEffect(() => {
     if (content) {
@@ -211,68 +211,101 @@ const MarkdownDocs = ({ filename }) => {
     }
   }, [content]);
 
-  return (
-    <Layout>
-      <Head>
+  useEffect(() => {
+  const fetchReferencesDetails = async () => {
+    if (metadata.references_catalog) {
+      // Split the references_catalog string into individual IDs
+      const referenceIds = metadata.references_catalog.split(',');
+      // Fetch details for each reference
+      const referencesPromises = referenceIds.map(id =>
+        fetch(`/api/referenceDetails?id=${id.trim()}`)
+          .then(response => response.json())
+      );
+      Promise.all(referencesPromises)
+        .then(referencesDetails => {
+          // Process and display these details as needed
+          console.log(referencesDetails); // This will log the details for each reference
+          // Set state here if you're storing these details in state
+        })
+        .catch(error => console.error('Error fetching references details:', error));
+    }
+  };
+
+  fetchReferencesDetails();
+}, [metadata.references_catalog]);
+
+const renderReferences = () => {
+  if (!metadata.references_catalog) return null;
+
+  const referenceIds = metadata.references_catalog.split(',');
+  const referenceTitles = metadata['reference-title'] ? metadata['reference-title'].split(',') : [];
+
+  return referenceIds.map((id, index) => {
+    const title = referenceTitles[index] ? referenceTitles[index].trim() : 'Reference';
+    return (
+      <a key={id.trim()} href={`/references/${id.trim()}`} className={styles.referenceLink}>
+        <div className={styles.referenceDocContainer}>{title}</div>
+      </a>
+    );
+  });
+};
+
+
+return (
+  <Layout>
+    <Head>
       <title>{metadata?.title}</title>
       <meta name="description" content={metadata?.description} />
-      </Head>
-      <div
+    </Head>
+    <div
+      style={{
+        backgroundColor: 'white',
+        margin: '0 auto',
+        maxWidth: '900px',
+        padding: '0 10px',
+        borderRadius: '20px',
+      }}
+    >
+      <TitleWithBackground
+        title={metadata?.title}
+        imageUrl={metadata?.image}
+      />
+      <DocsMetadata metadata={metadata} />
+      <br />
+      <p
         style={{
-          backgroundColor: 'white',
-          margin: '0 auto',
-          maxWidth: '900px',
-          padding: '0 10px',
-          borderRadius: '20px',
+          width: '100%',
+          display: 'block',
+          fontSize: '1.5rem',
+          color: '#696969',
+          textAlign: 'center',
         }}
       >
-<TitleWithBackground title={metadata?.title} imageUrl={metadata?.image} />
-        <DocsMetadata metadata={metadata} />
-        <br />
-        <p
-          style={{
-            width: '100%',
-            display: 'block',
-            fontSize: '1.5rem',
-            color: '#696969',
-            textAlign: 'center',
-          }}
-        >
-          {metadata?.description}
-        </p>
-        <br />
-        <div className={styles.markdownContent}>
-          {createContentElements(content)}
+        {metadata?.description}
+      </p>
+      <br />
+      {(metadata.partners && metadata.partners.length > 0) || metadata.references_catalog ? (
+        <div className={styles.partnersReferencesContainer}>
+          {metadata.partners && metadata.partners.length > 0 && (
+            <div className={styles.partnersContainer}>
+              <Partners partnersIds={metadata.partners} />
+            </div>
+          )}
+          {metadata.references_catalog && (
+            <div className={styles.referencesContainer}>
+              <h2 className={styles.referenceTitle}>Référence(s)</h2>
+              <div>{renderReferences()}</div>
+            </div>
+          )}
         </div>
-        {metadata?.partners && (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              border: '10px solid #ededed',
-              borderRadius: '26px',
-              padding: '20px',
-              marginTop: '20px',
-            }}
-          >
-            <p>
-              <strong>
-                {' '}
-                Ce contenu a été défini et testé avec{' '}
-                {metadata.partners.length > 1
-                  ? 'plusieurs partenaires :'
-                  : 'un partenaire :'}
-              </strong>{' '}
-            </p>
-            <br></br>
-            <Partners partnersIds={metadata.partners} />
-          </div>
-        )}
+      ) : null}
+      <div className={styles.markdownContent}>
+        {createContentElements(content)}
       </div>
-    </Layout>
-  );
+    </div>
+  </Layout>
+);
+
 };
 
-export default MarkdownDocs;
+export default MarkdownDocs;
diff --git a/components/nav/Cards.js b/components/nav/Cards.js
@@ -70,7 +70,7 @@ const Cards = ({
       // If it's a URL, open it in a new tab
       window.open(item.url, '_blank');
     } else {
-      const docName = item['name'];
+      const docName = item['name'];
       if (docName) {
         router.push(`/docs/${docName}`);
       } else {
@@ -88,7 +88,7 @@ const Cards = ({
     <>
        {items.map((item) => (
         <div
-          key={item['name'] || item.productId || item.id}
+          key={item['name'] || item.productId || item.id}
           className={item.url ? `${styles.card} ${styles['card-link']}` : styles.card}
           onClick={() => handleCardClick(item)}
           style={{ position: 'relative' }}

diff --git a/components/nav/Partners.js b/components/nav/Partners.js
@@ -7,7 +7,6 @@ const Partners = ({ partnersIds, largeText = false }) => {
   const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
 
-  // Ensure partnersIds are in array format
   const validPartnersIds = Array.isArray(partnersIds) 
                             ? partnersIds 
                             : typeof partnersIds === 'string' 
@@ -32,29 +31,39 @@ const Partners = ({ partnersIds, largeText = false }) => {
   }
 
   return (
-    <div className={styles.authorsContainer}>
-      {validPartnersIds.map((id) => {
-        const partner = partnersData[id];
-        if (partner) {
-          return (
-            <div key={id} className={`${styles.author} ${styles.partnerBox}`}>
-              <img
-                src={partner.image}
-                alt={partner.name}
-                className={styles.partnerImage}
-              />
-              <div
-                key={id}
-                className={`${styles.partnerName} ${largeText ? styles.authorNameLarge : ''}`}
-                onClick={() => handlePartnerClick(id)}
-              >
-                {partner.name}
-              </div>
-            </div>
-          );
-        }
-        return null;
-      })}
+    <div>
+      <h2 className={styles.partnerTitle}>Partenaire(s)</h2>
+      <div className={styles.partnerDocContainer}>
+        <div className={styles.authorsContainer}>
+          {validPartnersIds.map((id) => {
+            const partner = partnersData[id];
+            if (partner) {
+              return (
+                <div 
+                  key={id} 
+                  className={`${styles.author} ${styles.partnerBox}`} 
+                  onClick={() => handlePartnerClick(id)} // Déplacez onClick ici pour englober tout le conteneur
+                  style={{ cursor: 'pointer' }} // Optionnel, pour montrer visuellement que c'est cliquable
+                >
+                  <img
+                    src={partner.image}
+                    alt={partner.name}
+                    className={styles.partnerImage}
+                  />
+                  <div
+                    className={`${styles.partnerName} ${largeText ? styles.authorNameLarge : ''}`}
+                  >
+                    <div className={styles.partnerName}>
+                    {partner.name}
+                    </div>
+                  </div>
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      </div>
     </div>
   );  
 };

diff --git a/components/nav/PartnersGallery.js b/components/nav/PartnersGallery.js
@@ -35,7 +35,7 @@ const PartnerGallery = () => {
   const partnersArray = Object.entries(partnersData).map(([id, partner]) => ({id, ...partner}));
 
   return (
-    <div>
+    <div className={styles.PartnerGallery}>
       <Gallery>
         {partnersArray.map((partner) => (
         <div key={partner.id} className={`${styles.cardpartner} ${styles.centerContent}`} onClick={() => router.push(`/partners/${partner.id}`)}>

diff --git a/components/nav/ReferenceCard.js b/components/nav/ReferenceCard.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from 'next/link';
+import styles from '../../styles/ReferenceCard.module.css';
+
+const ReferenceCard = ({ id, title, partnerName, partnerImage }) => {
+  return (
+    <Link href={`/references/${id}`} passHref>
+      <div className={styles.cardLink}> {/* Apply styles directly to this div */}
+        <div className={styles.card}>
+          <div className={styles.cardImageContainer}>
+            <img src={partnerImage} alt={partnerName} className={styles.cardImage} />
+          </div>
+          <div className={styles.cardContent}>
+            <h3 className={styles.cardTitle}>{title}</h3>
+            <p className={styles.cardPartnerName}>{partnerName}</p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ReferenceCard;
diff --git a/package.json b/package.json
@@ -43,7 +43,9 @@
     "fuse.js": "^6.6.2",
     "graphql": "^16.6.0",
     "gray-matter": "^4.0.3",
+    "html2canvas": "^1.4.1",
     "js-yaml": "^4.1.0",
+    "jspdf": "^2.5.1",
     "markdown-it": "^13.0.1",
     "marked": "^4.3.0",
     "moment": "^2.29.4",