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

122 lines
3.3 KiB
TypeScript
Raw Normal View History

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>
);
2023-07-24 16:17:00 -04:00
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={{
2023-07-23 01:13:16 -04:00
display: "flex",
2023-07-22 19:51:31 -04:00
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%",
2023-07-23 01:13:16 -04:00
display: "flex",
flex: 1,
cursor: "pointer",
}}
class="choice"
>
<summary
style={{ listStyle: "none", width: "100%", height: "100%" }}
></summary>
2023-07-22 19:51:31 -04:00
<div
class="result"
style={{
position: "absolute",
top: "1.5rem",
left: 0,
right: 0,
width: "100%",
2023-07-24 16:17:00 -04:00
height: "fit-content",
2023-07-22 19:51:31 -04:00
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>
2023-07-22 19:51:31 -04:00
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>
2023-07-24 16:17:00 -04:00
<li>
this was generated on {new Date().toDateString()} at{" "}
{new Date().toTimeString()}
</li>
2023-07-22 19:51:31 -04:00
</ul>
</Main>
);