initial commit
This commit is contained in:
hippoz
commit
8bda86b24a
GPG key ID:
56C4E02A85F2FBED
5 changed files with 242 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
*.html
|
||||
BIN
Manrope[wght].woff2
Normal file
BIN
Manrope[wght].woff2
Normal file
Binary file not shown.
67
build.js
Normal file
67
build.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
const fs = require("node:fs/promises");
|
||||
|
||||
let meta;
|
||||
|
||||
const chooseFortune = () => {
|
||||
const authors = Object.keys(meta.fortune);
|
||||
const chosenAuthor = authors[Math.floor(Math.random()*authors.length)];
|
||||
const fortunes = meta.fortune[chosenAuthor];
|
||||
const chosenFortune = fortunes[Math.floor(Math.random()*fortunes.length)];
|
||||
return {
|
||||
text: chosenFortune,
|
||||
name: chosenAuthor
|
||||
};
|
||||
};
|
||||
|
||||
const getPosts = async () => {
|
||||
const posts = [];
|
||||
for (let i = 0; i < meta.targets.length; i++) {
|
||||
const t = meta.targets[i];
|
||||
const data = JSON.parse(await fs.readFile(`./~${t}/manifest.rolsf.json`));
|
||||
if (!data.document || data.document !== "xyz.rolsf.manifest.own.1") {
|
||||
throw new Error(`unsupported own manifest for target: '${t}'`);
|
||||
}
|
||||
data.posts.forEach(post => {
|
||||
post.user = t;
|
||||
posts.push(post);
|
||||
});
|
||||
}
|
||||
posts.sort((a, b) => b.unix_time - a.unix_time);
|
||||
return posts;
|
||||
};
|
||||
|
||||
const Post = ({ href="#", user, date, title }) =>
|
||||
`<a href="${href}" class="post-link">
|
||||
<span class="user">${user}</span>
|
||||
<span class="date">${date}</span>
|
||||
<span class="title">${title}</span>
|
||||
</a>`;
|
||||
|
||||
const Fortune = ({text, name}) =>
|
||||
`<div class="fortune"><span id="fortune-text">“${text}”</span><span id="fortune-name"> -- ${name}</span></div>`;
|
||||
|
||||
const MainPage = async () =>
|
||||
`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${meta.brand}</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<span class="h1">${meta.brand}</span>
|
||||
${Fortune(chooseFortune())}
|
||||
${(await getPosts()).map(Post).join("")}
|
||||
</main>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
|
||||
const main = async () => {
|
||||
meta = JSON.parse((await fs.readFile("./meta.json")));
|
||||
await fs.writeFile("./main.html", await MainPage());
|
||||
};
|
||||
|
||||
main();
|
||||
35
meta.json
Normal file
35
meta.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"document": "xyz.rolsf.manifest.meta.1",
|
||||
"brand": "rolsf",
|
||||
"targets": [],
|
||||
"fortune": {
|
||||
"hippoz": [
|
||||
"and i somehow lost my pants, which caused me to be naked and run home, which may or may not have been caused by pulseaudio",
|
||||
"🩲ronliv",
|
||||
"forgot to mention i literally woke up laughing and continued laughing long after waking up",
|
||||
"YOUR COMPUTER. IT NEVER TURNS OFF.",
|
||||
"we can tie this into the idea of biocentrism",
|
||||
"it spends 500ms in busy javascript computing some lovecraftian DOM tree",
|
||||
"react literally has preemptive multitasking built in",
|
||||
"yes!!! i need lib-xdg-gtk-gnome-flatpak-portal-systemd!!!! you dont understand!!!",
|
||||
"have i been brainwashed by big terminal or something",
|
||||
"im still debating whether or not it's a troll"
|
||||
],
|
||||
"alan": [
|
||||
"What you view as insane is my sanity."
|
||||
],
|
||||
"rot": [
|
||||
"make a song using samples from linux sound themes",
|
||||
"the joke is so overdone you might as well just not post it"
|
||||
],
|
||||
"tuna": [
|
||||
"this code is fucked up bruh"
|
||||
],
|
||||
"kemal": [
|
||||
"6ac minecraft.jar",
|
||||
"if someone gets the joke here, congrats",
|
||||
"the joke literally went over from your head",
|
||||
"sadly it's a troll"
|
||||
]
|
||||
}
|
||||
}
|
||||
139
style.css
Normal file
139
style.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("Manrope[wght].woff2") format('woff2');
|
||||
font-weight: 125 950;
|
||||
font-stretch: 75% 125%;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-1: #dad4c9;
|
||||
--bg: #eeeeee;
|
||||
--fg-1: hsl(154, 0%, 40%);
|
||||
--fg: #1c2420;
|
||||
|
||||
--space-unit: 1rem;
|
||||
--space-xxs: calc(0.25 * var(--space-unit));
|
||||
--space-xs: calc(0.5 * var(--space-unit));
|
||||
--space-sm: calc(0.75 * var(--space-unit));
|
||||
--space-md: calc(1.25 * var(--space-unit));
|
||||
--space-lg: calc(2 * var(--space-unit));
|
||||
--space-xl: calc(3.25 * var(--space-unit));
|
||||
--space-xxl: calc(5.25 * var(--space-unit));
|
||||
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--small: 0.8rem;
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 30px auto;
|
||||
width: clamp(200px, 100%, 800px);
|
||||
}
|
||||
|
||||
/* text */
|
||||
|
||||
.h1 { font-size: var(--h1); }
|
||||
.h2 { font-size: var(--h2); }
|
||||
.h3 { font-size: var(--h3); }
|
||||
.h4 { font-size: var(--h4); }
|
||||
.h5 { font-size: var(--h5); }
|
||||
.small { font-size: var(--small); }
|
||||
|
||||
/* card */
|
||||
|
||||
.card-accent {
|
||||
padding: var(--space-md);
|
||||
margin: var(--space-md);
|
||||
margin-top: 0;
|
||||
background-color: var(--bg-1);
|
||||
border-radius: var(--space-md);
|
||||
}
|
||||
|
||||
/* post */
|
||||
|
||||
.post-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.post-link .user {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-link .date {
|
||||
font-weight: normal;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
|
||||
.post-link .title {
|
||||
display: block;
|
||||
font-size: var(--h4);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.post-link .title::after {
|
||||
display: inline;
|
||||
content: " ->";
|
||||
color: var(--fg-1);
|
||||
}
|
||||
|
||||
/* fortune */
|
||||
|
||||
@keyframes fortune-drop {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fortune {
|
||||
animation: fortune-drop 0.3s cubic-bezier(0.46,0.03,0.52,0.96) forwards;
|
||||
display: block;
|
||||
margin-bottom: var(--space-lg);
|
||||
font-size: var(--h5);
|
||||
}
|
||||
|
||||
#fortune-name {
|
||||
color: var(--fg-1);
|
||||
}
|
||||
|
||||
/* all */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
p {margin-bottom: 1rem;}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: var(--space-sm) 0 var(--space-xs);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: var(--h1);
|
||||
}
|
||||
Loading…
Reference in a new issue