feat: add homepage & auth

renderer/+config.ts

@@ -2,7 +2,7 @@ import type { Config } from "vike/types";
 
 export default {
   clientRouting: true,
-  passToClient: ["routeParams", "cookies"],
+  passToClient: ["routeParams", "cookies", "user"],
   meta: {
     title: {
       env: { server: true, client: true },
@@ -10,6 +10,9 @@ export default {
     description: {
       env: { server: true },
     },
+    Layout: {
+      env: { server: true, client: true },
+    },
   },
   hydrationCanBeAborted: true,
 } satisfies Config;

renderer/+onRenderClient.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from "react-dom/client";
 import { getPageMetadata } from "./utils";
 import type { OnRenderClientAsync } from "vike/types";
-import Layout from "./layout";
+import Layout from "./app";
 
 let root: ReactDOM.Root;
 

renderer/+onRenderHtml.tsx

@@ -2,7 +2,7 @@ import ReactDOMServer from "react-dom/server";
 import { escapeInject, dangerouslySkipEscape } from "vike/server";
 import type { OnRenderHtmlAsync } from "vike/types";
 import { getPageMetadata } from "./utils";
-import Layout from "./layout";
+import App from "./app";
 
 export const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext
@@ -15,9 +15,9 @@ export const onRenderHtml: OnRenderHtmlAsync = async (
     );
 
   const page = ReactDOMServer.renderToString(
-    <Layout pageContext={pageContext}>
+    <App pageContext={pageContext}>
       <Page />
-    </Layout>
+    </App>
   );
 
   // See https://vike.dev/head

renderer/app.tsx

@@ -5,19 +5,23 @@ import Providers from "./providers";
 import "./globals.css";
 import "nprogress/nprogress.css";
 
-type LayoutProps = {
+type AppProps = {
   children: React.ReactNode;
   pageContext: PageContext;
 };
 
-const Layout = ({ children, pageContext }: LayoutProps) => {
+const App = ({ children, pageContext }: AppProps) => {
+  const { Layout } = pageContext.config;
+
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>
-        <Providers>{children}</Providers>
+        <Providers>
+          {Layout ? <Layout children={children} /> : children}
+        </Providers>
       </PageContextProvider>
     </React.StrictMode>
   );
 };
 
-export default Layout;
+export default App;

renderer/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply bg-slate-900 text-white;
+  @apply bg-background text-white;
 }
 
 .cm-theme {

renderer/link.tsx

@@ -1,19 +1,23 @@
-import { ComponentProps } from "react";
+import React from "react";
 import { usePageContext } from "./context";
+import { Slot } from "@radix-ui/react-slot";
 
-const Link = (props: ComponentProps<"a">) => {
+type LinkProps = {
+  href?: string;
+  className?: string;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+const Link = ({ asChild, href, ...props }: LinkProps) => {
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
-  const { href } = props;
+  const Comp = asChild ? Slot : "a";
 
   const isActive =
     href === "/" ? urlPathname === href : urlPathname.startsWith(href!);
 
-  const className = [props.className, isActive && "is-active"]
-    .filter(Boolean)
-    .join(" ");
-
-  return <a {...props} className={className} />;
+  return <Comp data-active={isActive || undefined} href={href} {...props} />;
 };
 
 export default Link;

renderer/types.ts

@@ -1,4 +1,5 @@
-import type { Request } from "express";
+import type { Request, Response } from "express";
+import type { UserSchema } from "~/server/db/schema/user";
 
 declare global {
   namespace Vike {
@@ -11,10 +12,14 @@ declare global {
       config: {
         title?: string;
         description?: string;
+        Layout?: (props: { children: React.ReactNode }) => React.ReactElement;
       };
       abortReason?: string;
+
       req: Request;
+      res: Response;
       cookies: Record<string, string>;
+      user?: UserSchema | null;
     }
   }
 }