john/lolz
1
0
Fork 0
mirror of https://github.com/jbowdre/lolz.git synced 2024-11-21 20:52:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

api retrieval improvements

Browse source 
- get musicthread from pastebin instead of direct
- don't execute scripts until page is fully loaded
- only execute script if matching element id is on page
This commit is contained in:
John Bowdre 2024-05-01 21:15:51 -05:00
parent 3bcb2240eb
commit e680d32e32
3 changed files with 269 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
musicthread.html
View file

@ -6,19 +6,24 @@
<title>MusicThread Test</title> <title>MusicThread Test</title>
<script> <script>
// retrieves latest link from a musicthread thread and displays it on the page // retrieves latest link from a musicthread thread and displays it on the page
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v'; document.addEventListener("DOMContentLoaded", function() {
const musicthread = "https://jbowdre.paste.lol/musicthread.json/raw";
const nowPlayingElement = document.getElementById("now-playing");
if (nowPlayingElement) {
fetch(musicthread) fetch(musicthread)
.then(res => res.json()) .then(res => res.json())
.then(function(res){ .then(function(res){
let nowPlaying = res.links[0]; let nowPlaying = res;
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist; nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
});
}
}); });
</script> </script>
</head> </head>
<body> <body>
<h1>Now Playing</h1> <h1>Now Playing</h1>
<ul> <ul>
<li><span id="now-playing"> <i class='fa-solid fa-headphones'></i></span></li> <li><span id="now-playing"></span> <i class='fa-solid fa-headphones'></i></li>
</ul> </ul>
</body> </body>
</html> </html>

6
tempest.html
View file

@ -5,6 +5,10 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous">
<title>Weather Test</title> <title>Weather Test</title>
<script> <script>
// get weather data from pastebin
document.addEventListener("DOMContentLoaded", function() {
const hasWeather = document.getElementById('conditions');
if (hasWeather) {
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw'; const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
// get ready to calculate relative time // get ready to calculate relative time
const units = { const units = {
@ -124,6 +128,8 @@
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel]; document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend]; document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
}); });
}
});
</script> </script>
</head> </head>
<body> <body>

63
web_head.html
View file

