80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { defineComponent, ref, 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";
|
|
import { setupTooltip } from "@/DJTooltip.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();
|
|
const carrier = ref<HTMLDivElement | null>(null);
|
|
setupTooltip({ carrier });
|
|
return () => (
|
|
<>
|
|
<div ref={carrier} class="tooltip-carrier" />
|
|
<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>
|
|
</>
|
|
);
|
|
},
|
|
});
|