feat: add Chronik block support and implement timeline display

Added a new Chronik block feature with PHP templates to render the timeline design, updated blueprint files to define Chronik-specific fields, and migrated related content into structured formats. Introduced a visually structured timeline with left/right alignment support for chronological events.
This commit is contained in:
2025-06-29 17:52:25 +02:00
parent b29a21780f
commit 932c6cc90b
4 changed files with 213 additions and 6 deletions
+52
View File
@@ -0,0 +1,52 @@
<div class="flex flex-row w-full">
<!-- left col -->
<div class="w-2/5 px-2 py-10">
<?php if ($block->kind() == "left"): ?>
<div class="text-gray-600">
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-right">
<?php if ($block->image()->isNotEmpty()): ?>
<img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
<?php endif ?>
<div class="text-gray-600 py-4">
<div class="text-3xl font-bold"><?= $block->year() ?></div>
</div>
<div class="text-sf_grau-700 font-bold py-2">
<p><?= $block->summary() ?></p>
</div>
<div class="text-gray-600">
<p><?= $block->description() ?></p>
</div>
</div>
</div>
<?php endif ?>
</div>
<!--line column-->
<div class="w-1/5 flex justify-center">
<div class="relative flex h-full w-1 bg-sf_gelb-500 items-center justify-center">
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-4 border-sf_gelb-500 leading-none text-center z-10 bg-white font-thin">
<div><?= $block->year() ?></div>
</div>
</div>
</div>
<!--right column-->
<div class="w-2/5 px-2 py-10 ">
<?php if ($block->kind() == "right"): ?>
<div class="text-gray-600">
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-left">
<?php if ($block->image()->isNotEmpty()): ?>
<img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
<?php endif ?>
<div class="text-gray-600 py-4">
<div class="text-3xl font-bold"><?= $block->year() ?></div>
</div>
<div class="text-sf_grau-700 font-bold py-2">
<p><?= $block->summary() ?></p>
</div>
<div class="text-gray-600">
<p><?= $block->description() ?></p>
</div>
</div>
</div>
<?php endif ?>
</div>
</div>