@ -1,57 +1,61 @@
<link rel="me" title="proven.lol" href="https://proven.lol/4cc26c"> <link rel="me" title="proven.lol" href="https://proven.lol/4cc26c">
<script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script> <script src="https://tinylytics.app/embed/QUH6xcnWKYeUUYaMkDKd.js?kudos=👋" defer></script>
<script> <script>
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw'; // get weather data from pastebin
// get ready to calculate relative time document.addEventListener("DOMContentLoaded", function() {
const units = { const hasWeather = document.getElementById('conditions');
if (hasWeather) {
const wx_endpoint = 'https://paste.jbowdre.lol/tempest.json/raw';
// get ready to calculate relative time
const units = {
year : 24 * 60 * 60 * 1000 * 365, year : 24 * 60 * 60 * 1000 * 365,
month : 24 * 60 * 60 * 1000 * 365/12, month : 24 * 60 * 60 * 1000 * 365/12,
day : 24 * 60 * 60 * 1000, day : 24 * 60 * 60 * 1000,
hour : 60 * 60 * 1000, hour : 60 * 60 * 1000,
minute: 60 * 1000, minute: 60 * 1000,
second: 1000 second: 1000
} }
let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
let getRelativeTime = (d1, d2 = new Date()) => { let getRelativeTime = (d1, d2 = new Date()) => {
let elapsed = d1 - d2 let elapsed = d1 - d2
for (var u in units) for (var u in units)
if (Math.abs(elapsed) > units[u] || u === 'second') if (Math.abs(elapsed) > units[u] || u === 'second')
return rtf.format(Math.round(elapsed/units[u]), u) return rtf.format(Math.round(elapsed/units[u]), u)
} }
// set up temperature and rain ranges // set up temperature and rain ranges
const tempRanges = [ const tempRanges = [
{ upper: 32, label: 'cold' }, { upper: 32, label: 'cold' },
{ upper: 60, label: 'cool' }, { upper: 60, label: 'cool' },
{ upper: 80, label: 'warm' }, { upper: 80, label: 'warm' },
{ upper: Infinity, label: 'hot' } { upper: Infinity, label: 'hot' }
]; ];
const rainRanges = [ const rainRanges = [
{ upper: 0.02, label: 'none' }, { upper: 0.02, label: 'none' },
{ upper: 0.2, label: 'light' }, { upper: 0.2, label: 'light' },
{ upper: 1.4, label: 'moderate' }, { upper: 1.4, label: 'moderate' },
{ upper: Infinity, label: 'heavy' } { upper: Infinity, label: 'heavy' }
] ]
// maps for selecting icons // maps for selecting icons
const CLASS_MAP_PRESS = { const CLASS_MAP_PRESS = {
'steady': 'fa-solid fa-arrow-right-long', 'steady': 'fa-solid fa-arrow-right-long',
'rising': 'fa-solid fa-arrow-trend-up', 'rising': 'fa-solid fa-arrow-trend-up',
'falling': 'fa-solid fa-arrow-trend-down' 'falling': 'fa-solid fa-arrow-trend-down'
} }
const CLASS_MAP_RAIN = { const CLASS_MAP_RAIN = {
'none': 'fa-solid fa-droplet-slash', 'none': 'fa-solid fa-droplet-slash',
'light': 'fa-solid fa-glass-water-droplet', 'light': 'fa-solid fa-glass-water-droplet',
'moderate': 'fa-solid fa-glass-water', 'moderate': 'fa-solid fa-glass-water',
'heavy': 'fa-solid fa-bucket' 'heavy': 'fa-solid fa-bucket'
} }
const CLASS_MAP_TEMP = { const CLASS_MAP_TEMP = {
'hot': 'fa-solid fa-thermometer-full', 'hot': 'fa-solid fa-thermometer-full',
'warm': 'fa-solid fa-thermometer-half', 'warm': 'fa-solid fa-thermometer-half',
'cool': 'fa-solid fa-thermometer-quarter', 'cool': 'fa-solid fa-thermometer-quarter',
'cold': 'fa-solid fa-thermometer-empty' 'cold': 'fa-solid fa-thermometer-empty'
} }
const CLASS_MAP_WX = { const CLASS_MAP_WX = {
'clear-day': 'fa-solid fa-sun', 'clear-day': 'fa-solid fa-sun',
'clear-night': 'fa-solid fa-moon', 'clear-night': 'fa-solid fa-moon',
'cloudy': 'fa-solid fa-cloud', 'cloudy': 'fa-solid fa-cloud',
@ -71,10 +75,10 @@ const CLASS_MAP_WX = {
'snow': 'fa-solid fa-snowflake', 'snow': 'fa-solid fa-snowflake',
'thunderstorm': 'fa-solid fa-cloud-bolt', 'thunderstorm': 'fa-solid fa-cloud-bolt',
'windy': 'fa-solid fa-wind', 'windy': 'fa-solid fa-wind',
} }
// fetch data from pastebin // fetch data from pastebin
fetch(wx_endpoint) fetch(wx_endpoint)
.then(res => res.json()) .then(res => res.json())
.then(function(res){ .then(function(res){
@ -120,15 +124,22 @@ fetch(wx_endpoint)
document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel]; document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[rainLabel];
document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend]; document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
}); });
}
});
</script> </script>
<script> <script>
// retrieves latest link from a musicthread thread and displays it on the page // retrieves latest link from a musicthread thread and displays it on the page
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v'; document.addEventListener("DOMContentLoaded", function() {
fetch(musicthread) const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
const nowPlayingElement = document.getElementById('now-playing');
if (nowPlayingElement) {
fetch(musicthread)
.then(res => res.json()) .then(res => res.json())
.then(function(res){ .then(function(res){
let nowPlaying = res.links[0]; let nowPlaying = res.links[0];
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist; nowPlayingElement.innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist;
}); });
}
});
</script> </script>