slice circle: something

deno.lock

@@ -117,6 +117,8 @@
     "https://esm.sh/preact@10.16.0/jsx-runtime?dts": "9e67b64a5b48299c77d30bffc213735fdcf4b3b5d4ad8ff8d4136f246de5fa34",
     "https://esm.sh/stable/preact@10.16.0/denonext/jsx-runtime.js": "64770c709df77c4b64b79f84a4abf6189fd0c3ea461121870eca0cf2bcca87b0",
     "https://esm.sh/stable/preact@10.16.0/denonext/preact.mjs": "01dc8bdf124926c611c0711081b9c162cf2735cccad7c2bc9914766f633ddb1d",
-    "https://esm.sh/v128/preact-render-to-string@5.2.0/X-ZS9wcmVhY3Q/denonext/preact-render-to-string.mjs": "b2b771d82125460bd3e5cdf20ebd662a08c4c61e34b174cd11db929dd5883966"
+    "https://esm.sh/stable/preact@10.16.0/denonext/src.js": "a95281269ac2665427e647cde8628d5cd6eef13bb6bea381c3167a78fa922316",
+    "https://esm.sh/v128/preact-render-to-string@5.2.0/X-ZS9wcmVhY3Q/denonext/preact-render-to-string.mjs": "b2b771d82125460bd3e5cdf20ebd662a08c4c61e34b174cd11db929dd5883966",
+    "https://esm.sh/v128/preact@10.16.0/src/index.js": "3bafc9400950c38b80163dcbcd4538a54ef158a83f448517f34324c5685f1569"
   }
 }

html/common.tsx

