Feat: Livres blancs — nouveau template collection + livre blanc individuel
- Blueprints white-papers / white-paper (intro, cover, PDF, date) - Templates PHP + JSON API (liste avec singleSlug, détail avec fileUrl) - Route POST (:any)/(:any)/download pour le téléchargement gated - Panel : entrée white-papers ajoutée au menu après blog - collection.css : styles partagés extraits de Blog (collection-*) - Blog.svelte : classes renommées blog-* → collection-* - WhitePapers.svelte : vue liste, URLs dynamiques via data.uri - WhitePaper.svelte : vue détail deux colonnes + formulaire de téléchargement - i18n : clés white paper (label, form, consentement, statuts) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
42ee58c18d
commit
d4f05d6157
17 changed files with 870 additions and 183 deletions
|
|
@ -106,7 +106,7 @@
|
|||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<section
|
||||
class="blog page-scrollable"
|
||||
class="collection blog page-scrollable"
|
||||
class:golden-grid={!!articleData}
|
||||
bind:this={sectionEl}
|
||||
onclick={handleClick}
|
||||
|
|
@ -119,49 +119,49 @@
|
|||
<div class="page-container">
|
||||
|
||||
{#if data?.intro}
|
||||
<header class="blog-header">
|
||||
<header class="collection-header">
|
||||
{@html data.intro}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#if featured}
|
||||
<article class="blog-card blog-card--featured">
|
||||
<div class="blog-card-text">
|
||||
<time class="blog-card-date">{featured.published}</time>
|
||||
<h2 class="blog-card-title">
|
||||
<article class="collection-card collection-card--featured">
|
||||
<div class="collection-card-text">
|
||||
<time class="collection-card-date">{featured.published}</time>
|
||||
<h2 class="collection-card-title">
|
||||
<a href="/blog/{featured.slug}">{featured.title}</a>
|
||||
</h2>
|
||||
{#if featured.intro}
|
||||
<p class="blog-card-description">{featured.intro}</p>
|
||||
<p class="collection-card-description">{featured.intro}</p>
|
||||
{/if}
|
||||
<a href="/blog/{featured.slug}" class="blog-card-readmore">
|
||||
<a href="/blog/{featured.slug}" class="collection-card-readmore">
|
||||
{t('read_article')} <span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if featured.cover}
|
||||
<div class="blog-card-image blog-card-image--featured">
|
||||
<div class="collection-card-image collection-card-image--featured">
|
||||
<a href="/blog/{featured.slug}">
|
||||
<img src={featured.cover} alt={featured.title} />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
<hr class="blog-divider" />
|
||||
<hr class="collection-divider" />
|
||||
{/if}
|
||||
|
||||
{#each articles as article, i}
|
||||
<article class="blog-card">
|
||||
<div class="blog-card-text">
|
||||
<time class="blog-card-date">{article.date}</time>
|
||||
<h2 class="blog-card-title">
|
||||
<article class="collection-card">
|
||||
<div class="collection-card-text">
|
||||
<time class="collection-card-date">{article.date}</time>
|
||||
<h2 class="collection-card-title">
|
||||
<a href="/blog/{article.slug}">{article.title}</a>
|
||||
</h2>
|
||||
<a href="/blog/{article.slug}" class="blog-card-readmore">
|
||||
<a href="/blog/{article.slug}" class="collection-card-readmore">
|
||||
{t('read_article')} <span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if article.cover}
|
||||
<div class="blog-card-image">
|
||||
<div class="collection-card-image">
|
||||
<a href="/blog/{article.slug}">
|
||||
<img src={article.cover} alt={article.title} />
|
||||
</a>
|
||||
|
|
@ -169,12 +169,12 @@
|
|||
{/if}
|
||||
</article>
|
||||
{#if i < articles.length - 1}
|
||||
<hr class="blog-divider" />
|
||||
<hr class="collection-divider" />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if articleLoading}
|
||||
<p class="blog-loading">{t('loading')}</p>
|
||||
<p class="collection-loading">{t('loading')}</p>
|
||||
{/if}
|
||||
|
||||
<Footer />
|
||||
|
|
@ -189,178 +189,18 @@
|
|||
padding: 0 50px;
|
||||
}
|
||||
|
||||
/* --- Header / Intro --- */
|
||||
.blog-header {
|
||||
text-align: center;
|
||||
padding: 6rem 0 3rem;
|
||||
}
|
||||
|
||||
.blog-header :global(h1) {
|
||||
font-family: "Terminal", sans-serif;
|
||||
font-size: var(--font-size-title-main);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-header :global(p) {
|
||||
font-size: var(--font-size-subtitle);
|
||||
line-height: 1.6;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: none;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
/* --- Card (article item) --- */
|
||||
.blog-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.blog-card-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.blog-card-date {
|
||||
color: #d9d9d9;
|
||||
font-size: var(--font-size-paragraph);
|
||||
}
|
||||
|
||||
.blog-card-title {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: 40px;
|
||||
max-width: 80%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.blog-card-title a {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.blog-card-title a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.blog-card-description {
|
||||
color: #d9d9d9;
|
||||
font-family: "Danzza",sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.blog-card-readmore {
|
||||
color: var(--color-primary);
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-card-readmore .arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.blog-card-readmore:hover {
|
||||
.collection-card-readmore:hover {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* --- Image --- */
|
||||
.blog-card-image img {
|
||||
width: 300px;
|
||||
height: 169px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.blog-card-image img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.blog-card-image--featured img {
|
||||
width: auto;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* --- Divider --- */
|
||||
.blog-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Featured --- */
|
||||
.blog-card--featured .blog-card-title {
|
||||
font-size: 36px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* --- Loading --- */
|
||||
.blog-loading {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 700px) {
|
||||
.blog-header {
|
||||
padding: 4rem 0 2rem;
|
||||
}
|
||||
|
||||
.blog-header :global(h1) {
|
||||
font-size: var(--font-size-title-main-mobile);
|
||||
}
|
||||
|
||||
.blog-header :global(p) {
|
||||
font-size: var(--font-size-subtitle-mobile);
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blog-card-image img,
|
||||
.blog-card-image--featured img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.blog-card--featured .blog-card-title {
|
||||
font-size: var(--font-size-title-section-mobile);
|
||||
}
|
||||
|
||||
.blog-card-title {
|
||||
font-size: var(--font-size-title-section-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Tablet --- */
|
||||
@media (min-width: 701px) and (max-width: 912px) {
|
||||
.blog-header :global(h1) {
|
||||
font-size: var(--font-size-title-main-tablet);
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blog-card-image img,
|
||||
.blog-card-image--featured img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
.blog {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
318
src/views/WhitePaper.svelte
Normal file
318
src/views/WhitePaper.svelte
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
<script>
|
||||
import { locale } from '@state/locale.svelte'
|
||||
import { t } from '@i18n'
|
||||
|
||||
let { data, onBack } = $props()
|
||||
|
||||
let firstName = $state('')
|
||||
let lastName = $state('')
|
||||
let company = $state('')
|
||||
let role = $state('')
|
||||
let email = $state('')
|
||||
let consent = $state(false)
|
||||
let submitting = $state(false)
|
||||
let status = $state(null) // null | 'success' | 'error'
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
if (!consent) return
|
||||
submitting = true
|
||||
status = null
|
||||
try {
|
||||
const prefix = locale.current === 'en' ? '/en' : ''
|
||||
const res = await fetch(`${prefix}/${data.uri}/download`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ firstName, lastName, company, role, email })
|
||||
})
|
||||
const result = await res.json()
|
||||
if (result.fileUrl) {
|
||||
window.open(result.fileUrl, '_blank')
|
||||
status = 'success'
|
||||
} else {
|
||||
status = 'error'
|
||||
}
|
||||
} catch {
|
||||
status = 'error'
|
||||
} finally {
|
||||
submitting = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="white-paper">
|
||||
<!-- Left column -->
|
||||
<div class="wp-left">
|
||||
<div class="wp-content">
|
||||
<p class="wp-label">{t('white_paper_label')}</p>
|
||||
<h1 class="wp-title">{data.title}</h1>
|
||||
{#if data.intro}
|
||||
<p class="wp-description">{data.intro}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if data.cover}
|
||||
<img src={data.cover} alt={data.title} class="wp-cover" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right column: download form -->
|
||||
<div class="wp-right">
|
||||
<div class="wp-form-card">
|
||||
<p class="wp-form-intro">{t('wp_form_intro')}</p>
|
||||
<form class="wp-form" onsubmit={handleSubmit}>
|
||||
<div class="wp-form-row">
|
||||
<input class="wp-input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
|
||||
<input class="wp-input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
|
||||
</div>
|
||||
<input class="wp-input wp-input--full" type="text" placeholder={t('wp_company')} bind:value={company} required />
|
||||
<input class="wp-input wp-input--full" type="text" placeholder={t('wp_role')} bind:value={role} required />
|
||||
<input class="wp-input wp-input--full" type="email" placeholder={t('wp_email')} bind:value={email} required />
|
||||
|
||||
<label class="wp-consent">
|
||||
<input type="checkbox" bind:checked={consent} required />
|
||||
<span>{t('wp_consent')}</span>
|
||||
</label>
|
||||
|
||||
{#if status === 'success'}
|
||||
<p class="wp-status wp-status--success">{t('wp_success')}</p>
|
||||
{:else if status === 'error'}
|
||||
<p class="wp-status wp-status--error">{t('wp_error')}</p>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="wp-submit button" disabled={submitting || !consent}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
|
||||
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
|
||||
</svg>
|
||||
{t('wp_download')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.white-paper {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
overflow: hidden;
|
||||
padding-top: 8vh;
|
||||
}
|
||||
|
||||
/* --- Left --- */
|
||||
.wp-left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 4rem 3rem 0 8vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wp-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wp-label {
|
||||
font-family: "Terminal", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.wp-title {
|
||||
font-family: "Terminal", sans-serif;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.wp-description {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
line-height: 1.6;
|
||||
opacity: 0.8;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.wp-cover {
|
||||
position: absolute;
|
||||
bottom: -5%;
|
||||
left: 3rem;
|
||||
width: 55%;
|
||||
max-width: 380px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Right --- */
|
||||
.wp-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 6vw 2rem 2rem;
|
||||
}
|
||||
|
||||
.wp-form-card {
|
||||
background: #0b0b18;
|
||||
border-radius: 4px;
|
||||
padding: 2.5rem;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.wp-form-intro {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.wp-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wp-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wp-input {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph);
|
||||
padding: 0.875rem 1rem;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.wp-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.wp-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.wp-consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.wp-consent input[type="checkbox"] {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 2px;
|
||||
accent-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-consent span {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.wp-submit {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.wp-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wp-status {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.wp-status--success {
|
||||
background: rgba(4, 254, 160, 0.15);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.wp-status--error {
|
||||
background: rgba(255, 107, 107, 0.15);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 700px) {
|
||||
.white-paper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
padding-top: 6vh;
|
||||
}
|
||||
|
||||
.wp-left {
|
||||
padding: 2rem 1.25rem 0;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.wp-cover {
|
||||
position: static;
|
||||
width: 60%;
|
||||
margin: 2rem auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-right {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
|
||||
.wp-form-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.wp-form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Tablet --- */
|
||||
@media (min-width: 701px) and (max-width: 912px) {
|
||||
.white-paper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wp-left {
|
||||
padding: 3rem 2rem 0;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.wp-right {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
src/views/WhitePapers.svelte
Normal file
158
src/views/WhitePapers.svelte
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { locale } from '@state/locale.svelte'
|
||||
import WhitePaper from '@views/WhitePaper.svelte'
|
||||
import { t } from '@i18n'
|
||||
import Footer from '@components/layout/Footer.svelte'
|
||||
|
||||
let { data } = $props()
|
||||
|
||||
const isActive = $derived(slides.active?.id === data?.uri)
|
||||
const items = $derived(data?.items ?? [])
|
||||
const pageUri = $derived(data?.uri ?? 'white-papers') // ex: "livres-blancs"
|
||||
|
||||
let itemData = $state(null)
|
||||
let itemLoading = $state(false)
|
||||
let sectionEl = $state(null)
|
||||
|
||||
function getSlugFromUrl() {
|
||||
const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
|
||||
return parts.length >= 2 && parts[0] === pageUri ? parts[1] : null
|
||||
}
|
||||
|
||||
async function openItem(slug) {
|
||||
itemLoading = true
|
||||
try {
|
||||
const prefix = locale.current === 'en' ? '/en' : ''
|
||||
const res = await fetch(`${prefix}/${pageUri}/${slug}.json`)
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
itemData = await res.json()
|
||||
sectionEl?.scrollTo(0, 0)
|
||||
} catch (e) {
|
||||
console.error(`[${pageUri}] Failed to load:`, e)
|
||||
itemData = null
|
||||
} finally {
|
||||
itemLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
function backToList() {
|
||||
itemData = null
|
||||
const prefix = locale.current === 'en' ? '/en' : ''
|
||||
history.pushState({}, '', `${prefix}/${pageUri}`)
|
||||
document.title = `${data?.title ?? pageUri} — World Game`
|
||||
sectionEl?.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
function handleClick(e) {
|
||||
const link = e.target.closest('a[href]')
|
||||
if (!link) return
|
||||
const url = new URL(link.href, window.location.origin)
|
||||
if (url.origin !== window.location.origin) return
|
||||
const match = url.pathname.match(new RegExp(`^(?:/en)?/${pageUri}/([^/]+)$`))
|
||||
if (match) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
const slug = match[1]
|
||||
const prefix = locale.current === 'en' ? '/en' : ''
|
||||
history.pushState({}, '', `${prefix}/${pageUri}/${slug}`)
|
||||
openItem(slug)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePopState() {
|
||||
if (!isActive) return
|
||||
const slug = getSlugFromUrl()
|
||||
if (slug && (!itemData || itemData.uri !== `${pageUri}/${slug}`)) {
|
||||
openItem(slug)
|
||||
} else if (!slug && itemData) {
|
||||
itemData = null
|
||||
sectionEl?.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const slug = getSlugFromUrl() ?? (data?.singleSlug ?? null)
|
||||
if (slug) openItem(slug)
|
||||
|
||||
window.addEventListener('popstate', handlePopState)
|
||||
return () => window.removeEventListener('popstate', handlePopState)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
if (!isActive && itemData) itemData = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<section
|
||||
class="collection white-papers page-scrollable"
|
||||
bind:this={sectionEl}
|
||||
onclick={handleClick}
|
||||
>
|
||||
{#if itemData}
|
||||
<WhitePaper data={itemData} onBack={backToList} />
|
||||
{:else}
|
||||
<div class="page-container">
|
||||
|
||||
{#if data?.intro}
|
||||
<header class="collection-header">
|
||||
{@html data.intro}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#each items as item, i}
|
||||
<article class="collection-card">
|
||||
<div class="collection-card-text">
|
||||
<time class="collection-card-date">{item.published}</time>
|
||||
<h2 class="collection-card-title">
|
||||
<a href="/{pageUri}/{item.slug}">{item.title}</a>
|
||||
</h2>
|
||||
{#if item.intro}
|
||||
<p class="collection-card-description">{item.intro}</p>
|
||||
{/if}
|
||||
<a href="/{pageUri}/{item.slug}" class="collection-card-readmore">
|
||||
{t('read_wp')} <span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
{#if item.cover}
|
||||
<div class="collection-card-image">
|
||||
<a href="/{pageUri}/{item.slug}">
|
||||
<img src={item.cover} alt={item.title} />
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{#if i < items.length - 1}
|
||||
<hr class="collection-divider" />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if itemLoading}
|
||||
<p class="collection-loading">{t('loading')}</p>
|
||||
{/if}
|
||||
|
||||
<Footer class="page-scrollable-footer" />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.white-papers {
|
||||
color: var(--color-text);
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: none;
|
||||
padding: 0 10%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.white-papers {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue