hr-design-system-handlebars 1.114.14 → 1.114.16

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.114.16 (Tue Nov 19 2024)
+
+#### 🐛 Bug Fix
+
+- Seo/optimize copy to clipboard [#1162](https://github.com/mumprod/hr-design-system-handlebars/pull/1162) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.114.15 (Tue Nov 19 2024)
+
+#### 🐛 Bug Fix
+
+- Seo/dpe 3036 [#1164](https://github.com/mumprod/hr-design-system-handlebars/pull/1164) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.14 (Mon Nov 18 2024)
 
 #### 🐛 Bug Fix

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

@@ -162,8 +162,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/dist/assets/index.css

@@ -3678,7 +3678,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1731934017339;
+  counter-reset: cnt1732026418051;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4092,7 +4092,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1731934017339 1;
+  counter-increment: cnt1732026418051 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4110,7 +4110,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1731934017339);
+  content: counter(cnt1732026418051);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -6,6 +6,7 @@ export default (module) => ({
     isDesktop: true,
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
+    copySuccess: false,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -51,6 +52,21 @@ export default (module) => ({
             uxAction('socialShareClick::'+module+'Desktop::shown');
             this.desktopSharingModuleWasNeverShown = false;
         }
+    },
+    copyToClipboard(url) {
+
+        navigator.clipboard
+        .writeText(url)
+        .then(() => {
+            console.log("successfully copied");
+            this.copySuccess = true
+            window.setTimeout(() => {
+                this.copySuccess = false
+            }, 2000)
+        })
+        .catch(() => {
+            console.log("something went wrong with copy");
+        });
     }
     
 })

package/dist/views/components/site_header/burger.hbs

@@ -10,9 +10,9 @@
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current -mt-2" :class="{'rotate-45': $store.burgeropen, '-mt-2': ! $store.burgeropen }"></span>
                 <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current mt-2" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
             </div> 
         </button>
     </nav>

package/dist/views/components/site_header/service_logo.hbs

@@ -11,7 +11,7 @@
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
             {{/if}}     
         >   
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="152" height="150" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">
         </div>      
         
@@ -23,7 +23,7 @@
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
         >
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="300" height="66" src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">     
         </div>
           

package/dist/views/components/social_sharing/social_sharing_copytext.hbs

@@ -1,16 +1,18 @@
 {{~#with this.socialSharing ~}}
     <div 
-        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
         x-init="" 
-        class="print:hidden {{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        class="print:hidden hidden{{#unless ../_useSticky}} top-0{{/unless}} sticky w-10 col-start-2 pt-6 z-100 h-fit"
         x-data="socialSharingHandler('vertical-desktop')"
         x-intersect="sharingModuleShown()"
         ax-load 
         x-ignore
+        x-cloak
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg') ,
+                'hidden' : !($screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220)
+                }"
         {{/if}}
     >
         <div 

package/dist/views/components/social_sharing/social_sharing_icons.hbs

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <li>

package/dist/views_static/components/site_header/burger.hbs

@@ -10,9 +10,9 @@
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current -mt-2" :class="{'rotate-45': $store.burgeropen, '-mt-2': ! $store.burgeropen }"></span>
                 <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current mt-2" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
             </div> 
         </button>
     </nav>

package/dist/views_static/components/site_header/service_logo.hbs

@@ -11,7 +11,7 @@
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
             {{/if}}     
         >   
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="152" height="150" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">
         </div>      
         
@@ -23,7 +23,7 @@
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
         >
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="300" height="66" src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">     
         </div>
           

package/dist/views_static/components/social_sharing/social_sharing_copytext.hbs

@@ -1,16 +1,18 @@
 {{~#with this.socialSharing ~}}
     <div 
-        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
         x-init="" 
-        class="print:hidden {{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        class="print:hidden hidden{{#unless ../_useSticky}} top-0{{/unless}} sticky w-10 col-start-2 pt-6 z-100 h-fit"
         x-data="socialSharingHandler('vertical-desktop')"
         x-intersect="sharingModuleShown()"
         ax-load 
         x-ignore
+        x-cloak
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg') ,
+                'hidden' : !($screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220)
+                }"
         {{/if}}
     >
         <div 

package/dist/views_static/components/social_sharing/social_sharing_icons.hbs

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <li>

package/package.json

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

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

@@ -162,8 +162,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/src/stories/views/components/site_header/burger.hbs

@@ -10,9 +10,9 @@
         >
             <span class="sr-only md:hidden">Open main menu</span>
             <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current -mt-2" :class="{'rotate-45': $store.burgeropen, '-mt-2': ! $store.burgeropen }"></span>
                 <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
-                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
+                <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current mt-2" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
             </div> 
         </button>
     </nav>

package/src/stories/views/components/site_header/service_logo.hbs

@@ -11,7 +11,7 @@
                 class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
             {{/if}}     
         >   
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="152" height="150" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">
         </div>      
         
@@ -23,7 +23,7 @@
                 class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
             {{/if}}
         >
-            <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+            <img width="300" height="66" src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
                 class="w-auto h-full" alt="{{loca "meta_application_name"}}">     
         </div>
           

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -6,6 +6,7 @@ export default (module) => ({
     isDesktop: true,
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
+    copySuccess: false,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -51,6 +52,21 @@ export default (module) => ({
             uxAction('socialShareClick::'+module+'Desktop::shown');
             this.desktopSharingModuleWasNeverShown = false;
         }
+    },
+    copyToClipboard(url) {
+
+        navigator.clipboard
+        .writeText(url)
+        .then(() => {
+            console.log("successfully copied");
+            this.copySuccess = true
+            window.setTimeout(() => {
+                this.copySuccess = false
+            }, 2000)
+        })
+        .catch(() => {
+            console.log("something went wrong with copy");
+        });
     }
     
 })

package/src/stories/views/components/social_sharing/social_sharing_copytext.hbs

@@ -1,16 +1,18 @@
 {{~#with this.socialSharing ~}}
     <div 
-        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
         x-init="" 
-        class="print:hidden {{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        class="print:hidden hidden{{#unless ../_useSticky}} top-0{{/unless}} sticky w-10 col-start-2 pt-6 z-100 h-fit"
         x-data="socialSharingHandler('vertical-desktop')"
         x-intersect="sharingModuleShown()"
         ax-load 
         x-ignore
+        x-cloak
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg') ,
+                'hidden' : !($screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220)
+                }"
         {{/if}}
     >
         <div 

package/src/stories/views/components/social_sharing/social_sharing_icons.hbs

@@ -1,6 +1,8 @@
 {{~#with this.copyToClipboardLink}}
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+<li class="relative">
+    <button
+        x-on:click="copyToClipboard('{{this}}')"
+        class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
@@ -14,30 +16,6 @@
         {{loca "share_copy_message" }}
     </div>
 </li>
-<script>
-    function copyHandler(){
-        return  {  
-            copySuccess: false,
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
-                //TODO: maby do this with a magical helper in alpine
-                navigator.clipboard
-                .writeText(url)
-                .then(() => {
-                    console.log("successfully copied");
-                    this.copySuccess = true
-                    window.setTimeout(() => {
-                        this.copySuccess = false
-                    }, 2000)
-                })
-                .catch(() => {
-                    console.log("something went wrong with copy");
-                });
-            }
-        }
-    }
-</script>
 {{/with}}
 {{~#with this.twitterLink ~}}
 <li>