From 2bd9dd35facccb6fb03ca5aa32042116dbaafc16 Mon Sep 17 00:00:00 2001
From: Felix Scholze <felix@webshaped.de>
Date: Sun, 25 Feb 2024 15:23:05 +0100
Subject: [PATCH] perf(WordOptionDropdown): prevent larg html output; pass only
 nessary data

---
 src/components/word/SingleWord.vue         |  6 +++++-
 src/components/word/WordOptionDropdown.vue | 11 ++++++-----
 src/pages/wort/[...wordSlug].astro         |  6 +++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/word/SingleWord.vue b/src/components/word/SingleWord.vue
index d571cdd2..c295467f 100644
--- a/src/components/word/SingleWord.vue
+++ b/src/components/word/SingleWord.vue
@@ -33,7 +33,11 @@
           {{ translation?.translation }}
         </dd>
       </dl>
-      <WordOptionDropdown :word="source" class="c-word-list__options-dropdown">
+      <WordOptionDropdown
+        :berlinerisch="source.wordProperties?.berlinerisch"
+        :slug="source.slug"
+        class="c-word-list__options-dropdown"
+      >
         <template #after>
           <a :href="routeToWord(source.slug!)" class="c-options-dropdown__copy-button c-button">
             <BookOpen width="18" height="18" class="c-options-dropdown__icon-button" />
diff --git a/src/components/word/WordOptionDropdown.vue b/src/components/word/WordOptionDropdown.vue
index 3b6f526d..0b624834 100644
--- a/src/components/word/WordOptionDropdown.vue
+++ b/src/components/word/WordOptionDropdown.vue
@@ -19,7 +19,7 @@
         aria-label="Wort teilen"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="shareWord(word.slug!)"
+        @click="shareWord(slug)"
       >
         <Share2 width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -31,7 +31,7 @@
         aria-label="Link zum Wort kopieren"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="copyWordPageUrlToClipboard(word.slug!)"
+        @click="copyWordPageUrlToClipboard(slug)"
       >
         <Link width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -43,7 +43,7 @@
         aria-label="Wort kopieren"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="copyNameToClipboard(word.wordProperties?.berlinerisch!)"
+        @click="copyNameToClipboard(berlinerisch)"
       >
         <Copy width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -62,11 +62,12 @@ import Link from "virtual:icons/lucide/link";
 import Share2 from "virtual:icons/lucide/share-2";
 import { routeToWord } from "@utils/helpers.ts";
 import { useClipboard, useShare } from "@vueuse/core";
-import type { CleanBerlinerWord } from "@stores/index.ts";
+import type { BerlinerWord } from "@stores/index.ts";
 import { createToastNotify } from "@stores/index.ts";
 
 interface WordProps {
-  word: CleanBerlinerWord;
+  berlinerisch: BerlinerWord["wordProperties"]["berlinerisch"];
+  slug: BerlinerWord["slug"];
 }
 
 const { word } = defineProps<WordProps>();
diff --git a/src/pages/wort/[...wordSlug].astro b/src/pages/wort/[...wordSlug].astro
index 2dd83d65..4200fbdf 100644
--- a/src/pages/wort/[...wordSlug].astro
+++ b/src/pages/wort/[...wordSlug].astro
@@ -122,7 +122,11 @@ if (wordProps?.images && wordProps?.images?.nodes.length > 1) {
           )
         }
       </h1>
-      <WordOptionDropdown word={word} client:only="vue" />
+      <WordOptionDropdown
+        berlinerisch={word.wordProperties?.berlinerisch}
+        slug={word.slug}
+        client:only="vue"
+      />
     </header>
     <main class="c-single-word__main">
       {