122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
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",
|
|
"alt text request",
|
|
"meepismonday",
|
|
];
|
|
|
|
// repeating makes it seem more random
|
|
export const PseudoRandom = ({
|
|
children,
|
|
repeat = 5,
|
|
}: {
|
|
children: ComponentChildren;
|
|
repeat?: number;
|
|
}) => (
|
|
<div
|
|
class="pseudo-random"
|
|
style={{
|
|
display: "flex",
|
|
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%",
|
|
display: "flex",
|
|
flex: 1,
|
|
cursor: "pointer",
|
|
}}
|
|
class="choice"
|
|
>
|
|
<summary
|
|
style={{ listStyle: "none", width: "100%", height: "100%" }}
|
|
></summary>
|
|
<div
|
|
class="result"
|
|
style={{
|
|
position: "absolute",
|
|
top: "1.5rem",
|
|
left: 0,
|
|
right: 0,
|
|
width: "100%",
|
|
height: "fit-content",
|
|
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>
|
|
<li>
|
|
this was generated on {new Date().toDateString()} at{" "}
|
|
{new Date().toTimeString()}
|
|
</li>
|
|
</ul>
|
|
</Main>
|
|
);
|