hr-design-system-handlebars 1.58.3 → 1.58.5

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.58.5 (Tue Feb 20 2024)
+
+#### 🐛 Bug Fix
+
+- add metadatabox-component + sub-components [#852](https://github.com/mumprod/hr-design-system-handlebars/pull/852) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.58.4 (Fri Feb 16 2024)
+
+#### 🐛 Bug Fix
+
+- add story-shorttext component [#850](https://github.com/mumprod/hr-design-system-handlebars/pull/850) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.58.3 (Fri Feb 16 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/dist/assets/index.css

@@ -1268,6 +1268,9 @@ article.indexText ul {
 .-mt-40 {
   margin-top: -10rem;
 }
+.-mt-5 {
+  margin-top: -1.25rem;
+}
 .-mt-6 {
   margin-top: -1.5rem;
 }
@@ -1708,9 +1711,15 @@ article.indexText ul {
 .grow-0 {
   flex-grow: 0;
 }
+.basis-0 {
+  flex-basis: 0px;
+}
 .basis-1\/12 {
   flex-basis: 8.333333%;
 }
+.basis-10 {
+  flex-basis: 2.5rem;
+}
 .basis-10\/12 {
   flex-basis: 83.333333%;
 }
@@ -1935,6 +1944,9 @@ article.indexText ul {
   --tw-divide-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-divide-opacity));
 }
+.self-start {
+  align-self: flex-start;
+}
 .self-end {
   align-self: flex-end;
 }
@@ -2048,6 +2060,10 @@ article.indexText ul {
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
+.border-y-2 {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2142,6 +2158,10 @@ article.indexText ul {
   --tw-border-opacity: 1;
   border-color: rgba(121, 121, 121, var(--tw-border-opacity));
 }
+.border-gray-scorpion {
+  --tw-border-opacity: 1;
+  border-color: rgba(96, 96, 96, var(--tw-border-opacity));
+}
 .border-navigation-border-color {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
@@ -3235,7 +3255,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1708096187683;
+  counter-reset: cnt1708459463274;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3558,7 +3578,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1708096187683 1;
+  counter-increment: cnt1708459463274 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3574,7 +3594,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1708096187683);
+  content: counter(cnt1708459463274);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/page/components/author.hbs

@@ -0,0 +1,27 @@
+{{#if this.hasMoreThanOneAuthor}}
+    author-list
+{{else}}
+
+    {{#if this.authorTitle~}}
+        <div class="flex items-center h-10">
+            {{#if this.authorImage.isImage}}
+                <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                    {{~> components/base/image/responsive_image this.authorImage
+                            _type="profile" 
+                            _variant="ticker" 
+                            _addClass=""
+                            _addClassImg="ar-1-1 rounded-full" ~}}
+                </div>
+            {{/if}}
+            <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
+                {{#unless _hideFrom }}Von{{/unless}}
+                {{#if this.authorUrl~}}
+                    <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline ">{{this.authorTitle}}</a>
+                {{else}}
+                    {{this.authorTitle}}
+                {{/if}}
+            </div>
+        </div>
+    {{~/if}}
+
+{{/if}}

package/dist/views/components/page/components/commentlink.hbs

@@ -0,0 +1,17 @@
+{{#with this.userComments ~}}
+    <div class="mt-3">
+        <span class="relative z-30 whitespace-nowrap">
+            <a class="text-link hover:underline" href="#commentList">
+                {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
+                <span class="sr-only">{{loca "comment_anchor_1"}}</span>
+                <span class="text-link">{{this.quantity}}</span>
+                {{#if this.hasOneComment}}
+                    <span class="text-link">{{loca "comment_label_text"}}</span>
+                {{else}}
+                    <span class="text-link">{{loca "comment_label_text_many"}}</span>
+                {{/if}}
+                <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+            </a>
+        </span>
+    </div>
+{{/with}}

package/dist/views/components/page/components/metadatabox.hbs

@@ -0,0 +1,16 @@
+<div class="clear-both mt-3 border-y-2 border-gray-scorpion">
+    <div class="flex clear-both w-full mt-4 mb-3">
+        <div>
+        {{> components/page/components/author _hideFrom=false }}
+
+        {{#if _showDate }}
+            {{> components/page/components/publicationdate }}
+        {{/if}}
+
+        {{> components/page/components/commentlink }}
+        </div>
+
+        {{> components/page/components/socialsharing }}
+
+    </div>
+</div>

package/dist/views/components/page/components/publicationdate.hbs

@@ -0,0 +1,15 @@
+<div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+
+    {{#with this.documentModificationDate~}}
+        
+            {{#if this.isModificationDate }}
+                <time datetime="{{this.htmlDateTime}}">{{loca "date_updated_fixed" this.date this.time }}</time>
+            {{~else}}
+                {{#if this.isPublicationDate ~}}
+                    <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{~/if}}
+            {{~/if}}
+               
+    {{~/with}}
+    
+</div>

package/dist/views/components/page/components/shorttext.hbs

@@ -0,0 +1 @@
+<p class="font-bold mt-3 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{_text}}</p>

package/dist/views/components/page/components/socialsharing.hbs

@@ -0,0 +1,3 @@
+<div class="self-center hidden sm:block grow">
+    <div class="flex justify-end">socialsharing</div>
+</div>

package/dist/views/components/page/story/story_article.hbs

@@ -1,12 +1,16 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
-    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    <h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
+
+    {{> components/page/components/shorttext _text=this.shorttext }}
+
+    {{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
     
     {{#unless this.displayPageLead.isFalse}}
         {{#with this.teaseritem }}
             {{#if this.isImage}}
                 {{> components/content/copytext/components/image/figure
-                    _cssClass="article-breakout"
+                    _cssClass="article-breakout !mb-0"
                     _cssClassCaption=""
                     _type="story"
                     _variant="100-top"

package/dist/views_static/components/page/components/author.hbs

@@ -0,0 +1,27 @@
+{{#if this.hasMoreThanOneAuthor}}
+    author-list
+{{else}}
+
+    {{#if this.authorTitle~}}
+        <div class="flex items-center h-10">
+            {{#if this.authorImage.isImage}}
+                <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                    {{~> components/base/image/responsive_image this.authorImage
+                            _type="profile" 
+                            _variant="ticker" 
+                            _addClass=""
+                            _addClassImg="ar-1-1 rounded-full" ~}}
+                </div>
+            {{/if}}
+            <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
+                {{#unless _hideFrom }}Von{{/unless}}
+                {{#if this.authorUrl~}}
+                    <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline ">{{this.authorTitle}}</a>
+                {{else}}
+                    {{this.authorTitle}}
+                {{/if}}
+            </div>
+        </div>
+    {{~/if}}
+
+{{/if}}

package/dist/views_static/components/page/components/commentlink.hbs

@@ -0,0 +1,17 @@
+{{#with this.userComments ~}}
+    <div class="mt-3">
+        <span class="relative z-30 whitespace-nowrap">
+            <a class="text-link hover:underline" href="#commentList">
+                {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
+                <span class="sr-only">{{loca "comment_anchor_1"}}</span>
+                <span class="text-link">{{this.quantity}}</span>
+                {{#if this.hasOneComment}}
+                    <span class="text-link">{{loca "comment_label_text"}}</span>
+                {{else}}
+                    <span class="text-link">{{loca "comment_label_text_many"}}</span>
+                {{/if}}
+                <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+            </a>
+        </span>
+    </div>
+{{/with}}

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -0,0 +1,16 @@
+<div class="clear-both mt-3 border-y-2 border-gray-scorpion">
+    <div class="flex clear-both w-full mt-4 mb-3">
+        <div>
+        {{> components/page/components/author _hideFrom=false }}
+
+        {{#if _showDate }}
+            {{> components/page/components/publicationdate }}
+        {{/if}}
+
+        {{> components/page/components/commentlink }}
+        </div>
+
+        {{> components/page/components/socialsharing }}
+
+    </div>
+</div>

package/dist/views_static/components/page/components/publicationdate.hbs

@@ -0,0 +1,15 @@
+<div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+
+    {{#with this.documentModificationDate~}}
+        
+            {{#if this.isModificationDate }}
+                <time datetime="{{this.htmlDateTime}}">{{loca "date_updated_fixed" this.date this.time }}</time>
+            {{~else}}
+                {{#if this.isPublicationDate ~}}
+                    <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{~/if}}
+            {{~/if}}
+               
+    {{~/with}}
+    
+</div>

package/dist/views_static/components/page/components/shorttext.hbs

@@ -0,0 +1 @@
+<p class="font-bold mt-3 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{_text}}</p>

package/dist/views_static/components/page/components/socialsharing.hbs

@@ -0,0 +1,3 @@
+<div class="self-center hidden sm:block grow">
+    <div class="flex justify-end">socialsharing</div>
+</div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -1,12 +1,16 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
-    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    <h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
+
+    {{> components/page/components/shorttext _text=this.shorttext }}
+
+    {{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
     
     {{#unless this.displayPageLead.isFalse}}
         {{#with this.teaseritem }}
             {{#if this.isImage}}
                 {{> components/content/copytext/components/image/figure
-                    _cssClass="article-breakout"
+                    _cssClass="article-breakout !mb-0"
                     _cssClassCaption=""
                     _type="story"
                     _variant="100-top"

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.58.3",
+    "version": "1.58.5",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/_default/conf/locatags.json

@@ -20,6 +20,7 @@
     "copyright_symbol": "© {0}",
     "date_simple_at": "{0} Uhr",
     "date_published": "Veröffentlicht am {0} um {1} Uhr",
+    "date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
     "epg_program_supplier": "Zur Webseite",
     "event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
     "event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -20,6 +20,7 @@
 	"copyright_symbol": "© {0}",
 	"date_simple_at": "{0} Uhr",
 	"date_published": "Veröffentlicht am {0} um {1} Uhr",
+	"date_updated_fixed": "Aktualisiert am {0} um {1} Uhr",
 	"epg_program_supplier": "Zur Webseite",
 	"event_calendar_no_events_available": "<strong>Hinweis:</strong><br />Es liegen aktuell noch keine Einträge für den gewählten Zeitraum vor.",
 	"event_calendar_monthly_overview_link": "Zur Monats-Übersicht",

package/src/assets/fixtures/content/copytext/copytext.json

@@ -1,10 +1,5 @@
 {
     "copytextParagraph": [
-        {
-            "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
-            "isHeadline": true,
-            "text": "Copytext"
-        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },

package/src/assets/fixtures/page/story/story.inc.json

@@ -2,7 +2,8 @@
     "topline": "Quer über den großen Sylter Deich",
     "title": "Zwei flinke Boxer jagen die quirlige Eva und ihren Mops",
     "shorttext": "Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.",
-    "hasDwellTime": false,
+    "hasMoreThanOneAuthor": false,
+    "hasDwellTime": true,
     "isArchiveContent": false,
     "displayPageLead": {
         "isFalse": false
@@ -34,17 +35,36 @@
         "quantity": "117"
     },
     "byline": "Bylinetext",
+    "authorTitle": "Steffen Rebhahn",
+    "authorImage": {
+        "@->jsoninclude": "page/story/story_images.inc.json",
+        "@->contentpath": "author",
+        "@->replaceToken": [
+            {
+                "@->token": "image",
+                "@->value": "mitarbeiter-portraet-steffen-rebhahn-106"
+            }
+        ]            
+    },
+    "authorUrl": "/author-url",
+    "webviewAuthorUrl": "webview-author-url",
     "authorItems": [
         {
             "hasProfileLink": false,
             "from": "Von",
             "textAfterAuthor": "Horst Schlämmer",
+            "delimiter": ", "
+        },
+        {
+            "hasProfileLink": false,
+            "from": "",
+            "textAfterAuthor": "Karl Dall",
             "delimiter": " und "
         },
         {
             "hasProfileLink": true,
             "from": "",
-            "authorName": "Gisela",
+            "authorName": "Peter Lustig",
             "delimiter": "",
             "link": {
                 "url": "/author-url",

package/src/assets/fixtures/page/story/story_images.inc.json

@@ -58,5 +58,21 @@
                 }
             ]
         }
-    }
+    },
+    "author": {
+        "isImage": true,
+        "caption": "Steffen Rebhahn",
+        "copyrightWithLinks": "hr",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-1to1_small.jpg",
+            "sources": [
+                {
+                    "sizes": "50px",
+                    "srcset": "images/{#image}_v-1to1__xsmall.jpg 260w, images/{#image}_v-1to1__small.jpg 380w, images/{#image}_v-1to1__medium.jpg 480w, images/{#image}_v-1to1.jpg 720w, images/{#image}_v-1to1__large.jpg 960w"
+                }
+            ]
+        }
+    }    
 }

package/src/stories/views/components/content/copytext/fixtures/copytext.json

@@ -1 +1 @@
-{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Copytext"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Zwischenüberschrift"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Zwischenüberschrift"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}

package/src/stories/views/components/page/components/author.hbs

@@ -0,0 +1,27 @@
+{{#if this.hasMoreThanOneAuthor}}
+    author-list
+{{else}}
+
+    {{#if this.authorTitle~}}
+        <div class="flex items-center h-10">
+            {{#if this.authorImage.isImage}}
+                <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                    {{~> components/base/image/responsive_image this.authorImage
+                            _type="profile" 
+                            _variant="ticker" 
+                            _addClass=""
+                            _addClassImg="ar-1-1 rounded-full" ~}}
+                </div>
+            {{/if}}
+            <div class="self-start text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
+                {{#unless _hideFrom }}Von{{/unless}}
+                {{#if this.authorUrl~}}
+                    <a href="{{this.authorUrl}}" {{#with this.webviewAuthorUrl}}data-webviewurl="{{this}}"{{/with}} class="text-link hover:underline ">{{this.authorTitle}}</a>
+                {{else}}
+                    {{this.authorTitle}}
+                {{/if}}
+            </div>
+        </div>
+    {{~/if}}
+
+{{/if}}

package/src/stories/views/components/page/components/commentlink.hbs

@@ -0,0 +1,17 @@
+{{#with this.userComments ~}}
+    <div class="mt-3">
+        <span class="relative z-30 whitespace-nowrap">
+            <a class="text-link hover:underline" href="#commentList">
+                {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-link fill-current"}}
+                <span class="sr-only">{{loca "comment_anchor_1"}}</span>
+                <span class="text-link">{{this.quantity}}</span>
+                {{#if this.hasOneComment}}
+                    <span class="text-link">{{loca "comment_label_text"}}</span>
+                {{else}}
+                    <span class="text-link">{{loca "comment_label_text_many"}}</span>
+                {{/if}}
+                <span class="sr-only">{{loca "comment_anchor_2"}}</span>
+            </a>
+        </span>
+    </div>
+{{/with}}

package/src/stories/views/components/page/components/metadatabox.hbs

@@ -0,0 +1,16 @@
+<div class="clear-both mt-3 border-y-2 border-gray-scorpion">
+    <div class="flex clear-both w-full mt-4 mb-3">
+        <div>
+        {{> components/page/components/author _hideFrom=false }}
+
+        {{#if _showDate }}
+            {{> components/page/components/publicationdate }}
+        {{/if}}
+
+        {{> components/page/components/commentlink }}
+        </div>
+
+        {{> components/page/components/socialsharing }}
+
+    </div>
+</div>

package/src/stories/views/components/page/components/publicationdate.hbs

@@ -0,0 +1,15 @@
+<div class="{{#unless this.hasMoreThanOneAuthor}}-mt-5 ml-14 {{/unless}}text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+
+    {{#with this.documentModificationDate~}}
+        
+            {{#if this.isModificationDate }}
+                <time datetime="{{this.htmlDateTime}}">{{loca "date_updated_fixed" this.date this.time }}</time>
+            {{~else}}
+                {{#if this.isPublicationDate ~}}
+                    <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{~/if}}
+            {{~/if}}
+               
+    {{~/with}}
+    
+</div>

package/src/stories/views/components/page/components/shorttext.hbs

@@ -0,0 +1 @@
+<p class="font-bold mt-3 text-lg leading-[1.625rem] sm480:text-xl sm480:leading-normal dark:text-text-dark">{{_text}}</p>

package/src/stories/views/components/page/components/socialsharing.hbs

@@ -0,0 +1,3 @@
+<div class="self-center hidden sm:block grow">
+    <div class="flex justify-end">socialsharing</div>
+</div>

package/src/stories/views/components/page/story/fixtures/story.json

@@ -1 +1 @@
-{"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasDwellTime":false,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritem":{"isImage":true,"caption":"Bildunterschrift","copyrightWithLinks":"picture-alliance/dpa","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Gisela","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Copytext"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Zwischenüberschrift"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"Program-name","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}}}
+{"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasMoreThanOneAuthor":false,"hasDwellTime":true,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritem":{"isImage":true,"caption":"Bildunterschrift","copyrightWithLinks":"picture-alliance/dpa","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorTitle":"Steffen Rebhahn","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Zwischenüberschrift"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"Program-name","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}}}

package/src/stories/views/components/page/story/story_article.hbs

@@ -1,12 +1,16 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
-    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    <h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
+
+    {{> components/page/components/shorttext _text=this.shorttext }}
+
+    {{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
     
     {{#unless this.displayPageLead.isFalse}}
         {{#with this.teaseritem }}
             {{#if this.isImage}}
                 {{> components/content/copytext/components/image/figure
-                    _cssClass="article-breakout"
+                    _cssClass="article-breakout !mb-0"
                     _cssClassCaption=""
                     _type="story"
                     _variant="100-top"