mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slightly more tractable skeleton?

Browse source
This commit is contained in:
mehbark 2023-07-11 14:19:46 -04:00
parent 1d7ac4d5a2
commit fe034be441
3 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
html/aa.jsx Normal file
View file

22
html/hot_people_who_eat_croissants_are_dangerous.tsx
View file

@ -7,10 +7,12 @@ const peopleify = (...people: string[]): string[] =>
const animation_length = (num_items: number): number => /*num_items / 5*/ 3; const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
const wheel_style = (num_items: number): string => const wheel_style = (num_items: number, width?: number): string =>
`transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length( `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
num_items num_items
)}s ease-in-out reverse none running spin;`; )}s ease-in-out reverse none running spin; ${
width ? `width: ${width * 100}%;` : ""
}`;
const get_delays = (...lengths: number[]): number[] => { const get_delays = (...lengths: number[]): number[] => {
let out = [0]; let out = [0];
@ -20,12 +22,15 @@ const get_delays = (...lengths: number[]): number[] => {
return out; return out;
}; };
const Wheel: Component = ({ items }, _) => ( const Wheel: Component = ({ items, width, classes }, _) => (
<details class="wheel"> <details class="wheel">
<summary> <summary>
{...items.map((i: string) => <div class="wheel-item">{i}</div>)} {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
</summary> </summary>
<div class="wheel-inner" style={wheel_style(items.length)}> <div
class={`wheel-inner ${classes ? classes.join(" ") : ""}`}
style={wheel_style(items.length, width)}
>
{/* <div class="wheel-item empty"></div> */} {/* <div class="wheel-item empty"></div> */}
{...items.map((item: string, i: number) => ( {...items.map((item: string, i: number) => (
<div <div
@ -42,11 +47,16 @@ function slices<T>(arr: T[]): T[][] {
return arr.map((_, i) => arr.slice(0, i)); return arr.map((_, i) => arr.slice(0, i));
} }
function weird_slices<T>(arr: T[]): T[][] {
return arr.map(item => [...arr.filter(t => t != item), item]);
}
const MultiWheel: Component = ({ items }, _) => ( const MultiWheel: Component = ({ items }, _) => (
<div class="multiwheel"> <div class="multiwheel">
{slices(items).map(items => ( {...weird_slices(items).map(items => (
<Wheel items={items} /> <Wheel items={items} width={1 / items.length} />
))} ))}
<Wheel items={items} classes={["invisible"]} />
</div> </div>
); );

11
html/html.ts
View file

@ -42,7 +42,7 @@ function expand_fragments(elem: Html): Html {
if (is_string(elem)) { if (is_string(elem)) {
return elem; return elem;
} else { } else {
const children = expand_fragments_in_list(elem.children); const children = expand_fragments_in_list(elem.children ?? []);
return { ...elem, children }; return { ...elem, children };
} }
} }
@ -56,14 +56,13 @@ const attr = (attrs: Attributes) => (elem: Html): Html => {
} }
}; };
const escape = (unsafe: string): string => { const escape = (unsafe: string): string =>
return unsafe unsafe
.replaceAll("&", "&amp;") .replaceAll("&", "&amp;")
.replaceAll("<", "&lt;") .replaceAll("<", "&lt;")
.replaceAll(">", "&gt;") .replaceAll(">", "&gt;")
.replaceAll('"', "&quot;") .replaceAll('"', "&quot;")
.replaceAll("'", "&#039;"); .replaceAll("'", "&#039;");
};
function render_attributes(attrs: Attributes): string { function render_attributes(attrs: Attributes): string {
return ( return (
@ -76,14 +75,14 @@ function render_attributes(attrs: Attributes): string {
} }
function indent(str: string, amount = 4, char = " "): string { function indent(str: string, amount = 4, char = " "): string {
const ind = char.repeat(4); const ind = char.repeat(amount);
return str return str
.split("\n") .split("\n")
.map((l) => ind + l) .map((l) => ind + l)
.join("\n"); .join("\n");
} }
// incomplete, obviously. // incomplete, obviously
const NON_SELF_CLOSING = ["div", "p", "a"]; const NON_SELF_CLOSING = ["div", "p", "a"];
function render_elem( function render_elem(