117 lines
3 KiB
TypeScript
117 lines
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`.split("\n");
|
|
|
|
// 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%",
|
|
height: "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",
|
|
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>
|
|
);
|