Welcome to the 88x31.store

todays special~ EVERYTHING IS FREE

login with oauth

/embed/liked-by reference

did=

accepts

atproto did as string

notes

prefer to use atproto did! i don't locally store handle:did mappings, so if you use a handle, i have to resolve it on the fly, which adds latency

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce"></iframe>

example output

handle=

accepts

atproto handle as string

notes

prefer to use atproto did! i don't locally store handle:did mappings, so if you use a handle, i have to resolve it on the fly, which adds latency

example HTML

<iframe src="https://88x31.store/embed/liked-by?handle=moth11.net"></iframe>

example output

limit=

accepts

integer as string

notes

min=1, max=100, fetches up to limit liked buttons reverse chronologically

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&limit=2"></iframe>

example output

attribute=

accepts

non-empty string

notes

any non-empty string for attribute will add a line at the bottom of the generated html linking to 88x31.store. no worries if you prefer the plain look!

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&attribute=yes"></iframe>

example output

image-rendering=

accepts

any css image-rendering option: 'auto', 'smooth', 'high-quality', 'pixelated', 'crisp-edges'. default 'pixelated'

notes

this is the image-rendering option used, prefer pixelated (default, so you can leave it unset if you don't have any opinions here) if you want the pixel art to look crisp. compare the output from this example with smooth to initial-size='s, which uses default pixelated

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&initial-size=2&image-rendering=smooth"></iframe>

example output

initial-size=

accepts

float as string

notes

prefer an integer for better scaling of pixel art

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&initial-size=2"></iframe>

example output

hover-scale=

accepts

float as string

notes

this is the scale factor that the button shifts to when a user hovers over it. ex: initial-size=2 and hover-scale=3 means that the final width when user hovers will be 88*2*3=528px

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&hover-scale=1.1"></iframe>

example output

hover-rotate=

accepts

float degrees as string

notes

this is the number of degrees that the button rotates when a user hovers over it

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&hover-rotate=31"></iframe>

example output

margin=

accepts

float pixels as string

notes

this is the iframe's internal margin

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&margin=20"></iframe>

example output

margin-bottom=

accepts

float pixels as string

notes

this is the size of the bottom margin for each button

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&margin-bottom=20"></iframe>

example output

margin-right=

accepts

float pixels as string

notes

this is the size of the right margin for each button

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&margin-right=20"></iframe>

example output

cache=

accepts

int seconds as string

notes

this is how long the embed should be cached for. whenever you load a page with an iframe, first you make the html request to get the page, and then once your browser parses the page, it normally makes a second request to populate the iframe. this means when you load a page with an iframe, the page loads first, and the iframe loads second, so there's a slight flicker. if you set the cache fragment, your browser will cache the contents of the iframe's html, so the iframe will feel more like it's really part of the webpage. however, if the state of the user's collection changes before the cache expires, then those changes won't be visible. this is unrelated to how long the buttons themselves are cached for (1 year)

example HTML

<iframe src="https://88x31.store/embed/liked-by?did=did:plc:25z6ogppprfvijcnqo2fsfce&cache=600"></iframe>

example output

of course, in practice you can use multiple query fragments, and you can style the <iframe> element. i just prefer a more brutalist aesthetic, but you can see what a bit of styling looks like in concert on my blog's about page. ultimately the desire here with this project is that it's kinda annoying to go into the static site to add buttons that you find lying around the net, so atproto + iframe api seemed like it would make that whole flow simpler