feat: impact-media page type with OG scraping and cache

- Add impact-media blueprint (entries field + linked investigation)
- Add minimal impact-media template
- Refactor card-open-graph snippet: accepts $url param, Kirby cache (6h TTL), decode HTML entities, empty alt on images
- Update impacts.yml to allow impact-media pages
- Render impact-media in investigation aside with dynamic count + details/summary
- Add OG cache config in config.php
- CSS formatting fixes (body, card-block-small, category)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/base/_body.scss

@@ -12,32 +12,30 @@
 a {
   color: currentColor;
 }
-button{
+button {
   background: none;
   outline: none;
   border: none;
   color: var(--color-txt);
 }
-iframe{
+iframe {
   border: none;
 }
 
-body{
+body {
   font-family: var(--font);
   line-height: var(--leading-normal);
   font-size: var(--fs-normal);
 
   color: var(--color-txt);
   background-color: var(--color-bg);
-
-   
 }
 
-img{
+img {
   max-width: 100%;
 }
 
-.link-block{
+.link-block {
   position: absolute;
   top: 0;
   left: 0;
@@ -50,20 +48,22 @@ img{
   // }
 }
 
-.swiper-button-next, .swiper-button-prev,
+.swiper-button-next,
-body, #site-header, #site-footer{
+.swiper-button-prev,
+body,
+#site-header,
+#site-footer {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-@mixin grid-content(){
+@mixin grid-content() {
   display: grid;
   grid-gap: var(--padding-inner);
   grid-template-columns: 2fr 3fr;
   position: relative;
 }
 
-
+@mixin hide-scroll() {
-@mixin hide-scroll(){
   scrollbar-width: none;
   -ms-overflow-style: none;
   &::-webkit-scrollbar {
@@ -78,14 +78,14 @@ body, #site-header, #site-footer{
   overflow: hidden;
 }
 
-@mixin hover-card-line(){
+@mixin hover-card-line() {
   border-bottom: var(--border-light);
-    &:first-of-type{
+  &:first-of-type {
     border-top: var(--border-light);
   }
   position: relative;
-    &::before{
+  &::before {
-        content: '';
+    content: "";
     width: 100%;
     border-top: 1px solid transparent;
     position: absolute;
@@ -93,25 +93,25 @@ body, #site-header, #site-footer{
     left: 0;
   }
 
-    &:hover{
+  &:not([data-impact-type="media"]) {
+    &:hover {
       background-color: var(--grey-950);
       border-color: var(--color-txt);
-        &::before{
+      &::before {
         border-color: var(--color-txt);
       }
-      
+    }
   }
 }
 
-
+@mixin pin() {
-@mixin pin(){
+  .pin {
-    .pin{
     z-index: 90;
     width: 18px;
     height: 18px;
     transform: rotate(45deg);
     transform-origin: center;
-        svg{
+    svg {
       width: 100%;
       height: 100%;
       fill: var(--color-txt);
@@ -119,26 +119,19 @@ body, #site-header, #site-footer{
   }
 }
 
-
+@mixin icon($size) {
-@mixin icon($size){
+  .icon {
-
-    .icon{
     display: flex;
     width: $size;
     height: $size;
-        svg{
+    svg {
       width: $size;
       height: $size;
     }
   }
- 
-
 }
 
-
 body.menu-open,
-body.is-hidden{
+body.is-hidden {
   overflow-y: hidden;
 }
-
-

assets/css/components/_card-block-small.scss

@@ -1,8 +1,7 @@
 .card--block-small {
-
   border-bottom: var(--border-light);
   padding: var(--padding-inner) 0;
-    padding-bottom: calc(var(--spacing)*0.75);
+  padding-bottom: calc(var(--spacing) * 0.75);
 
   &:first-of-type {
     border-top: var(--border-light);
@@ -11,7 +10,6 @@
   @include grid-content();
   @include hover-card-line();
 
-  
   .group-top {
     position: relative;
     // top: -5px;
@@ -20,7 +18,7 @@
   @include btn--go-to();
 
   .btn--go-to {
-        top: calc(var(--padding-inner)*1);
+    top: calc(var(--padding-inner) * 1);
     bottom: auto;
   }
 
@@ -43,48 +41,39 @@
 
   @media #{$small} {
     display: block;
-        padding-bottom: calc(var(--spacing)*0.5);
+    padding-bottom: calc(var(--spacing) * 0.5);
 
-         .btn--go-to{
+    .btn--go-to {
       top: auto;
-            bottom: calc(var(--padding-inner)*1);
+      bottom: calc(var(--padding-inner) * 1);
     }
 
     .group-top {
       top: 0px;
-            margin-bottom: calc(var(--spacing)*0.5);
+      margin-bottom: calc(var(--spacing) * 0.5);
     }
 
-        .title{
+    .title {
-            margin-bottom: calc(var(--spacing)*0.75);
+      margin-bottom: calc(var(--spacing) * 0.75);
       margin-right: 1ch;
     }
 
-        .date{
+    .date {
-            margin-top: 0px;
+      margin-top: 0px;
     }
-
   }
-
-
 }
 
-
-
-
-
-
-
-
-
-
 .card--block-small {
-
   .card--open-graph {
     grid-column: 2;
     z-index: 10;
   }
 
+  .card--open-graph:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+
   .open-graph__details {
     grid-column: 2;
 
@@ -112,7 +101,6 @@
         width: 100%;
         fill: var(--color-txt);
       }
-
     }
 
     summary:hover {

assets/css/components/_category.scss

@@ -1,7 +1,8 @@
-.type{
+.type {
-    height: calc(var(--h-block)*0.75);
+  height: calc(var(--h-block) * 0.75);
   // border-radius: calc(var(--h-block)*0.75/2);
   border-radius: var(--radius-small);
+  width: max-content;
 
   display: inline-flex;
   align-items: center;
@@ -18,13 +19,10 @@
 
   overflow: hidden;
   white-space: nowrap;
-
 }
 
-
+.category {
-
+  height: calc(var(--h-block) * 0.75);
-.category{
-        height: calc(var(--h-block)*0.75);
   border-radius: var(--radius-small);
 
   display: inline-flex;
@@ -45,9 +43,8 @@
   white-space: nowrap;
 }
 
-.page__category{
+.page__category {
-    
+  height: calc(var(--h-block) * 1);
-    height: calc(var(--h-block)*1);
   border-radius: var(--radius-small);
   border: var(--border-medium);
 
@@ -68,21 +65,17 @@
   text-transform: uppercase;
 
   @media #{$small} {
-          height: calc(var(--h-block)*0.75);
+    height: calc(var(--h-block) * 0.75);
     font-size: var(--fs-xsmall);
     padding: 0 1ch;
     padding-top: 3px;
-
   }
-
 }
 
-
+.page__type {
-.page__type{
+  height: calc(var(--h-block) * 1);
-    
-    height: calc(var(--h-block)*1);
   border-radius: var(--radius-small);
-    margin-left: calc(var(--padding-inner)*0.25);
+  margin-left: calc(var(--padding-inner) * 0.25);
 
   display: inline-flex;
   align-items: center;
@@ -101,12 +94,9 @@
   text-transform: uppercase;
 
   @media #{$small} {
-          height: calc(var(--h-block)*0.75);
+    height: calc(var(--h-block) * 0.75);
     font-size: var(--fs-xsmall);
     padding: 0 1ch;
     padding-top: 3px;
-
   }
 }
-
-

assets/css/style.css

@@ -138,8 +138,11 @@ img {
   cursor: pointer;
 }
 
-.swiper-button-next, .swiper-button-prev,
+.swiper-button-next,
-body, #site-header, #site-footer {
+.swiper-button-prev,
+body,
+#site-header,
+#site-footer {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
@@ -741,6 +744,8 @@ button:disabled {
 .type {
   height: calc(var(--h-block) * 0.75);
   border-radius: var(--radius-small);
+  width: -moz-max-content;
+  width: max-content;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1951,13 +1956,13 @@ figcaption,
   top: -1px;
   left: 0;
 }
-.card--package:hover,
+.card--package:not([data-impact-type=media]):hover,
-.card--article-small:hover {
+.card--article-small:not([data-impact-type=media]):hover {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-.card--package:hover::before,
+.card--package:not([data-impact-type=media]):hover::before,
-.card--article-small:hover::before {
+.card--article-small:not([data-impact-type=media]):hover::before {
   border-color: var(--color-txt);
 }
 @media screen and (max-width: 1080px) {
@@ -2025,11 +2030,11 @@ figcaption,
   top: -1px;
   left: 0;
 }
-.card--block:hover {
+.card--block:not([data-impact-type=media]):hover {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-.card--block:hover::before {
+.card--block:not([data-impact-type=media]):hover::before {
   border-color: var(--color-txt);
 }
 .card--block > figure {
@@ -2156,11 +2161,11 @@ figcaption,
   top: -1px;
   left: 0;
 }
-.card--block-small:hover {
+.card--block-small:not([data-impact-type=media]):hover {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-.card--block-small:hover::before {
+.card--block-small:not([data-impact-type=media]):hover::before {
   border-color: var(--color-txt);
 }
 .card--block-small .group-top {
@@ -2235,7 +2240,7 @@ figcaption,
     margin-right: 1ch;
   }
   .card--block-small .date {
-    margin-top:  0px;
+    margin-top: 0px;
   }
 }
 
@@ -2243,6 +2248,9 @@ figcaption,
   grid-column: 2;
   z-index: 10;
 }
+.card--block-small .card--open-graph:not(:last-child) {
+  margin-bottom: 1rem;
+}
 .card--block-small .open-graph__details {
   grid-column: 2;
 }

site/blueprints/pages/impact-media.yml

@@ -0,0 +1,16 @@
+title: Impact médiatique
+
+fields:
+  linkedInvestigation:
+    label: Enquête liée
+    type: pages
+    query: page('enquetes').children.listed
+    multiple: false
+    layout: list
+    text: "{{ page.title }}"
+    info: "{{ page.created }}"
+  entries:
+    label: Articles et reprises
+    type: entries
+    field:
+      type: url

site/blueprints/pages/impacts.yml

@@ -17,8 +17,9 @@ tabs:
           impactsSection:
             type: pages
             label: Liste des impacts
-            template: impact
+            templates:
-            create: impact
+              - impact
+              - impact-media
             layout: list
             text: "{{ page.title }}"
             info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"

site/config/config.php

@@ -76,6 +76,10 @@ return [
   ],
   'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
 
+  'cache' => [
+    'og' => true,
+  ],
+
   'routes' => [
     require(__DIR__ . '/routes/newsletter.php'),
   ],

site/snippets/card-open-graph.php

@@ -1,111 +1,109 @@
- <?php
+<?php
-                        // URL à scraper (remplacez par l'URL souhaitée)
+/**
-                        $url = 'https://www.lemonde.fr/societe/article/2025/07/16/au-c-ur-des-emeutes-de-nouvelle-caledonie-quand-la-mort-de-banane-abattu-par-le-gign-lance-le-siege-de-saint-louis_6621496_3224.html';
+ * Card Open Graph snippet
+ * Fetches and displays OG data from an external URL with cache.
+ *
+ * @var string $url The URL to scrape OG data from
+ */
 
-                        // Fonction pour récupérer les données Open Graph
+if (empty($url)) return;
-                        function getOpenGraphData($url) {
+
+$cache = kirby()->cache('og');
+$cacheKey = md5($url);
+$ogData = $cache->get($cacheKey);
+
+if ($ogData === null) {
     $ogData = [
         'title'       => '',
         'description' => '',
         'image'       => '',
         'site_name'   => '',
-                                'url' => $url
+        'url'         => $url,
     ];
 
-                            // Configuration du contexte pour éviter les erreurs SSL
     $context = stream_context_create([
         'http' => [
             'method'  => 'GET',
             'header'  => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
-                                    'timeout' => 10
+            'timeout' => 10,
         ],
         'ssl' => [
             'verify_peer'      => false,
-                                    'verify_peer_name' => false
+            'verify_peer_name' => false,
-                                ]
+        ],
     ]);
 
-                            // Récupérer le HTML
     $html = @file_get_contents($url, false, $context);
 
-                            if ($html === false) {
+    if ($html !== false) {
-                                return $ogData;
+        // Parse OG meta tags (both property...content and content...property orders)
-                            }
+        preg_match_all('/<meta\s+(?:property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']*)["\']|content=["\']([^"\']*?)["\']\s+property=["\']og:([^"\']+)["\'])/i', $html, $matches);
-
-                            // Parser les meta tags Open Graph
-                            preg_match_all('/<meta\s+property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']+)["\']/i', $html, $matches);
 
         if (!empty($matches[1])) {
             foreach ($matches[1] as $index => $property) {
-                                    $content = $matches[2][$index];
+                $prop = $property ?: $matches[4][$index];
-                                    switch ($property) {
+                $content = $matches[2][$index] ?: $matches[3][$index];
+                $content = html_entity_decode(trim($content), ENT_QUOTES | ENT_HTML5, 'UTF-8');
+                switch ($prop) {
                     case 'title':
-                                            $ogData['title'] = htmlspecialchars($content);
+                        $ogData['title'] = $content;
                         break;
                     case 'description':
-                                            $ogData['description'] = htmlspecialchars($content);
+                        $ogData['description'] = $content;
                         break;
                     case 'image':
                         $ogData['image'] = $content;
                         break;
                     case 'site_name':
-                                            $ogData['site_name'] = htmlspecialchars($content);
+                        $ogData['site_name'] = $content;
                         break;
                 }
             }
         }
 
-                            // Fallback: si pas de og:title, utiliser <title>
+        // Fallback: use <title> if no og:title
         if (empty($ogData['title'])) {
             preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
             if (!empty($titleMatch[1])) {
-                                    $ogData['title'] = htmlspecialchars($titleMatch[1]);
+                $ogData['title'] = html_entity_decode($titleMatch[1], ENT_QUOTES, 'UTF-8');
+            }
         }
     }
 
-                            // Fallback: si pas de site_name, utiliser le domaine
+    // Always use domain as site_name
-                            if (empty($ogData['site_name'])) {
     $parsed = parse_url($url);
     $ogData['site_name'] = $parsed['host'] ?? '';
-                            }
 
-                            return $ogData;
+    $cache->set($cacheKey, $ogData, 360); // 6 hours
-                        }
+}
+?>
 
-                        $ogData = getOpenGraphData($url);
+<div class="card--open-graph">
-
-                        // Toujours utiliser le domaine de l'URL pour site_name
-                        $parsed = parse_url($url);
-                        $ogData['site_name'] = $parsed['host'] ?? '';
-                        ?>
-
-                        <div class="card--open-graph">
     <div class="open-graph__inner">
 
     <?php if (!empty($ogData['image'])): ?>
     <figure>
-                                <img src="<?= $ogData['image'] ?>" alt="<?= $ogData['title'] ?>">
+        <img src="<?= htmlspecialchars($ogData['image']) ?>" alt="">
     </figure>
-                            <?php endif; ?>
+    <?php endif ?>
 
     <div class="content">
         <?php if (!empty($ogData['site_name'])): ?>
-                                <span class="site-name"><?= $ogData['site_name'] ?></span>
+        <span class="site-name"><?= htmlspecialchars($ogData['site_name']) ?></span>
-                                <?php endif; ?>
+        <?php endif ?>
 
         <?php if (!empty($ogData['title'])): ?>
-
         <h3 class="title">
-                                    <a href="<?= $ogData['url'] ?>" target="_blank">
+            <a href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank">
-                                        <?= $ogData['title'] ?>
+                <?= htmlspecialchars($ogData['title']) ?>
             </a>
         </h3>
-                                <?php endif; ?>
+        <?php endif ?>
 
         <?php if (!empty($ogData['description'])): ?>
-                                <p class="description"><?= $ogData['description'] ?></p>
+        <p class="description"><?= htmlspecialchars($ogData['description']) ?></p>
-                                <?php endif; ?>
+        <?php endif ?>
-                            </div>
-                            <a class="link-block" href="<?= $ogData['url'] ?>" target="_blank"></a>
-                        </div>
     </div>
+    <a class="link-block" href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank"></a>
+</div>
+</div>

site/templates/impact-media.php

@@ -0,0 +1,47 @@
+<?php snippet('header') ?>
+
+<main class="main__single">
+
+<header class="page__header">
+    <p class="page__type">Impact</p>
+    <p class="page__category">Médiatique</p>
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+</header>
+
+<?php
+$entries = $page->entries()->toEntries();
+$investigation = $page->linkedInvestigation()->toPages()->first();
+?>
+
+<?php if ($entries->isNotEmpty()): ?>
+<div class="page__content">
+    <?php foreach ($entries as $entry): ?>
+        <?php snippet('card-open-graph', ['url' => $entry->value()]) ?>
+    <?php endforeach ?>
+</div>
+<?php endif ?>
+
+<?php if ($investigation): ?>
+<aside class="page__aside" id="related-investigations">
+    <h3 class="aside__title">Enquête liée</h3>
+
+    <article class="card--article-small">
+        <?php if ($cover = $investigation->cover()->toFile()): ?>
+        <figure>
+            <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
+        </figure>
+        <?php endif ?>
+        <div class="content">
+            <p class="type">Enquête</p>
+            <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
+        </div>
+        <button class="btn--go-to"><a href="<?= $investigation->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <a class="link-block" href="<?= $investigation->url() ?>" aria-hidden="true"></a>
+    </article>
+</aside>
+<?php endif ?>
+
+</main>
+
+<?php snippet('bottom-bar') ?>
+<?php snippet('footer') ?>

site/templates/investigation.php

@@ -303,19 +303,6 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
     </div>
 
 
-        <!-- <div class="card--block-small" data-impact-type="media">
-   
-        <p class="category">Médiatique</p>
-        <div class="content">
-            <p>12 articles et reprises</p>
-            <p>1.5M de vues cumulées</p>
-        </div>
-        <details class="open-graph__details">
-        <summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
-                <?php snippet('card-open-graph') ?>
-        </details>
-    </div> -->
-
 
 <?php
 $resourcesParent = site()->find('ressources');
@@ -361,6 +348,9 @@ $resources = $resourcesParent ? $resourcesParent->children()->listed()->filter(f
 <?php
 $impactsParent = site()->find('impacts');
 $impacts = $impactsParent ? $impactsParent->children()->listed()->filter(function($impact) use ($page) {
+    if ($impact->intendedTemplate()->name() === 'impact-media') {
+        return $impact->linkedInvestigation()->toPages()->has($page);
+    }
     return $impact->linkedInvestigations()->toPages()->has($page);
 }) : null;
 ?>
@@ -370,6 +360,23 @@ $impacts = $impactsParent ? $impactsParent->children()->listed()->filter(functio
     <h3 class="aside__title"><?= t('impacts.title') ?></h3>
 
    <?php foreach ($impacts as $impact): ?>
+    <?php if ($impact->intendedTemplate()->name() === 'impact-media'): ?>
+        <?php $entries = $impact->entries()->toEntries(); ?>
+        <div class="card--block-small" data-impact-type="media">
+            <p class="type">Médiatique</p>
+            <div class="content">
+                <p><?= $entries->count() ?> article<?= $entries->count() > 1 ? 's' : '' ?> et reprise<?= $entries->count() > 1 ? 's' : '' ?></p>
+            </div>
+            <?php if ($entries->isNotEmpty()): ?>
+            <details class="open-graph__details">
+                <summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span></p></summary>
+                <?php foreach ($entries as $entry): ?>
+                    <?php snippet('card-open-graph', ['url' => $entry->value()]) ?>
+                <?php endforeach ?>
+            </details>
+            <?php endif ?>
+        </div>
+    <?php else: ?>
     <div class="card--block-small has-link">
         <div class="group-top">
             <p class="type"><?= t('impact.type') ?></p>
@@ -394,6 +401,7 @@ $impacts = $impactsParent ? $impactsParent->children()->listed()->filter(functio
 
         <a class="link-block" href="<?= $impact->url() ?>" aria-hidden="true"></a>
     </div>
+    <?php endif ?>
     <?php endforeach ?>
 
 </aside>