tumblr: eh, done enough

This commit is contained in:
mehbark 2024-02-20 22:04:25 -05:00
parent a62d79c1aa
commit 7769a4dfe7
6 changed files with 302 additions and 2 deletions

View file

@ -69,6 +69,28 @@
"https://deno.land/std@0.202.0/media_types/vendor/mime-db.v1.52.0.ts": "6925bbcae81ca37241e3f55908d0505724358cda3384eaea707773b2c7e99586", "https://deno.land/std@0.202.0/media_types/vendor/mime-db.v1.52.0.ts": "6925bbcae81ca37241e3f55908d0505724358cda3384eaea707773b2c7e99586",
"https://deno.land/x/copy_paste@v1.1.3/deps.ts": "89bfebe10979530b38b3be2ace3b24a7b83dbecb2a6cca7cd7b05b9a86fb1e61", "https://deno.land/x/copy_paste@v1.1.3/deps.ts": "89bfebe10979530b38b3be2ace3b24a7b83dbecb2a6cca7cd7b05b9a86fb1e61",
"https://deno.land/x/copy_paste@v1.1.3/mod.ts": "3b82d6c620749acb86398bbec1f2c1f472cc39921c22ca7d7a98ab682b170f20", "https://deno.land/x/copy_paste@v1.1.3/mod.ts": "3b82d6c620749acb86398bbec1f2c1f472cc39921c22ca7d7a98ab682b170f20",
"https://deno.land/x/deno_dom@v0.1.38/build/deno-wasm/deno-wasm.js": "98b1ad24a1c13284557917659402202e5c5258ab1431b3f3a82434ad36ffa05a",
"https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts": "bfd999a493a6974e9fca4d331bee03bfb68cfc600c662cd0b48b21d67a2a8ba0",
"https://deno.land/x/deno_dom@v0.1.38/src/api.ts": "0ff5790f0a3eeecb4e00b7d8fbfa319b165962cf6d0182a65ba90f158d74f7d7",
"https://deno.land/x/deno_dom@v0.1.38/src/constructor-lock.ts": "59714df7e0571ec7bd338903b1f396202771a6d4d7f55a452936bd0de9deb186",
"https://deno.land/x/deno_dom@v0.1.38/src/deserialize.ts": "f4d34514ca00473ca428b69ad437ba345925744b5d791cb9552e2d7a0e7b0439",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/document-fragment.ts": "a40c6e18dd0efcf749a31552c1c9a6f7fa614452245e86ee38fc92ba0235e5ae",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/document.ts": "b8f4e4ccabaaa063d6562a0f2f8dea9c0419515d63d8bd79bfde95f7cd64bd93",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/dom-parser.ts": "609097b426f8c2358f3e5d2bca55ed026cf26cdf86562e94130dfdb0f2537f92",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/element.ts": "77c454e228dfeb5c570da5aa61d91850400116bfa0f5a85505acdd3c667171a4",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/elements/html-template-element.ts": "127bb291bb08afeb7e9a66294a5aa6ff2780f4eb4601fa6f7869fe8b70a81472",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/html-collection.ts": "ae90197f5270c32074926ad6cf30ee07d274d44596c7e413c354880cebce8565",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/node-list.ts": "4c6e4b4585301d4147addaccd90cb5f5a80e8d6290a1ba7058c5e3dfea16e15d",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/node.ts": "3069e6fc93ac4111a136ed68199d76673339842b9751610ba06f111ba7dc10a7",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/custom-api.ts": "852696bd58e534bc41bd3be9e2250b60b67cd95fd28ed16b1deff1d548531a71",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/nwsapi-types.ts": "c43b36c36acc5d32caabaa54fda8c9d239b2b0fcbce9a28efb93c84aa1021698",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/nwsapi.js": "985d7d8fc1eabbb88946b47a1c44c1b2d4aa79ff23c21424219f1528fa27a2ff",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/selectors.ts": "83eab57be2290fb48e3130533448c93c6c61239f2a2f3b85f1917f80ca0fdc75",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/sizzle-types.ts": "78149e2502409989ce861ed636b813b059e16bc267bb543e7c2b26ef43e4798b",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/selectors/sizzle.js": "c3aed60c1045a106d8e546ac2f85cc82e65f62d9af2f8f515210b9212286682a",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/utils-types.ts": "96db30e3e4a75b194201bb9fa30988215da7f91b380fca6a5143e51ece2a8436",
"https://deno.land/x/deno_dom@v0.1.38/src/dom/utils.ts": "55f3e9dc71d6c4a54605888d3f99d26fb0cf9973924709f159252a6933ceeabe",
"https://deno.land/x/deno_dom@v0.1.38/src/parser.ts": "b65eb7e673fa7ca611de871de109655f0aa9fa35ddc1de73df1a5fc2baafc332",
"https://deno.land/x/deno_dom@v0.1.43/build/deno-wasm/deno-wasm.js": "d6841a06342eb6a2798ef28de79ad69c0f2fa349fa04d3ca45e5fcfbf50a9340", "https://deno.land/x/deno_dom@v0.1.43/build/deno-wasm/deno-wasm.js": "d6841a06342eb6a2798ef28de79ad69c0f2fa349fa04d3ca45e5fcfbf50a9340",
"https://deno.land/x/deno_dom@v0.1.43/deno-dom-wasm.ts": "a33d160421bbb6e3104285ea5ebf33352b7ad50d82ea8765e3cf65f972b25119", "https://deno.land/x/deno_dom@v0.1.43/deno-dom-wasm.ts": "a33d160421bbb6e3104285ea5ebf33352b7ad50d82ea8765e3cf65f972b25119",
"https://deno.land/x/deno_dom@v0.1.43/src/api.ts": "0ff5790f0a3eeecb4e00b7d8fbfa319b165962cf6d0182a65ba90f158d74f7d7", "https://deno.land/x/deno_dom@v0.1.43/src/api.ts": "0ff5790f0a3eeecb4e00b7d8fbfa319b165962cf6d0182a65ba90f158d74f7d7",

