update

app/generative-energy/GEDeutschArticle.tsx

@@ -41,21 +41,7 @@ export default defineComponent({
 
         const articleMetadata = computed(() => articleData.value?.find(_ => _.slug === props.articleName));
 
-        const title = computed(() => {
-            return articleContent.value?.split('<h1 lang="de">')[1].split("</h1>")[0] ?? 'Artikel';
-        });
-
-        useHead({ title });
-
-        onServerPrefetch(() =>
-            new Promise<void>((res) => {
-                watchEffect(() => {
-                    if (title.value !== "") {
-                        res();
-                    }
-                });
-            })
-        );
+        useHead({ title: () => articleMetadata.value?.title ?? '' });
 
         function transformArticleNode(node: Node): VNode | string {
             if (node.nodeType === node.ELEMENT_NODE) {
@@ -64,13 +50,22 @@ export default defineComponent({
                 const children = [...node.childNodes].map((_) => transformArticleNode(_));
 
                 if (el.tagName === "P") {
-                    el.classList.add("text-slab");
-                    children.unshift(h("button", {
-                        class: "swap",
-                        onClick: (e) => {
-                            (e.target as HTMLButtonElement).parentElement?.classList.toggle("swap");
-                        },
-                    }, "↻"));
+                    (el as HTMLParagraphElement).dataset.tunit = '';
+                }
+                if ('dataset' in el && 'tunit' in (el as HTMLElement).dataset) {
+                    if (el.tagName !== 'H1') {
+                        el.classList.add("text-slab");
+                    } else {
+                        el.classList.add("title");
+                    }
+                    if (!('notranslate' in (el as HTMLElement).dataset)) {
+                        children.unshift(h("button", {
+                            class: "swap",
+                            onClick: (e) => {
+                                (e.target as HTMLButtonElement).parentElement?.classList.toggle("swap");
+                            },
+                        }, "↻"));
+                    }
                 }
 
                 for (let i = 0; i < el.attributes.length; i++) {
@@ -80,11 +75,7 @@ export default defineComponent({
                     }
                 }
 
-                if (el.tagName === "H1") {
-                    return h("header", attrs, h("h1", {}, children));
-                } else {
-                    return h((node as Element).tagName, attrs, children);
-                }
+                return h((node as Element).tagName, attrs, children);
             } else {
                 return createTextVNode(node.textContent ?? "");
             }
@@ -99,7 +90,6 @@ export default defineComponent({
         }
 
         await Promise.all([stateIsReady, articleDataReady]);
-        console.log(articleMetadata.value);
 
         return () => (
             <div class="ge-article">
@@ -111,7 +101,7 @@ export default defineComponent({
                 </div>
                 <p class="text-slab">
                     Bei dem untenstehenden Artikel handelt es sich um eine hobbymäßige, amateurhafte Übersetzung des
-                    Artikels „{ title.value }“ von Ray Peat. Bei Ungenauigkeiten oder Fehlübersetzungen freue ich mich über <DJEmail>eine Mail</DJEmail>! 
+                    Artikels „{ articleMetadata.value?.title }“ von Ray Peat. Bei Ungenauigkeiten oder Fehlübersetzungen freue ich mich über <DJEmail>eine Mail</DJEmail>! 
                 </p>
                 { articleMetadata.value?.tags?.includes('in-arbeit') && <h5 class="baustelle">🚧 Bitte beachte, dass diese Übersetzung noch in Arbeit und darum nicht fertig ist! 🚧</h5> }
                 <hr />