69 lines
2.6 KiB
XML
69 lines
2.6 KiB
XML
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
|
<xsl:template match="/">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title><xsl:value-of select="/rss/channel/title" /></title>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" type="text/css" href="/assets/style2.css" />
|
|
<link rel="stylesheet" type="text/css" href="/assets/rss.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1><xsl:value-of select="/rss/channel/title" /></h1>
|
|
</header>
|
|
<main>
|
|
<p>An <a href="https://en.wikipedia.org/wiki/RSS">rss feed</a> where I post cool things I find or make. Yes, this is a rss feed. View source if you don't believe me.</p>
|
|
<p>Don't know what rss is? It's a standardized way for you to subscribe to a website and get updates when new stuff is posted. You can find a good rss reader <a href="https://en.wikipedia.org/wiki/Search_engine">here</a>.</p>
|
|
<ul>
|
|
<xsl:for-each select="/rss/channel/item">
|
|
<li>
|
|
<a>
|
|
<xsl:attribute name="href">
|
|
<xsl:value-of select="link" />
|
|
</xsl:attribute>
|
|
<article>
|
|
<h3>
|
|
<xsl:value-of select="title" />
|
|
</h3>
|
|
<p>
|
|
<xsl:value-of select="description" />
|
|
</p>
|
|
<footer>
|
|
updated <time>
|
|
<xsl:attribute name="datetime">
|
|
<xsl:value-of select="updated" />
|
|
</xsl:attribute>
|
|
<xsl:value-of select="updated" />
|
|
</time>
|
|
</footer>
|
|
</article>
|
|
</a>
|
|
</li>
|
|
</xsl:for-each>
|
|
</ul>
|
|
</main>
|
|
<script><![CDATA[
|
|
const now = Date.now();
|
|
const intl = new Intl.RelativeTimeFormat();
|
|
|
|
for (const el of document.querySelectorAll("time")) {
|
|
el.textContent = format(new Date(el.dateTime) - now);
|
|
}
|
|
|
|
function format(diff) {
|
|
if (diff > 0) return "soon";
|
|
if (diff > -1000 * 60) return intl.format(diff / 1000 << 0, "seconds");
|
|
if (diff > -1000 * 60 * 60) return intl.format(diff / 1000 / 60 << 0, "minutes");
|
|
if (diff > -1000 * 60 * 60 * 24) return intl.format(diff / 1000 / 60 / 60 << 0, "hours");
|
|
if (diff > -1000 * 60 * 60 * 24 * 7) return intl.format(diff / 1000 / 60 / 60 / 24 << 0, "days");
|
|
if (diff > -1000 * 60 * 60 * 24 * 7 * 52) return intl.format(diff / 1000 / 60 / 60 / 24 / 7 << 0, "weeks");
|
|
return "a long time ago";
|
|
}
|
|
]]>
|
|
</script>
|
|
</body>
|
|
</html>
|
|
</xsl:template>
|
|
</xsl:stylesheet>
|