View file

@ -420,3 +420,13 @@ export const DragResizableImage = ({
></div> ></div>
</div> </div>
); );
// don't really love this; do not recommend
export const string_split_once = (
str: string,
on: string
): [string, string] | undefined => {
const idx = str.indexOf(on);
if (idx < 0) return;
return [str.slice(0, idx), str.slice(idx + on.length)];
};

View file

@ -210,8 +210,10 @@ render_and_copy(
notes as per usual i do this all th etime: notes as per usual i do this all th etime:
<ul> <ul>
<li> <li>
dragresizing taken <em>entirely</em> from @blackle's excellent dragresizing taken <em>entirely</em> from @blackle's{" "}
post: https://cohost.org/blackle/post/38921-alright-cohost-it <a href="https://cohost.org/blackle/post/38921-alright-cohost-it">
excellent post
</a>
</li> </li>
<li> <li>
you have to get the very center to drag. @blackle put an you have to get the very center to drag. @blackle put an

46
html/minvn.tsx Normal file
View file

@ -0,0 +1,46 @@
// yeahh a directed acyclic graph should be good
// where we just dupe
// e.g.
// a -+-> b
// | |
// | v
// \-> c -> d
// compiles to
// a -+-> b -> c -> d
// |
// \-> c -> d
// inefficient but tractable
// maybe restrict height and width to lh and ch
const example = `
; TODO: contrast isn't great...
fg red
bg rgb(20 15 15)
font "courier-std", courier, monospace
font-size 1.1rem
width 6in
height 12in
# welcome
; only an image link? how incredibly minimalist
- https://image.link
- alt text for that image
; by only allowing connections that have not been declared yet, we should be
; able to avoid cycles
| welcome to the game this is dialogue
| when you use multiple |s, the text is combined into one line
| so it can be pretty
| it's up to you to make sizing work
> good bye
> how are you
; order independent here
# good bye
| that is so rude... i'm sad.
- sad image link
- a sad guy
; notably, no connections
# how are you
>
`.trim();

16
html/tumblr.tsx Normal file
View file

@ -0,0 +1,16 @@
import { render_and_copy } from "./common.tsx";
import { Post } from "./one-post.tsx";
const DASH_BG = "#36465D";
// mainly doing this in pch, but i'll gen a chost for a funny
render_and_copy(
<Post
headline="hey guys"
username="mehbark"
posted="10.2 hr. ago"
n_comments={413}
>
oh wait oops wrong website
</Post>
);

204
pch/tumblr.toml Normal file
View file

@ -0,0 +1,204 @@
version = 1
title = 'Style Inlining'
[[modules]]
plugin = 'source.text'
data.contents = '''
<div id=main>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>"the setup was at the beginning"</h1>
<p>has got to be one of my favorite quotes from anything ever. it's so rad</p>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>hey guys welcome to my tumblr dash</h1>
<p>please enjoy! and do not mention cartoons or i will have no choice but to work with the <a href="https://fbi.gov">FBI</a></p>
<div class=tags><a href="https://cohost.org/rc/tagged/I'm%20Not%20Going%20To%20Do%20Many%20Tags%20Because%20It%20Is%20A%20Pain%20Because%20I'm%20Writing%20This%20All%20By%20Hand%20For%20Some%20Reason">#I'm Not Going To Do Many Tags Because It Is A Pain Because I'm Writing This All By Hand For Some Reason</a> <a href="https://cohost.org/rc/tagged/not%20sure%20why%20i%20was%20kanaya%20there">#not sure why i was kanaya there</a></div>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>apparently tumblr lost all of their sans clothes</h1>
<p>hence everything being bare-bones right now</p>
<div class=tags><a href="https://cohost.org/rc/tagged/badumtiss">#badumtiss</a></div>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>it is becoming quickly apparent that i cannot tumblr post</h1>
<p>i have no idea what i'm doing, so i'll do what i always do in this situation: do a bunch and hope that makes things funny</p>
<div class=tags><a href="https://cohost.org/rc/tagged/badumtiss">#badumtiss</a></div>
</div>
</div>
<div class="ch post">
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<div style="margin:0;display:flex;align-items:center;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:rgb(var(--color-notWhite));padding:0.75rem;box-shadow:0px -4px 5px rgba(25,25,25,0.14),0px -1px 10px rgba(25,25,25,0.12),0px -2px 4px rgba(0,0,0,0.2);"><div style="margin:0;display:flex;flex:1 1 0%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5rem;line-height:1"><a href="https://cohost.org/mehbark" style="margin:0;text-decoration:none;color:#686664">@mehbark</a><a style="margin:0;text-decoration:none;font-size:0.75rem;color:#827f7c">10.2 hr. ago</a></div><img src="https://static.pyrope.net/cohost-post-options.png" alt="the cohost icon for post options" style="margin:0"></div><div style="margin:0;background-color:rgb(var(--color-notWhite))"><hr style="border-color:#bfbab5;margin:0 0.75rem"></div><div style="margin:0;box-shadow:0px 4px 5px rgba(0,0,0,0.14),0px 1px 10px rgba(0,0,0,0.12),0px 2px 4px rgba(0,0,0,0.2);background-color:white"><div style="margin:0;padding:0.75rem"><a style="margin:0;text-decoration:none;font-size:1.25rem;line-height:1.75rem"><h1 style="margin:0;color:black;font-size:inherit">hey guys</h1></a></div><div style="display:flex;margin:0"><div style="margin:0;padding-left:0.75rem;padding-right:0.75rem;margin-top:1rem;margin-bottom:1rem;color:rgb(var(--color-notBlack))">oh wait oops wrong website</div></div></div><div style="margin:0;background-color:rgb(var(--color-notWhite))"><hr style="border-color:#bfbab5;margin:0 0.75rem"></div><div style="margin:0;background:rgb(var(--color-notWhite));font-size:0.875rem;color:gray;padding:0.75rem;border-bottom-right-radius:0.5rem;border-bottom-left-radius:0.5rem;box-shadow:0px 4px 5px rgba(25,25,25,0.14),0px 1px 10px rgba(25,25,25,0.12),0px 2px 4px rgba(0,0,0,0.2)"><div style="margin:0;display:flex;justify-content:space-between"><a href="https://413.gay" style="margin:0;text-decoration:none">413 comments</a><div style="margin:0;display:flex;align-items:center;gap:0.75rem"><img src="https://static.pyrope.net/cohost-reblog.png" alt="the cohost reblog icon" style="margin:0"><img src="https://static.pyrope.net/cohost-like.png" alt="the cohost like icon" style="margin:0"></div></div></div>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>wait</h1>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>is there anyone else here?</h1>
<p>and why is it chron instead of reverse chron???</p>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>this is honestly scary :(((</h1>
</div>
</div>
<div class=post>
<img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/81/Vriska_Serket.png" alt="vriska serket from homestuck">
<div class=content>
<h1 style="color: #005682">Hi!!!!!!!!</h1>
<div class=tags>
<a href="https://cohost.org/rc/tagged/8">#8</a>
<a href="https://cohost.org/rc/tagged/vriska">#vriska</a>
<a href="https://cohost.org/rc/tagged/dice">#dice</a>
<a href="https://cohost.org/rc/tagged/vision%20eightfold">#vision eightfold</a>
<a href="https://cohost.org/rc/tagged/etc">#etc</a>
</div>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>your tagging is utterly absurd BUT</h1>
<p>hi vriska!! whatttttt this is so crazy! mehtumblr is so awesome this is a good post and not a waste of time</p>
</div>
</div>
<div class=post>
<img src="https://static.wikia.nocookie.net/mspaintadventures/images/9/96/Terezi_Pyrope.png" alt="terezi pyrope from homestuck">
<div class=content>
<h1 style="color: #008282">H1-</h1>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<div style="overflow: visible; width: 0">
<h1 style="color: red; font-size: 10cm; white-space: nowrap; margin: 0; transform: rotate(355deg); animation: spin 0.05s infinite alternate-reverse linear both;">HOLY CRAP TEREZI WHAT</h1>
</div>
</div>
</div>
<div class=post>
<img src="https://static.wikia.nocookie.net/mspaintadventures/images/9/96/Terezi_Pyrope.png" alt="terezi pyrope from homestuck">
<div class=content>
<h1 style="color: #008282">PUNCHL1N3</h1>
</div>
</div>
<div class=post>
<img src="https://staging.cohostcdn.org/avatar/157583-20bb226b-6637-46f9-82f9-b162c08a63bd-profile.png?dpr=2&width=80&height=80&fit=cover&auto=webp">
<div class=content>
<h1>oh terezi, you're so funny</h1>
<p>there being a punchline would imply that there was a setup!</p>
<p>
oh, right,
</p>
</div>
</div>
</div>'''
data.language = 'html'
sends = [2]
[[modules]]
plugin = 'source.text'
data.contents = '''
#main {
font-family: helvetica, sans-serif;
background-color: #36465D;
width: 100%;
margin: 0;
background-clip: border-box;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
overflow: scroll;
//height: 50vh;
}
.post {
display: flex;
gap: 1rem;
}
.content > h1 {
font-size: 1.5rem;
}
.post > img {
border-radius: 5%;
object-fit: cover;
aspect-ratio: 1;
margin-top: 0;
margin-bottom: auto;
flex: 1;
min-width: 0;
min-height: 0;
}
.content {
background-color: white;
flex: 9 0 20%;
border-radius: 7px;
padding: 1rem;
}
.ch.post > .content {
padding: 0;
font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.tags {
font-size: 0.8rem;
color: grey;
}
.tags > a {
text-decoration: none;
}'''
data.language = 'css'
sends = [2]
[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = [3]
[[modules]]
plugin = 'transform.svg-to-background'
data.useSvgo = true
sends = ['output']
[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'
sends = [2]
graphPos = [-480, 168]
[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'
[[modules]]
plugin = 'source.sass'
data.contents = ''
data.syntax = 'scss'