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
61
site/blueprints/pages/white-paper.yml
Normal file
61
site/blueprints/pages/white-paper.yml
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
title: Livre blanc
|
||||||
|
icon: file
|
||||||
|
status:
|
||||||
|
draft:
|
||||||
|
label: Brouillon
|
||||||
|
text: Non visible
|
||||||
|
listed:
|
||||||
|
label: Publié
|
||||||
|
text: Visible publiquement
|
||||||
|
tabs:
|
||||||
|
content:
|
||||||
|
label: Contenu
|
||||||
|
icon: text
|
||||||
|
columns:
|
||||||
|
main:
|
||||||
|
width: 2/3
|
||||||
|
sections:
|
||||||
|
header:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
intro:
|
||||||
|
label: Description courte
|
||||||
|
type: writer
|
||||||
|
nodes: false
|
||||||
|
marks:
|
||||||
|
- bold
|
||||||
|
- italic
|
||||||
|
- link
|
||||||
|
maxlength: 200
|
||||||
|
sidebar:
|
||||||
|
width: 1/3
|
||||||
|
sections:
|
||||||
|
meta:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
published:
|
||||||
|
label: Date de publication
|
||||||
|
type: date
|
||||||
|
display: DD/MM/YYYY
|
||||||
|
required: true
|
||||||
|
default: today
|
||||||
|
translate: false
|
||||||
|
cover:
|
||||||
|
label: Image de couverture
|
||||||
|
type: files
|
||||||
|
layout: cards
|
||||||
|
max: 1
|
||||||
|
accept: image/*
|
||||||
|
translate: false
|
||||||
|
image:
|
||||||
|
cover: true
|
||||||
|
ratio: 3/4
|
||||||
|
uploads:
|
||||||
|
template: image
|
||||||
|
downloadFile:
|
||||||
|
label: Fichier PDF
|
||||||
|
type: files
|
||||||
|
max: 1
|
||||||
|
accept: application/pdf
|
||||||
|
translate: false
|
||||||
|
help: Fichier téléchargé après soumission du formulaire
|
||||||
43
site/blueprints/pages/white-papers.yml
Normal file
43
site/blueprints/pages/white-papers.yml
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
title: Livres blancs
|
||||||
|
icon: book
|
||||||
|
status:
|
||||||
|
draft:
|
||||||
|
label: Brouillon
|
||||||
|
text: La page est accessible uniquement pour les éditeurs connectés
|
||||||
|
listed:
|
||||||
|
label: Public
|
||||||
|
text: La page est accessible par tout le monde
|
||||||
|
tabs:
|
||||||
|
content:
|
||||||
|
label: Contenu
|
||||||
|
icon: text
|
||||||
|
sections:
|
||||||
|
content:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
intro:
|
||||||
|
type: writer
|
||||||
|
marks:
|
||||||
|
- bold
|
||||||
|
- italic
|
||||||
|
- green
|
||||||
|
- pixel
|
||||||
|
- underline
|
||||||
|
- strike
|
||||||
|
- clear
|
||||||
|
- link
|
||||||
|
nodes:
|
||||||
|
- heading
|
||||||
|
headings:
|
||||||
|
- 1
|
||||||
|
help: Section de texte centrée (optionnelle).
|
||||||
|
items:
|
||||||
|
label: Livres blancs
|
||||||
|
type: pages
|
||||||
|
layout: cards
|
||||||
|
sortBy: published desc
|
||||||
|
template: white-paper
|
||||||
|
image:
|
||||||
|
ratio: 3/4
|
||||||
|
cover: true
|
||||||
|
info: "{{ page.published.toDate('d/m/Y') }}"
|
||||||
|
|
@ -11,4 +11,27 @@ return [
|
||||||
],
|
],
|
||||||
|
|
||||||
'thumbs' => require __DIR__ . '/thumbs.php',
|
'thumbs' => require __DIR__ . '/thumbs.php',
|
||||||
|
|
||||||
|
'routes' => [
|
||||||
|
[
|
||||||
|
'pattern' => ['(:any)/(:any)/download', 'en/(:any)/(:any)/download'],
|
||||||
|
'method' => 'POST',
|
||||||
|
'action' => function (string $parent, string $slug) {
|
||||||
|
$page = kirby()->page($parent . '/' . $slug);
|
||||||
|
if (!$page || $page->intendedTemplate()->name() !== 'white-paper') {
|
||||||
|
http_response_code(404);
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
echo json_encode(['error' => 'Not found']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
// TODO: store/email form data ($kirby->request()->body())
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true,
|
||||||
|
'fileUrl' => $page->downloadFile()->toFile()?->url(),
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,8 @@ return [
|
||||||
'portfolio' => menuItem('portfolio', 'Portfolio','images', 'pages/portfolio'),
|
'portfolio' => menuItem('portfolio', 'Portfolio','images', 'pages/portfolio'),
|
||||||
'jouer' => menuItem('jouer', 'Jouer', 'play', 'pages/jouer'),
|
'jouer' => menuItem('jouer', 'Jouer', 'play', 'pages/jouer'),
|
||||||
'a-propos' => menuItem('a-propos', 'À propos', 'users', 'pages/a-propos'),
|
'a-propos' => menuItem('a-propos', 'À propos', 'users', 'pages/a-propos'),
|
||||||
'blog' => menuItem('blog', 'Blog', 'text', 'pages/blog'),
|
'blog' => menuItem('blog', 'Blog', 'text', 'pages/blog'),
|
||||||
|
'white-papers' => menuItem('livres-blancs', 'Livres blancs', 'book', 'pages/livres-blancs'),
|
||||||
'-',
|
'-',
|
||||||
'users',
|
'users',
|
||||||
'system',
|
'system',
|
||||||
|
|
|
||||||
13
site/templates/white-paper.json.php
Normal file
13
site/templates/white-paper.json.php
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$specificData = [
|
||||||
|
'published' => $page->published()->toDate('d/m/Y'),
|
||||||
|
'intro' => $page->intro()->value(),
|
||||||
|
'cover' => $page->cover()->toFile()?->url(),
|
||||||
|
'fileUrl' => $page->downloadFile()->toFile()?->url(),
|
||||||
|
];
|
||||||
|
|
||||||
|
$pageData = array_merge($genericData, $specificData);
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
echo json_encode($pageData);
|
||||||
2
site/templates/white-paper.php
Normal file
2
site/templates/white-paper.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php snippet('header') ?>
|
||||||
|
<?php snippet('footer') ?>
|
||||||
26
site/templates/white-papers.json.php
Normal file
26
site/templates/white-papers.json.php
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$items = $page->children()->listed()->sortBy('published', 'desc');
|
||||||
|
|
||||||
|
$mapItem = function ($item) {
|
||||||
|
return [
|
||||||
|
'title' => $item->title()->value(),
|
||||||
|
'slug' => $item->slug(),
|
||||||
|
'published' => $item->published()->toDate('d/m/Y'),
|
||||||
|
'intro' => $item->intro()->value(),
|
||||||
|
'cover' => $item->cover()->toFile()?->url(),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
$singleSlug = $items->count() === 1 ? $items->first()->slug() : null;
|
||||||
|
|
||||||
|
$specificData = [
|
||||||
|
'intro' => $page->intro()->value(),
|
||||||
|
'items' => $items->map($mapItem)->values(),
|
||||||
|
'singleSlug' => $singleSlug,
|
||||||
|
];
|
||||||
|
|
||||||
|
$pageData = array_merge($genericData, $specificData);
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
echo json_encode($pageData);
|
||||||
2
site/templates/white-papers.php
Normal file
2
site/templates/white-papers.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php snippet('header') ?>
|
||||||
|
<?php snippet('footer') ?>
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
import Game from '@views/Game.svelte'
|
import Game from '@views/Game.svelte'
|
||||||
import Blog from '@views/Blog.svelte'
|
import Blog from '@views/Blog.svelte'
|
||||||
import Article from '@views/Article.svelte'
|
import Article from '@views/Article.svelte'
|
||||||
|
import WhitePapers from '@views/WhitePapers.svelte'
|
||||||
import Default from '@views/Default.svelte'
|
import Default from '@views/Default.svelte'
|
||||||
|
|
||||||
const templates = {
|
const templates = {
|
||||||
|
|
@ -28,6 +29,7 @@
|
||||||
game: Game,
|
game: Game,
|
||||||
blog: Blog,
|
blog: Blog,
|
||||||
article: Article,
|
article: Article,
|
||||||
|
'white-papers': WhitePapers,
|
||||||
default: Default
|
default: Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -124,7 +124,7 @@
|
||||||
margin-left: -16.6vw;
|
margin-left: -16.6vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.blog .page-scrollable-footer) {
|
:global(.collection .page-scrollable-footer) {
|
||||||
margin-left: -12.4vw;
|
margin-left: -12.4vw;
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,19 @@ const dict = {
|
||||||
privacy: { fr: "Confidentialité", en: "Privacy" },
|
privacy: { fr: "Confidentialité", en: "Privacy" },
|
||||||
// About
|
// About
|
||||||
our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
|
our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
|
||||||
|
// White Papers
|
||||||
|
white_paper_label: { fr: "LIVRE BLANC", en: "WHITE PAPER" },
|
||||||
|
read_wp: { fr: "Télécharger", en: "Download" },
|
||||||
|
wp_form_intro: { fr: "Renseignez vos informations pour télécharger notre livre blanc.", en: "Fill in your information to download our white paper." },
|
||||||
|
wp_firstname: { fr: "Prénom*", en: "First name*" },
|
||||||
|
wp_lastname: { fr: "Nom*", en: "Last name*" },
|
||||||
|
wp_company: { fr: "Société*", en: "Company*" },
|
||||||
|
wp_role: { fr: "Fonction*", en: "Role*" },
|
||||||
|
wp_email: { fr: "E-mail*", en: "E-mail*" },
|
||||||
|
wp_consent: { fr: "En cochant cette case, j'accepte d'être recontacté par la société World Game. Mes données ne seront ni vendues, ni partagées.", en: "By checking this box, I agree to be contacted by World Game. My data will not be sold or shared." },
|
||||||
|
wp_download: { fr: "TÉLÉCHARGEMENT", en: "DOWNLOAD" },
|
||||||
|
wp_success: { fr: "Votre demande a été enregistrée. Le téléchargement devrait démarrer.", en: "Your request has been registered. The download should start." },
|
||||||
|
wp_error: { fr: "Une erreur est survenue, veuillez réessayer.", en: "An error occurred, please try again." },
|
||||||
// Menu
|
// Menu
|
||||||
menu: { fr: "MENU", en: "MENU" },
|
menu: { fr: "MENU", en: "MENU" },
|
||||||
connect: { fr: "CONNECT", en: "CONNECT" },
|
connect: { fr: "CONNECT", en: "CONNECT" },
|
||||||
|
|
|
||||||
180
src/styles/collection.css
Normal file
180
src/styles/collection.css
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
/* Shared styles for collection pages (Blog, WhitePapers) */
|
||||||
|
|
||||||
|
/* --- Header / Intro --- */
|
||||||
|
.collection-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 6rem 0 3rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header h1 {
|
||||||
|
font-size: var(--font-size-title-main);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header p {
|
||||||
|
font-size: var(--font-size-subtitle);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header :global(h1) {
|
||||||
|
font-family: "Terminal", sans-serif;
|
||||||
|
font-size: var(--font-size-title-main);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header :global(p) {
|
||||||
|
font-size: var(--font-size-subtitle);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Card --- */
|
||||||
|
.collection-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-text {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-date {
|
||||||
|
color: #d9d9d9;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-title {
|
||||||
|
font-family: "Danzza", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
max-width: 80%;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-title a {
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-title a:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-description {
|
||||||
|
color: #d9d9d9;
|
||||||
|
font-family: "Danzza", sans-serif;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-readmore {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-family: "Danzza", sans-serif;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-readmore .arrow {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Image --- */
|
||||||
|
.collection-card-image img {
|
||||||
|
width: 300px;
|
||||||
|
height: 169px;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-image img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-image--featured img {
|
||||||
|
width: auto;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Divider --- */
|
||||||
|
.collection-divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Featured --- */
|
||||||
|
.collection-card--featured .collection-card-title {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Loading --- */
|
||||||
|
.collection-loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Mobile --- */
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.collection-header {
|
||||||
|
padding: 4rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header :global(h1) {
|
||||||
|
font-size: var(--font-size-title-main-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-header :global(p) {
|
||||||
|
font-size: var(--font-size-subtitle-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-image img,
|
||||||
|
.collection-card-image--featured img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card--featured .collection-card-title {
|
||||||
|
font-size: var(--font-size-title-section-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-title {
|
||||||
|
font-size: var(--font-size-title-section-mobile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Tablet --- */
|
||||||
|
@media (min-width: 701px) and (max-width: 912px) {
|
||||||
|
.collection-header :global(h1) {
|
||||||
|
font-size: var(--font-size-title-main-tablet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-card-image img,
|
||||||
|
.collection-card-image--featured img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -65,3 +65,7 @@
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pixel {
|
||||||
|
font-family: "Terminal", sans-serif;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
@import './reset.css';
|
@import './reset.css';
|
||||||
@import './fonts.css';
|
@import './fonts.css';
|
||||||
@import './layout.css';
|
@import './layout.css';
|
||||||
|
@import './collection.css';
|
||||||
@import './buttons.css';
|
@import './buttons.css';
|
||||||
@import './cursor.css';
|
@import './cursor.css';
|
||||||
@import './utils.css';
|
@import './utils.css';
|
||||||
|
|
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
<section
|
<section
|
||||||
class="blog page-scrollable"
|
class="collection blog page-scrollable"
|
||||||
class:golden-grid={!!articleData}
|
class:golden-grid={!!articleData}
|
||||||
bind:this={sectionEl}
|
bind:this={sectionEl}
|
||||||
onclick={handleClick}
|
onclick={handleClick}
|
||||||
|
|
@ -119,49 +119,49 @@
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
|
|
||||||
{#if data?.intro}
|
{#if data?.intro}
|
||||||
<header class="blog-header">
|
<header class="collection-header">
|
||||||
{@html data.intro}
|
{@html data.intro}
|
||||||
</header>
|
</header>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if featured}
|
{#if featured}
|
||||||
<article class="blog-card blog-card--featured">
|
<article class="collection-card collection-card--featured">
|
||||||
<div class="blog-card-text">
|
<div class="collection-card-text">
|
||||||
<time class="blog-card-date">{featured.published}</time>
|
<time class="collection-card-date">{featured.published}</time>
|
||||||
<h2 class="blog-card-title">
|
<h2 class="collection-card-title">
|
||||||
<a href="/blog/{featured.slug}">{featured.title}</a>
|
<a href="/blog/{featured.slug}">{featured.title}</a>
|
||||||
</h2>
|
</h2>
|
||||||
{#if featured.intro}
|
{#if featured.intro}
|
||||||
<p class="blog-card-description">{featured.intro}</p>
|
<p class="collection-card-description">{featured.intro}</p>
|
||||||
{/if}
|
{/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>
|
{t('read_article')} <span class="arrow">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{#if featured.cover}
|
{#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}">
|
<a href="/blog/{featured.slug}">
|
||||||
<img src={featured.cover} alt={featured.title} />
|
<img src={featured.cover} alt={featured.title} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
<hr class="blog-divider" />
|
<hr class="collection-divider" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#each articles as article, i}
|
{#each articles as article, i}
|
||||||
<article class="blog-card">
|
<article class="collection-card">
|
||||||
<div class="blog-card-text">
|
<div class="collection-card-text">
|
||||||
<time class="blog-card-date">{article.date}</time>
|
<time class="collection-card-date">{article.date}</time>
|
||||||
<h2 class="blog-card-title">
|
<h2 class="collection-card-title">
|
||||||
<a href="/blog/{article.slug}">{article.title}</a>
|
<a href="/blog/{article.slug}">{article.title}</a>
|
||||||
</h2>
|
</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>
|
{t('read_article')} <span class="arrow">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{#if article.cover}
|
{#if article.cover}
|
||||||
<div class="blog-card-image">
|
<div class="collection-card-image">
|
||||||
<a href="/blog/{article.slug}">
|
<a href="/blog/{article.slug}">
|
||||||
<img src={article.cover} alt={article.title} />
|
<img src={article.cover} alt={article.title} />
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -169,12 +169,12 @@
|
||||||
{/if}
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
{#if i < articles.length - 1}
|
{#if i < articles.length - 1}
|
||||||
<hr class="blog-divider" />
|
<hr class="collection-divider" />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
{#if articleLoading}
|
{#if articleLoading}
|
||||||
<p class="blog-loading">{t('loading')}</p>
|
<p class="collection-loading">{t('loading')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
@ -189,178 +189,18 @@
|
||||||
padding: 0 50px;
|
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 {
|
.page-container {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
padding: 0 10%;
|
padding: 0 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Card (article item) --- */
|
.collection-card-readmore:hover {
|
||||||
.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 {
|
|
||||||
gap: 1rem;
|
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) {
|
@media (max-width: 700px) {
|
||||||
.blog-header {
|
.blog {
|
||||||
padding: 4rem 0 2rem;
|
padding: 0 1.25rem;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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