Add logo and welcome page when not logged in

fresh.gen.ts

@@ -20,6 +20,7 @@ import * as $LoginFrame from "./islands/LoginFrame.tsx";
 import * as $Modal from "./islands/Modal.tsx";
 import * as $PostList from "./islands/PostList.tsx";
 import * as $TopBar from "./islands/TopBar.tsx";
+import * as $WelcomeFrame from "./islands/WelcomeFrame.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -44,6 +45,7 @@ const manifest = {
     "./islands/Modal.tsx": $Modal,
     "./islands/PostList.tsx": $PostList,
     "./islands/TopBar.tsx": $TopBar,
+    "./islands/WelcomeFrame.tsx": $WelcomeFrame,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

islands/WelcomeFrame.tsx

@@ -0,0 +1,31 @@
+import { asset } from "$fresh/runtime.ts";
+
+export default function WelcomeFrame() {
+  const goLogin = () => {
+    location.href = "/login";
+  };
+
+  const goRegister = () => {
+    location.href = "/register";
+  };
+
+  return (
+    <div className="pd-welcome-frame">
+      <div className="pd-welcome-title">
+        <img
+          className="pd-logo"
+          src={asset("/postdown.png")}
+          alt="Postdown"
+        />
+        <h1>Postdown</h1>
+      </div>
+      <span className="pd-welcome-intro">
+        A web-based, shareable, self-hosted Markdown editor built with deno
+      </span>
+      <div className="pd-welcome-actions">
+        <button onClick={goLogin}>Login</button>
+        <button onClick={goRegister}>Register</button>
+      </div>
+    </div>
+  );
+}

routes/index.tsx

@@ -4,6 +4,7 @@ import { checkToken } from "utils/server.ts";
 import { find } from "utils/db.ts";
 import HomeBar from "../islands/HomeBar.tsx";
 import PostList from "../islands/PostList.tsx";
+import WelcomeFrame from "../islands/WelcomeFrame.tsx";
 
 interface HomeProps {
   name: string;
@@ -39,12 +40,9 @@ export const handler: Handlers<HomeProps> = {
         });
       }
     }
-    // Redirect to login page if not valid
-    const headers = new Headers();
-    headers.set("location", "/login");
-    return new Response(null, {
-      status: 303, // See Other
-      headers,
+    return ctx.render({
+      name: "",
+      list: [],
     });
   },
 };
@@ -56,8 +54,14 @@ export default function Home(props: PageProps<HomeProps>) {
         <title>Home</title>
       </Head>
       <div className="pd-page">
-        <HomeBar name={props.data.name} />
-        <PostList posts={props.data.list} />
+        {props.data.name
+          ? (
+            <>
+              <HomeBar name={props.data.name} />
+              <PostList posts={props.data.list} />
+            </>
+          )
+          : <WelcomeFrame />}
       </div>
     </>
   );

static/global.css

@@ -169,6 +169,38 @@ button {
 }
 /* Modal styles end */
 
+/* Welcome frame styles start */
+.pd-welcome-frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.pd-welcome-frame .pd-welcome-title {
+  display: flex;
+  align-items: center;
+}
+
+.pd-welcome-frame .pd-welcome-title .pd-logo {
+  width: 128px;
+  height: 128px;
+  margin-right: 8px;
+}
+
+.pd-welcome-frame .pd-welcome-intro {
+  font-size: 1.25rem;
+  margin-bottom: 32px;
+}
+
+.pd-welcome-frame .pd-welcome-actions button {
+  width: 128px;
+  margin: 0 8px;
+}
+/* Welcome frame styles end */
+
 /* Login frame styles start */
 .pd-login-frame {
   width: 375px;