add white-paper block type for articles
- Kirby block blueprint with page reference + editable bg/text colors - PHP snippet renders the card with accessible markup (article, h3, button) - WhitePaperDialog.svelte: native dialog with download form (a11y: labels, fieldset, autocomplete, focus management) - Article.svelte: click detection on .wp-block__btn + dialog mount refs #49 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d218bc47d7
commit
8481dc5f90
5 changed files with 615 additions and 0 deletions
20
site/blueprints/blocks/white-paper.yml
Normal file
20
site/blueprints/blocks/white-paper.yml
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
name: Livre blanc
|
||||
icon: download
|
||||
|
||||
fields:
|
||||
whitePaper:
|
||||
label: Livre blanc
|
||||
type: pages
|
||||
max: 1
|
||||
query: site.find('livres-blancs').children
|
||||
image:
|
||||
cover: true
|
||||
ratio: 4/3
|
||||
bgColor:
|
||||
label: Couleur de fond
|
||||
type: color
|
||||
default: "#ffffff"
|
||||
textColor:
|
||||
label: Couleur de texte
|
||||
type: color
|
||||
default: "#000000"
|
||||
|
|
@ -72,6 +72,8 @@ tabs:
|
|||
extends: blocks/video
|
||||
jeu:
|
||||
extends: blocks/jeu
|
||||
white-paper:
|
||||
extends: blocks/white-paper
|
||||
|
||||
# Sidebar
|
||||
sidebar:
|
||||
|
|
|
|||
26
site/snippets/blocks/white-paper.php
Normal file
26
site/snippets/blocks/white-paper.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
/** @var \Kirby\Cms\Block $block */
|
||||
|
||||
$wp = $block->whitePaper()->toPage();
|
||||
if (!$wp) return;
|
||||
|
||||
$cover = $wp->cover()->toFile()?->url();
|
||||
$bgColor = $block->bgColor()->isNotEmpty() ? $block->bgColor()->value() : '#ffffff';
|
||||
$textColor = $block->textColor()->isNotEmpty() ? $block->textColor()->value() : '#000000';
|
||||
$style = 'background:' . htmlspecialchars($bgColor, ENT_QUOTES, 'UTF-8') . ';color:' . htmlspecialchars($textColor, ENT_QUOTES, 'UTF-8');
|
||||
?>
|
||||
<article class="wp-block" style="<?= $style ?>">
|
||||
<div class="wp-block__content">
|
||||
<p class="wp-block__label">Livre blanc</p>
|
||||
<h3 class="wp-block__title"><?= html($wp->title()) ?></h3>
|
||||
<?php if ($wp->intro()->isNotEmpty()): ?>
|
||||
<p class="wp-block__intro"><?= strip_tags($wp->intro()->value()) ?></p>
|
||||
<?php endif ?>
|
||||
<button class="button with-icon download-icon wp-block__btn" type="button" data-uri="<?= htmlspecialchars($wp->uri(), ENT_QUOTES, 'UTF-8') ?>">
|
||||
Téléchargement
|
||||
</button>
|
||||
</div>
|
||||
<?php if ($cover): ?>
|
||||
<img class="wp-block__cover" src="<?= htmlspecialchars($cover, ENT_QUOTES, 'UTF-8') ?>" alt="<?= html($wp->title()) ?>" loading="lazy" />
|
||||
<?php endif ?>
|
||||
</article>
|
||||
Loading…
Add table
Add a link
Reference in a new issue