updatge

app/generative-energy/GEDeutschArticle.tsx

@@ -1,9 +1,10 @@
-import { h, inject, defineComponent, ref, createTextVNode, type VNode } from 'vue';
-import { RouterLink } from 'vue-router';
+import { createTextVNode, 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";
 
 export default defineComponent({
-    name: 'ge-deutsch-article',
+    name: "ge-deutsch-article",
     props: {
         articleName: {
             type: String,
@@ -17,24 +18,50 @@ export default defineComponent({
             currentLang.value = currentLang.value === "en" ? "de" : "en";
         }
 
-        const parseDom = inject('dom-parse', (innerHTML: string) => Object.assign(document.createElement('div'), { innerHTML }));
+        const parseDom = inject(
+            "dom-parse",
+            (innerHTML: string) => Object.assign(document.createElement("div"), { innerHTML }),
+        );
 
-        const { result: articleContent, stateIsReady } = useAsyncState('ge-deutsch-article-data', async ({ hostUrl }) => {
-            const articleResponse = await fetch(`${ hostUrl }/generative-energy/static/content/${ props.articleName }.html`);
-            return await articleResponse.text();
-        });
+        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;
+            },
+        );
+
+        useHead({ title });
+
+        onServerPrefetch(() =>
+            new Promise<void>((res) => {
+                watchEffect(() => {
+                    if (title.value !== "") {
+                        console.log("resolve", title.value);
+                        res();
+                    }
+                });
+            })
+        );
 
         function transformArticleNode(node: Node): VNode | string {
             if (node.nodeType === node.ELEMENT_NODE) {
                 const el = node as Element;
-                const attrs: Record<string, string> = {}; 
-                const children = [...node.childNodes].map(_ => transformArticleNode(_));
+                const attrs: Record<string, string> = {};
+                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.parentElement.classList.toggle('swap');
-                    } }, '↻'));
+                if (el.tagName === "P") {
+                    el.classList.add("text-slab");
+                    children.unshift(h("button", {
+                        class: "swap",
+                        onClick: (e) => {
+                            e.target.parentElement.classList.toggle("swap");
+                        },
+                    }, "↻"));
                 }
 
                 for (let i = 0; i < el.attributes.length; i++) {
@@ -46,30 +73,32 @@ export default defineComponent({
 
                 return h((node as Element).tagName, attrs, children);
             } else {
-                return createTextVNode(node.textContent ?? '');
+                return createTextVNode(node.textContent ?? "");
             }
         }
 
         function ArticleContentTransformed() {
             if (articleContent.value) {
                 const dom = parseDom(articleContent.value);
-                return h('div', {}, [...dom.children].map(_ => transformArticleNode(_)));
+                return h("div", {}, [...dom.children].map((_) => transformArticleNode(_)));
             }
             return <div>Artikel lädt...</div>;
         }
 
         await stateIsReady;
 
-        return () => <div class="ge-article">
-            <div class="header">
-                <RouterLink to={{ name: 'GEDeutsch' }}>Zur Artikelübersicht</RouterLink>
-                <button onClick={clickBtn}>
-                    Sprache auf <span>{currentLang.value === "en" ? "Deutsch" : "Englisch"}</span> umschalten
-                </button>
+        return () => (
+            <div class="ge-article">
+                <div class="header">
+                    <RouterLink to={{ name: "GEDeutsch" }}>Zur Artikelübersicht</RouterLink>
+                    <button onClick={clickBtn}>
+                        Sprache auf <span>{currentLang.value === "en" ? "Deutsch" : "Englisch"}</span> umschalten
+                    </button>
+                </div>
+                <article class={`lang-${currentLang.value}`}>
+                    <ArticleContentTransformed />
+                </article>
             </div>
-            <article class={`lang-${ currentLang.value }`}>
-                <ArticleContentTransformed />
-            </article>
-        </div>;
-    }
+        );
+    },
 });