Create version 2 of the webring

pull/3/head
Charlotte Som 2022-03-05 20:20:02 +00:00
parent e9f60bf7e7
commit c32320fec4
2 changed files with 106 additions and 0 deletions

View File

@ -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;
}

View File

@ -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);
})();