Skip to content

regseb/gout

Repository files navigation

Gout

firefox build coverage

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 JSON 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/json">{ "...": "..." }</script>
      <script type="application/json">{ "...": "..." }</script>
      <!-- ... -->
    </div>
    <div style="width: 30%;">
      <script type="application/json">{ "...": "..." }</script>
    </div>
    <div style="width: 20%;">
      <script type="application/json">{ "...": "..." }</script>
    </div>
    <div style="width: 20%;">
      <script type="application/json">{ "...": "..." }</script>
      <script type="application/json">{ "...": "..." }</script>
    </div>
  </body>
</html>

Widget

Un widget est un bloc du dashboard. C'est un élément <script> (avec le type="application/json"). Le widget sera ajouté dans le DOM de la page au même endroit que l'élément <script>. Le contenu du <script> est un objet JSON ayant deux propriétés :

  • "module" : Un objet JSON contenant la configuration du module.
  • "scrapers" : Un tableau d'objets JSON pour les configurations de chaque 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/json">
  {
    "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 est un objet JSON composé de deux 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" : Un objet JSON contenant les options du module (qui sont spécifiques pour chaque 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/json">
  {
    "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 d'objets JSON composés de 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" : un objet JSON contenant 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/json">
  {
    "module": { "...": "..." },
    "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.