html
<iframe src="https://dabric.neocities.org/linkshuffle.min.html?lsstyle-foreground=lime" frameborder="0" title="linkshuffle">
to navigation
(it's at the end of the page)
linkshuffle docs
created
11/11/2022,
updated
11/13/2022
note: this is a bit technical; it's mostly for if you want to customize
it more in-depth with javascript, or if you want to make your own list
of links. if you just want the code, refer to the customizer on the
project's homepage (click the back button).
using query parameters
simply add them to the url.
using attributes
note: due to some cross-site stuff, it currently doesn't work
off of my website.
simply use
data- attributes. you can also manipulate
the attributes with javascript to make it more dynamic, if you want.
linkshuffle does this reactivity via MutationObserver.html
<iframe src="https://dabric.neocities.org/linkshuffle.min.html" frameborder="0" title="linkshuffle">
<script>
const frame = document.querySelector("iframe");
let hue = 0;
setInterval(() => {
hue += 5
hue %= 360
const color = `hsl(${hue}deg, 100%, 50%)`;
frame.setAttribute("data-lsstyle-foreground", color)
frame.setAttribute("data-lsstyle-overlay-foreground", color)
frame.setAttribute("data-lsstyle-outline-color", color)
}, 100);
</script>
if you remove an attribute, it will revert to its default value.
data config
ls-delay
the amount of time between links. set it to 0 to disable the delay.
default: 10000
ls-showrandombutton
whether or not to show the random button. the button just switches
to another link when upon click.
default: true
ls-showtitle
whether or not to show the title of the link upon hover.
default: true
ls-list
the list of links in json. the format can be viewed here.
you can also provide a url to fetch the json from. to do this,
supply a link appended with
url!. for example:
url!https://example.com/links.jsondefault: []
ls-brandlinklocation
where the bottom right linkshuffle logo points to.
if you change this, it would be nice to at least link back
somewhere on that page.
default: https://dabric.neocities.org/linkshuffle
style config
lsstyle-background
the background color.
default: black
lsstyle-overlay-background
the background color of the overlays.
default: black
lsstyle-foreground
the foreground/text color.
default: white
lsstyle-font
the font.
default: sans-serif
lsstyle-padding
the padding of elements.
default: 5px
lsstyle-outline-color
the color used for outlines.
default: #808080
lsstyle-outline-thickness
the thickness of outlines.
default: 2px
lsstyle-border-radius
how much rectangle corners are rounded off.
default: 5px
link list format
a list of links is a JSON array, with the following format. all
object entires are optional, but it's highly recommended to fill
them all out.
json
// remember that JSON does not have comments;
// i'm only using them here to document the format.
// do not use comments in your actual link list.
[
// an example link. you can have an
// unlimited number of them.
{
// the name of the link.
// - will shown on hover, unless data-ls-showtitle
// was set to false.
// - will also be shown in place of the image if
// there isn't one, or if it fails to load.
"name": "dabric",
// the images to use. it'll be picked at random.
"images": [
// an example image. you can have
// an unlimited number of them.
{
// the link to the image.
"src": "https://dabric.neocities.org/dabric.png",
// the alt text for the image.
"alt": "a short tv-head robot."
}
],
// the link.
"url": "https://dabric.neocities.org"
}
]
that's all.
to content
(it's at the start of the page)
This is an old archived version of my website as of July 9th, 2023.
You can view it, but page content may be outdated.
I've tried my best to update links but some may be incorrect. Adding /archive/v2/ to the start of the url should work if you somehow 404.
The current version can be found at just dabric.xyz.