Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
galaxyproject
GitHub Repository: galaxyproject/training-material
 Path: blob/main/feed-widget.xslt.xml
1669 views
1
<xsl:stylesheet

2
  version="1.0"

3
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

4
  xmlns:atom="http://www.w3.org/2005/Atom"

5
  exclude-result-prefixes="atom"

6
>

7
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>

8
  <xsl:template match="/">

9
    <html xmlns="http://www.w3.org/1999/xhtml">

10
      <head>

11
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

12
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>

13
        <title><xsl:value-of select="atom:feed/atom:title"/> • GTN News </title>

14
        <link rel="icon" type="image/png">

15
          <xsl:attribute name="href">

16
            <xsl:value-of select="atom:feed/atom:logo"/>

17
          </xsl:attribute>

18
        </link>

19
        <link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..800,0..1,0..1,1&amp;display=swap" rel="stylesheet"/>

20
        <style type="text/css">

21
:root {--step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);--step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);--step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);--step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);--step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);--brand: #782760;--secondary: #b970a3;--brand-contrast: white;--background: #fff;--shadow: #ccc}

22
@media (prefers-color-scheme: dark) { :root {--background: #000;--brand: #f3adde;--shadow: #666}}

23
h1{font-size:var(--step-1);line-height:1.125em;margin:0; weight: 900; text-transform: capitalize;font-variation-settings: "wght" 900, "CRSV" 0.5, "CASL" 0;}

24
h2{margin:0;font-size:var(--step-0); font-weight: 500; font-variation-settings: "CRSV" 0.5, "CASL" 1;}

25
p { margin: 0; }

26
a{text-decoration:none; color: var(--brand);}

27
div.entry { position: relative; pointer: cursor; margin-bottom: 0.6rem; padding: 0.4rem; border: 1px solid var(--brand);}

28
div.entry[data-has-link="true"]:hover { box-shadow: 4px 4px 0px #782760; }

29
div.entry[data-has-link="true"]:active{ box-shadow: 2px 2px 0px #782760; }

30
div a.cover {position: absolute;width: 100%;height: 100%;top: 0;left: 0;text-decoration: none;z-index: 10;}

31
div small {display: none;}

32
div.entry:nth-child(2n) { --brand: white; --brand-contrast: #782760; color: var(--brand); background: var(--brand-contrast); }

33
.authors{font-style: italic;}

34
.meta{font-variation-settings: "wght" 300, "CRSV" 1, "CASL" 1; margin-bottom: 0.4rem; display: flex; justify-content: space-between;}

35
@media(max-width: 600px) { .meta { flex-direction: column;}} 

36
body {max-width:768px; margin: 0 auto; font-family: 'Recursive', serif; color: var(--brand); background: var(--background);display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header' 'main' 'footer'; height: 100vh; }

37
header {grid-area: header; padding: 0.5em; border-bottom: 2px solid var(--secondary); display: flex; align-items: center; justify-content: space-between;}

38
header img {margin-right: 0.5em}

39
main { grid-area: main; padding: 15px 5px 10px 5px;}

40
footer { grid-area: footer; padding: 0.5em; border-top: 2px solid var(--secondary); }

41
div.entry ul a { text-decoration: underline; }

42
div.entry ul a:hover{ text-decoration: underline; font-weight: 700;}

43
footer a { text-decoration: underline; }

44
footer a:hover{ font-weight:700; }

45
main { overflow-y: auto; overflow-x: hidden; }

46


47
        </style>

48
      </head>

49
      <body>

50
        <header>

51
          <hgroup>

52
            <h1>

53
              <a class="head_link" target="_blank">

54
                <xsl:attribute name="href">

55
                  <xsl:value-of select="concat(atom:feed/atom:link[@rel='alternate']/@href, '?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss')"/>

56
                </xsl:attribute>

57
                <xsl:value-of select="atom:feed/atom:title"/>

58
              </a>

59
            </h1>

60
            <p><xsl:value-of select="atom:feed/atom:subtitle"/></p>

61
          </hgroup>

62
          <a class="head_link" target="_blank" href="https://training.galaxyproject.org?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss">

63
            <img width="30px" alt="gtn logo">

64
              <xsl:attribute name="src">

65
                <xsl:value-of select="atom:feed/atom:logo"/>

66
              </xsl:attribute>

67
            </img>

68
          </a>

69
        </header>

70
        <main>

71
          <xsl:apply-templates select="atom:feed/atom:entry" />

72
          <!-- if there are no entries, only applies to Events. -->

73
          <xsl:if test="count(atom:feed/atom:entry) = 0">

74
            <div class="entry">

75
              No upcoming events

76
            </div>

77
          </xsl:if>

78
        </main>

79
        <footer>

80
          <a target="_blank" href="https://training.galaxyproject.org/training-material/news/2024/06/04/gtn-standards-rss.html?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss">GTN RSS</a>

81
           •

82
          <a target="_blank" href="https://spdx.org/licenses/CC-BY-4.0">CC-BY 4.0</a>

83
           •

84
          <a target="_blank" href="https://training.galaxyproject.org/training-material/faqs/gtn/fair_training.html?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss">FAIR</a>

85
           •

86
          <a target="_blank">

87
            <xsl:attribute name="href">

88
              <xsl:value-of select="concat(atom:feed/atom:link[@rel='self']/@href, '?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss')"/>

89
            </xsl:attribute>

90
           🔗

91
          </a>

92
        </footer>

93
        <script data-domain="training.galaxyproject.org" src="https://plausible.galaxyproject.eu/js/plausible.js"></script>

94
        <script>

95
        if(localStorage.getItem('plausible-opt-out') !== 'opt-out' &amp;&amp; navigator.doNotTrack !== "1") {

96
            localStorage.removeItem("plausible_ignore")

97
            console.log("Plausible: opt-in");

98
            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }

99
        } else {

100
            // if they're opting-out, or DNT

101
            // we might get one page by accident but we won't get future ones.

102
            localStorage.setItem("plausible_ignore", "true")

103
        }

104
        </script>

105
      </body>

106
    </html>

107
  </xsl:template>

108


109
  <xsl:template match="atom:entry">

110
    <div class="entry">

111
      <xsl:attribute name="data-has-link">

112
        <xsl:choose>

113
        <xsl:when test="atom:link/@href">true</xsl:when>

114
        <xsl:otherwise>false</xsl:otherwise>

115
        </xsl:choose>

116
      </xsl:attribute>

117
      <xsl:attribute name="id">

118
        <xsl:value-of select="atom:id"/>

119
      </xsl:attribute>

120
      <h2>

121
        <xsl:choose>

122
          <xsl:when test="atom:link/@href">

123
          <a target="_blank">

124
            <xsl:attribute name="href">

125
              <xsl:value-of select="concat(atom:link/@href, '?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss')"/>

126
            </xsl:attribute>

127
            <xsl:value-of select="atom:title"/>

128
          </a>

129
          </xsl:when>

130
          <xsl:otherwise>

131
            <xsl:value-of select="atom:title"/>

132
          </xsl:otherwise>

133
        </xsl:choose>

134
      </h2>

135
      <div class="meta">

136
        <!-- If author isn't "GTN" -->

137
        <xsl:if test="atom:author/atom:name != 'GTN'">

138
          <span class="authors">

139
           <i>By: </i><xsl:for-each select="atom:author">

140
               <a href="{atom:uri}">

141
                 <xsl:value-of select="atom:name" />

142
               </a>

143
               <xsl:if test="position() != last()">

144
                 <xsl:text>, </xsl:text>

145
               </xsl:if>

146
             </xsl:for-each>

147
          </span>

148
        </xsl:if>

149
        <xsl:choose>

150
          <xsl:when test="atom:posted">

151
            <time>

152
              <xsl:attribute name="datetime">

153
                <xsl:value-of select="atom:posted"/>

154
              </xsl:attribute>

155
              <xsl:value-of select="atom:posted"/>

156
            </time>

157
          </xsl:when>

158
          <xsl:otherwise>

159
            <time>

160
              <xsl:attribute name="datetime">

161
                <xsl:value-of select="atom:updated"/>

162
              </xsl:attribute>

163
              <xsl:value-of select="atom:updated"/>

164
            </time>

165
          </xsl:otherwise>

166
        </xsl:choose>

167
      </div>

168
      <!-- if summary -->

169
      <p class="summary">

170
        <xsl:choose>

171
          <xsl:when test="atom:summary">

172
            <xsl:value-of select="atom:summary"  disable-output-escaping="yes" />

173
          </xsl:when>

174
          <xsl:when test="atom:content">

175
            <xsl:copy-of select="atom:content" />

176
          </xsl:when>

177
        </xsl:choose>

178
      </p>

179
      <small>

180
        Published: <xsl:value-of select="atom:updated" /> <br/>

181
        Tags:

182
        <xsl:for-each select="atom:category">

183
          <xsl:value-of select="@term" />

184
          <xsl:if test="position() != last()">

185
            <xsl:text>, </xsl:text>

186
          </xsl:if>

187
        </xsl:for-each>

188
      </small>

189


190
      <!-- https://stackoverflow.com/questions/796087/make-a-div-into-a-link -->

191
      <!-- check if it has a link at all -->

192
      <xsl:if test="atom:link/@href">

193
        <a target="_blank" class="cover">

194
          <xsl:attribute name="href">

195
            <xsl:value-of select="concat(atom:link/@href, '?utm_source=embed&amp;utm_medium=rss-widget&amp;utm_campaign=rss')"/>

196
          </xsl:attribute>

197
        </a>

198
       </xsl:if>

199
    </div>

200
  </xsl:template>

201
</xsl:stylesheet>

202


203