Construisez un lecteur RSS statique pour combattre votre FOMO intérieur

Dans un secteur en évolution rapide comme celui de la technologie, il peut être difficile de gérer la peur de passer à côté d’actualités importantes. Mais, comme beaucoup d’entre nous le savent, une quantité absolument énorme d’informations arrive quotidiennement, et trouver le bon moment et le bon équilibre pour suivre le rythme peut être difficile, voire stressant. Une technologie classique comme un flux RSS est une délicieuse façon de se réapproprier son temps. Dans cet article, nous allons créer un lecteur RSS (Really Simple Syndication) statique qui vous apportera les dernières nouvelles organisées une seule fois (oui : une fois) par jour.

Nous travaillerons évidemment avec la technologie RSS dans le processus, mais nous allons également la combiner avec certaines choses que vous n’avez peut-être jamais essayées auparavant, notamment Astro (le framework de site statique), Manuscrit (pour les goodies JavaScript), un package appelé analyseur RSS (pour connecter les choses ensemble), ainsi que fonctions programmées et construire des crochets fourni par Netlify (bien qu’il existe d’autres services qui font cela).

J’ai choisi ces technologies uniquement parce que je les apprécie vraiment, vraiment ! Il existe peut-être d’autres solutions plus performantes, dotées de plus de fonctionnalités ou tout simplement plus confortables pour vous – et dans ces cas, je vous encourage à échanger ce que vous souhaitez. Le plus important c’est d’obtenir le résultat final !

Le plan

Voici comment cela va se passer. Astro génère le site Web. J’ai pris la décision intentionnelle d’utiliser un site statique parce que je souhaite que les différents flux RSS ne soient récupérés qu’une seule fois pendant la construction, et c’est quelque chose que nous pouvons contrôler à chaque fois que le site est « reconstruit » et redéployé avec des mises à jour. C’est là que les fonctions planifiées de Netlify entrent en jeu, car elles nous permettent de déclencher automatiquement des reconstructions à des moments précis. Il n’est pas nécessaire de rechercher manuellement les mises à jour et de les déployer ! Les tâches Cron peuvent tout aussi bien le faire si vous préférez une solution côté serveur.

Pendant la reconstruction déclenchée, nous laisserons le package rss-parser faire exactement ce qu’il dit : analyser une liste de flux RSS contenus dans un tableau. Le package nous permet également de définir un filtre pour les résultats récupérés afin que nous n’obtenions que ceux du jour, de la semaine écoulée, etc. Personnellement, je ne diffuse que les actualités des sept derniers jours pour éviter une surcharge de contenu. Nous y arriverons !

Mais d’abord…

