From 8387843da02028038ad19edc7c271b5c057edc11 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 31 Mar 2026 15:32:23 +0200
Subject: [PATCH] article : extract ShareButtons and ArticleRelated components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/blocks/ArticleRelated.svelte |  72 +++++++++++
 src/components/blocks/ShareButtons.svelte   |  49 ++++++++
 src/views/Article.svelte                    | 131 +-------------------
 3 files changed, 127 insertions(+), 125 deletions(-)
 create mode 100644 src/components/blocks/ArticleRelated.svelte
 create mode 100644 src/components/blocks/ShareButtons.svelte

diff --git a/src/components/blocks/ArticleRelated.svelte b/src/components/blocks/ArticleRelated.svelte
new file mode 100644
index 0000000..b5c0679
--- /dev/null
+++ b/src/components/blocks/ArticleRelated.svelte
@@ -0,0 +1,72 @@
+<script>
+  import { t } from '@i18n'
+
+  let { related } = $props()
+</script>
+
+<section class="article-related">
+  <h2>{t('related')}</h2>
+  <div class="article-related-grid">
+    {#each related as rec}
+      <a href="/blog/{rec.slug}" class="article-related-card">
+        {#if rec.cover}
+          <img src={rec.cover} alt={rec.title} />
+        {/if}
+        <span class="article-related-title">{rec.title}</span>
+      </a>
+    {/each}
+  </div>
+</section>
+
+<style>
+  .article-related {
+    padding-top: 3rem;
+  }
+
+  .article-related h2 {
+    font-family: "Danzza Bold", sans-serif;
+    font-size: var(--font-size-title-section);
+    margin-bottom: 2rem;
+  }
+
+  .article-related-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  .article-related-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    transition: transform 0.3s;
+  }
+
+  .article-related-card:hover {
+    transform: translateY(-5px);
+  }
+
+  .article-related-card img {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+
+  .article-related-title {
+    font-family: "Danzza Bold", sans-serif;
+    font-size: var(--font-size-paragraph);
+  }
+
+  @media (max-width: 700px) {
+    .article-related-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 701px) and (max-width: 912px) {
+    .article-related-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+</style>
diff --git a/src/components/blocks/ShareButtons.svelte b/src/components/blocks/ShareButtons.svelte
new file mode 100644
index 0000000..2c52850
--- /dev/null
+++ b/src/components/blocks/ShareButtons.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { t } from '@i18n'
+
+  let { shareUrl, copyLink, centered = false } = $props()
+</script>
+
+<div class="share-buttons" class:centered>
+  <!-- svelte-ignore a11y_invalid_attribute -->
+  <a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
+    <img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
+  </a>
+  <a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
+    <img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
+  </a>
+  <a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
+    <img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
+  </a>
+  <a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
+    <img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
+  </a>
+  <a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
+    <img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
+  </a>
+</div>
+
+<style>
+  .share-buttons {
+    display: flex;
+    gap: 0;
+  }
+
+  .share-buttons.centered {
+    justify-content: center;
+  }
+
+  .share-button {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+  }
+
+  .share-button:hover {
+    opacity: 1;
+  }
+</style>
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 42f9535..4176526 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -8,6 +8,8 @@
   import { onMount } from 'svelte'
   import Footer from '@components/layout/Footer.svelte'
   import WhitePaperDialog from '@components/WhitePaperDialog.svelte'
+  import ShareButtons from '@components/blocks/ShareButtons.svelte'
+  import ArticleRelated from '@components/blocks/ArticleRelated.svelte'
 
   let { data, onBack } = $props()
 
@@ -106,24 +108,7 @@
       {#if copySuccess}
         <span class="copy-toast">{t('link_copied')}</span>
       {/if}
-      <div class="share-buttons">
-        <!-- svelte-ignore a11y_invalid_attribute -->
-        <a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
-          <img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
-        </a>
-        <a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
-        </a>
-        <a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
-        </a>
-        <a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
-        </a>
-        <a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
-        </a>
-      </div>
+      <ShareButtons {shareUrl} {copyLink} />
     </div>
   </div>
 
@@ -151,41 +136,12 @@
   <div class="article-share-section">
     <hr class="share-divider" />
     <p class="share-label">{t('share_article')}</p>
-    <div class="share-buttons">
-      <!-- svelte-ignore a11y_invalid_attribute -->
-      <a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
-        <img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
-      </a>
-      <a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
-      </a>
-      <a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
-      </a>
-      <a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
-      </a>
-      <a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
-      </a>
-    </div>
+    <ShareButtons {shareUrl} {copyLink} centered />
   </div>
 
   <!-- Articles recommandés -->
   {#if data.related?.length}
-    <section class="article-related">
-      <h2>{t('related')}</h2>
-      <div class="article-related-grid">
-        {#each data.related as rec}
-          <a href="/blog/{rec.slug}" class="article-related-card">
-            {#if rec.cover}
-              <img src={rec.cover} alt={rec.title} />
-            {/if}
-            <span class="article-related-title">{rec.title}</span>
-          </a>
-        {/each}
-      </div>
-    </section>
+    <ArticleRelated related={data.related} />
   {/if}
 </article>
 
@@ -227,25 +183,6 @@
     gap: 0.5rem;
   }
 
-  .share-buttons {
-    display: flex;
-    gap: 0;
-  }
-
-  .share-button {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0.8;
-    transition: opacity 0.2s;
-  }
-
-  .share-button:hover {
-    opacity: 1;
-  }
-
   .copy-toast {
     position: absolute;
     right: 0;
@@ -280,10 +217,6 @@
     margin-bottom: 1.25rem;
   }
 
-  .article-share-section .share-buttons {
-    justify-content: center;
-  }
-
   /* --- Titre --- */
   .article-title {
     font-size: var(--font-size-title-section);
@@ -520,46 +453,6 @@
     box-shadow: 0 0 0 2px rgba(77, 252, 161, 0.5);
   }
 
-  /* --- Recommandations --- */
-  .article-related {
-    padding-top: 3rem;
-  }
-
-  .article-related h2 {
-    font-family: "Danzza Bold", sans-serif;
-    font-size: var(--font-size-title-section);
-    margin-bottom: 2rem;
-  }
-
-  .article-related-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-  }
-
-  .article-related-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    transition: transform 0.3s;
-  }
-
-  .article-related-card:hover {
-    transform: translateY(-5px);
-  }
-
-  .article-related-card img {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-    border-radius: 8px;
-  }
-
-  .article-related-title {
-    font-family: "Danzza Bold", sans-serif;
-    font-size: var(--font-size-paragraph);
-  }
-
   /* --- Bloc livre blanc --- */
   .article-body :global(.wp-block) {
     position: relative;
@@ -663,18 +556,10 @@
       padding: 0;
     }
 
-    .article-body :global(p), 
+    .article-body :global(p),
     .article-body :global(h3) {
       font-family: "Danzza Light", sans-serif;
     }
-
-    .article-related-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .collection-card-title {
-      max-width: 100%;
-    }
   }
 
   /* --- Tablet --- */
@@ -682,9 +567,5 @@
     .article-title {
       font-size: var(--font-size-title-main-tablet);
     }
-
-    .article-related-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
   }
 </style>