early user page

no way to see works atm

css/index.scss

@@ -18,6 +18,10 @@ img {
     max-width: 75%;
 }
 
+h3 {
+    margin: 0em;
+}
+
 .main {
     display: flex;
     flex-direction: column;
@@ -189,4 +193,21 @@ img {
 .detail-buttons {
     display: flex;
     flex-direction: row;
+}
+
+.userprofile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    div {
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        margin-left: 0.5em;
+        div {
+            flex-direction: column;
+        }
+    }
+    margin-top: 1em;
+    width: 75%;
 }

index.tsx

@@ -58,7 +58,7 @@ app.use(async (ctx, next) => {
     }
     let rizz;
     try {
-        rizz = await mod.default(ctx.request.url.searchParams);
+        rizz = await mod.default(ctx.request.url.searchParams, ctx);
     } catch (e) {
         console.error(e);
         mod = await import("./routes/500.tsx");

routes/404.tsx

@@ -1,12 +1,16 @@
 import { h } from "../jsx.ts";
+import { Context } from "../oak.ts";
 
 import Base from "../templates/Base.tsx";
 
-export default () => (
-    <Base title="Home" description="The homepage." stylepath="css/index.scss">
-        <div style="text-align:center;">
-            <h1>404</h1>
-            <p>Page not found.</p>
-        </div>
-    </Base>
-);
+export default (_: unknown, ctx: Context) => {
+    ctx.response.status = 404;
+    return (
+        <Base title="404" description="L bozo" stylepath="css/index.scss">
+            <div style="text-align:center;">
+                <h1>404</h1>
+                <p>Page not found.</p>
+            </div>
+        </Base>
+    );
+};

routes/story.tsx

@@ -1,4 +1,5 @@
 import { h } from "../jsx.ts";
+import { Context } from "../oak.ts";
 
 import Story from "../templates/Story.tsx";
 import watt from "../wattpad.ts";
@@ -9,8 +10,8 @@ import StoryButtonScript from "../scripts/Story.ts";
 import StoryProgressSavingScript from "../scripts/StoryProgressSaving.ts";
 import ScrollHeader from "../scripts/ScrollHeader.ts";
 
-export default async (params: URLSearchParams) => {
-    if (!params.get("id")) return <FourOhFour />;
+export default async (params: URLSearchParams, ctx: Context) => {
+    if (!params.get("id")) return FourOhFour(undefined, ctx);
 
     const story = await watt.getStory(params.get("id") as string, false);
 
@@ -102,7 +103,7 @@ export default async (params: URLSearchParams) => {
                                 <br />
                                 Author:{" "}
                                 <a
-                                    href={`https://wattpad.com/user/${story.storyJSON.user.name}`}
+                                    href={`/user?name=${story.storyJSON.user.name}`}
                                 >
                                     {story.storyJSON.user.fullname
                                         ? story.storyJSON.user.fullname

routes/user.tsx

@@ -0,0 +1,53 @@
+import { h } from "../jsx.ts";
+import watt, { watt as originalWatt } from "../wattpad.ts";
+import { User } from "../wattpad.ts";
+import { Context } from "../oak.ts";
+
+import Base from "../templates/Base.tsx";
+
+import FourOhFour from "./404.tsx";
+
+export default async (params: URLSearchParams, ctx: Context) => {
+    const name = params.get("name");
+    if (!name) {
+        throw "deez";
+    }
+
+    const user = new User(originalWatt.session, name);
+    try {
+        await user.init();
+    } catch {
+        return FourOhFour(undefined, ctx);
+    }
+
+    return (
+        <Base
+            title={user.displayName as string}
+            description={user.description as string}
+            stylepath="css/index.scss"
+        >
+            <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
+                <div class="userprofile">
+                    <div>
+                        <img id="storycover" src={user.userJSON.avatar} />
+                        <div>
+                            <h3 id="storyname">
+                                {user.displayName === ""
+                                    ? user.username
+                                    : user.displayName}
+                            </h3>
+                            {user.displayName === ""
+                                ? undefined
+                                : user.username}
+                        </div>
+                    </div>
+                    <p>
+                        {user.description
+                            ? user.description.replaceAll("\n", "<br>")
+                            : undefined}
+                    </p>
+                </div>
+            </div>
+        </Base>
+    );
+};

wattpad.ts

@@ -30,6 +30,7 @@ setInterval(() => {
 export { watt };
 
 export default {
+    getUser: watt.getUser,
     search: watt.search,
     async getStory(
         id: string,
@@ -43,7 +44,7 @@ export default {
             };
             await cache[id].story.init();
             cache[id].story.storyJSON.description = cache[id].story.storyJSON
-                .description.replace(
+                .description.replaceAll(
                     "\n",
                     "<br>",
                 );