|
|
|
@@ -0,0 +1,157 @@ |
|
|
|
<?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:xsl="http://www.w3.org/1999/XSL/Transform" |
|
|
|
xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" |
|
|
|
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"> |
|
|
|
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/> |
|
|
|
<xsl:template match="/"> |
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
|
<head> |
|
|
|
<title><xsl:value-of select="/feed/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;}</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="/feed/link/@href"/> |
|
|
|
</xsl:attribute> |
|
|
|
Vous êtes perdu·e ? Retourner à l’accueil → |
|
|
|
</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr /> |
|
|
|
<p> |
|
|
|
<strong>Ceci est un flux,</strong> aussi appelé flux RSS. <strong>Suivez</strong> ces publications en copiant l’URL depuis la barre d’adresse de votre navigateur pour l’insérer dans votre lecteur de flux. |
|
|
|
</p> |
|
|
|
<details> |
|
|
|
<summary>J’aimerais avoir plus d’informations !</summary> |
|
|
|
<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. |
|
|
|
</p> |
|
|
|
<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 autre <a href="https://app.flus.fr/collections/1697727436392022679">exemple de rendu/souscription</a> avec flus par exemple. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Hey mais c’est chouette, <a href="/david/#TODO">je veux la même chose chez moi !</a> |
|
|
|
</p> |
|
|
|
</details> |
|
|
|
|
|
|
|
<h2>Dernières publications</h2> |
|
|
|
|
|
|
|
<xsl:for-each select="/feed/entry"> |
|
|
|
<div> |
|
|
|
<details> |
|
|
|
<summary> |
|
|
|
<xsl:value-of select="title" disable-output-escaping="yes"/> |
|
|
|
</summary> |
|
|
|
<xsl:value-of select="summary" disable-output-escaping="yes"/> |
|
|
|
</details> |
|
|
|
<small> |
|
|
|
Publié le : <xsl:value-of select="substring(updated,1,10)" /> — |
|
|
|
<a target="_blank"> |
|
|
|
<xsl:attribute name="href"> |
|
|
|
<xsl:value-of select="link/@href"/> |
|
|
|
</xsl:attribute> |
|
|
|
Lien permanent |
|
|
|
</a> |
|
|
|
</small> |
|
|
|
</div> |
|
|
|
</xsl:for-each> |
|
|
|
|
|
|
|
<hr /> |
|
|
|
<p class="center"> |
|
|
|
<xsl:value-of select="/feed/rights"/> |
|
|
|
</p> |
|
|
|
</article> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
</xsl:template> |
|
|
|
</xsl:stylesheet> |
