Agrégateur d'Internet (flux RSS et tout le reste).
Gout est une extension Firefox pour récupérer des informations sur Internet (flux RSS, résultats d'API, parsing de sites Internet...) et les afficher dans une page Web. Les dashboards sont ces pages Web avec du YAML pour configurer chaque widget. La configuration d'un widget comporte un module pour définir le format d'affichage ; et des scrapers pour extraire des données.
- Installez l'extension Gout depuis le Firefox Browser Add-ons.
- Téléchargez et décompressez le zip
gout-dashboard-example.zip
. - Ouvrez le fichier
gout-dashboard-example/index.html
dans Firefox. - Ouvrez la popup de l'extension Gout et activez Gout pour la page courant.
- Découvrez les widgets qui s'affichent.
Un dashboard est une page Web qui contient des widgets. Elle doit importer le
moteur de rendu de Gout :
"https://cdn.jsdelivr.net/gh/regseb/gout@0/src/engine/script.js"
.
Voici un exemple de dashboard ayant quatre colonnes de widgets.
<!doctype html>
<html lang="fr-FR">
<head>
<meta charset="utf-8" />
<link
href="https://cdn.jsdelivr.net/gh/regseb/gout@0/src/engine/img/icon.svg"
rel="shortcut icon"
/>
<title>Gout</title>
<script
src="https://cdn.jsdelivr.net/gh/regseb/gout@0/src/engine/script.js"
type="module"
></script>
<style>
body {
display: flex;
}
div {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div style="width: 30%;">
<script type="application/yaml">
# ...
</script>
<script type="application/yaml">
# ...
</script>
<!-- ... -->
</div>
<div style="width: 30%;">
<script type="application/yaml">
# ...
</script>
</div>
<div style="width: 20%;">
<script type="application/yaml">
# ...
</script>
</div>
<div style="width: 20%;">
<script type="application/yaml">
# ...
</script>
<script type="application/yaml">
# ...
</script>
</div>
</body>
</html>
Un widget est un bloc du dashboard. C'est un élément <script>
(avec le
type="application/yaml"
). Le widget sera ajouté dans le DOM de la page au même
endroit que l'élément <script>
. Le contenu du <script>
est au format
YAML avec les propriétés :
module:
url: # L'URL du fichier JavaScript du module.
options: # Les options du module.
scrapers:
- url: # L'URL du fichier JavaScript du premier scraper.
options: # Les options du premier scraper.
- url: # L'URL du fichier JavaScript du deuxième scraper.
options: # Les options du deuxième scraper.
# ...
Cet exemple de widget récupère les dernières publications du flux RSS du site LinuxFr.org et il les affiche sous forme d'une liste de liens.
<script type="application/yaml">
module:
url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/module/list/list.js"
options:
cron: "0 * * * *"
max: 5
color: "#ffc107"
scrapers:
- url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/scraper/list/rss/rss.js"
options:
url: "https://linuxfr.org/news.atom"
</script>
Vous pouvez aussi importer des widgets directement dans votre dashboard. Il faut
ajouter un élément <script>
avec l'attribut src
(ainsi que le type
). Dans
l'exemple ci-dessous, le widget permettant d'écouter la radio
Fip
est intégré dans le dashboard :
<script
type="application/yaml"
src="https://cdn.jsdelivr.net/gh/regseb/gout-regseb@0/src/widget/radiofrance/fip.yaml"
></script>
Si vous voulez des widgets, vous pouvez chercher gout-widget dans GitHub.
Les modules sont les composants des widgets définissant comment les données sont affichées (une liste de liens, une image...). La configuration d'un module a trois propriétés :
url
: L'URL du fichier JavaScript du module (par exemple pour le module list :"https://cdn.jsdelivr.net/gh/regseb/gout@0/src/module/list/list.js"
).options
: Les options du module (qui sont spécifiques pour chaque module).scrapers
: La liste des scrapers associés au module.
Dans cet exemple, le module est une liste (avec au maximum 5
éléments)
affichée dans un bloc bleu #2196f3
et actualisée toutes les dix minutes
*/10 * * * *
.
<script type="application/yaml">
module:
url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/module/list/list.js"
options:
cron: "*/10 * * * *"
max: 5
color: "#2196f3"
scrapers: # ...
</script>
Si vous voulez des modules, vous pouvez chercher gout-module dans GitHub.
Les scrapers permettent d'extraire des données (flux RSS, parsing de page...) et de les transmettre à un module dans un format spécifique. Plusieurs scrapers peuvent être associés avec un module. Dans la configuration du widget, les scrapers sont définis dans une liste ou chaque élément a deux propriétés :
url
: L'URL du fichier JavaScript du scraper (par exemple pour le scraper list/rss :"https://cdn.jsdelivr.net/gh/regseb/gout@0/src/scraper/list/rss/rss.js"
).options
: Les options du scraper (qui sont spécifiques pour chaque scraper).
Dans cet exemple, deux scrapers sont définis pour récupérer les dernières vidéos des chaines YouTube ARTE Cinema et ARTE Séries.
<script type="application/yaml">
module:
url: # ...
options: # ...
scrapers
- url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/scraper/list/rss/rss.js"
options:
url: "https://www.youtube.com/feeds/videos.xml?channel_id=UClo03hULFynpoX3w1Jv7fhw"
- url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/scraper/list/rss/rss.js"
options:
url: "https://www.youtube.com/feeds/videos.xml?channel_id=UCzaf-8cAEiXfynukcmV5MXw"
</script>
Si vous voulez des scrapers, vous pouvez chercher gout-scraper dans GitHub.