davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<?xml version="1.0" encoding="utf-8"?>
<!--

Une petite explication…

La base vient de (il y a de la documentation en entête en anglais) :

=> https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl

Que l’on peut voir en application ici :

=> http://interconnected.org/home/feed

Il y a aussi une explication en anglais par là :

=> https://lepture.com/en/2019/rss-style-with-xsl

Si vous voulez faire la même chose, il va vous falloir :

1. lier votre propre CSS (facile)
2. adapter le contenu à aller récupérer en XSLT (intermédiaire)
3. debugger à base d’essais-erreurs-stackoverflow (ma vie)

À la fin, il ne faut pas oublier de servir le flux avec les bon headers
HTTP pour le Content-Type :

```
Content-Type: application/xml; charset=utf-8  # not application/rss+xml
X-Content-Type-Options: nosniff
```

Ça ressemble à ça dans ma configuration Apache :

```
<FilesMatch "/david/log/index.xml">
    Header set Content-Type "application/xml; charset=utf-8"
    Header set X-Content-Type-Options "nosniff"
</FilesMatch>
```

C’est notamment important pour Safari (iOS+macOS).

Pour discuter :

=> https://github.com/genmon/aboutfeeds/issues/8

## Limitations

- Styling the feed *prevents* the browser from automatically opening a
  newsreader application. This is a trade off, but it's a benefit to new users
  who won't have a newsreader installed, and they are saved from seeing or
  downloaded obscure XML content. For existing newsreader users, they will know
  to copy-and-paste the feed URL, and they get the benefit of an in-browser feed
  preview.
- Feed styling, for all browsers, is only available to site owners who control
  their own platform. The need to add both XML and HTTP headers makes this a
  limited solution.
- Firefox does not support `disable-output-escaping="yes"` which means that
  the content of the encoded entries displays the HTML without rendering it.

-->
<xsl:stylesheet version="3.0"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
      <head>
        <title><xsl:value-of select="/atom:feed/atom:title"/> (flux RSS)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="/static/david/css/style_2021-01-20.css"/>
        <style type="text/css">summary{margin-top: 2rem;} input{font-size: 1.5rem;}</style>
      </head>
      <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
        <article>
          <header>
            <h1>
              <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
              <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">
                <defs>
                  <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
                    <stop  offset="0.0" stop-color="#E3702D"/><stop  offset="0.1071" stop-color="#EA7D31"/>
                    <stop  offset="0.3503" stop-color="#F69537"/><stop  offset="0.5" stop-color="#FB9E3A"/>
                    <stop  offset="0.7016" stop-color="#EA7C31"/><stop  offset="0.8866" stop-color="#DE642B"/>
                    <stop  offset="1.0" stop-color="#D95B29"/>
                  </linearGradient>
                </defs>
                <rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#CC5D15"/>
                <rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#F49C52"/>
                <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
                <circle cx="68" cy="189" r="24" fill="#FFF"/>
                <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
                <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
              </svg>
              Prévisualisation du flux
            </h1>
          </header>
          <nav>
            <p class="center">
              <a>
                <xsl:attribute name="href">
                  <xsl:value-of select="/atom:feed/atom:link/@href"/>
                </xsl:attribute>
                Vous êtes perdu·e ? Retourner à l’accueil &#x2192;
              </a>
            </p>
          </nav>
          <hr />
          <form>
            <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>
            <input type="text" id="feed-url" value="https://larlet.fr/david/log/" />
          </form>
          <details>
            <summary>J’aimerais avoir plus d’informations !</summary>
            <p>
              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>.
            </p>
            <p>
              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.
              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>.
            </p>
            <blockquote>
              <p>
                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
              </p>
            </blockquote>
            <p>
              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>
            </p>
          </details>

          <h2>Dernières publications</h2>

          <xsl:for-each select="/atom:feed/atom:entry">
            <div>
              <details>
                <summary>
                  <xsl:value-of select="atom:title" disable-output-escaping="yes"/>
                </summary>
                <xsl:value-of select="atom:summary" disable-output-escaping="yes"/>
              </details>
              <small>
                Publié le : <xsl:value-of select="substring(atom:updated,1,10)" /> —
                <a target="_blank">
                  <xsl:attribute name="href">
                    <xsl:value-of select="atom:link/@href"/>
                  </xsl:attribute>
                  Lien permanent
                </a>
              </small>
            </div>
          </xsl:for-each>

          <hr />
          <p class="center">
            <xsl:value-of select="/atom:feed/atom:rights"/>
          </p>
        </article>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>