Raw Source Toggle Dropdown

• Minified Source

mll / APOD (Astronomy Picture of the Day) Enhancer

// ==UserScript==
// @name        APOD (Astronomy Picture of the Day) Enhancer
// @description A userscript to simplify and beautify the NASA Astronomy Picture Of the Day website.
// @namespace   mll
// @author      mll, jcunews1
// @match       *://apod.nasa.gov/apod/*
// @version     6
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// @updateURL   https://openuserjs.org/meta/mll/APOD_(Astronomy_Picture_of_the_Day)_Enhancer.meta.js
// @license     MIT
// ==/UserScript==

/* global $ */
/* eslint-disable no-multi-spaces */
var title = $('b:eq(0)').text();
var prev = 'https://apod.nasa.gov/apod/' + $('a:contains("<")').attr('href');
var next = 'https://apod.nasa.gov/apod/' + $('a:contains(">")').attr('href');
var p = $('p:eq(1)').html().split('<br>');
//clean p from empty or "/n" items
p = p.filter(function (item) {
  return item.trim() !== "";
});
var p1 = $.trim(p[1]);

//look for date
var date = $.trim(p[0]).split(' ');
console.log(date);

//look for explanation
var explanation = $.trim($('p:eq(2)').html());
explanation = explanation.substring(22);


// look for credits
var credits

// Regular expression to match the start tag variations (could be  "<b> Image Credit & Copyright: </b>" or  "<b> Image Credit &amp; Copyright: </b>" or "<b> Image Credit: </b>")
// kudos to ChatGPT 3 for the regexp :)
var creditsStartTagRegex = /<b>\s*Image\s+Credit(?:\s*&amp;|\s*&)?(?:\s+Copyright)?\s*:\s*<\/b>/i;

var creditsStartTagMatch = $('body').html().match(creditsStartTagRegex);
if (creditsStartTagMatch) {
    var startIndex = creditsStartTagMatch.index + creditsStartTagMatch[0].length;

    var endIndex = $('body').html().indexOf("</center>", startIndex);
    if (endIndex !== -1) {
        credits = $('body').html().substring(startIndex, endIndex);
    } else {
        credits = "Credits end tag not found.";
    }
} else {
    credits = "Credits start tag not found.";
}

// handle date
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var d = new Date();
var year = d.getFullYear();
var month = monthNames[d.getMonth()];
var day = d.getDate();

$('body').empty();
$('body').prepend('<div id="header"><a href="https://www.nasa.gov/" id="logo"><i></i></a><h1>' + title + '</h1><a href="https://apod.nasa.gov/apod/astropix.html" id="date">' + date[2] + ' ' + date[1] + ' ' + date[0] + '</a></div> \
<a id="prev" href="' + prev + '"><span>&laquo;</span></a><a id="next" href="' + next + '"><span>&raquo;</span></a> \
<div id="image">' + p1 + '</div> \
<div id="explanation">' + explanation + '</div> \
<div id="credits">Image credits: ' + credits + '</div>');

if (day == date[2] && month == date[1] && year == date[0]) {
  $('#next').hide();
}

if (p1.toLowerCase().indexOf("iframe") >= 0) {
  $('iframe').addClass('iframe');
}

// Create a style element
var style = document.createElement('style');
style.type = 'text/css';

// Define the CSS rules
style.textContent = `
    body {
        background-color: #222;
        font-family: Arial, Helvetica, sans-serif;
    }
    a {
        color: #666;
        text-decoration: none;
    }
    #header {
        position: relative;
        width: 900px;
        height: 92px;
        margin: 20px auto;
    }
    #logo {
        float: left;
    }
    #logo i {
        width: 110px;
        height: 92px;
        display: inline-block;
        left: 0;
    }
    h1 {
        color: #eee;
        text-align: right;
        line-height: 36px;
        padding-top: 25px;
        font-weight: 300;
    }
    #date {
        position: absolute;
        top: 0;
        right: 0;
        color: #ccc;
    }
    #prev, #next {
        position: fixed;
        top: 0;
        display: table;
        height: 100%;
        text-align: center;
        width: 100px;
        text-decoration: none;
        font-size: 50px;
        color: #666;
        transition: background-color 300ms;
    }
    #prev:hover, #next:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color 300ms;
    }
    #prev {
        left: 0;
    }
    #next {
        right: 0;
    }
    #prev span, #next span {
        display: table-cell;
        vertical-align: middle;
    }
    #image {
        width: 900px;
        margin: 0px auto 30px;
    }
    #image img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
    }
    .iframe {
        width: 900px;
    }
    #explanation, #credits {
        color: #CCCCCC;
        margin: 0 auto 30px;
        text-align: justify;
        width: 700px;
    }
    @media (max-width: 1160px) {
        #header, #image, .iframe, #explanation, #credits {
            width: 700px;
        }
        #explanation, #credits {
            width: 600px;
        }
    }
    @media (max-width: 980px) {
        #header, #image, .iframe, #explanation, #credits {
            width: 600px;
        }
        #explanation, #credits {
            width: 500px;
        }
    }
    @media (max-width: 850px) {
        #prev, #next {
            width: 50px;
        }
    }
`;

// Append the style element to the head of the document
document.head.appendChild(style);