voltpad/routes/story.tsx

import { h } from "../jsx.ts";

import Story from "../templates/Story.tsx";
import watt from "../wattpad.ts";
import FourOhFour from "./404.tsx";

export default async (params: URLSearchParams) => {
    if (!params.get("id")) return <FourOhFour />;

    const story = await watt.getStory(params.get("id") as string);

    // chapters
    if (params.get("chapter")) {
        await story.chapters[Number(params.get("chapter") as string)].init();
        return (
            <Story story={story} stylepath="css/index.scss">
                <div style="margin-left: 1em; margin-right: 1em;">
                    {
                        story.chapters[Number(params.get("chapter") as string)]
                            .html
                    }
                </div>
                <div class="pagenav">
                    {Number(params.get("chapter") ?? 0) === 0 ? undefined : (
                        <a
                            href={(() => {
                                // total and utter jank
                                params.set(
                                    "chapter",
                                    (
                                        Number(params.get("chapter")) - 1
                                    ).toString()
                                );
                                const strParams = params.toString();
                                params.set(
                                    "chapter",
                                    (
                                        Number(params.get("chapter")) + 1
                                    ).toString()
                                );
                                return "/story?" + strParams.toString();
                            })()}
                        >
                            &lt;
                        </a>
                    )}
                    &nbsp;|&nbsp;
                    {story.chapters.length <
                    Number(params.get("chapter")) ? undefined : (
                        <a
                            href={(() => {
                                const tmpParams = params;
                                tmpParams.set(
                                    "chapter",
                                    (
                                        Number(params.get("chapter")) + 1
                                    ).toString()
                                );
                                return "/story?" + tmpParams.toString();
                            })()}
                        >
                            &gt;
                        </a>
                    )}
                </div>
            </Story>
        );
    }
    // metadata
    else {
        return (
            <Story story={story} stylepath="css/index.scss">
                <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
                    <div class="story">
                        <img src={story.storyJSON.cover} />
                        <div>
                            <h3>{story.name}</h3>
                            <p>{story.storyJSON.description}</p>
                        </div>
                    </div>
                    <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:row;margin-top: 0.5em;text-align:center;">
                        {story.tags
                            .map((v) => (
                                <div>
                                    <a
                                        href={`/search?query=${v}&type=tag`}
                                        style="background-color:darkgrey; border-radius: 0.3em; padding: 0.1em; margin-right: 0.5em;border: none;outline: none;text-decoration: none;"
                                    >
                                        #{v}
                                    </a>
                                    <div style="margin-top: 0.5em;" />
                                </div>
                            ))
                            .join("")}
                    </div>
                </div>
            </Story>
        );
    }
};