내부 FOMO와 싸우기 위해 정적 RSS 리더를 구축하십시오 – Smashing Magazine
Tech와 같은 빠르게 진행되는 산업에서는 중요한 뉴스를 놓치는 것에 대한 두려움을 다루기가 어려울 수 있습니다. 그러나 우리 중 많은 사람들이 알고 있듯이 매일 많은 정보가 나오고 있으며, 스트레스를받지 않더라도 적절한 시간과 균형을 찾는 것은 어려울 수 있습니다. 고전적인 기술과 같은 기술 RSS 피드는 우리 시간의 소유권을 되 찾는 즐거운 방법입니다.. 이 기사에서는 정적 간단한 신디케이트 (RSS) 리더를 만들어 최신 선별 된 뉴스를 한 번만 가져올 것입니다 (예 : 한 번) 하루.
우리는 분명히 프로세스에서 RSS 기술과 함께 일하지만, 우리는 또한 이전에 시도하지 않은 것들과 결합 할 것입니다. 아스트로 (정적 사이트 프레임 워크), TypeScript (JavaScript Goodies의 경우) RSS-Parser (함께 연결을 위해)뿐만 아니라 예약 된 기능 그리고 후크를 빌드하십시오 NetLify가 제공합니다 (이를 수행하는 다른 서비스가 있지만).
나는 정말로이 기술을 정말로 선택했습니다. 더 성능이 뛰어나거나 더 많은 기능을 제공하거나 단순히 더 편안한 다른 솔루션이있을 수 있습니다. 그러한 경우, 원하는대로 교체하는 것이 좋습니다. 가장 중요한 것은 최종 결과를 얻는 것입니다!
계획
이것이 어떻게 될지 여기에 있습니다. Astro는 웹 사이트를 생성합니다. 제작 시간 동안 다른 RSS 피드를 한 번만 가져 오기를 원하기 때문에 정적 사이트를 사용하기로 결정했습니다. 이는 사이트가 “재건”될 때마다 제어 할 수 있고 업데이트로 재배치 할 때마다 제어 할 수있는 것입니다. 그곳에서 Netlify의 예정된 기능이 특정 시간에 자동으로 재건을 트리거 할 수 있도록하는 곳입니다. 업데이트를 수동으로 확인하고 배포 할 필요가 없습니다! CRON 작업은 서버 측 솔루션을 선호하는 경우 쉽게이 작업을 수행 할 수 있습니다.
트리거 된 재건 중에 RSS-Parser 패키지가 그 말을 정확하게 수행하도록합니다. 배열에 포함 된 RSS 피드 목록을 구문 분석하십시오. 또한 패키지를 사용하면 페치 된 결과에 대한 필터를 설정하여 지난 날, 주 등에서 만 필터를 얻을 수 있습니다. 개인적으로, 나는 콘텐츠 과부하를 방지하기 위해 지난 7 일 동안 뉴스를 렌더링합니다. 우리는 거기에 도착할 것입니다!
하지만 먼저…
RSS는 독자 또는 뉴스 어 그리 게이터에 공급할 수있는 웹 피드 기술입니다. RSS는 표준화되므로 피드의 형식에있어서 무엇을 기대 해야하는지 알고 있습니다. 즉, 피드가 제공하는 데이터를 처리 할 때 많은 재미있는 가능성이 있습니다. 대부분의 뉴스 웹 사이트에는 구독 할 수있는 자체 RSS 피드가 있습니다 (이것은 Smashing Magazine의 RSS 피드: RSS 피드는 사이트가 새로운 컨텐츠를 게시 할 때마다 업데이트 할 수 있습니다. 즉, 최신 뉴스의 빠른 소스가 될 수 있지만 해당 빈도도 조정할 수 있습니다.
RSS 피드는 확장 가능한 마크 업 언어 (XML) 형식으로 작성되며 그 안에 사용할 수있는 특정 요소가 있습니다. 여기서 기술에 너무 집중하는 대신 RSS 사양에 대한 링크를 제공하겠습니다. 괜찮아요; 해당 페이지는 지원되는 요소와 대표하는 요소와 같이 필요한 가장 적절한 정보를 찾을 수있을 정도로 스캔 할 수 있어야합니다. 이 튜토리얼의 경우 다음 요소 만 사용하고 있습니다. ,,,
상태 사이트 생성
우리는 Astro 사이트를 만드는 것으로 시작합니다! 터미널 실행에서 pnpm create astro@latest. 원하는 패키지 관리자를 사용할 수 있습니다. 저는 단순히 PNPM을 직접 시도하고 있습니다.
Astro의 채팅 기반 도우미 Houston은 명령을 실행 한 후 몇 가지 설정 질문을 살펴보고 일을 시작합니다.
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
Astro의 샘플 파일을 사용하여 빨리 시작할 수 있지만 프로세스에서 약간 정리할 것입니다. 정리합시다 src/pages/index.astro 내부의 모든 것을 제거하여 파일 태그. 그럼 우리는 갈 수 있습니다!
거기에서 우리는 달리면 물건을 돌릴 수 있습니다 pnpm start. 터미널에서 사이트를 찾을 수있는 로컬 호스트 주소를 알려줍니다.
그만큼 src/pages/index.astro 파일은 우리가 따라하려는 RSS 피드 배열을 만드는 곳입니다. 우리는 Astro의 템플릿 구문을 사용할 것이므로 두 코드 울타리 ( -) 사이에 배열을 만듭니다. feedSources 피드를 추가하십시오. 영감이 필요한 경우 다음을 복사 할 수 있습니다.
const feedSources = [
'
'
// etc.
]
이제 프로젝트에 RSS-Parser 패키지를 설치하여 실행하여 pnpm install rss-parser. 이 패키지는 RSS 피드를 JavaScript 객체로 가져 오는 XML을 바꾸는 작은 라이브러리입니다. 이를 통해 RSS 피드를 쉽게 읽고 원하는 방식으로 데이터를 조작 할 수 있습니다.
패키지가 설치되면 src/pages/index.astro 파일, 상단에서는 RSS-Parser를 가져 와서 인스턴스화합니다. Partner 수업.
import Parser from 'rss-parser';
const parser = new Parser();
우리는이 파서를 사용하여 RSS 피드를 읽고 (놀라움!) 구문 분석 JavaScript에. 우리는 여기에서 약속 목록을 다룰 것입니다. 일반적으로 나는 아마도 사용할 것입니다 Promise.all()그러나 문제는 복잡한 경험이되어야한다는 것입니다. 피드 중 하나가 어떤 이유로 작동하지 않으면 단순히 그것을 무시하는 것을 선호합니다.
왜? 글쎄, 왜냐하면 Promise.all() 약속 중 하나만 거부하더라도 모든 것을 거부합니다. 그것은 한 피드가 내가 기대하는 방식으로 행동하지 않으면 아침에 뉴스를 읽기 위해 뜨거운 음료를 잡을 때 내 전체 페이지가 비어있을 것입니다. 나는 하루가 오류에 직면 한 것을 시작하고 싶지 않습니다.
대신 사용하기로 결정합니다 Promise.allSettled(). 이 방법은 실제로 모든 약속이 실패하더라도 모든 약속을 완료하게합니다. 우리의 경우, 이것은 오류가 무시되는 모든 피드를 의미합니다.
이것을 추가합시다 src/pages/index.astro 파일:
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);
}
})
);
이것은 이름이 명명 된 배열 (또는 그 이상)을 만듭니다 feedItems. 각 URL에 대해 feedSources 우리가 이전에 만든 배열, RSS-Parser는 항목을 검색하고 JavaScript로 구문 분석합니다. 그런 다음 원하는 데이터를 반환합니다! 지금은 간단하게 유지하고 다음을 반환 할 것입니다.
- 피드 제목,
- 피드 항목의 제목,
- 항목에 대한 링크,
- 그리고 항목의 게시 날짜.
다음 단계는 모든 항목이 날짜별로 정렬되도록하여“최신”뉴스를 진정으로 얻는 것입니다. 이 작은 코드를 우리의 작업에 추가하십시오.
const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());
아, 그리고… 내가이 RSS 리더가 7 일 이상을 렌더링하는 것을 원하지 않는다고 말했을 때 기억하십니까? 우리가 이미이 코드에 속해 있기 때문에 지금 당장 문제를 해결합시다.
우리는 새로운 변수를 호출 할 것입니다 sevenDaysAgo 날짜를 지정하십시오. 그런 다음 그 날짜를 7 일 전에 설정하고 우리가 우리에게 새 항목을 추가하기 전에 그 논리를 사용합니다. feedItems 정렬.
이것이 바로 src/pages/index.astro 파일은 이제이 시점에서와 같아야합니다.
---
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 = [
'
'
]
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());
---
XML 데이터 렌더링
Astro 사이트에서 뉴스 기사를 보여줄 시간입니다! 이것을 간단하게 유지하기 위해, 우리는 다른 멋진 레이아웃이 아닌 반대 목록으로 항목을 포맷합니다.
우리가해야 할 일은 업데이트됩니다
{sortedFeedItems.map(item => (
))}
계속해서 달리십시오 pnpm start 터미널에서. 페이지는 정렬되지 않은 피드 항목 목록을 표시해야합니다. 물론, 모든 것이 현재 스타일이지만 운 좋게도 CSS에서 원하는 것처럼 보이게 만들 수 있습니다!
그리고 심지어 있다는 것을 기억하십시오 각 항목에 대해 XML에서 더 많은 필드를 사용할 수 있습니다 더 많은 정보를 표시하려면. DevTools 콘솔에서 다음 스 니펫을 실행하면 처분 할 수있는 모든 필드가 표시됩니다.
feed.items.forEach(item => {}
매일 정적 사이트 빌드 예약
우리는 거의 끝났습니다! 피드가 가져오고 있으며 Astro 페이지 템플릿에서 사용하기 위해 JavaScript로 데이터를 다시 반환하고 있습니다. 새 콘텐츠가 게시 될 때마다 피드가 업데이트되므로 최신 항목을 가져 오는 방법이 필요합니다.
우리는이 일을 수동으로 피하고 싶습니다. 따라서이 사이트를 NetLify에 설정하여 재건축을 유발하는 예정된 기능과 건물을 수행하는 빌드 후크에 액세스 할 수 있습니다. 다시 말하지만, 다른 서비스 가이 작업을 수행하며,이 작업을 다른 공급 업체와 함께 제공 할 수 있습니다. 저는 그곳에서 일하기 때문에 NetLify의 일부입니다. 어쨌든 새 사이트를 설정하기위한 NetLify의 문서를 따를 수 있습니다.
사이트가 호스팅되고 라이브가되면 재건을 예약 할 준비가됩니다. 빌드 후크는 새 빌드를 트리거하는 데 사용할 URL을 제공합니다.
자정에 매일 빌드를 트리거하자. NetLify의 예정된 기능을 사용하겠습니다. 그것이 제가 NetLify를 사용하여 처음에 이것을 호스팅하는 이유입니다. 서버 작업이 없거나 복잡한 구성이 없기 때문에 호스트를 통해 준비 할 수있게되면 사물을 크게 단순화합니다. 그것을 설정하고 잊어 버리십시오!
우리는 설치하겠습니다 @netlify/functions (명령어) 프로젝트에 대한 다음 프로젝트의 루트 디렉토리에서 다음 파일을 만듭니다. netlify/functions/deploy.ts.
이것이 우리가 해당 파일에 추가하고 싶은 것입니다.
// netlify/functions/deploy.ts
import type { Config } from '@netlify/functions';
const BUILD_HOOK =
''; // replace me!
export default async (req: Request) => {
await fetch(BUILD_HOOK, {
method: 'POST',
})
};
export const config: Config = {
schedule: '0 0 * * *',
};
코드를 커밋하고 푸시하면 사이트가 자동으로 재배치해야합니다. 그 시점부터, 그것은 자정에 매일 사이트를 재건하는 일정을 따릅니다. 너 중요하다고 생각하십시오.
(GG, YK)
Post Comment