105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import {
|
|
Attributes,
|
|
ComponentChild,
|
|
ComponentChildren,
|
|
JSX,
|
|
VNode,
|
|
toChildArray,
|
|
} from "preact";
|
|
import { render } from "preact-render-to-string";
|
|
import { writeText } from "copy-paste";
|
|
|
|
export function Main({
|
|
children,
|
|
...attributes
|
|
}: {
|
|
children?: ComponentChildren;
|
|
attributes?: Attributes;
|
|
}) {
|
|
return (
|
|
<div {...attributes} id="main">
|
|
{...toChildArray(children)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const HCenter = ({
|
|
children,
|
|
...attrs
|
|
}: {
|
|
children: ComponentChildren;
|
|
attrs?: Attributes;
|
|
}) => (
|
|
<div
|
|
{...attrs}
|
|
class="hcenter"
|
|
style="display: flex; justify-content: center;"
|
|
>
|
|
{...toChildArray(children)}
|
|
</div>
|
|
);
|
|
|
|
export const eggbug_emotions = {
|
|
smiling: (
|
|
<img
|
|
class="eggbug"
|
|
src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
|
|
alt="eggbug, smiling"
|
|
/>
|
|
),
|
|
} as const;
|
|
|
|
export const EggbugImg = ({ type }: { type: keyof typeof eggbug_emotions }) =>
|
|
eggbug_emotions[type];
|
|
|
|
export const render_and_copy = (elem: VNode, pretty = false) => {
|
|
const rendered = render(elem, null, { pretty });
|
|
writeText(rendered);
|
|
console.log(rendered);
|
|
};
|
|
|
|
export const mk_class_wrapper =
|
|
(klass: string) =>
|
|
({ children }: { children?: ComponentChildren }) =>
|
|
<div class={klass}>{...toChildArray(children)}</div>;
|
|
|
|
export const slidify = (
|
|
Slide: (_: {
|
|
slide: JSX.Element;
|
|
next?: JSX.Element;
|
|
n: number;
|
|
max: number;
|
|
}) => JSX.Element,
|
|
slides: JSX.Element[],
|
|
n = 1,
|
|
max = slides.length
|
|
): JSX.Element =>
|
|
slides[0] ? (
|
|
<Slide
|
|
slide={slides[0]}
|
|
next={slidify(Slide, slides.slice(1), n + 1, max)}
|
|
n={n}
|
|
max={max}
|
|
/>
|
|
) : (
|
|
<></>
|
|
);
|
|
|
|
// https://cohost.org/lexyeevee/post/2107474-css-for-css-baby-3 (wayyy down at the bottom)
|
|
export const DisappearOnClick = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
className?: string;
|
|
children: ComponentChildren;
|
|
}) => (
|
|
<details
|
|
open
|
|
class={`disappearing ${className}`}
|
|
style="position: relative; cursor: pointer;"
|
|
>
|
|
<summary style="list-style: none; position: absolute; inset: 0;"></summary>
|
|
{children}
|
|
</details>
|
|
);
|