aboutsummaryrefslogtreecommitdiff
path: root/yapyap/yapyap.xsl
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2021-09-16 12:31:29 +0200
committerMitja Felicijan <mitja.felicijan@gmail.com>2021-09-16 12:31:29 +0200
commit994c67d522b413fb3184376955a43d4a4f50d716 (patch)
tree0403783cf55e5713f5193bc644022d52f75b61f7 /yapyap/yapyap.xsl
parentbbbc53a5ec92daf894954aa975fb4a29b8b01699 (diff)
downloadmitjafelicijan.com-994c67d522b413fb3184376955a43d4a4f50d716.tar.gz
Added sample YapYap feed
Diffstat (limited to 'yapyap/yapyap.xsl')
-rw-r--r--yapyap/yapyap.xsl251
1 files changed, 251 insertions, 0 deletions
diff --git a/yapyap/yapyap.xsl b/yapyap/yapyap.xsl
new file mode 100644
index 0000000..8fecb30
--- /dev/null
+++ b/yapyap/yapyap.xsl
@@ -0,0 +1,251 @@
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:output method="html"/>
4 <xsl:template match="/">
5
6 <html>
7
8 <head>
9
10 <meta charset="utf-8" />
11 <meta name="theme-color" content="#ffffff" />
12 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
14
15 <link rel="manifest" href="/manifest.json?v=1" />
16
17 <meta name="theme-color" content="#f4ca16" />
18
19 <link rel="preconnect" href="https://fonts.googleapis.com" />
20 <link rel="preconnect" href="https://fonts.gstatic.com" />
21 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet" type='text/css' />
22
23 <style>
24 :root {
25 --base-document-width: 500px;
26 }
27
28 * {
29 box-sizing: border-box;
30 background-color: transparent;
31 margin: 0;
32 padding: 0;
33 border: 0;
34 list-style-type: none;
35 outline: none;
36 text-decoration: none;
37 position: relative;
38 box-shadow: none;
39
40 -moz-osx-font-smoothing: grayscale !important;
41 text-rendering: optimizeLegibility !important;
42 -webkit-font-smoothing: antialiased !important;
43 }
44
45 body {
46 font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
47 font-size: 14px;
48 line-height: 140%;
49 }
50
51 h1 { font-size: 140%; }
52 h2 { font-size: 130%; }
53 h3 { font-size: 120%; }
54
55 .fixed {
56 position: fixed;
57 top: 0;
58 left: 0;
59 right: 0;
60 width: 100%;
61 background: #f4ca16;
62 z-index: 2;
63 border-bottom: 0px solid #eee;
64 }
65
66 header {
67 max-width: var(--base-document-width);
68 margin: 0 auto;
69 padding: 20px;
70 display: flex;
71 gap: 10px;
72 align-items: center;
73 }
74
75 header figure img {
76 width: 48px;
77 height: 48px;
78 object-fit: cover;
79 border-radius: 100%;
80 }
81
82 header .meta {
83 flex-grow: 1;
84 }
85
86 header .subscribe span {
87 background: #ffffff;
88 border: 2px solid #eaae3c;
89 padding: 8px 15px;
90 border-radius: 50px;
91 color: #eaae3c;
92 font-weight: 700;
93 cursor: pointer;
94 text-transform: uppercase;
95 font-size: 80%;
96 }
97
98 header .subscribe span:hover {
99 background-color: #eaae3c;
100 color: #fff;
101 }
102
103 main {
104 max-width: var(--base-document-width);
105 margin: 0 auto;
106 padding: 20px;
107 padding-top: 120px;
108 }
109
110 article {
111 border: 1px solid #eee;
112 margin-block-end: 20px;
113 max-width: 100%;
114
115 border-radius: 5px;
116 overflow: hidden;
117 }
118
119 article figure img {
120 width: 100%;
121 height: 300px;
122 object-fit: cover;
123 border-bottom: 1px solid #eee;
124 }
125
126 article section {
127 padding: 10px 15px;
128 }
129
130 article section p {
131 margin-block-end: 15px;
132 font-size: 120%;
133 }
134
135 article section .meta {
136 display: flex;
137 gap: 5px;
138 align-items: center;
139 color: #808080;
140 font-weight: 500;
141 }
142
143 article section .meta img {
144 width: 15px;
145 height: 15px;
146 object-fit: cover;
147 border-radius: 100%;
148 }
149
150 </style>
151
152 </head>
153
154 <body>
155
156 <div class="fixed">
157 <header>
158 <figure>
159 <img>
160 <xsl:attribute name="src">
161 <xsl:value-of select="rss/channel/image/url" />
162 </xsl:attribute>
163 </img>
164 </figure>
165 <div class="meta">
166 <h1><xsl:value-of select="rss/channel/title" /></h1>
167 <p><xsl:value-of select="rss/channel/link" /></p>
168 </div>
169 </header>
170 </div>
171
172 <main>
173
174 <xsl:for-each select="rss/channel/item">
175 <xsl:sort select="rid" data-type="number" order="descending" />
176
177 <article>
178
179 <xsl:if test="enclosure/@url">
180 <figure>
181 <a target="_blank">
182 <xsl:attribute name="href">
183 <xsl:value-of select="enclosure/@url" />
184 </xsl:attribute>
185
186 <img>
187 <xsl:attribute name="src">
188 <xsl:value-of select="enclosure/@url" />
189 </xsl:attribute>
190 </img>
191 </a>
192 </figure>
193 </xsl:if>
194
195 <section>
196 <xsl:if test="description">
197 <p><xsl:value-of select="description" /></p>
198 </xsl:if>
199
200 <xsl:if test="pubDate">
201 <div class="meta">
202 <img>
203 <xsl:attribute name="src">
204 <xsl:value-of select="/rss/channel/image/url" />
205 </xsl:attribute>
206 </img>
207
208 <time class="timeago">
209 <xsl:attribute name="datetime">
210 <xsl:value-of select="pubDate" />
211 </xsl:attribute>
212 <xsl:value-of select="pubDate" />
213 </time>
214 </div>
215 </xsl:if>
216 </section>
217
218 </article>
219 </xsl:for-each>
220
221 </main>
222
223 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
224 <script src="https://unpkg.com/dayjs@1.8.21/plugin/relativeTime.js"></script>
225 <script>
226
227 dayjs.extend(window.dayjs_plugin_relativeTime);
228 document.querySelectorAll('time').forEach(element => {
229 element.innerText = dayjs(element.getAttribute('datetime')).fromNow();
230 });
231
232 function replaceURLs(message) {
233 var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
234 return message.replace(urlRegex, function (url) {
235 return `<a>@@@@${url}</a>`;
236 });
237 }
238
239 document.querySelectorAll('article p').forEach(element => {
240 // element.innerHTML = replaceURLs(element.innerHTML);
241 console.log(replaceURLs(element.innerHTML));
242 });
243
244 </script>
245
246 </body>
247 </html>
248
249 </xsl:template>
250</xsl:stylesheet>
251
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 05:50:15 +0000