archive/scratch-feed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

studio and comments support

Browse source
This commit is contained in:
biglyderv 2024-09-18 05:02:20 -04:00
parent 1bb22a2808
commit a674674369
No known key found for this signature in database
GPG key ID: 33AC87E9ACE66954
3 changed files with 125 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
css/app.css
View file

@ -39,7 +39,8 @@ section#area-main {
}
sub {
color: rgb(33, 156, 70)
color: rgb(33, 156, 70);
display: block;
}
h1 {
@ -105,6 +106,10 @@ pre {
flex-wrap: wrap;
}
#area-main.nogrid {
display: block;
}
.proj {
text-align: center;
max-width: 240px;
@ -123,3 +128,26 @@ pre {
.eras a {
margin-right: 10px;
}
.buttons {
display: flex;
}
.user {
width: 60px;
height: 60px;
border-radius: 60px;
}
.commenter {
display: flex;
}
pre {
max-width: 500px;
white-space: pre-wrap;
}
.commenter > div {
margin-bottom: 30px;
}

15
index.html
View file

@ -9,9 +9,17 @@
<body>
<section>
<h1><a href='https://codeberg.org/onezDerv/scratch-feed'>Scratch Feed</a></h1>
<h2>Users to follow</h2>
<textarea id='users'>User1
User2
<p>
A clean, descriptive content aggregator for Scratch projects and other data.
</p>
<span class='buttons'>
<button><a href='#user'>Projects</a></button>
<button><a href='#comment'>Comments</a></button>
</span>
<h2>Pages to follow</h2>
<textarea id='users'>@08draven
@GC_Collabs
#35236113
...
</textarea>
<button id='submit'>Submit</button>
@ -19,6 +27,5 @@ User2
<section id='area-main'>
</section>
<script src='js/data.js'></script>
<script src='js/app.js'></script>
</body>

97
js/app.js
View file

@ -1,3 +1,5 @@
// All URLs listed here are from a custom NGINX config.
let area = document.querySelector('#area-main');
let entries = [];
let users = {};
@ -5,6 +7,7 @@ let fetchData;
let sum = 0;
let doThings = false;
let i = 0;
let studios = {};
async function genTree(treeId) {
let entry = treeId;
@ -27,10 +30,20 @@ async function genTree(treeId) {
return entry;
}
async function main() {
//todo: rewrite
async function main(type) {
let users = document.querySelector('#users').value.split('\n');
for (let user of users) {
let typed = user[0];
user = user.slice(1);
if (typed == '#') {
studios[typed] = await (fetch(`https://hf.zenoverse.net/studio/${user}`)
.then(x => x.json()));
}
}
let url = new URL(window.location);
url.search = '?users=' + users.join('&users=');
history.pushState(null, '', url);
@ -38,11 +51,28 @@ async function main() {
entries = [];
for (let user of users) {
let extraFetch = await fetch(`https://hf.zenoverse.net/user/${user}`, {
let typed = user[0];
user = user.slice(1);
let extraFetch = [];
if (typed == '#' && type == '#user') {
extraFetch = await (fetch(`https://hf.zenoverse.net/studio_project/${user}`)
.then(x => x.json()));
extraFetch.forEach(x => {
x.studio = studios[typed].title;
x.studioID = typed
});
} else if (typed == '#' && type == '#comment') {
extraFetch = await (fetch(`https://hf.zenoverse.net/studio_comment/${user}`)
.then(x => x.json()));
extraFetch.forEach(x => x.studio = studios[typed].title);
} else if (typed == '@' && type == '#user') {
extraFetch = await (fetch(`https://hf.zenoverse.net/user/${user}`)
.then(x => x.json()));
extraFetch.forEach(x => x.username = user);
}
});
extraFetch = await extraFetch.json();
extraFetch.forEach(x => x.username = user);
entries = [...entries, ...extraFetch];
}
entries = entries.sort((a, b) => b.id - a.id);
@ -62,8 +92,9 @@ async function main() {
setInterval(function () {
if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25)
scroller();
if (!doThings || (window.innerHeight + window.scrollY) < document.body.scrollHeight - 25) return;
if (type == '#user') scroller();
if (type == '#comment') commenter();
}, 500);
}
@ -73,12 +104,46 @@ function sanitize(content) {
return decoder.innerHTML;
}
function commenter() {
let h = '';
area.className = 'nogrid';
for (let j = 0; j < 10; j++) {
let entry = entries[i];
if (!entry) continue;
// ugly tbf
h += `<div class='commenter'>
<img src='https://uploads.scratch.mit.edu/get_image/user/${entry.author.id}_999x999.png' class='user' float='left'>
<div>
<div><b><a href='/users/${entry.author.username}'>${entry.author.username}</a></b></div>
<sub>In <a href='/studios/${entry.studioID}'>${entry.studio}</a></sub>
<pre>${entry.content}</pre>
<sub>${entry.datetime_created}</sub>
</div>
</div>
`
i++;
}
area.innerHTML += h;
}
function scroller() {
let h = '';
for (let j = 0; j < 35; j++) {
let entry = entries[i];
if (!entry) continue;
h += `<div class='proj'><a href="https://scratch.mit.edu/projects/${entry.id}"><img src='https://uploads.scratch.mit.edu/get_image/project/${entry.id}_1920x1080.png'>${entry.title}</a> <sub>by ${entry.username}</sub></div>`;
// ugly tbf
h += `<div class='proj'>
<a href="https://scratch.mit.edu/projects/${entry.id}">
<img src='https://uploads.scratch.mit.edu/get_image/project/${entry.id}_1920x1080.png'>
${entry.title}
</a>
<sub>
by ${entry.username}
</sub>
<sub>
${entry.studio ? ' in ' + entry.studio : ''}
</sub>
</div>`;
i++;
}
area.innerHTML += h;
@ -86,11 +151,19 @@ function scroller() {
let sub = document.querySelector('#users');
let params = new URLSearchParams(window.location.search).getAll('users');
let srch = new URLSearchParams(window.location.search)
let params = srch.getAll('users');
let val = params.join('\n') || sub.value;
sub.textContent = sub.value = val;
main();
document.querySelector('#submit').onclick = main;
main(window.location.hash || '#user');
document.querySelector('#submit').onclick = () => main(window.location.hash || '#user');
document.querySelectorAll('.buttons button').forEach(x => x.onclick = function() {
window.setInterval(function() {
window.location.reload();
},100);
})