cohost/html/nested-cws.tsx

import { JSX } from "preact/jsx-runtime";
import { render_and_copy } from "./common.tsx";

// TODO: make more generally usable
export const CW = ({ cws, end }: { cws: string[][]; end: JSX.Element }) =>
    cws.length == 0 ? (
        <div style="position:absolute;inset:0;background:white">{end}</div>
    ) : (
        <details style="position:absolute;inset:0;background:white">
            <summary style="list-style:none;padding:0.25rem">
                <div style="display:flex;flex-direction:column;align-items:center;gap:0.75rem;margin:0.75rem;">
                    <div style="background-color:rgb(var(--color-notWhite));border:1px solid rgb(var(--color-cherry));border-radius:0.5rem;box-sizing:border-box;padding:0.75rem;gap:0.75rem;align-self:stretch;display:flex;flex-direction:row;align-items:center">
                        <img
                            src="https://static.pyrope.net/warning-shield.png"
                            aria-hidden="true"
                            style="margin:0;display:block"
                        />
                        {/* color is omitted here and done elsewhere. note above TODO! */}
                        <p style="margin:0;line-height:24px">
                            This post has content warnings for:{" "}
                            <b>
                                {cws[0].join(", ") +
                                    (cws[0].length == 0 ? "" : ".")}
                            </b>
                        </p>
                    </div>
                    <div style="cursor:pointer;background-color:rgb(var(--color-cherry));border-radius:0.5rem;color:rgb(var(--color-notWhite));padding:0.75rem;line-height:1;letter-spacing:0.05em;user-select:none">
                        show post
                    </div>
                </div>
            </summary>
            <CW cws={cws.slice(1)} end={end} />
        </details>
    );

export const ALL_STAR_LYRICS = `
Somebody once told me the world is gonna roll me
I ain't the sharpest tool in the shed
She was looking kind of dumb with her finger and her thumb
In the shape of an "L" on her forehead
Well, the years start comin' and they don't stop comin'
Fed to the rules and I hit the ground runnin'
Didn't make sense not to live for fun
Your brain gets smart but your head gets dumb
So much to do, so much to see
So what's wrong with taking the backstreets?
You'll never know if you don't go (W-w-wacko)
You'll never shine if you don't glow
Hey now, you're an all star
Get your game on, go play
Hey now, you're a rock star
Get the show on, get paid
(And all that glitters is gold)
Only shootin' stars break the mold
It's a cool place, and they say it gets colder
You're bundled up now, wait 'til you get older
But the meteor men beg to differ
Judging by the hole in the satellite picture
The ice we skate is gettin' pretty thin
The water's gettin' warm so you might as well swim
My world's on fire, how 'bout yours?
That's the way I like it and I'll never get bored
Hey now, you're an all star
Get your game on, go play
Hey now, you're a rock star
Get the show on, get paid
(All that glitters is gold)
Only shootin' stars break the mold
Go for the moon (W-w-wacko, w-w-wacko)
Go for the moon (W-w-wacko, w-w-wacko)
Go for the moon
Go for the moon
Hey now, you're an all star
Get your game on, go play
Hey now, you're a rock star
Get the show on, get paid
(And all that glitters is gold)
Only shooting stars…
Somebody once asked, "Could I spare some change for gas?
I need to get myself away from this place"
I said, "Yep, what a concept
I could use a little fuel myself and we could all use a little change"
Well, the years start comin' and they don't stop comin'
Fed to the rules and I hit the ground runnin'
Didn't make sense not to live for fun
Your brain gets smart but your head gets dumb
So much to do, so much to see
So what's wrong with taking the backstreets?
You'll never know if you don't go (Go!)
You'll never shine if you don't glow
Hey now, you're an all star
Get your game on, go play
Hey now, you're a rock star
Get the show on, get paid
(And all that glitters is gold)
Only shootin' stars break the mold
(And all that glitters is gold)
Only shootin' stars break the mold
`.trim();

