article : extract ShareButtons and ArticleRelated components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>

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>