forked from lavender-legacy/lavender.software
Create version 2 of the webring
parent
e9f60bf7e7
commit
c32320fec4
|
@ -0,0 +1,52 @@
|
|||
/* Feel free to style the webring however you like! */
|
||||
|
||||
.lavender-webring-container {
|
||||
all: unset;
|
||||
|
||||
/*
|
||||
assuming Linux users will have a preferable sans-serif font set in their browser,
|
||||
everyone else gets a nice default
|
||||
*/
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI",
|
||||
"Helvetica Neue", sans-serif;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: rgb(28, 23, 36);
|
||||
color: rgb(234, 234, 248);
|
||||
|
||||
padding: 1em;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.lavender-webring-description {
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
|
||||
.lavender-webring-container a {
|
||||
color: hsl(275, 57%, 68%);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid hsl(275, 57%, 68%);
|
||||
}
|
||||
|
||||
.lavender-webring-site-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lavender-webring-prev-site a::before {
|
||||
content: "←";
|
||||
margin-inline-end: 1ch;
|
||||
}
|
||||
|
||||
.lavender-webring-next-site a::after {
|
||||
content: "→";
|
||||
margin-inline-start: 1ch;
|
||||
}
|
|
@ -0,0 +1,54 @@
|
|||
const currentScript = document.currentScript;
|
||||
const ctx = currentScript.dataset;
|
||||
|
||||
// charlotte's ad-hoc terse javascript framework!
|
||||
const CSS_PREFIX = "lavender-webring";
|
||||
const e = (tag, props = {}, children = []) => {
|
||||
let element = Object.assign(document.createElement(tag), props);
|
||||
element.append(...children);
|
||||
return element;
|
||||
};
|
||||
const t = (text) => document.createTextNode(text);
|
||||
const c = (className) => ({ className: `${CSS_PREFIX}-${className}` });
|
||||
const h = (href) => ({ href });
|
||||
|
||||
const createDescriptionContent = () =>
|
||||
ctx.description != null
|
||||
? [t(ctx.description)]
|
||||
: [
|
||||
t("This site is part of the "),
|
||||
e("a", h("https://lavender.software"), [t("lavender.software")]),
|
||||
t(" webring!"),
|
||||
];
|
||||
|
||||
const renderWebring = (currSite, prevSite, nextSite) => {
|
||||
currentScript.replaceWith(
|
||||
e("aside", c("container"), [
|
||||
e("section", c("description"), createDescriptionContent()),
|
||||
e("ul", c("site-links"), [
|
||||
e("li", c("prev-site"), [e("a", h(prevSite.url), [t(prevSite.name)])]),
|
||||
e("li", c("curr-site"), [e("a", h(currSite.url), [t(currSite.name)])]),
|
||||
e("li", c("next-site"), [e("a", h(nextSite.url), [t(nextSite.name)])]),
|
||||
]),
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const data = await fetch("https://lavender.software/webring/data.json").then(
|
||||
(r) => r.json()
|
||||
);
|
||||
|
||||
let thisSiteIdx = data.findIndex((site) => site.id == ctx.siteId);
|
||||
if (thisSiteIdx === -1) {
|
||||
throw new Error(
|
||||
`Could not find site by id '${ctx.siteId}' in the webring!`
|
||||
);
|
||||
}
|
||||
|
||||
let currSite = data[thisSiteIdx];
|
||||
let prevSite = data[(thisSiteIdx + data.length - 1) % data.length];
|
||||
let nextSite = data[(thisSiteIdx + 1) % data.length];
|
||||
|
||||
renderWebring(currSite, prevSite, nextSite);
|
||||
})();
|
Loading…
Reference in New Issue