vertical-align: middle;
}
+ .collection{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 3px;
+ grid-auto-rows: minmax(100px, auto);
+ background-color: #ffffff;
+ padding: 3px;
+ }
+
+ .item p{
+ display: none;
+ }
+
+ .fedi{
+ background-color: #ffffff11;
+ margin-bottom: 17px;
+ border-radius: 17px;
+ }
+
+ .fedi p{
+ margin: 0;
+ padding: 17px;
+ overflow-x: hidden;
+ }
+
+ .fedi p.date{
+ background-color: #9D9FA8;
+ padding: 3px;
+ padding-left: 17px;
+ }
+
+ .item img{
+ width: 100%;
+ }
+
</style>
</head>
<body>
<div class="quote">
<cite>Technology, sustainability and food, not always in that order</cite>
</div>
+ <h2>Videos</h2>
+ <div id="videos" class="collection"></div>
+ <h2>Photography</h2>
+ <div id="photography" class="collection"></div>
+ <h2>Fedi</h2>
+ <div id="fedi"></div>
</div>
</body>
-</html>
+ <script type="text/javascript">
+ function image(el, cls){
+ return `<article class="${cls}">
+ <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
+ ${el.querySelector("description").firstChild.wholeText}
+ </a>
+ </article>`;
+ }
+ function post(el, cls){
+ return `<article class="${cls}">
+ ${el.querySelector("description").firstChild.wholeText}
+ <p class="date">
+ <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
+ ${el.querySelector("pubDate").innerHTML}
+ </a>
+ </p>
+ </article>`;
+ }
+
+ function get_rss(url, el, disp, item_class){
+ fetch(url)
+ .then(response => response.text())
+ .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
+ .then(data => {
+ const items = data.querySelectorAll("item");
+ let html = ``;
+ items.forEach(el => {
+ html += disp(el, item_class);
+ });
+ el.insertAdjacentHTML("beforeend", html);
+ });
+ }
+
+ let video_url = "https://media.entropealabs.com/videos.xml";
+ let video_el = document.getElementById("videos");
+ get_rss(video_url, video_el, image, "item");
+
+ let photo_url = "https://media.entropealabs.com/photography.xml";
+ let photo_el = document.getElementById("photography");
+ get_rss(photo_url, photo_el, image, "item");
+
+ let fedi_url = "https://mastodon.social/@entropealabs.rss";
+ let fedi_el = document.getElementById("fedi");
+ get_rss(fedi_url, fedi_el, post, "fedi")
+ </script>
+</html>
projects / entropealabs.gitlab.io.git / commitdiff