article : extract ShareButtons and ArticleRelated components
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
65ce77b5b1
commit
8387843da0
3 changed files with 127 additions and 125 deletions
72
src/components/blocks/ArticleRelated.svelte
Normal file
72
src/components/blocks/ArticleRelated.svelte
Normal file
|
|
@ -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>
|
||||
49
src/components/blocks/ShareButtons.svelte
Normal file
49
src/components/blocks/ShareButtons.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue