update

app/generative-energy/GEDeutschArticle.tsx

@@ -1,7 +1,9 @@
-import { createTextVNode, defineComponent, h, inject, onServerPrefetch, ref, type VNode, watchEffect } from "vue";
+import { createTextVNode, computed, defineComponent, h, inject, onServerPrefetch, ref, type VNode, watchEffect } from "vue";
 import { RouterLink } from "vue-router";
 import useAsyncState from "@/useAsyncState.ts";
 import useHead from "@/useHead.ts";
+import DJEmail from "@/DJEmail.tsx";
+import getDJAPI from "@/api.ts";
 
 export default defineComponent({
     name: "ge-deutsch-article",
@@ -23,25 +25,32 @@ export default defineComponent({
             (innerHTML: string) => Object.assign(document.createElement("div"), { innerHTML }),
         );
 
-        const title = ref("");
-
         const { result: articleContent, stateIsReady } = useAsyncState(
             "ge-deutsch-article-data",
             async ({ hostUrl }) => {
                 const articleResponse = await fetch(`${hostUrl}/generative-energy/content/${props.articleName}.html`);
                 const result = await articleResponse.text();
-                title.value = result.split('<h1 lang="de">')[1].split("</h1>")[0];
                 return result;
             },
         );
 
+        const { 
+            result: articleData, 
+            stateIsReady: articleDataReady,
+        } = useAsyncState('article-data', ({hostUrl}) => getDJAPI(hostUrl, '/rp-articles'));
+
+        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 !== "") {
-                        console.log("resolve", title.value);
                         res();
                     }
                 });
@@ -59,7 +68,7 @@ export default defineComponent({
                     children.unshift(h("button", {
                         class: "swap",
                         onClick: (e) => {
-                            e.target.parentElement.classList.toggle("swap");
+                            (e.target as HTMLButtonElement).parentElement?.classList.toggle("swap");
                         },
                     }, "↻"));
                 }
@@ -71,7 +80,11 @@ export default defineComponent({
                     }
                 }
 
-                return h((node as Element).tagName, attrs, children);
+                if (el.tagName === "H1") {
+                    return h("header", attrs, h("h1", {}, children));
+                } else {
+                    return h((node as Element).tagName, attrs, children);
+                }
             } else {
                 return createTextVNode(node.textContent ?? "");
             }
@@ -85,7 +98,8 @@ export default defineComponent({
             return <div>Artikel lädt...</div>;
         }
 
-        await stateIsReady;
+        await Promise.all([stateIsReady, articleDataReady]);
+        console.log(articleMetadata.value);
 
         return () => (
             <div class="ge-article">
@@ -95,6 +109,12 @@ export default defineComponent({
                         Sprache auf <span>{currentLang.value === "en" ? "Deutsch" : "Englisch"}</span> umschalten
                     </button>
                 </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>! 
+                </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 />
                 <article class={`lang-${currentLang.value}`}>
                     <ArticleContentTransformed />
                 </article>