I wanted to make a version of zonelets for my webcomic, and I wanted to have a bunch of cool features for it!!!! one of those being an RSS feed! and after making it I made a version for regular zonelets as well to share since I haven't seen a tool like this around!!
it's %100 local!! just put it on the same level as script.js and it'll generate an rss feed from your zonelets postsArray to copy and paste into an xml file!! refer to the instructions in the code! (I put the code below to copy into an html file)
<!DOCTYPE html>
<html lang="en">
<head>
<title>RSSmaker</title>
<!-- version 1.0 - an RSS feed generator for blogs using Zonelets [ https://zonelets.net ] -->
<!-- made by Solstice of [ sunsolsticesquirrel.nekoweb.org ] and/or [ sunsolsticesquirrel.neocities.org ]! -->
<!-- this file should be at the same directory level as script.js for the RSSmaker to work properly! -->
<style>
#oneItemResultDisplay {height: 130px;}
#resultDisplay {height: 500px; /*margin-top: 12px;*/}
textarea {width: 560px; display: block; margin: auto;}
#container {width: fit-content; margin: auto;}
details {width: 560px}
ul.buttons {list-style-type: none; margin-top: 5px; text-align: right;}
li {display: inline-block;}
</style>
<script src="./script.js"></script>
<!--Script below for turning postsArray into an RSS feed!!-->
<!--
Table of Contents:
- Extra Basic Info
- File Generation
- UI
if it's your first time here, update the variables in Extra Basic Info,
then open up the html file in your browser and copy the text under Whole File to an .xml (or .rss, or .txt) file!
and remember to link to this file somewhere easy to find on your blog, like in your index or footer with something like "RSS feed"!
From then on, whenever you post a new blog post, copy the text under Most Recent Post and add it to your RSS file right above the top-most <item>!
If you want to edit any other information on the RSS file and don't already know how to, refer to the Quick RSS Guide on this page in the browser!
-->
<script>
// [ EXTRA BASIC INFO ]
let domain = "https://example.com"; //!IMPORTANT! change this to the whole first part of your URL behind posts!!
let itemDescription = "New Post at " + blogName + "!"; //description for each post! (you can easily manually write a description for each post as well!)
let description = "written by " + authorName; //description for the whole rss feed!
/* the plus between strings (the words in quotes) and variables (the words without quotes) joins them into one sentence! In this case, the variables fill in with the information in script.js
I did it this way just to give more useful information by default! feel free to just write whatever you want in a single pair of quotes for the descriptions!*/
let assumedTime = "09:00" // The time that the RSS posts will be set to having been at! this is in 24 hour time, so after 12 you just keep counting up, until you hit midnight and go back to 0.
let timeOffset = "+0000" // the time offset! this can be useful for keeping times more accurate but you don't strictly need to set it. [ https://en.wikipedia.org/wiki/List_of_UTC_offsets ] has a list and a map of time offsets if you want to change it to your own timezone!
// [ FILE GENERATION ]
let rssLink = "";
let rssResult = "";
let postTitle_i = "";
let postDate= "";
function getCurrentDate() {
const d = new Date();
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear() + " " + assumedTime + " " + timeOffset;
};
function getPostDate(i) {
let monthSlice = postsArray[i][0].slice( 11,13 );
let month = "";
if ( monthSlice === "01") { month = "Jan";}
else if ( monthSlice === "02") { month = "Feb";}
else if ( monthSlice === "03") { month = "Mar";}
else if ( monthSlice === "04") { month = "Apr";}
else if ( monthSlice === "05") { month = "May";}
else if ( monthSlice === "06") { month = "Jun";}
else if ( monthSlice === "07") { month = "Jul";}
else if ( monthSlice === "08") { month = "Aug";}
else if ( monthSlice === "09") { month = "Sep";}
else if ( monthSlice === "10") { month = "Oct";}
else if ( monthSlice === "11") { month = "Nov";}
else if ( monthSlice === "12") { month = "Dec";}
return postsArray[i][0].slice( 14,16 ) + " " + month + " " + postsArray[i][0].slice( 6,10 ) + " " + assumedTime + " " + timeOffset;
};
// Formats one post/item
function format1RSSpost(i) {
rssLink = domain + '/' + postsArray[i];
if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) {
postDate = getPostDate(i);
postTitle_i = postsArray[i][0].slice(17,-5).replace(/-/g, " ");
} else {
postDate = getCurrentDate();
postTitle_i = postsArray[i][0].slice(6,-5).replace(/-/g, " ");
}
rssFormattedPost =
' <item> \n <title>' + postTitle_i + '</title> \n <link>' + rssLink + '</link> \n <description>' + itemDescription + '</description>\n <pubDate>' + postDate + '</pubDate>\n <guid>' + rssLink + '</guid>\n </item>\n';
}
// Formats all the Posts/Items in the rss feed
function formatRSSposts() {
for ( let i = 0; i < postsArray.length; i++ ) {
format1RSSpost(i);
rssResult += rssFormattedPost;
}
}
// Puts together the whole file
function formatRSSfile() {
rssResult += '<?xml version="1.0" encoding="UTF-8" ?>\n<rss version="2.0">\n\n<channel>\n <title>' + blogName + '</title>\n <link>' + domain + '</link>\n <description>' + description + '</description>\n<!--add new posts here!-->\n';
formatRSSposts()
rssResult += '</channel>\n\n</rss>';
}
formatRSSfile();
function displayResult() {
document.getElementById("resultDisplay").innerHTML = rssResult;
};
function displayRSSitem() {
format1RSSpost(0);
document.getElementById("oneItemResultDisplay").innerHTML = rssFormattedPost;
}
// [ UI ]
//Following code mostly from https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
var copyText = "";
function selectTextFrom(id) {
// Select the text field
copyText = document.getElementById(id);
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
}
function copyTextFrom(id) {
// Get the text field
copyText = document.getElementById(id);
selectTextFrom(id);
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied!");
}
</script>
</head>
<body onload="displayResult(); displayRSSitem();">
<div id="container">
<div id="header"><ul> <li><a>RSSmaker</a></li> </ul></div>
<noscript>this tool requires javascript!</noscript>
<div id="content">
<figure> <!--The textarea that displays the most recent item for you to copy!-->
<figcaption>Most Recent Post</figcaption>
<textarea id="oneItemResultDisplay"></textarea>
<!-- the Copy and Select buttons --><ul class="buttons"> <li><button onclick='copyTextFrom("oneItemResultDisplay")'>Copy</button></li> <li> <button onclick='selectTextFrom("oneItemResultDisplay")'>Select</button></li> </ul>
</figure>
<figure><!--The textarea that displays the whole file!-->
<figcaption>Whole File (copy this if it's your first time here)</figcaption>
<textarea id="resultDisplay"></textarea>
<!-- the Copy and Select buttons (2) --><ul class="buttons"> <li><button onclick='copyTextFrom("resultDisplay")'>Copy</button></li> <li> <button onclick='selectTextFrom("resultDisplay")'>Select</button></li> </ul>
</figure>
<details><!-- a quick guide to general RSS stuff for the unfamiliar! -->
<summary>Quick RSS Guide!</summary>
<p>
RSS is written in XML, which is a lot like HTML in basic structure! It also uses <br><example>Opening tags and Closing tags with a slash (/) on the end tag, like this!</example>.
<br>If you ever need to write comments, you do so the same way as you would in html! <br><!-- like this! -->
<br><br><i><channel></i> is the overall feed that your readers subscribe to! hypothetically you could have multiple of these!!
<br><i><item></i>s are the updates themselves! this is what'll show up in feed readers representing your posts, and also what you'll add a new one of when you want to send an update!!
<br><i><title></i>, <i><link></i>, <i><description></i>: all self explainatory, and also the only three tags that are technically required for channels and items! The title of the channel/item, the link of the channel/item (homepage for the channel, place of the update for the items!), and the description of the channel/item!
<br><i><pubDate></i>: The Publication Date! this tag should be compliant to <a href="http://www.rfc-editor.org/rfc/rfc822.html">RFC822</a>. a date in this format may look a little like <i>Tue, 10 Jul 2018 09:58 +0100</i>
<br><i><guid></i>: unique identifier for the item! helps RSS readers not duplicate posts when they're edited appearently! this is a permalink by default! (isPermaLink="false" can be used if that's not the case!)
<br><br>
<a href="https://validator.w3.org/feed/">W3C's RSS feed validator</a> can be used to check the syntax of an RSS feed, and an RSS reader can be used to see if it practically works as intended!
</p>
</details>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Posts & Arts: 66/1k.beats
Websites are like whispers in the night 
Author
