cohost/html/read-more.tsx

import { render_and_copy } from "./common.tsx";

const URL =
    "https://dn790009.ca.archive.org/0/items/thestrangecaseof00043gut/43.txt";

const text = (await fetch(URL).then(r => r.text())).replaceAll("\r", "");
const chapters: [string, string[]][] = text
    .replaceAll("`", "‘")
    .replaceAll("'", "’")
    .replaceAll("--", "—")
    .split("\n\n\n\n\n")
    .slice(1)
    .map(c => c.split("\n\n\n"))
    .filter(c => c.length == 2)
    .map(c => [c[0], c[1].split("\n\n")]);
const make_chapter_id = (title: string) =>
    title
        .toLowerCase()
        .split(" ")
        .map(w => w.split(/[^a-z]/).join(""))
        .join("-");

console.log(chapters);
render_and_copy(
    <>
        <div
            class="main"
            style='font-family: "Latin Modern Math", "Computer Modern", "Helvetica", serif;font-weight:bold'
        >
            <a
                href="https://dn790009.ca.archive.org/0/items/thestrangecaseof00043gut/43.txt"
                style="display:block;margin:0 auto;width:fit-content;font-size:1.35rem;font-weight:bold"
            >
                massive thanks to project gutenberg for the book
            </a>
            <br />
            <a
                href="#user-content-mehbark-hekyll-end"
                id="mehbark-hekyll-jump-to-end"
                style="display:block;margin:0 auto;width:fit-content;font-size:1.35rem;font-weight:bold"
            >
                JUMP TO END
            </a>
            <br />
            <br />
            <h3>Table of Contents (clickable!)</h3>
            <ol>
                {...chapters.map(([title, _]) => (
                    <li>
                        <a
                            href={`#user-content-chapter-${make_chapter_id(
                                title
                            )}`}
                            style="text-decoration:none"
                        >
                            {title}
                        </a>
                    </li>
                ))}
            </ol>
            <br />
            <br />
            {...chapters.map(([title, content]) => (
                <>
                    <a
                        href={`#user-content-chapter-${make_chapter_id(title)}`}
                        id={`chapter-${make_chapter_id(title)}`}
                        style="text-decoration:none;font-weight:600;font-size:1.25em"
                    >
                        {title}
                    </a>
                    {...content.map(p => <p>{p}</p>)}
                </>
            ))}
            <a
                href="#user-content-mehbark-hekyll-jump-to-end"
                id="mehbark-hekyll-end"
                title="this is also a jump to top"
                style="margin:0 auto;width:fit-content;font-size:1.75em;font-weight:bold;display:block;text-decoration:none"
            >
                THE END
            </a>
        </div>
        {
            "\n\n---\n\nsorry for abusing the read more, but it's necessary to make saving your place more convenient"
        }
    </>
);