cohost/html/random-tag-of-the-day.tsx

import { ComponentChildren, toChildArray } from "preact";
import { Main, render_and_copy, shuffle, n_of } from "./common.tsx";

const Tag = ({ tag }: { tag: string }) => (
    <a href={`https://cohost.org/rc/tagged/${tag}`}>{`#${tag}`}</a>
);

const tags = `\
CSS Crimes
borgesposting
NEISVoid
circling the square
retrocomputing
cats of cohost
coho film club
cohost crafts
the cohost plural feed
cohost summer mixtape
trans trucks
The Cohost Local Feed (Minnesota)
cohost draws
tv head
make up a mech pilot
frasierposting
cohost utilities`.split("\n");

// repeating makes it seem more random
export const PseudoRandom = ({
    children,
    repeat = 5,
}: {
    children: ComponentChildren;
    repeat?: number;
}) => (
    <div
        class="pseudo-random"
        style={{
            display: "grid",
            gridTemplateColumns: `repeat(${
                toChildArray(children).length * repeat
            }, 1fr)`,
            backgroundColor: "#008282",
            borderRadius: "0.5rem",
            height: "3rem",
        }}
    >
        {...n_of(repeat, toChildArray(children))
            .map(shuffle)
            .flat()
            .map(child => <Choice>{child}</Choice>)}
    </div>
);

/// width is 0-1
export const Choice = ({ children }: { children: ComponentChildren }) => (
    <details
        style={{
            width: "100%",
            height: "100%",
            display: "inline-block",
            cursor: "pointer",
        }}
        class="choice"
    >
        <summary
            style={{ listStyle: "none", width: "100%", height: "100%" }}
        ></summary>
        <div
            class="result"
            style={{
                position: "absolute",
                top: "1.5rem",
                bottom: 0,
                left: 0,
                right: 0,
                width: "100%",
                height: "100%",
                display: "flex",
                alignContent: "center",
                justifyContent: "center",
                verticalAlign: "center",
                color: "white",
            }}
        >
            {children}
        </div>
    </details>
);

render_and_copy(
    <Main>
        <PseudoRandom>{...tags.map(tag => <Tag tag={tag} />)}</PseudoRandom>
        Some notes:
        <ul>
            <li>all tags are from @TagOfTheDay</li>
            <li>i'll do my best to keep this up to date</li>
            <ul>
                <li>
                    it would be helpful if you could pester me in the comments
                    when this tag list is out of date (most recent first): (also
                    you can just like. use this tag list)
                </li>
                <ul>
                    {...tags.toReversed().map(tag => (
                        <li>
                            <Tag tag={tag} />
                        </li>
                    ))}
                </ul>
            </ul>
            <li>
                if there's enough interest, i'll hack together a little
                generator for these (it would be easy to make one for tags, but
                one for other stuff would require a bit more work)
            </li>
        </ul>
    </Main>
);