RSS Olvasó Készítése Astro-val és TypeScript-tel
A RSS (Really Simple Syndication) egy klasszikus technológia, amely lehetővé teszi a weboldalak tartalmának lekérését és azok megosztását bárkivel, aki feliratkozik rá egy URL segítségével. Az RSS XML alapú, és felhasználhatjuk a hírcsatornák fogyasztására saját alkalmazásainkban. Karin Hendrikse bemutatja, hogyan készíthetünk egy statikus oldalt, amelyet személyes RSS olvasóként használhatunk.
A Terv
Az alábbiakban bemutatjuk, hogyan fogunk dolgozni. Az Astro generálja a weboldalt. Azért választottam a statikus oldalt, mert szeretném, ha a különböző RSS hírcsatornák csak egyszer, a build idő alatt lennének lekérve. Ezt a Netlify ütemezett funkcióival tudjuk automatizálni, amelyek lehetővé teszik számunkra, hogy automatikusan újraépítsük az oldalt meghatározott időpontokban.
RSS Technológia
Az RSS egy webes hírcsatorna technológia, amelyet olvasókba vagy híregyűjtőkbe táplálhatunk. Mivel az RSS szabványosított, tudjuk, mire számíthatunk a hírcsatorna formátumát illetően. A legtöbb híroldal rendelkezik saját RSS hírcsatornájával, amelyre fel lehet iratkozni. Az RSS hírcsatorna frissül, amikor egy weboldal új tartalmat publikál, így gyors forrást jelent a legfrissebb hírekhez.
Az Astro Oldal Létrehozása
Először is, hozzuk létre az Astro oldalunkat! A terminálban futtassuk a pnpm create astro@latest parancsot. Az Astro chat-alapú segédje, Houston, végigvezet minket néhány beállítási kérdésen.
Miután a parancsot futtattuk, a következő lépéseket kell követnünk:
- Hova szeretnénk létrehozni az új projektet?
- Hogyan szeretnénk kezdeni az új projektünket? (Minta fájlokkal)
- Tervezünk TypeScript-tel dolgozni? (Igen)
- Hány szigorú legyen a TypeScript? (Szigorú)
- Telepítsük a függőségeket? (Igen)
- Inicializáljunk egy új git tárolót? (Igen)
Ezután tisztítsuk meg a src/pages/index.astro fájlt, eltávolítva mindent a <main> és </main> tagek közül. Most már készen állunk a következő lépésre!
RSS Hírcsatornák Lekérése
A src/pages/index.astro fájlban létrehozunk egy tömböt az RSS hírcsatornák számára, amelyeket követni szeretnénk:
const feedSources = [ 'https://www.smashingmagazine.com/feed/', 'https://developer.mozilla.org/en-US/blog/rss.xml', ];Ezután telepítjük az rss-parser csomagot a projektünkbe a pnpm install rss-parser parancs futtatásával. Ez a csomag lehetővé teszi számunkra, hogy az RSS hírcsatornák XML-jét JavaScript objektumokká alakítsuk.
Adatok Megjelenítése
Most, hogy a hírcsatornák adatai elérhetők, ideje megjeleníteni a híreket az Astro oldalon! Az elemeket egy rendezetlen listában fogjuk formázni:
<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>Futtassuk a pnpm start parancsot a terminálban, és az oldalnak meg kell jelenítenie a hírek listáját. Ne felejtsük el, hogy a CSS segítségével tetszés szerint formázhatjuk az oldalt!
Automatikus Újraépítés Netlify-val
Most, hogy az oldalunk működik, be kell állítanunk a Netlify-t, hogy ütemezett funkciókat használhassunk, amelyek automatikusan újraépítik az oldalt. A Netlify dokumentációja segít a folyamatban.
Miután az oldalunk élő, készen állunk az újraépítések ütemezésére. A build hook URL-jét a következőképpen állíthatjuk be:
const BUILD_HOOK = 'https://api.netlify.com/build_hooks/your-build-hook-id'; // cserélje ki a saját ID-jára!Ezután a Netlify ütemezett funkcióit használva beállíthatjuk, hogy az oldalunk minden nap éjfélkor újraépüljön.
Most már készen állunk arra, hogy élvezzük a legfrissebb híreket, és ne maradjunk le semmiről!
Leave a Reply