voltpad/routes/story.tsx

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

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

import Script from "../components/Script.tsx";
import StoryButtonScript from "../scripts/Story.ts";
import StoryProgressSavingScript from "../scripts/StoryProgressSaving.ts";
import ScrollHeader from "../scripts/ScrollHeader.ts";

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);

    // chapters
    if (params.get("chapter")) {
        await story.chapters[Number(params.get("chapter") as string)].init();
        return (
            <Story
                story={story}
                stylepath="css/index.scss"
                currentHref={"/story?" + params.toString()}
            >
                <Script function={StoryProgressSavingScript} />
                <Script function={ScrollHeader} />
                <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")) + 1 ? 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"
                currentHref={"/story?" + params.toString()}
            >
                <Script function={StoryProgressSavingScript} />
                <Script function={StoryButtonScript} />
                <Script function={ScrollHeader} />
                <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
                    <div class="story">
                        <img id="storycover" src={story.storyJSON.cover} />
                        <div>
                            <h3 id="storyname">{story.name}</h3>
                            <p>{story.storyJSON.description}</p>
                            <p>
                                Original URL:{" "}
                                <a href={story.storyJSON.url}>
                                    {decodeURI(story.storyJSON.url)}
                                </a>
                                <br />
                                Author:{" "}
                                <a
                                    href={`/user?name=${story.storyJSON.user.name}`}
                                >
                                    {story.storyJSON.user.fullname
                                        ? story.storyJSON.user.fullname
                                        : story.storyJSON.user.name}
                                </a>
                                <br />©
                                {" " +
                                    (() => {
                                        switch (story.storyJSON.copyright) {
                                            case 1:
                                                return "All Rights Reserved";
                                            case 2:
                                                return "Public Domain";
                                            case 3:
                                                return "CC-BY";
                                            case 4:
                                                return "CC-BY-NC";
                                            case 5:
                                                return "CC-BY-NC-ND";
                                            case 6:
                                                return "CC-BY-NC-SA";
                                            case 7:
                                                return "CC-BY-SA";
                                            case 8:
                                                return "CC-BY-ND";
                                        }
                                    })()}
                            </p>
                            <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:row;text-align:center; margin-left: 0;">
                                {story.tags
                                    .map((v) => (
                                        <div>
                                            <a
                                                href={`/search?query=${v}&type=tag`}
                                                style="color: black !important; background-color:darkgrey; border-radius: 0.3em; padding: 0.2em; border: none;outline: none;text-decoration: none; margin-bottom: 0.5em;"
                                            >
                                                #{v}
                                            </a>
                                        </div>
                                    ))
                                    .join("")}
                            </div>
                        </div>
                    </div>
                    <div id="detail-buttons" class="detail-buttons">
                        <button id="favorite" class="favorite-story-button">
                            Favorite
                        </button>
                        {/* Crazy levels of jank */}
                        <form action={"/feed"}>
                            <input type="hidden" name="feedtype" value="rss" />
                            <input type="hidden" name="id" value={story.id} />
                            <button
                                type="submit"
                                id="feed"
                                class="favorite-story-button"
                            >
                                Subscribe to RSS feed
                            </button>
                        </form>
                    </div>
                </div>
            </Story>
        );
    }
};