hello!

we're going to invite you (example.com) to mrrrp.cat webring

option 1. please find a place to put the buttons on your site
- next: <a href="https://mrrrp.cat/ring/example.com/next">/next</a>
- prev: <a href="https://mrrrp.cat/ring/example.com/prev">/prev</a>
option 2 (preferred!!). please use this iframe

<iframe src="https://mrrrp.cat/ring/example.com/iframe"
    title="mrrrp.cat webring"
    loading="lazy"
    style="display:block;width:100%;height:56px;margin:0 auto;border:0"></iframe>

if the text colours aren't nice enough please try ?theme=dark !!

<iframe src="https://mrrrp.cat/ring/example.com/iframe?theme=dark"
    title="mrrrp.cat webring"
    loading="lazy"
    style="display:block;width:100%;height:56px;margin:0 auto;border:0"></iframe>

also, please see #bad-iframe if there are other issues

final step!

we need to get you onto the webring array inside the code so we can route to you

the webring array in code

if you have push access, great! edit the ngx_webring.js file in the l1mey112/mrrrp.cat repo and add your site
if you don't have push access, that's okay! make a PR to l1mey112/mrrrp.cat adding your domain to the file. also we can give you push access if we trust you

https://github.com/l1mey112/mrrrp.cat/blob/master/ngx/ngx_webring.js

note! if you don't like the iframe, you can

add another route, maybe /iframe2
add more functionality!
add whatever you want! the code should be simple enough!

debugging bad iframe styles

weird text colours

you can set a ?theme=dark (the default is ?theme=light, leave it empty if you want this) which will change the text/link colour of your embed. the iframe is transparent, this won't change the background.

mismatched colour

the iframe actually has a transparent background. the image you're seeing below here should never ever happen.

mrrrp.cat webring where the iframe background colour (white) is mismatched to the website background (dark)

this took me a while to figure out. the CSS Color Adjust spec basically says that if an iframe has a color-scheme that is different to the surrounding page it will rerender with a different opaque background.

if you set any of these offending objects

<meta name=color-scheme content="light dark">
.webring-frame { color-scheme: light dark } set on an iframe

such that the color-scheme is different to the one set on the iframe (which is none!), you need to set the ?scheme= parameter. below is an example:

<iframe src="https://mrrrp.cat/ring/example.com/iframe?theme=dark&scheme=light%20dark"
    title="mrrrp.cat webring"
    loading="lazy"
    style="display:block;width:100%;height:56px;margin:0 auto;border:0"></iframe>

probably related issues:

other issues? you can read the code

https://github.com/l1mey112/mrrrp.cat/blob/master/ngx/ngx_webring.js