RSS est une technologie de flux Web que vous pouvez alimenter dans un lecteur ou un agrégateur d’actualités. Le RSS étant standardisé, vous savez à quoi vous attendre en ce qui concerne le format du flux. Cela signifie que nous avons une tonne de possibilités amusantes lorsqu’il s’agit de gérer les données fournies par le flux. La plupart des sites d’information disposent de leur propre flux RSS auquel vous pouvez vous abonner (c’est Flux RSS de Smashing Magazine: https://www.smashingmagazine.com/feed/). Un flux RSS est capable d’être mis à jour chaque fois qu’un site publie un nouveau contenu, ce qui signifie qu’il peut être une source rapide des dernières nouvelles, mais nous pouvons également adapter cette fréquence.

Les flux RSS sont écrits au format XML (Extensible Markup Language) et contiennent des éléments spécifiques qui peuvent être utilisés. Au lieu de trop me concentrer sur les détails techniques ici, je vais vous donner un lien vers le Spécification RSS. Ne t’inquiète pas; cette page doit être suffisamment numérisable pour que vous puissiez trouver les informations les plus pertinentes dont vous avez besoin, comme les types d’éléments pris en charge et ce qu’ils représentent. Pour ce tutoriel, nous utilisons uniquement les éléments suivants : <title>, <link>, <description>, <item>et <pubDate>. Nous laisserons également notre package d’analyseur RSS faire une partie du travail à notre place.

Création du site d’État

Nous allons commencer par créer notre site Astro ! Dans votre terminal, exécutez pnpm create astro@latest. Vous pouvez utiliser n’importe quel gestionnaire de paquets de votre choix – j’essaie simplement pnpm pour moi.

Après avoir exécuté la commande, l’assistant de chat d’Astro, Houston, répond à quelques questions de configuration pour commencer.

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./rss-buddy

  tmpl   How would you like to start your new project?
         Include sample files

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

J’aime utiliser les exemples de fichiers d’Astro pour pouvoir démarrer rapidement, mais nous allons les nettoyer un peu au cours du processus. Nettoyons le src/pages/index.astro fichier en supprimant tout ce qui se trouve à l’intérieur du <main></main> balises. Alors nous sommes prêts à partir !

À partir de là, nous pouvons faire tourner les choses en courant pnpm start. Votre terminal vous indiquera à quelle adresse localhost vous pouvez trouver votre site.

Le src/pages/index.astro C’est dans ce fichier que nous créerons un ensemble de flux RSS que nous souhaitons suivre. Nous utiliserons Syntaxe du modèle d’Astrodonc entre les deux barrières de code (-), créez un tableau de feedSources et ajoutez quelques flux. Si vous avez besoin d’inspiration, vous pouvez copier ceci :

const feedSources = [
  'https://www.smashingmagazine.com/feed/',
  'https://developer.mozilla.org/en-US/blog/rss.xml',
  // etc.
]

Nous allons maintenant installer le paquet analyseur rss dans notre projet en exécutant pnpm install rss-parser. Ce package est une petite bibliothèque qui transforme le XML obtenu en récupérant un flux RSS en objets JavaScript. Cela nous permet de lire facilement nos flux RSS et de manipuler les données comme nous le souhaitons.

Une fois le package installé, ouvrez le src/pages/index.astro fichier, et en haut, nous importerons l’analyseur rss et instancierons le Partner classe.

import Parser from 'rss-parser';
const parser = new Parser();

Nous utilisons cet analyseur pour lire nos flux RSS et (surprise !) analyser les en JavaScript. Nous allons traiter ici d’une liste de promesses. Normalement, j’utiliserais probablement Promise.all()mais le fait est que c’est censé être une expérience compliquée. Si l’un des flux ne fonctionne pas pour une raison quelconque, je préfère simplement l’ignorer.

Pourquoi? Eh bien, parce que Promise.all() rejette tout même si une seule de ses promesses est rejetée. Cela pourrait signifier que si un flux ne se comporte pas comme je m’y attendais, ma page entière serait vierge lorsque je prends ma boisson chaude pour lire les informations le matin. Je ne veux pas commencer ma journée face à une erreur.

Au lieu de cela, je choisirai d’utiliser Promise.allSettled(). Cette méthode permettra en fait à toutes les promesses de se réaliser même si l’une d’entre elles échoue. Dans notre cas, cela signifie que tout flux comportant des erreurs sera simplement ignoré, ce qui est parfait.

Ajoutons ceci au src/pages/index.astro déposer:

interface FeedItem {
  feed?: string;
  title?: string;
  link?: string;
  date?: Date;
}

const feedItems: FeedItem[] = [];

await Promise.allSettled(
  feedSources.map(async (source) => {
    try {
      const feed = await parser.parseURL(source);
      feed.items.forEach((item) => {
        const date = item.pubDate ? new Date(item.pubDate) : undefined;
        
          feedItems.push({
            feed: feed.title,
            title: item.title,
            link: item.link,
            date,
          });
      });
    } catch (error) {
      console.error(`Error fetching feed from ${source}:`, error);
    }
  })
);

Cela crée un tableau (ou plusieurs) nommé feedItems. Pour chaque URL dans le feedSources tableau que nous avons créé précédemment, l’analyseur rss récupère les éléments et, oui, les analyse en JavaScript. Ensuite, nous renvoyons les données que nous voulons ! Nous allons garder les choses simples pour l’instant et renvoyer uniquement les éléments suivants :

• Le titre du flux,
• Le titre de l’élément de flux,
• Le lien vers l’article,
• Et la date de publication de l’article.

L’étape suivante consiste à s’assurer que tous les éléments sont triés par date afin que nous puissions réellement recevoir les « dernières » nouvelles. Ajoutez ce petit morceau de code à notre travail :

const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());

Oh, et… tu te souviens quand j’ai dit que je ne voulais pas que ce lecteur RSS restitue quelque chose de plus de sept jours ? Abordons cela maintenant puisque nous sommes déjà dans ce code.

Nous allons créer une nouvelle variable appelée sevenDaysAgo et attribuez-lui une date. Nous fixerons ensuite cette date à sept jours et utiliserons cette logique avant d’ajouter un nouvel élément à notre feedItems tableau.

C’est ce que le src/pages/index.astro le fichier devrait maintenant ressembler à ceci :

---
import Layout from '../layouts/Layout.astro';
import Parser from 'rss-parser';
const parser = new Parser();

const sevenDaysAgo = new Date();
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

const feedSources = [
  'https://www.smashingmagazine.com/feed/',
  'https://developer.mozilla.org/en-US/blog/rss.xml',
]

