slice circle: something
This commit is contained in:
parent
c08b429e92
commit
cd939b56d9
8 changed files with 301 additions and 3 deletions
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export function Main({
|
|||
...attributes
|
||||
}: {
|
||||
children?: ComponentChildren;
|
||||
style?: JSX.CSSProperties;
|
||||
attributes?: JSX.HTMLAttributes;
|
||||
}) {
|
||||
return (
|
||||
|
|
|
|||
24
html/image-macro.tsx
Normal file
24
html/image-macro.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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()}
|
||||
|
|
|
|||
53
html/slice-circle-spinny-cursor.tsx
Normal file
53
html/slice-circle-spinny-cursor.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
0
html/sunshine-curved-text.tsx
Normal file
0
html/sunshine-curved-text.tsx
Normal file
0
html/trollcall.tsx
Normal file
0
html/trollcall.tsx
Normal file
197
times-new-bastard/index.html
Normal file
197
times-new-bastard/index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue