Introducing The Panoptic Pen Blog's Widget Collection: Enhance Your Website Today!
Welcome to The Panoptic Pen Blog's exclusive widget collection, designed to elevate your website and bring a touch of insightful content to your readers. We believe in the power of collaboration and knowledge-sharing, which is why we've created these embeddable widgets for you to easily incorporate into your site. By featuring our widgets, you not only enrich your website's content but also support The Panoptic Pen Blog's mission to inspire and inform.
Widget 1:
Code:
Code:
<a href="https://panopticpen.space/">
<img width="250" height="250" src="https://panopticpen.gor.bio/more/embedWidgetsIMG/widget1.gif">
</a>
Widget 2:
Code:
Code:
<style> #rss-container { max-width: 600px; margin: 0 auto; } .rss-item { border-bottom: 1px solid #ccc; padding: 10px; } .rss-title { font-weight: bold; font-family: arial; } .rss-date { font-size: 0.8em; color: #888; } </style> <div id="rss-container"> <!-- The fetched RSS items will be added here dynamically --> </div> <script> document.addEventListener("DOMContentLoaded", function () { const rssUrl = "https://panopticpen.space/RSS"; const container = document.getElementById("rss-container"); const proxyUrl = "https://cors-anywhere.herokuapp.com/"; const corsUrl = proxyUrl + rssUrl; fetch(corsUrl) .then((response) => response.text()) .then((data) => { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(data, "text/xml"); const items = xmlDoc.getElementsByTagName("item"); let output = ""; for (let i = 0; i < items.length && i < 10; i++) { const title = items[i].getElementsByTagName("title")[0].textContent; const date = new Date( items[i].getElementsByTagName("pubDate")[0].textContent ).toDateString(); const link = items[i].getElementsByTagName("link")[0].textContent; output += ` <div class="rss-item"> <a href="${link}" class="rss-title">${title}</a> </div> `; } container.innerHTML = output; }) .catch((error) => { console.error("Error fetching RSS feed:", error); }); }); </script>
Widget 3:
Code:
Code:
<br> <a href="https://panopticpen.space/" target="_Top"><img border="0" src="https://panopticpen.space/more/embedWidgetsIMG/landscapewidget.gif" width="728" height="90"></a> <br>
