Use specific OpenGraph for Hack'n'Sun page

content/projekte/hack-n-fun/freizeiten/hacknsun/index.md

 +++
 title = "Hack'n'Sun"
+description = "Technik, Hacking, Spaß und Freizeit bei Sonne und Lagerfeuer"
 
 template = "pages/raw.html"
+
+[extra.depiction]
+image = "loeten_wiese.jpg"
+alt = "Mehere Kinder beim Löten in einem Pavillon auf einer Wiese"
 +++
 
-{% hero_section(title="Hack'n'Sun", background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=true) %}
-Technik, Hacking, Spaß und Freizeit bei Sonne und Lagerfeuer
-{% end %}
+{{ hero_section(background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=true) }}
 
 {% photo_section(title="Computer und Draußen, so viel du magst", img="hacken_am_lagerfeuer.jpg", alt="Kinder mit Laptops an einer Lagerfeuerstelle", credit="Dominik George, CC-BY-SA") %}
 Bei Hack'n'Sun geht es um genau das, was der Name sagt – Hacken, also das Basteln mit Technik,

events.json

@@ -9,7 +9,7 @@
   "hacknsun-2024-bn": {
     "display_name": "Hack'n'Sun 2024 (Jugendzeltplatz Bonn)",
     "description": "Große Sommerfreizeit in Bonn-Bad Godesberg mit Ausflügen zu FrOScon und Museen",
-    "location": "Bonn",
+    "location": "Bonn (Jugendzeltplatz)",
     "date": "2024-08-19",
     "cost": 150
   }

templates/shortcodes/hero_section.html

@@ -5,8 +5,8 @@
   {% endif -%}
   <div class="hero-body">
     <div class="container has-text-centered">
-      <h1 class="title">{{ title }}</h1>
-      {% if body %}<p class="subtitle">{{ body }}</p>{% endif -%}
+      <h1 class="title">{{ title | default(value=page.title) | safe }}</h1>
+      {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
     </div>
   </div>
 </section>

templates/shortcodes/teckids_event.html

@@ -8,7 +8,7 @@
         <div class="column is-two-thirds event-info">
           <h3 class="title is-5">{{ event.display_name }}</h3>
           <p class="subtitle is-6">{{ event.description }}</p>
-          <div class="notification is-primary is-light">
+          <div class="notification is-primary is-light mt-4 mb-4">
             <div class="columns">
               <div class="column is-one-third">
                 <h4 class="title ">Wo?</h4>