interface FeedItem {
  feed?: string;
  title?: string;
  link?: string;
  date?: Date;
}

const feedItems: FeedItem[] = [];

await Promise.allSettled(
  feedSources.map(async (source) => {
    try {
      const feed = await parser.parseURL(source);
      feed.items.forEach((item) => {
        const date = item.pubDate ? new Date(item.pubDate) : undefined;
        if (date && date >= sevenDaysAgo) {
          feedItems.push({
            feed: feed.title,
            title: item.title,
            link: item.link,
            date,
          });
        }
      });
    } catch (error) {
      console.error(`Error fetching feed from ${source}:`, error);
    }
  })
);

const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());

---

<Layout title="Welcome to Astro.">
  <main>
  </main>
</Layout>

Rendu des données XML

C’est le moment de montrer nos articles d’actualité sur le site Astro ! Pour que cela reste simple, nous formaterons les éléments dans une liste non ordonnée plutôt que dans une autre présentation sophistiquée.

Tout ce que nous devons faire est de mettre à jour le <Layout> élément dans le fichier avec les objets XML dispersés pour le titre, l’URL et la date de publication d’un élément de fil.

<Layout title="Welcome to Astro.">
  <main>
  {sortedFeedItems.map(item => (
    <ul>
      <li>
        <a href={item.link}>{item.title}</a>
        <p>{item.feed}</p>
        <p>{item.date}</p>
      </li>
    </ul>
  ))}
  </main>
</Layout>

Vas-y et cours pnpm start depuis le terminal. La page doit afficher une liste non ordonnée d’éléments de flux. Bien sûr, tout est stylisé pour le moment, mais heureusement pour vous, vous pouvez lui donner exactement l’apparence que vous souhaitez avec CSS !

Et rappelez-vous qu’il y a même plus de champs disponibles dans le XML pour chaque élément si vous souhaitez afficher plus d’informations. Si vous exécutez l’extrait suivant dans votre console DevTools, vous verrez tous les champs dont vous disposez :

feed.items.forEach(item => {}

Planification des constructions de sites statiques quotidiennes

Nous avons presque terminé ! Les flux sont récupérés et nous renvoient des données en JavaScript pour les utiliser dans notre modèle de page Astro. Étant donné que les flux sont mis à jour chaque fois qu’un nouveau contenu est publié, nous avons besoin d’un moyen d’en récupérer les derniers éléments.

Nous voulons éviter de faire tout cela manuellement. Alors, configurons ce site sur Netlify pour accéder à leurs fonctions planifiées qui déclenchent une reconstruction et à leurs hooks de construction qui effectuent la construction. Encore une fois, d’autres services font cela, et vous pouvez effectuer ce travail avec un autre fournisseur – je suis juste partisan de Netlify puisque j’y travaille. Dans tous les cas, vous pouvez suivre la documentation de Netlify pour création d’un nouveau site.

Une fois votre site hébergé et en ligne, vous êtes prêt à planifier vos reconstructions. UN construire un crochet vous donne une URL à utiliser pour déclencher la nouvelle build, ressemblant à ceci :

https://api.netlify.com/build_hooks/your-build-hook-id

Déclenchons les builds tous les jours à minuit. Nous utiliserons celui de Netlify fonctions programmées. C’est vraiment pourquoi j’utilise Netlify pour héberger cela en premier lieu. Les avoir à portée de main via l’hôte simplifie grandement les choses puisqu’il n’y a pas de travail de serveur ni de configurations compliquées pour faire avancer les choses. Réglez-le et oubliez-le !

Nous allons installer @netlify/functions (instructions) au projet, puis créez le fichier suivant dans le répertoire racine du projet : netlify/functions/deploy.ts.

Voici ce que nous voulons ajouter à ce fichier :

// netlify/functions/deploy.ts

import type { Config } from '@netlify/functions';

const BUILD_HOOK =
  'https://api.netlify.com/build_hooks/your-build-hook-id'; // replace me!

export default async (req: Request) => {
  await fetch(BUILD_HOOK, {
    method: 'POST',
  }).then((response) => {
    console.log('Build hook response:', response.json());
  });

  return {
    statusCode: 200,
  };
};

export const config: Config = {
  schedule: '0 0 * * *',
};

Si vous validez votre code et le poussez, votre site devrait se redéployer automatiquement. À partir de ce moment-là, il suit un planning qui reconstruit le site tous les jours à minuit, prêt à vous permettre de prendre votre bière du matin et de rattraper tout ce qui se passe. toi pense que c’est important.

(gg, ouais)