Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

feed.xsl 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. Une petite explication…
  4. La base vient de (il y a de la documentation en entête en anglais) :
  5. => https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl
  6. Que l’on peut voir en application ici :
  7. => http://interconnected.org/home/feed
  8. Il y a aussi une explication en anglais par là :
  9. => https://lepture.com/en/2019/rss-style-with-xsl
  10. Si vous voulez faire la même chose, il va vous falloir :
  11. 1. lier votre propre CSS (facile)
  12. 2. adapter le contenu à aller récupérer en XSLT (intermédiaire)
  13. 3. debugger à base d’essais-erreurs-stackoverflow (ma vie)
  14. À la fin, il ne faut pas oublier de servir le flux avec les bon headers
  15. HTTP pour le Content-Type :
  16. ```
  17. Content-Type: application/xml; charset=utf-8 # not application/rss+xml
  18. X-Content-Type-Options: nosniff
  19. ```
  20. Ça ressemble à ça dans ma configuration Apache :
  21. ```
  22. <FilesMatch "/david/log/index.xml">
  23. Header set Content-Type "application/xml; charset=utf-8"
  24. Header set X-Content-Type-Options "nosniff"
  25. </FilesMatch>
  26. ```
  27. C’est notamment important pour Safari (iOS+macOS).
  28. Pour discuter :
  29. => https://github.com/genmon/aboutfeeds/issues/8
  30. ## Limitations
  31. - Styling the feed *prevents* the browser from automatically opening a
  32. newsreader application. This is a trade off, but it's a benefit to new users
  33. who won't have a newsreader installed, and they are saved from seeing or
  34. downloaded obscure XML content. For existing newsreader users, they will know
  35. to copy-and-paste the feed URL, and they get the benefit of an in-browser feed
  36. preview.
  37. - Feed styling, for all browsers, is only available to site owners who control
  38. their own platform. The need to add both XML and HTTP headers makes this a
  39. limited solution.
  40. - Firefox does not support `disable-output-escaping="yes"` which means that
  41. the content of the encoded entries displays the HTML without rendering it.
  42. -->
  43. <xsl:stylesheet version="3.0"
  44. xmlns:atom="http://www.w3.org/2005/Atom"
  45. xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  46. <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  47. <xsl:template match="/">
  48. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
  49. <head>
  50. <title><xsl:value-of select="/atom:feed/atom:title"/> (flux RSS)</title>
  51. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  52. <meta name="viewport" content="width=device-width,initial-scale=1"/>
  53. <link rel="stylesheet" type="text/css" href="/static/david/css/style_2021-01-20.css"/>
  54. <style type="text/css">summary{margin-top: 2rem;} input{font-size: 1.5rem;}</style>
  55. </head>
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  57. <article>
  58. <header>
  59. <h1>
  60. <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
  61. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" class="pr-1" id="RSSicon" viewBox="0 0 256 256">
  62. <defs>
  63. <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
  64. <stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
  65. <stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
  66. <stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
  67. <stop offset="1.0" stop-color="#D95B29"/>
  68. </linearGradient>
  69. </defs>
  70. <rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
  71. <rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
  72. <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
  73. <circle cx="68" cy="189" r="24" fill="#FFF"/>
  74. <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
  75. <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
  76. </svg>
  77. Prévisualisation du flux
  78. </h1>
  79. </header>
  80. <nav>
  81. <p class="center">
  82. <a>
  83. <xsl:attribute name="href">
  84. <xsl:value-of select="/atom:feed/atom:link/@href"/>
  85. </xsl:attribute>
  86. Vous êtes perdu·e ? Retourner à l’accueil &#x2192;
  87. </a>
  88. </p>
  89. </nav>
  90. <hr />
  91. <form>
  92. <label for="feed-url"><strong>Ceci est un flux,</strong> aussi appelé flux RSS. <strong>Suivez</strong> ces publications en insérant dans votre lecteur de flux l’URL en cours : </label>
  93. <input type="text" id="feed-url" value="https://larlet.fr/david/log/" />
  94. </form>
  95. <details>
  96. <summary>J’aimerais avoir plus d’informations !</summary>
  97. <p>
  98. L’intégralité des contenus du site sera disponible avec votre lecteur. L’objectif est que vous n’ayez pas à revenir manuellement sur ce site pour vérifier s’il y a de nouvelles mises à jour et que vous puissiez lire ce contenu dans un environnement qui vous convient. Voici un <a href="https://app.flus.fr/collections/1697727436392022679">exemple de rendu/souscription</a> avec le lecteur Flus. Pour macOS, j’utilise <a href="https://netnewswire.com/">NetNewsWire</a>.
  99. </p>
  100. <p>
  101. Si vous ne savez pas ce qu’est un flux, j’ai tenté d’en faire <a href="https://larlet.fr/david/blog/2019/flux-rss/">une description pour néophytes par ici</a>. Si vous êtes pressé·e : c’est gratuit, non filtré, ordonné par date de publication, indépendant d’une plateforme tierce, je n’ai aucun moyen de savoir si vous êtes abonné·e ou pas et je ne sais pas qui vous êtes.
  102. Aussi, c’est <a href="https://fr.wikipedia.org/wiki/RSS">un standard ouvert</a> qui a plus de 20 ans et qui est utilisé notamment pour les <em>podcasts</em>.
  103. </p>
  104. <blockquote>
  105. <p>
  106. Et si vous savez déjà ce que c’est, vous n’êtes peut-être pas habitué·e à ce que le flux soit habillé de la sorte. Ce n’est pas une défaillance de votre téléviseur. N’essayez donc pas de régler l’image. Nous maîtrisons, à présent, toute retransmission. — mat
  107. </p>
  108. </blockquote>
  109. <p>
  110. Hey mais c’est chouette, <a href="https://larlet.fr/david/2021/06/03/">comment avoir le même rendu pour mon propre flux ?</a>
  111. </p>
  112. </details>
  113. <h2>Dernières publications</h2>
  114. <xsl:for-each select="/atom:feed/atom:entry">
  115. <div>
  116. <details>
  117. <summary>
  118. <xsl:value-of select="atom:title" disable-output-escaping="yes"/>
  119. </summary>
  120. <xsl:value-of select="atom:summary" disable-output-escaping="yes"/>
  121. </details>
  122. <small>
  123. Publié le : <xsl:value-of select="substring(atom:updated,1,10)" /> —
  124. <a target="_blank">
  125. <xsl:attribute name="href">
  126. <xsl:value-of select="atom:link/@href"/>
  127. </xsl:attribute>
  128. Lien permanent
  129. </a>
  130. </small>
  131. </div>
  132. </xsl:for-each>
  133. <hr />
  134. <p class="center">
  135. <xsl:value-of select="/atom:feed/atom:rights"/>
  136. </p>
  137. </article>
  138. </body>
  139. </html>
  140. </xsl:template>
  141. </xsl:stylesheet>