nice

app/generative-energy/GERoot.tsx

@@ -0,0 +1,67 @@
+import { defineComponent, type VNode, Suspense } from "vue";
+import { useRoute, RouterLink, RouterView, type RouteRecordRaw } from 'vue-router';
+import GEMain from "@/generative-energy/GEMain.tsx";
+import DJEmail from "@/DJEmail.tsx";
+import GEPaypal from "@/generative-energy/GEPaypal.tsx";
+import GEDeutsch from "@/generative-energy/GEDeutsch.tsx";
+import GEDeutschArticle from "@/generative-energy/GEDeutschArticle.tsx";
+import GECalculator from "@/generative-energy/GECalculator.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="https://djledda.de/">djledda.de</a> 2023 - <DJEmail>{ () => 'Contact' }</DJEmail>
+                        </div>
+                        <GEPaypal />
+                    </div>
+                </footer>
+            </main>
+        </>;
+    },
+});