scratchexplore.github.io/script.js at main · scratchexplore/scratchexplore.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const container = document.getElementById('container');
const button = document.getElementById('load');

const projects = await fetch("https://raw.githubusercontent.com/scratchexplore/backend/refs/heads/main/data/trending.json");
const data = await projects.json();

function addProject(project) {
    const projectUrl = `https://scratch.mit.edu/projects/${project.id}/`;
    const userUrl = `https://scratch.mit.edu/users/${project.username}/`;
    container.insertAdjacentHTML("beforeend", `
            <div class="card">
                <div class='background' style="background-image: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%), url(${project.banner})"></div>
                <a class="link" href="${projectUrl}" target="_blank" rel="noopener noreferrer">
                    <img class="card-image" src="${project.banner}">
                </a>
                <div class="profile">
                    <a class="link" href="${userUrl}" target="_blank" rel="noopener noreferrer">
                        <img class="profile-picture" src="${project.avatar}">
                    </a>
                    <div class="profile-text">
                        <a href="${projectUrl}" target="_blank" rel="noopener noreferrer">
                            <h2 class="card-header">${DOMPurify.sanitize(project.title)}</h2>
                        </a>
                        <a href="${userUrl}" target="_blank" rel="noopener noreferrer">
                            <p class="card-author">${project.username}</p>
                        </a>
                    </div>
                </div>
            </div>
        `);
}

let offset = 0;
const limit = 32;

function loadProjects() {
    const end = Math.min(offset + limit, data.length);

    for (let i = offset; i < end; i++) {
        addProject(data[i]);
    }

    offset = end;
}

button.addEventListener("click", loadProjects);

loadProjects();