djledda-web/app/generative-energy/GERoot.tsx

import { defineComponent, Suspense, type VNode } from "vue";
import { type RouteRecordRaw, RouterLink, RouterView, useRoute } from "vue-router";
import GEMain from "@/generative-energy/GEMain.tsx";
import DJEmail from "@/DJEmail.tsx";
import GEDeutsch from "@/generative-energy/GEDeutsch.tsx";
import GEDeutschArticle from "@/generative-energy/GEDeutschArticle.tsx";
import GECalculator from "@/generative-energy/GECalculator.tsx";
import DJDonate from "@/DJDonate.tsx";

export const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "GEMain",
        component: GEMain,
    },
    {
        path: "/calculator",
        name: "GECalculator",
        component: GECalculator,
    },
    {
        path: "/raypeat-deutsch",
        name: "GEDeutsch",
        component: GEDeutsch,
    },
    {
        path: "/raypeat-deutsch/article/:articleName",
        name: "GEDeutschArticle",
        component: GEDeutschArticle,
        props: ({ params }) => {
            if ("articleName" in params) {
                return { articleName: params.articleName };
            } else {
                return false;
            }
        },
    },
];

export default defineComponent({
    name: "ge-root",
    setup() {
        const route = useRoute();
        return () => (
            <>
                <main>
                    <RouterLink class={"home-btn" + (route.name === "GEMain" ? " hide" : "")} to={{ name: "GEMain" }}>
                        Generative Energy Home
                    </RouterLink>
                    <RouterView>
                        {{
                            default: ({ Component }: { Component: VNode }) => (Component &&
                                (
                                    <Suspense>
                                        {{
                                            default: () => Component,
                                            fallback: () => <div>Page loading...</div>,
                                        }}
                                    </Suspense>
                                )),
                        }}
                    </RouterView>
                    <footer>
                        <div class="bottom">
                            <div>
                                <a href="/">djledda.de</a> 2023 - <DJEmail>{() => "Contact"}</DJEmail>
                            </div>
                            <DJDonate />
                        </div>
                    </footer>
                </main>
            </>
        );
    },
});