diff options
Diffstat (limited to 'static/yap/theme.xsl')
| -rw-r--r-- | static/yap/theme.xsl | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/static/yap/theme.xsl b/static/yap/theme.xsl new file mode 100644 index 0000000..e6f80f8 --- /dev/null +++ b/static/yap/theme.xsl | |||
| @@ -0,0 +1,98 @@ | |||
| 1 | <?xml version="1.0" encoding="utf-8"?> | ||
| 2 | <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> | ||
| 3 | <xsl:template match="/"> | ||
| 4 | |||
| 5 | <html> | ||
| 6 | |||
| 7 | <head> | ||
| 8 | |||
| 9 | <meta charset="utf-8" /> | ||
| 10 | <meta name="theme-color" content="#ffffff" /> | ||
| 11 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| 12 | <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| 13 | |||
| 14 | <title>Microblog - Mitja Felicijan</title> | ||
| 15 | <link rel="icon" type="image/gif" href="/general/favicon.gif" /> | ||
| 16 | |||
| 17 | <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> | ||
| 18 | |||
| 19 | <style> | ||
| 20 | .container-blog { | ||
| 21 | max-width: 700px; | ||
| 22 | } | ||
| 23 | </style> | ||
| 24 | |||
| 25 | <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script> | ||
| 26 | <script> | ||
| 27 | window.addEventListener('load', () => { | ||
| 28 | document.querySelectorAll('time').forEach(el => { | ||
| 29 | const formattedDate = dayjs(el.getAttribute('datetime')).format('dddd, MMMM D, YYYY h:mm A'); | ||
| 30 | el.innerText = formattedDate; | ||
| 31 | }); | ||
| 32 | }); | ||
| 33 | </script> | ||
| 34 | |||
| 35 | </head> | ||
| 36 | |||
| 37 | <body> | ||
| 38 | |||
| 39 | <header class="container-blog mx-auto px-6 md:p-0"> | ||
| 40 | <div class="flex py-4 mt-4 mb-6 items-center gap-2"> | ||
| 41 | <h1> | ||
| 42 | <a href="/" class="text-xl font-bold hover:bg-yellow-100"> | ||
| 43 | <xsl:value-of select="rss/channel/title" /> | ||
| 44 | </a> | ||
| 45 | </h1> | ||
| 46 | </div> | ||
| 47 | </header> | ||
| 48 | |||
| 49 | <main class="container-blog mx-auto px-6 md:p-0 mb-32"> | ||
| 50 | |||
| 51 | <xsl:for-each select="rss/channel/item"> | ||
| 52 | <xsl:sort select="guid" data-type="number" order="descending" /> | ||
| 53 | |||
| 54 | <article class="flex flex-col md:flex-row gap-4 mb-10"> | ||
| 55 | |||
| 56 | <xsl:if test="enclosure/@url"> | ||
| 57 | <a class="w-full md:w-80" target="_blank"> | ||
| 58 | <xsl:attribute name="href"> | ||
| 59 | <xsl:value-of select="enclosure/@url" /> | ||
| 60 | </xsl:attribute> | ||
| 61 | |||
| 62 | <img class="rounded w-full object-contain md:object-fill"> | ||
| 63 | <xsl:attribute name="src"> | ||
| 64 | <xsl:value-of select="enclosure/@url" /> | ||
| 65 | </xsl:attribute> | ||
| 66 | </img> | ||
| 67 | </a> | ||
| 68 | </xsl:if> | ||
| 69 | |||
| 70 | <section> | ||
| 71 | <xsl:if test="pubDate"> | ||
| 72 | <div class="text-gray-400 text-xs font-medium mb-1"> | ||
| 73 | <time> | ||
| 74 | <xsl:attribute name="datetime"> | ||
| 75 | <xsl:value-of select="pubDate" /> | ||
| 76 | </xsl:attribute> | ||
| 77 | <xsl:value-of select="pubDate" /> | ||
| 78 | </time> | ||
| 79 | </div> | ||
| 80 | </xsl:if> | ||
| 81 | |||
| 82 | <xsl:if test="description"> | ||
| 83 | <div class="description"> | ||
| 84 | <xsl:value-of select="description" /> | ||
| 85 | </div> | ||
| 86 | </xsl:if> | ||
| 87 | </section> | ||
| 88 | |||
| 89 | </article> | ||
| 90 | </xsl:for-each> | ||
| 91 | |||
| 92 | </main> | ||
| 93 | |||
| 94 | </body> | ||
| 95 | </html> | ||
| 96 | |||
| 97 | </xsl:template> | ||
| 98 | </xsl:stylesheet> | ||