SvelteKit के साथ एक सरल RSS रीडर कैसे बनाएं

RSS वेब सामग्री को संरचित प्रारूप में वितरित करने के लिए एक लोकप्रिय मानक है। तकनीकी उत्साही लोगों से लेकर शिक्षकों तक, कई लोग अपने पसंदीदा ब्लॉग पर नवीनतम समाचारों और पोस्ट से अपडेट रहने के लिए RSS का उपयोग करते हैं।

अपना खुद का RSS रीडर लिखना एक सीधा काम है, जिसे SvelteKit, Svelte के शीर्ष पर निर्मित एक मेटा फ्रेमवर्क के साथ और भी आसान बना दिया गया है।

SvelteKit प्रोजेक्ट की स्थापना

आगे बढ़ने से पहले, आपको अपनी मशीन पर Node.js रनटाइम भी इंस्टॉल करना होगा नोड पैकेज मैनेजर (एनपीएम). अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

npm create svelte
# or
yarn create svelte

इससे क्रिएट-स्वेल्ट शुरू हो जाना चाहिए कमांड लाइन इंटरफ़ेस (सीएलआई) वाइट द्वारा संचालित. अपने प्रोजेक्ट को नाम दें और ऐप टेम्पलेट को "स्केलेटन प्रोजेक्ट" पर सेट करें। टाइपस्क्रिप्ट के साथ टाइप चेकिंग अक्षम करें, और कोई भी अतिरिक्त विकल्प चुनें जो आप चाहते हैं। उसके बाद, प्रोजेक्ट निर्देशिका पर जाएँ और चलाएँ:

npm install
# or
yarn

डिफ़ॉल्ट निर्भरताएँ स्थापित करने के बाद, आपको दो पैकेज स्थापित करने होंगे: आरएसएस-पार्सर और पल. पहला पैकेज XML डेटा को पार्स करना आसान बना देगा, जबकि दूसरा आपको तारीखों को सही ढंग से प्रारूपित करने में मदद करेगा। अपने टर्मिनल में, निम्नलिखित चलाएँ:

npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment

अब, आप निम्न आदेश चलाकर विकास सर्वर शुरू कर सकते हैं।

npm run dev
# or
yarn dev

की सामग्री साफ़ करें ऐप.सीएसएस फ़ाइल करें और प्रोजेक्ट संरचना को इस प्रकार संशोधित करें कि यह कुछ इस प्रकार दिखे। ऐसी कोई भी निर्देशिका बनाएं जो पहले से मौजूद नहीं है और नीचे दिए गए नामों से मेल खाने के लिए खाली फ़ाइलें बनाएं:

आपको केवल इसे बदलने की आवश्यकता होगी स्रोत निर्देशिका, जिसमें एक होना चाहिए उदारीकरण निर्देशिका और ए lib/addToLocalStorage.js फ़ाइल। इसमें यह भी शामिल होना चाहिए मार्ग वह निर्देशिका जिसमें चाइल्ड निर्देशिका नाम शामिल है खिलाना और चार फ़ाइलें: +लेआउट.जे.एस, +लेआउट.विस्तृत, +पेज.विस्तृत, और +server.js. अंदर खिलाना, नामक एक निर्देशिका बनाएँ [शीर्षक] अंदर दो फ़ाइलों के साथ: +पेज.सर्वर.जे.एस और +पेज.विस्तृत.

mkdir '[title]'

वैध आरएसएस फ़ीड की जांच के लिए एपीआई रूट बनाना

खोलें मार्ग/+सर्वर.जेएस फ़ाइल करें और आयात करें json उपयोगिता. आयात भी करें पार्सर से आरएसएस-पार्सर पैकेट।

import { json } from"@sveltejs/kit";
import Parser from"rss-parser";

अब, एक एसिंक्रोनस फ़ंक्शन निर्यात करें, पाना, और अंदर जाओ यूआरएल एक पैरामीटर के रूप में. इस फ़ंक्शन में, दो स्थिरांक बनाएं: आरएसएसलिंक और पार्सर.

पहले स्थिरांक को खोज पैरामीटर को धारण करना चाहिए यूआरएल बीत गया, जबकि दूसरा, पार्सर, एक नया भंडारण करना चाहिए पार्सर वस्तु उदाहरण. इसके बाद, कॉल करें पार्सयूआरएल विधि चालू पार्सर और अंदर जाओ आरएसएसलिंक एक पैरामीटर के रूप में. अंत में, प्रतिक्रिया को क्रमबद्ध करें json कार्य करें और इसे वापस कर दें।

exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}

होम पेज डिज़ाइन करना

SvelteKit का उपयोग करता है फ़ाइल सिस्टम-आधारित रूटिंग सिस्टम. डिफ़ॉल्ट रूप से, रूट/+पेज.स्वेल्ट फ़ाइल आपकी वेबसाइट के लिए होम पेज के रूप में कार्य करती है।

+page.svelte फ़ाइल खोलें और, में लिखी हुई कहानी टैग करें, आयात करें addToLocalStorage से कार्य करें उदारीकरण निर्देशिका। आपने इसे अभी तक नहीं बनाया है, लेकिन आप इसे बाद में बनाएंगे। फ़ंक्शन आयात करने के बाद, दो वेरिएबल बनाएं, यूआरएल और तैयार, सेटिंग तैयार परिवर्तनशील से असत्य.