world-game/src/views/Article.svelte

<script>
  /**
   * Vue article — sous-composant de Blog.svelte.
   * Reçoit les données article via props, pas via le slide system.
   */
  let { data, onBack } = $props()

  let copySuccess = $state(false)
  let copyTimer = null

  function copyLink() {
    navigator.clipboard.writeText(window.location.href)
    copySuccess = true
    clearTimeout(copyTimer)
    copyTimer = setTimeout(() => { copySuccess = false }, 2000)
  }

  const shareUrl = $derived(encodeURIComponent(window.location.href))
</script>

<article class="article">

  <!-- Date + share buttons -->
  <div class="article-topbar">
    <time class="article-date">Publié le {data.published}</time>
    <div class="article-share">
      {#if copySuccess}
        <span class="copy-toast">Lien copié !</span>
      {/if}
      <div class="share-buttons">
        <!-- svelte-ignore a11y_invalid_attribute -->
        <a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
          <img src="/assets/icons/link-icon.svg" alt="Copier le lien" 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="Partager sur 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="Partager sur 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="Partager sur 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="Partager sur LinkedIn" width="20" height="20" />
        </a>
      </div>
    </div>
  </div>

  <!-- Titre -->
  <h1 class="article-title font-face-terminal">{data.title}</h1>

  <!-- Intro -->
  {#if data.intro}
    <div class="article-intro">{@html data.intro}</div>
  {/if}

  <!-- Cover -->
  {#if data.cover}
    <div class="article-cover">
      <img src={data.cover} alt={data.title} />
    </div>
  {/if}

  <!-- Body (Kirby blocks → HTML) -->
  {#if data.body}
    <div class="article-body">{@html data.body}</div>
  {/if}

  <!-- Share section (bas d'article) -->
  <div class="article-share-section">
    <hr class="share-divider" />
    <p class="share-label">Partager cet article</p>
    <div class="share-buttons">
      <!-- svelte-ignore a11y_invalid_attribute -->
      <a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
        <img src="/assets/icons/link-icon.svg" alt="Copier le lien" 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="Partager sur 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="Partager sur 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="Partager sur 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="Partager sur LinkedIn" width="20" height="20" />
      </a>
    </div>
  </div>

  <!-- Articles recommandés -->
  {#if data.related?.length}
    <section class="article-related">
      <h2>Nos recommandations</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>
  {/if}

</article>

<style>
  .article {
    grid-area: 6 / 1 / span 10 / span 20;
    padding: 0 20%;
  }

  /* --- Topbar --- */
  .article-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .article-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-paragraph);
  }

  /* --- Share (topbar) --- */
  .article-share {
    position: relative;
    display: flex;
    align-items: center;
    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;
    top: -36px;
    background: var(--color-primary);
    color: #1e1938;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
  }

  /* --- Share section (bas d'article) --- */
  .article-share-section {
    margin: 3rem 0 2rem;
    text-align: center;
  }

  .share-divider {
    border: none;
    border-top: 1px solid white;
    margin-bottom: 1.25rem;
  }

  .share-label {
    font-family: "Danzza Bold", sans-serif;
    font-size: 16px;
    margin-bottom: 1.25rem;
  }

  .article-share-section .share-buttons {
    justify-content: center;
  }

  /* --- Titre --- */
  .article-title {
    font-size: var(--font-size-title-section);
    font-weight: 700;
    font-family: "Danzza", sans-serif;
    text-align: center;
    margin: 20px 0;
  }

  /* --- Intro --- */
  .article-intro {
    text-align: center;
    font-size: var(--font-size-paragraph);
    line-height: 1.5;
    color: hsla(0,0%,100%,.9);
    margin-bottom: 2.5rem;
  }

  /* --- Cover --- */
  .article-cover {
    margin-bottom: 3rem;
  }

  .article-cover img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* --- Body (rich text from Kirby blocks) --- */
  .article-body {
    line-height: 1.8;
    text-align: left;
    margin-bottom: 1.25rem;
    padding: 0 15%;
  }

  .article-body :global(h2),
  .article-body :global(h3) {
    font-family: "Danzza", sans-serif;
    line-height: 1.3;
  }

  .article-body :global(h2) {
    font-size: 29px;
  }

  .article-body :global(h3) {
    font-size: 22px;
    margin: 25px 0 15px;
  }

  .article-body :global(p) {
    font-family: "Danzza", sans-serif;
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  .article-body :global(a) {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .article-body :global(ul),
  .article-body :global(ol) {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
  }

  .article-body :global(li) {
    margin-bottom: 0.5rem;
  }

  .article-body :global(blockquote) {
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.25rem 1.25rem 2rem;
    margin: 2rem 0;
    background: rgba(4, 254, 160, 0.05);
  }

  .article-body :global(blockquote p) {
    font-style: italic;
    font-size: 19px;
    margin-bottom: 0.5rem;
  }

  .article-body :global(figure) {
    margin: 2rem 0;
    text-align: center;
  }

  .article-body :global(figure img) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .article-body :global(figcaption) {
    margin-top: 0.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-caption);
  }

  /* --- Recommandations --- */
  .article-related {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    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);
  }

  /* --- Mobile --- */
  @media (max-width: 700px) {
    .article {
      padding: 3rem 1.25rem 4rem;
    }

    .article-title {
      font-size: var(--font-size-title-section-mobile);
    }

    .article-intro {
      font-size: var(--font-size-paragraph-mobile);
    }

    .article-related-grid {
      grid-template-columns: 1fr;
    }
  }

  /* --- Tablet --- */
  @media (min-width: 701px) and (max-width: 912px) {
    .article-title {
      font-size: var(--font-size-title-main-tablet);
    }

    .article-related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>