@@ -14,6 +14,7 @@ export function Main({
     ...attributes
 }: {
     children?: ComponentChildren;
+    style?: JSX.CSSProperties;
     attributes?: JSX.HTMLAttributes;
 }) {
     return (

html/image-macro.tsx

@@ -0,0 +1,24 @@
+import { render_and_copy } from "./common.tsx";
+// this is a really bad and boring idea. pass.
+
+render_and_copy(
+    <div
+        style={{
+            display: "grid",
+            gridTemplateColumns: "1fr",
+            gridTemplateRows: "1fr 3fr 1fr",
+        }}
+    >
+        <img
+            src="https://static.pyrope.net/latula.webp"
+            style={{ display: "grid", gridRow: "1 / 3" }}
+        />
+        <p style={{ fontFamily: "Impact", display: "grid", gridRow: 1 }}>
+            ACCORDING TO MY UNDERSTANDING OF THE DEFINITION OF AN IMAGE MACRO
+            THIS
+        </p>
+        <p style={{ fontFamily: "Impact", display: "grid", gridRow: 3 }}>
+            THIS IS AN IMAGE MACRO
+        </p>
+    </div>
+);

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

@@ -33,11 +33,29 @@ const tags = [
     "journaling",
     "digital collage",
     "gamedev",
+    "manga recs",
+    "doll posting",
+    "comics on cohost",
+    "he is only carbon now",
+    "trickcircle",
+    "Cohost Mixtape Club",
+    "mashup",
+    "girlposting",
+    "jewhost",
+    "musicians on cohost",
+    "ooak",
+    "The Cohost Gimmick Feed",
+    "gardening",
+    "dogs of cohost",
+    "cheeseposting",
+    "love",
+    "little guy respect zone",
+    "gunpla",
 ];
 
-const default_repeat = 4;
+const default_repeat = 2;
 
-// repeating makes it seem more random
+// repeating makes it seem more random, but adds a lot of weight to an increasingly heavy post
 export const PseudoRandom = ({
     children,
     repeat = default_repeat,
@@ -133,6 +151,9 @@ render_and_copy(
                 generator for these (it would be easy to make one for tags, but
                 one for other stuff would require a bit more work)
             </li>
+            <li>
+                a lot of these tags are bad tags. not their content, but, like, the actual tag. this drives me up the wall but i know there's nothing i can do. i really wish everyone cared about good tagging as much as i do, but i know that will never happen. it's frustrating that only boorus seem to have good tags (sometimes) (implications and stuff help)
+            </li>
             <li>
                 this was generated on {new Date().toDateString()} at{" "}
                 {new Date().toTimeString()}

html/slice-circle-spinny-cursor.tsx

@@ -0,0 +1,53 @@
+import { JSX } from "preact/jsx-runtime";
+import { Main, render_and_copy } from "./common.tsx";
+import { ComponentChild, ComponentChildren, toChildArray } from "preact";
+
+const Circle = ({
+    style,
+    children,
+}: {
+    style?: JSX.CSSProperties;
+    children?: ComponentChildren;
+}) => {
+    let children_: ComponentChild[] = toChildArray(children);
+    if (children_.length > 0) {
+        const turn_per_child = 1 / children_.length;
+        children_ = children_.map((c, i) => (
+            <div
+                style={{
+                    transform: `translate(50%, 50%) rotate(${
+                        turn_per_child * i
+                    }turn)`,
+                    width: "fit-content",
+                }}
+            >
+                {c}
+            </div>
+        ));
+    }
+
+    return (
+        <div
+            style={{
+                aspectRatio: "1",
+                borderRadius: "413413px",
+                marginLeft: "auto",
+                marginRight: "auto",
+                ...style,
+            }}
+            children={children_}
+        ></div>
+    );
+};
+
+render_and_copy(
+    <Main style={{ width: "100%", aspectRatio: "1" }}>
+        <Circle style={{ backgroundColor: "red" }}>
+            <div>hello</div>
+            <div>hello</div>
+            <div>hello</div>
+            <div>hello</div>
+            <div>hello</div>
+        </Circle>
+    </Main>
+);

times-new-bastard/index.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Times New Bastard</title>
+        <script>
+            function chunk(n) {
+                let i = 0;
+                let out = [];
+                while (i < this.length) {
+                    out.push(this.slice(i, i + n));
+                    i += n;
+                }
+                out.push(this.slice(i, i + n));
+                return out.filter(xs => xs.length > 0);
+            }
+
+            Object.defineProperty(Array.prototype, "chunk", {
+                value: chunk,
+            });
+
+            Object.defineProperty(String.prototype, "chunk", {
+                value: chunk,
+            });
+
+            // https://cohost.org/doq/post/2442981-span-style-font
+            // font-family: "Times New Roman", "Liberation Serif", serif;
+            //font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif;
+            function main() {
+                const input = document.getElementById("input");
+                const output = document.getElementById("output");
+                const preview = document.getElementById("preview");
+                const serif_font = document.getElementById("serif-font");
+                const sans_serif_font =
+                    document.getElementById("sans-serif-font");
+
+                function serif(str) {
+                    const span = document.createElement("span");
+                    span.style = serif_font.value.split("\n").join("");
+                    span.innerText = str;
+                    return span;
+                }
+
+                function sans_serif(str) {
+                    const span = document.createElement("span");
+                    span.style = sans_serif_font.value.split("\n").join("");
+                    span.innerText = str;
+                    return span;
+                }
+
+                // good news! https://github.com/weiweihuanghuang/Times-New-Bastard seems to be based on _characters_, not letters
+                function update() {
+                    const text = input.value;
+                    const chunks = text.chunk(7);
+                    const magic = chunks.flatMap(ch => [
+                        serif(ch.slice(0, 6)),
+                        ...(ch[6] ? [sans_serif(ch[6])] : []),
+                    ]);
+                    preview.innerHTML = "";
+                    preview.append(...magic);
+                    output.value = `<span style="
+    /* your style here */
+">${magic.map(el => el.outerHTML).join("")}</span>`;
+                }
+
+                function update_on_change(elem) {
+                    elem.addEventListener("change", update);
+                    elem.addEventListener("keyup", update);
+                }
+
+                update_on_change(input);
+                update_on_change(serif_font);
+                update_on_change(sans_serif_font);
+
+                output.onclick = () => {
+                    navigator.clipboard.writeText(output.value);
+                };
+            }
+
+            window.onload = main;
+        </script>
+        <style>
+            #input {
+                grid-area: a;
+            }
+
+            #preview {
+                word-break: break-word;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+                grid-area: b;
+            }
+
+            #output {
+                grid-area: c;
+            }
+
+            #serif-font {
+                grid-area: d;
+            }
+
+            #sans-serif-font {
+                grid-area: e;
+            }
+
+            #promo {
+                grid-area: f;
+            }
+
+            body {
+                margin: 0;
+                margin: 1rem;
+                height: calc(100vh - 2rem);
+
+                display: grid;
+                gap: 0.25rem;
+                /* didn't feel like actual names */
+                grid-template-areas: "a a" "b b" "c c" "d e" "f f";
+                grid-template-rows: repeat(4, 1fr) min-content;
+            }
+
+            textarea {
+                resize: none;
+            }
+
+            /* using vars would be good,,, */
+            @media (prefers-color-scheme: dark) {
+                body,
+                a {
+                    color: #dcfdfd;
+                    background-color: #021111;
+                }
+                textarea {
+                    color: #dcfdfd;
+                    background-color: #031d1d;
+                    border: 1px solid #dcfdfd;
+                }
+                textarea:focus {
+                    outline: 1px solid #dcfdfd;
+                }
+            }
+
+            @media (prefers-color-scheme: light) {
+                body,
+                a {
+                    background-color: #dcfdfd;
+                    color: #021111;
+                }
+                textarea {
+                    background-color: #e6ffff;
+                    color: #021111;
+                    border: 1px solid #021111;
+                }
+                textarea:focus {
+                    outline: 1px solid #021111;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <textarea id="input" title="input"></textarea>
+        <div
+            id="preview"
+            title="preview, should be pretty much exactly accurate"
+        ></div>
+        <textarea
+            id="output"
+            readonly
+            title="click to copy (only on https)"
+        ></textarea>
+        <textarea type="text" id="serif-font" title="serif css style">
+font-family: "Times New Roman", "Liberation Serif", serif;</textarea
+        >
+        <textarea type="text" id="sans-serif-font" title="sans-serif css style">
+font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif;</textarea
+        >
+        <div id="promo">
+            <a href="./" download="times-new-bastard.html"
+                >download this page</a
+            >
+            which was made by mehbark who has a
+            <a href="https://terezi.pyrope.net">website</a> and is on
+            <a href="https://cohost.org/mehbark">cohost</a>
+            and
+            <a href="https://pl.pyrope.net/terezi">fedi</a>. here are some more
+            links:
+            <a href="https://patreon.com">patreon</a>
+            <a href="https://example.org">example</a>
+            <a href="https://pyrope.net/mcai"
+                >discord server that i made so i could continue saying "man,
+                computers are incredible" every day</a
+            >
+        </div>
+    </body>
+</html>