render_and_copy(
    <div style="width:100%;height:15rem;color:rgb(var(--color-cherry))">
        <CW
            cws={[
                "long post",
                "deep post",
                "broad post",
                "content",
                "warnings",
                "content warnings",
                "content&warnings",
                "warnings&content",
                "content&content warnings",
                "warnings&content warnings",
                "content&warnings&content warnings",
                "the first 100 or so words of smash mouth's all star",
                ...ALL_STAR_LYRICS.split(/\s+/).slice(0, 100),
                "i wasn't kidding",
                "but i'll spare you the rest",
                "opinion",
                "i do like the song though it's solid and fun",
                "further developing opinion",
                "mainly fun",
                "slightly tmi&showering",
                "i sang it like every time i showered for months and months",
                "eh what the heck i'll just",
                "opinion&reiterated opinion&on homestuck&beyond canon",
                "today has been so awesome",
                "i didn't make a great homestuck post&or really any homestuck post&but the homestuck^2 (is it even that still???) upd8 was fantastic",
                "i see it as a microcosm as my attitude to the new team as a whole",
                'at first: "holy crap! new and scary" (hussie really is fantastic). speaking of,',
                "shill&being annoying for a joke",
                "read psycholonials it's free come on do it do it do it",
                "but more and more i've been warming up to them as they figure things out",
                "and&after catching most of the three hour 413 stream",
                "yeah! they're fantastic. i'm so happy for them&and i'm just happy in general",
                "it's great to know that the future of homestuck is in good hands",
                "quote&quote that i already posted&edited quote&portion of quote",
                "I can’t imagine it’s going to take us less than three years of regular updates, but it could end up stretching longer",
                "keyspam",
                "aslkfjlk;asdjkdslkjflk;asd  lk;fsdjl  fjalksd lk alsdk f laksf  lkjsdlfk lasdkf lkjsdlkjflkjdljk",
                "it makes me so so happy",
                "bodily fluids&tearducts",
                "i keep almost getting watery eyes! it's ridiculous!",
                "keyspam",
                "i'm so happy aslkfj",
                "anyway&back to nonsense",
                "watch how elegantly and fluidly i mix actual content warning type things with just word typing",
                "truly, i am a master of my craft",
                "okay how big is this now (kb-wise)",
                "133.82",
                "very reasonable",
                "i'll have to yap much more...",
                "nothing",
                "",
                "i'm on page 4819 of my reread btw",
                "was originally planning to finish it by 413 but i was so slow",
                "so i'm deciding to just savor it",
                "it's been very, very bursty progress",
                "but i really do thoroughly enjoy it",
                "i'm a homestuck! i don't know why i feel the need to re-",
                "oh right it's homestuck day i spent three hours in an official homestuck stream this is kind of what's on mind",
                "that's understandable i guess",
                "happy 413&btw&i don't think i said that yet",
                "i really need to finish this up",
                "i know this is one of those Bad Posts where quantity (fails to) make quality",
                "but i am getting dry eyes",
                "too much homestuck and other stuff!",
                "also i need to get this out by the end of 413 in my timezone",
                "which is in like 14 minutes",
                "don't question the logic this matters!",
                "btw, the kbs went down because i factored out the cherry text color",
                "HOLY CRAP THAT IS SUCH A TEREZI THING",
                "FJLKSDLKFJSLDKJFLKJDFLKJSDFLKJ",
                "well&they went up&but they went down measuring from that point",
                "well&i didn't actually measure from that point",
                "okay whatever uhhh",
                "i'm running out of time",
                "and i have to admit that the ending is pretty lame",
                "so i'm trying to (quickly) think of a way to make these last few more fun",
                "opinion",
                "terezi is great!",
                "realization",
                "aw crap, you probably already knew i thought that",
                "curse my plentiful past public praise!",
                "i'm glad being funny is something the new team wants to do and can do",
                "homestuck was chock-full of great jokes",
                "homestuck^2 is great i'm happy bla bla new team bla bla",
                "okay uh",
                "eggbug",
            ].map(s => s.split("&"))}
            end={
                <div>
                    <p>
                        HAPPY 413! i barely made it in time IT COUNTS it COUNTE
                        ! <a href="https://413.gay">homestuck</a>
                    </p>
                    <p>
                        uh, you want more? fine, take{" "}
                        <a href="https://pyrope.net/mcai">
                            discord server that i made so i could continue
                            saying "man, computers are incredible" every day
                        </a>
                        , you're clearly, eh, dedicated
                    </p>
                    <p>
                        (if it wasn't obvious, this is kinda lame because i was
                        hoping you'd give up by now)
                    </p>
                </div>
            }
        />
    </div>
);