big style update

app/blog/DjBlogRoot.tsx

@@ -1,7 +1,31 @@
-import { defineComponent, ref } from "vue";
-import useHead from "@/useHead.ts";
+import { defineComponent, ref, type VNode, Suspense } from "vue";
+import { type RouteRecordRaw, RouterLink, RouterView } from "vue-router";
 import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
+import DjBlogEntry from "@/blog/DjBlogEntry.tsx";
+import DjBlogMain from "@/blog/DjBlogMain.tsx";
+import DjEmail from "@/DjEmail.tsx";
 import { addCSS, css } from "@/util.ts";
+import useHead from "@/useHead.ts";
+
+export const routes: RouteRecordRaw[] = [
+    {
+        path: "/",
+        name: "DjBlogMain",
+        component: DjBlogMain,
+    },
+    {
+        path: "/post/:slug",
+        name: "DjBlogEntry",
+        component: DjBlogEntry,
+        props: ({ params }) => {
+            if ("slug" in params) {
+                return { slug: params.slug };
+            } else {
+                return false;
+            }
+        },
+    },
+];
 
 const styles = css`
 .supercontainer {
@@ -9,31 +33,85 @@ const styles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-bottom: 100px;
 }
+
 .container {
     width: 800px;
 }
+
+footer {
+    color: gray;
+    font-style: italic;
+    margin-top: 40px;
+}
+
+a {
+    color: var(--dj-palette3);
+    text-decoration: solid line;
+
+    &:visited {
+        color: var(--dj-visited);
+    }
+}
+
+nav {
+    font-size: 40px;
+    margin-bottom: 40px;
+    text-decoration: none;
+    text-align: right;
+    width: 100%;
+
+    a, a:visited {
+        color: var(--dj-palette3);
+    }
+}
 `;
 
 export default defineComponent({
-    name: "app-root",
+    name: "DjBlogRoot",
     setup() {
-        addCSS('dj-blog-root', styles);
+        const carrier = ref<HTMLDivElement | null>(null);
+        setupTooltip({ carrier });
 
+        addCSS('dj-blog-root', styles);
         useHead({ title: "djblog Home" });
 
-        const tooltipCarrier = ref<HTMLDivElement | null>(null);
-        setupTooltip({ carrier: tooltipCarrier });
-
-        return () => <>
-            <div ref={tooltipCarrier} class="tooltip-carrier" />
-            <div class="supercontainer">
-                <div class="container">
-                    <DjTooltip tooltip="come in and find out...">
-                        <h1>dj blog</h1>
-                    </DjTooltip>
+        return () => (
+            <>
+                <div ref={carrier} class="tooltip-carrier" />
+                <div class="supercontainer">
+                    <div class="container">
+                        <nav>
+                            <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
+                                <RouterLink to={{ name: 'DjBlogMain' }}>
+                                    dj blog
+                                </RouterLink>
+                            </DjTooltip>
+                        </nav>
+                        <RouterView>
+                            {{
+                                default: ({ Component }: { Component: VNode }) => (Component &&
+                                    (
+                                        <Suspense>
+                                            {{
+                                                default: () => Component,
+                                                fallback: () => <div>Page loading...</div>,
+                                            }}
+                                        </Suspense>
+                                    )),
+                            }}
+                        </RouterView>
+                        <footer>
+                            <div class="bottom">
+                                <div>
+                                    <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
+                                </div>
+                            </div>
+                        </footer>
+                    </div>
                 </div>
-            </div>
-        </>;
+            </>
+        );
     },
 });