Add recently watched anime
This commit is contained in:
parent
571f2e57c5
commit
2b4d18e869
3 changed files with 149 additions and 8 deletions
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Elnu's Homepage</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
_paq.push(['trackPageView']);
|
||||
|
|
@ -41,6 +43,10 @@
|
|||
<small>More coming soon™! (*￣▽￣)b</small>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Recently watched anime from <a href="https://anilist.co/user/Elnu/">AniList</a></h3>
|
||||
<div class="activities">
|
||||
Loading recent anime activity...
|
||||
</div>
|
||||
<br>
|
||||
<div class="socials">
|
||||
<a href="https://anilist.co/user/Elnu/" title="AniList" target="_blank"><img src="anilist.svg" alt="AniList"></a>
|
||||
|
|
|
|||
82
script.js
Normal file
82
script.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
const query = `
|
||||
{
|
||||
Page {
|
||||
activities(userId: 5329808, sort: ID_DESC, type: ANIME_LIST) {
|
||||
... on ListActivity {
|
||||
siteUrl
|
||||
progress
|
||||
status
|
||||
createdAt
|
||||
media {
|
||||
id
|
||||
title {
|
||||
english
|
||||
native
|
||||
}
|
||||
coverImage {
|
||||
medium
|
||||
}
|
||||
description
|
||||
siteUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
const url = "https://graphql.anilist.co";
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ query })
|
||||
};
|
||||
fetch("https://graphql.anilist.co", options)
|
||||
.then(response => {
|
||||
return response.json().then(function (json) {
|
||||
return response.ok ? json : Promise.reject(json);
|
||||
});
|
||||
})
|
||||
.then(data => {
|
||||
const container = document.querySelector(".activities");
|
||||
container.innerHTML = "";
|
||||
const activities = data.data.Page.activities;
|
||||
let displayedIds = [];
|
||||
let count = 0;
|
||||
for (let i = 0; i < activities.length && count < 6; i++) {
|
||||
const a = activities[i];
|
||||
|
||||
if (["plans to watch", "dropped"].includes(a.status) || displayedIds.includes(a.media.id)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const element = document.createElement("div");
|
||||
|
||||
const thumbnailLink = document.createElement("a");
|
||||
thumbnailLink.href = a.media.siteUrl;
|
||||
thumbnailLink.title = a.media.title.english;
|
||||
thumbnailLink.target = "_blank";
|
||||
|
||||
const thumbnail = document.createElement("img");
|
||||
thumbnail.src = a.media.coverImage.medium;
|
||||
thumbnail.alt = a.media.title.native;
|
||||
thumbnailLink.appendChild(thumbnail);
|
||||
|
||||
element.appendChild(thumbnailLink);
|
||||
|
||||
const description = document.createElement("div");
|
||||
description.classList.add("description");
|
||||
description.innerHTML = `<p><b>${moment(new Date(a.createdAt * 1000)).fromNow()}</b> ${a.status} ${a.progress == null ? "" : `<b>${a.progress}</b> of`} <b><a href="${a.media.siteUrl}" title="${a.media.title.english}" target="_blank">${a.media.title.native}</a></b></p><p><b>Synopsis:</b> ${a.media.description.replaceAll("<br>", "").replaceAll("\n\n", "</p><p>")}</p>`;
|
||||
element.appendChild(description);
|
||||
|
||||
container.appendChild(element);
|
||||
|
||||
displayedIds.push(a.media.id);
|
||||
count++;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.querySelector(".activities").innerHTML = "Failed to load!";
|
||||
console.error(error);
|
||||
});
|
||||
69
style.css
69
style.css
|
|
@ -9,7 +9,6 @@ body {
|
|||
margin-top: 4em;
|
||||
background: #3b4252;
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -31,10 +30,18 @@ h1 {
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.activities {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75em;
|
||||
}
|
||||
|
||||
.card, .activities > div {
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
|
|
@ -92,17 +99,14 @@ h1 {
|
|||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#content, .socials > *, .card {
|
||||
#content, .socials > *, .card, .activities > div {
|
||||
box-shadow: 0 4px rgba(0, 0, 0, 0.06125);
|
||||
}
|
||||
|
||||
.socials > *:hover {
|
||||
.socials > *:hover, .activities > div:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px rgba(0, 0, 0, 0.030625);
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -111,3 +115,52 @@ footer {
|
|||
text-align: center;
|
||||
font-size: 0.825em;
|
||||
}
|
||||
|
||||
#content, .card, .activities > div {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.activities > div, .description, .activities > div > a img {
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
.activities > div {
|
||||
display: flex;
|
||||
background: #434c5e;
|
||||
font-size: 0.78125em;
|
||||
}
|
||||
|
||||
.description {
|
||||
overflow-y: scroll;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.media-description * {
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #2e3440;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4c566a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #5e81ac;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue