update

app/api.ts

@@ -1,7 +1,16 @@
 export type DJAPIEndpoint = "/rp-articles";
 
+type RPArticle = { 
+    title: string, 
+    slug: string; 
+    titleDe: string, 
+    titleEn: string, 
+    author: string, 
+    tags?: string[],
+};
+
 export interface DJAPIResultMap extends Record<DJAPIEndpoint, unknown> {
-    "/rp-articles": { slug: string; title: string, tags?: string[] }[];
+    "/rp-articles": RPArticle[];
 }
 
 export type DJAPIResult = DJAPIResultMap[DJAPIEndpoint];

app/generative-energy/GEDeutsch.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
                             {rpArticles.value && rpArticles.value.map((_) => (
                                 <li>
                                     <RouterLink to={{ name: "GEDeutschArticle", params: { articleName: _.slug } }}>
-                                        {_.title}
+                                        {_.titleDe}
                                     </RouterLink>
                                     {_.tags?.map(tag => <span class="tag">{tag}</span>)}
                                 </li>

app/generative-energy/GEDeutschArticle.tsx

@@ -41,7 +41,13 @@ export default defineComponent({
 
         const articleMetadata = computed(() => articleData.value?.find(_ => _.slug === props.articleName));
 
-        useHead({ title: () => articleMetadata.value?.title ?? '' });
+        useHead({ 
+            title: () => articleMetadata.value?.title ?? '', 
+            metatags: () => articleMetadata.value ? [
+                { name: 'title', content: articleMetadata.value.title },
+                { name: 'author', content: articleMetadata.value.author },
+            ] : [],
+        });
 
         function transformArticleNode(node: Node): VNode | string {
             if (node.nodeType === node.ELEMENT_NODE) {
@@ -49,6 +55,10 @@ export default defineComponent({
                 const attrs: Record<string, string> = {};
                 const children = [...node.childNodes].map((_) => transformArticleNode(_));
 
+                if (el.attributes.getNamedItem('lang')?.value === 'en') {
+                    el.ariaHidden = 'true';
+                }
+
                 if (el.tagName === "P") {
                     (el as HTMLParagraphElement).dataset.tunit = '';
                 }
@@ -101,7 +111,7 @@ export default defineComponent({
                 </div>
                 <p class="text-slab">
                     Bei dem untenstehenden Artikel handelt es sich um eine hobbymäßige, amateurhafte Übersetzung des
-                    Artikels „{ articleMetadata.value?.title }“ von Ray Peat. Bei Ungenauigkeiten oder Fehlübersetzungen freue ich mich über <DJEmail>eine Mail</DJEmail>! 
+                    Artikels „{ articleMetadata.value?.titleEn }“ 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 ist! 🚧</h5> }
                 <hr />

app/generative-energy/GEMain.tsx

@@ -17,8 +17,8 @@ export default {
                         and my life in general. Hover over the links below for more detail.
                     </p>
                 </div>
+                <h2>Links</h2>
                 <div class="text-slab">
-                    <h2>Links</h2>
                     <ul>
                         <li>
                             <DJTooltip tooltip="Convert to and from grains, set ratios, etc.">

app/home/DJHomeRoot.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
                                         stations, as well as the main municipalities, into English. You live in Allach? It's
                                         Axleigh now. Giesing? Nope! Kyesing! This is a WIP.
                                     ">
-                                        München auf Englisch - Munich in English
+                                        München auf Englisch - Munich in English
                                     </DJTooltip>
                                 </a>
                                 <a href="/kadi/">

app/useDJSSRContext.ts

@@ -3,6 +3,7 @@ import { type MaybeRefOrGetter, useSSRContext } from "vue";
 export type DJSSRContext = {
     head: {
         title: MaybeRefOrGetter<string>;
+        metatags: MaybeRefOrGetter<Array<{ name: string, content: string }>>;
     };
     registry: Record<string, unknown>;
     styles: Record<string, string>;

app/useHead.ts

@@ -1,19 +1,37 @@
-import { watchEffect, toValue, type MaybeRefOrGetter } from 'vue';
+import { watch, toValue, type MaybeRefOrGetter } from 'vue';
 import useDJSSRContext from "@/useDJSSRContext.ts";
+import { h } from "@/util.ts";
 
 export default function useHead(params: {
     title: MaybeRefOrGetter<string>,
+    metatags?: MaybeRefOrGetter<Array<{ name: string, content: string }>>
 }) {
     const context = useDJSSRContext();
 
     if (context) {
         context.head.title = params.title;
+        context.head.metatags = params.metatags ?? [];
     } else {
-        watchEffect(() => {
-            const newTitle = toValue(params.title);
+        watch([() => toValue(params.title), () => toValue(params.metatags) ?? []], ([newTitle, newMetatags]) => {
             if (newTitle) {
                 document.title = newTitle;
             }
-        });
+            const currMetatags = document.head.querySelectorAll('meta');
+            const existing = new Set<string>();
+            for (const currMetatag of currMetatags) {
+                const match = newMetatags.find(_ => _.name === currMetatag.name);
+                if (!match) {
+                    currMetatag.remove();
+                } else {
+                    existing.add(match.name);
+                    currMetatag.content = match.content;
+                }
+            }
+            for (const newMetatag of newMetatags) {
+                if (!existing.has(newMetatag.name)) {
+                    document.head.appendChild(h('meta', newMetatag));
+                }
+            }
+        }, { immediate: true });
     }
 }