yet another likely impossible idea

html/common.tsx

@@ -1,4 +1,11 @@
-import { Attributes, ComponentChildren, VNode, toChildArray } from "preact";
+import {
+    Attributes,
+    ComponentChild,
+    ComponentChildren,
+    JSX,
+    VNode,
+    toChildArray,
+} from "preact";
 import { render } from "preact-render-to-string";
 import { writeText } from "copy-paste";
 
@@ -55,3 +62,43 @@ 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>
+);

html/lc.tsx

@@ -0,0 +1,91 @@
+import { JSX } from "preact";
+import { DisappearOnClick, Main, render_and_copy, slidify } from "./common.tsx";
+
+const Slide = ({
+    slide,
+    next,
+    n,
+    max,
+}: {
+    slide: JSX.Element;
+    next?: JSX.Element;
+    n: number;
+    max: number;
+}) =>
+    next ? (
+        <div class="slide">
+            <details>
+                <summary>
+                    <div class="slide-content">{slide}</div>
+                    <div class="slide-status">
+                        {/* prob going to change this back to just n/max */}
+                        {n == max ? (
+                            <span class="done">
+                                thank you so much for reading!
+                            </span>
+                        ) : (
+                            <span class="position">
+                                {n}/{max}
+                            </span>
+                        )}
+                    </div>
+                </summary>
+                <div class="next">{next}</div>
+            </details>
+        </div>
+    ) : (
+        <div class="slide-content">{slide}</div>
+    );
+
+// let 'em click to get rid of stuff
+// show that the names don't matter, their just symbols etc
+// (use homestuck pictures)
+
+render_and_copy(
+    <Main>
+        {slidify(Slide, [
+            <>homestuck</>,
+            <>is cool</>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+            <>
+                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
+                bla
+            </>,
+        ])}
+    </Main>
+);

html/you-are-the-turing-machine.tsx

@@ -0,0 +1 @@
+// binary