diff --git a/deno.lock b/deno.lock index 93c455a..859496c 100644 --- a/deno.lock +++ b/deno.lock @@ -118,6 +118,15 @@ "https://deno.land/x/imagescript@1.2.15/v2/ops/resize.mjs": "814e78ebce8eaf8f1f918688db7b52a141405e06a36ed4b25d04413d69e7d17b", "https://deno.land/x/imagescript@1.2.15/v2/ops/rotate.mjs": "a1b65616717bd2eed8db406affea3263b4674dada46b56441ef38167a187455d", "https://deno.land/x/imagescript@1.2.15/v2/util/mem.mjs": "4968d400dae069b4bf0ef4767c1802fd2cc7d15d90eda4cfadf5b4cd19b96c6d", + "https://deno.land/x/imagescript@1.2.9/ImageScript.js": "4f6f9c1542dd55b91dfdd01d1b2e8e5ff1eb3b3a7a4a30bdd5ff673d9aecab45", + "https://deno.land/x/imagescript@1.2.9/utils/buffer.js": "952cb1beb8827e50a493a5d1f29a4845e8c648789406d389dd51f51205ba02d8", + "https://deno.land/x/imagescript@1.2.9/utils/crc32.js": "573d6222b3605890714ebc374e687ec2aa3e9a949223ea199483e47ca4864f7d", + "https://deno.land/x/imagescript@1.2.9/utils/png.js": "fbed9117e0a70602645d70df9c103ff6e79c03e987bd5c1685dcb4200729b6de", + "https://deno.land/x/imagescript@1.2.9/utils/wasm/font.js": "ae4e8b7b6e6e9a30250c5f89e8fbb92d237f69d80ff84cd80c95d9a04163e714", + "https://deno.land/x/imagescript@1.2.9/utils/wasm/gif.js": "100fbd424a828a76ce90e4f5c282d42e0ab83518908a75839d5ded52bb795340", + "https://deno.land/x/imagescript@1.2.9/utils/wasm/jpeg.js": "da660e827fa45a85ee63aafa38dceb031dbd8988162bf730ace8d6135d842413", + "https://deno.land/x/imagescript@1.2.9/utils/wasm/svg.js": "f7d8827fa8dc4aa9b1027374a87ae658da4bdd46048c66c01d909291d1cf132a", + "https://deno.land/x/imagescript@1.2.9/utils/wasm/zlib.js": "63060a9aabee087929eb01d9e8b75b3ddc94a846a929a81d4456ed9b54d72671", "https://esm.sh/preact-render-to-string@5.2.0?external=preact": "d68df08425ff945f8b2872d784d587c6588f9f6369e553758d254477bfc95818", "https://esm.sh/preact@10.16.0": "5229650cdac537f87cae81d5001e88d4e7a38cc7e77be978961d2897a733117d", "https://esm.sh/preact@10.16.0/jsx-runtime?dts": "9e67b64a5b48299c77d30bffc213735fdcf4b3b5d4ad8ff8d4136f246de5fa34", diff --git a/html/common.tsx b/html/common.tsx index 725c1a3..a6f0e49 100644 --- a/html/common.tsx +++ b/html/common.tsx @@ -386,6 +386,7 @@ export const DragResizableImage = ({ width, height, indicator = true, + indicator_opacity = 0.3, }: { url: string; top: number; @@ -393,6 +394,7 @@ export const DragResizableImage = ({ width: number; height: number; indicator?: boolean; + indicator_opacity?: number; }) => (
@@ -410,7 +412,7 @@ export const DragResizableImage = ({ left + 18 + width / 2 }px;height: ${ top + 18 + height / 2 - }px; position: relative; opacity: 0.3; background: ${ + }px; position: relative; opacity: ${indicator_opacity}; background: ${ indicator ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAATklEQVR4AY3OAQYAMQwF0d7/0q2KrzFGZZZVPPLXxlc/RHIjEyIMxBnWBBAFcNODOaSo8X7C3uU/hY3Q5Bwm6vBkCKTiOU3mWkYkI5KQA4BYG/M4zBNLAAAAAElFTkSuQmCC")' : "none" diff --git a/html/image-macro.tsx b/html/image-macro.tsx index dd0f479..86c9287 100644 --- a/html/image-macro.tsx +++ b/html/image-macro.tsx @@ -1,5 +1,5 @@ -import { Main, DragResizableImage, render_and_copy } from "./common.tsx"; -// this is a really bad and boring idea. pass. +import { Main, DragResizableImage, render_and_copy, n_of } from "./common.tsx"; + // new idea! "make your own image macro" scrollable background of various le classic meme images (imgflip) // + images (yes, images; nobody has impact installed) // nah. let's just do white + text-shadow @@ -98,46 +98,90 @@ const Word = ({ // ughhhh am i going to have to pull out that crappy library // AND download an impact font // (yes) -const ScatteredWords = ({ children }: { children: string[] }) => ( +// tl;dr i can still use this scattering +// imagescript can't do the shadow we need (thank goodness) +// maybe imagemagick + photopea then +// i got it (KISS): photopea -> split on command line -> reference by url +// that should be workable + +const words = { + THE: 6, + HOMESTUCK: 3, + MEME: 4, + IS: 4, + EGGBUG: 4, + WHEN: 2, + YOU: 5, + SUS: 1, + IMPOSTER: 1, + ME: 3, + ALIEN: 1, + ARE: 3, + A: 4, + BOTTOM: 2, + TOP: 2, + TEXT: 4, + "?": 3, + "!": 3, + NO: 3, + YES: 3, + COHOST: 2, + MEHBARK: 2, + WEBARK: 2, + THIS: 2, + POST: 2, + SUCK: 2, + "CHUCK NORRIS": 2, + FOR: 2, + S: 4, + GET: 2, +} satisfies Record; +console.log( + `yikes. there are ${ + Object.keys(words).length + } unique words and ${Object.values(words).reduce( + (a, b) => a + b + )} words in total` +); +// Object.keys(words).forEach(w => console.log(w)) +const text_img_url = (text: string) => + `https://static.pyrope.net/meme-text/${text}.png`; + +const TEXT_HEIGHT = 55; +const decoder = new TextDecoder(); +// crazy inefficient but idc +const get_text_width = (text: string): number => + +decoder.decode( + new Deno.Command("identify", { + args: ["-format", "%w", `static/meme-text/${text}.png`], + }).outputSync().stdout + ); + +const ScatteredWords = ({ children }: { children: Record }) => ( <> - {...children.map(w => ( - - {w} - - ))} + {...Object.entries(children).flatMap(([text, count]) => + // feels pretty snazzy ngl + n_of(Math.ceil(count), () => ( + + )).map(f => f()) + )} ); -const words = ` -the the the the the the the -` - .split(/\s+/) - .filter(Boolean) - .map(w => w.toUpperCase()); - render_and_copy( <>
- - + {words}
+ notes as per usual i do this all th etime: +
    +
  • + dragresizing taken entirely from @blackle's excellent + post: https://cohost.org/blackle/post/38921-alright-cohost-it +
    • +
  • + you have to get the very center to drag. @blackle put an + indicator but i made it optional and turned it off! sorry! + aesthetics! (edit: turned em back on. character growth! i did + turn the opacity down just a squidge. idk. it's late!) +
    • +
  • + i probably could have turned the resizing off too, but, you + know, it's very funny +
    • +
); diff --git a/static/meme-text/!.png b/static/meme-text/!.png new file mode 100644 index 0000000..e6d998f Binary files /dev/null and b/static/meme-text/!.png differ diff --git a/static/meme-text/A.png b/static/meme-text/A.png new file mode 100644 index 0000000..f091f22 Binary files /dev/null and b/static/meme-text/A.png differ diff --git a/static/meme-text/ALIEN.png b/static/meme-text/ALIEN.png new file mode 100644 index 0000000..723de04 Binary files /dev/null and b/static/meme-text/ALIEN.png differ diff --git a/static/meme-text/ARE.png b/static/meme-text/ARE.png new file mode 100644 index 0000000..e3a09de Binary files /dev/null and b/static/meme-text/ARE.png differ diff --git a/static/meme-text/BOTTOM.png b/static/meme-text/BOTTOM.png new file mode 100644 index 0000000..f9337f3 Binary files /dev/null and b/static/meme-text/BOTTOM.png differ diff --git a/static/meme-text/CHUCK_NORRIS.png b/static/meme-text/CHUCK_NORRIS.png new file mode 100644 index 0000000..d64a88f Binary files /dev/null and b/static/meme-text/CHUCK_NORRIS.png differ diff --git a/static/meme-text/COHOST.png b/static/meme-text/COHOST.png new file mode 100644 index 0000000..29e6357 Binary files /dev/null and b/static/meme-text/COHOST.png differ diff --git a/static/meme-text/EGGBUG.png b/static/meme-text/EGGBUG.png new file mode 100644 index 0000000..0547e6c Binary files /dev/null and b/static/meme-text/EGGBUG.png differ diff --git a/static/meme-text/FOR.png b/static/meme-text/FOR.png new file mode 100644 index 0000000..a5a3c86 Binary files /dev/null and b/static/meme-text/FOR.png differ diff --git a/static/meme-text/GET.png b/static/meme-text/GET.png new file mode 100644 index 0000000..0905bd7 Binary files /dev/null and b/static/meme-text/GET.png differ diff --git a/static/meme-text/HOMESTUCK.png b/static/meme-text/HOMESTUCK.png new file mode 100644 index 0000000..21b1c62 Binary files /dev/null and b/static/meme-text/HOMESTUCK.png differ diff --git a/static/meme-text/IMPOSTER.png b/static/meme-text/IMPOSTER.png new file mode 100644 index 0000000..3fe2446 Binary files /dev/null and b/static/meme-text/IMPOSTER.png differ diff --git a/static/meme-text/IS.png b/static/meme-text/IS.png new file mode 100644 index 0000000..fbcd019 Binary files /dev/null and b/static/meme-text/IS.png differ diff --git a/static/meme-text/ME.png b/static/meme-text/ME.png new file mode 100644 index 0000000..fa985d7 Binary files /dev/null and b/static/meme-text/ME.png differ diff --git a/static/meme-text/MEHBARK.png b/static/meme-text/MEHBARK.png new file mode 100644 index 0000000..4a7bdec Binary files /dev/null and b/static/meme-text/MEHBARK.png differ diff --git a/static/meme-text/MEME.png b/static/meme-text/MEME.png new file mode 100644 index 0000000..b3cc184 Binary files /dev/null and b/static/meme-text/MEME.png differ diff --git a/static/meme-text/NO.png b/static/meme-text/NO.png new file mode 100644 index 0000000..a47f282 Binary files /dev/null and b/static/meme-text/NO.png differ diff --git a/static/meme-text/POST.png b/static/meme-text/POST.png new file mode 100644 index 0000000..a3f364b Binary files /dev/null and b/static/meme-text/POST.png differ diff --git a/static/meme-text/S.png b/static/meme-text/S.png new file mode 100644 index 0000000..d6b96db Binary files /dev/null and b/static/meme-text/S.png differ diff --git a/static/meme-text/SUCK.png b/static/meme-text/SUCK.png new file mode 100644 index 0000000..1a6960b Binary files /dev/null and b/static/meme-text/SUCK.png differ diff --git a/static/meme-text/SUS.png b/static/meme-text/SUS.png new file mode 100644 index 0000000..3aaeb9e Binary files /dev/null and b/static/meme-text/SUS.png differ diff --git a/static/meme-text/TEXT.png b/static/meme-text/TEXT.png new file mode 100644 index 0000000..53fe5b7 Binary files /dev/null and b/static/meme-text/TEXT.png differ diff --git a/static/meme-text/THE.png b/static/meme-text/THE.png new file mode 100644 index 0000000..5b7a27c Binary files /dev/null and b/static/meme-text/THE.png differ diff --git a/static/meme-text/THIS.png b/static/meme-text/THIS.png new file mode 100644 index 0000000..7b79608 Binary files /dev/null and b/static/meme-text/THIS.png differ diff --git a/static/meme-text/TOP.png b/static/meme-text/TOP.png new file mode 100644 index 0000000..f6c2d7e Binary files /dev/null and b/static/meme-text/TOP.png differ diff --git a/static/meme-text/WEBARK.png b/static/meme-text/WEBARK.png new file mode 100644 index 0000000..a5c783c Binary files /dev/null and b/static/meme-text/WEBARK.png differ diff --git a/static/meme-text/WHEN.png b/static/meme-text/WHEN.png new file mode 100644 index 0000000..c8436f2 Binary files /dev/null and b/static/meme-text/WHEN.png differ diff --git a/static/meme-text/YES.png b/static/meme-text/YES.png new file mode 100644 index 0000000..9e20443 Binary files /dev/null and b/static/meme-text/YES.png differ diff --git a/static/meme-text/YOU.png b/static/meme-text/YOU.png new file mode 100644 index 0000000..a7489d1 Binary files /dev/null and b/static/meme-text/YOU.png differ diff --git a/static/meme-text/mother.png b/static/meme-text/mother.png new file mode 100644 index 0000000..c68bfad Binary files /dev/null and b/static/meme-text/mother.png differ