Gout

Agrégateur d'Internet (flux RSS et tout le reste).

Description

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.

Dashboard

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>

Widget

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:
      max: 5
      color: "#ffc107"
      cron: "*/10 * * * *"
    scrapers:
      - url: "https://cdn.jsdelivr.net/gh/regseb/gout@0/src/scraper/list/rss/rss.js"
        options:
          url: "https://linuxfr.org/news.atom"
</script>

Si vous voulez des widgets, vous pouvez chercher gout-widget dans GitHub.

Module

Les modules sont les composants du widget 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:
      color: "#2196f3"
      cron: "*/10 * * * *"
        "max": 5
    scrapers: # ...
</script>

Si vous voulez des modules, vous pouvez chercher gout-module dans GitHub.

Scraper

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 un tableau avec 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.

Installation

L'extension est disponible sur Firefox Browser Add-ons. Après l'avoir installée, téléchargez un template d'un dashboard. Ouvrez le fichier avec un éditeur de texte. Ajoutez les widgets que vous souhaitez dans le code HTML. Ouvrez le fichier avec votre navigateur et ajoutez la page dans l'extension (en cliquant sur l'icône de l'extension dans la barre d'outils du navigateur). Actualisez la page pour voir apparaitre les widgets.