diff --git a/web/pages/news.tsx b/web/pages/news.tsx index 18d857ae..ff012927 100644 --- a/web/pages/news.tsx +++ b/web/pages/news.tsx @@ -1,14 +1,27 @@ -import {useEffect, useState} from "react" -import axios from "axios" import {PageBase} from "web/components/page-base" import {SEO} from "web/components/SEO" import {Col} from "web/components/layout/col" import {Title} from "web/components/widgets/title" -import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator" import {githubRepoSlug} from "common/constants"; import {CustomMarkdown} from "web/components/markdown"; import {CustomLink} from "web/components/links"; +// Use SSR for SEO and better performance / caching +export async function getStaticProps() { + const releases = await fetch(`https://api.github.com/repos/${githubRepoSlug}/releases`) + .then(r => r.json()) + .catch(e => { + console.error("Failed to fetch releases", e) + return [] + }) + + return { + props: {releases}, + revalidate: 3600, // refresh every hour + }; +} + + type Release = { id: number name: string @@ -18,33 +31,8 @@ type Release = { html_url: string } -export default function WhatsNew() { - const [releases, setReleases] = useState([]) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - - useEffect(() => { - async function fetchReleases() { - try { - const response = await axios.get( - `https://api.github.com/repos/${githubRepoSlug}/releases`, - { - headers: { - // Optional: if hitting rate limits, use a GitHub token - // Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}` - }, - } - ) - setReleases(response.data) - } catch (err) { - setError("Failed to fetch releases") - } finally { - setLoading(false) - } - } - - fetchReleases() - }, []) +export default function WhatsNew(props: { releases: Release[] }) { + const {releases} = props return ( @@ -54,26 +42,25 @@ export default function WhatsNew() { url={`/news`} /> What's New - {loading ? : - error ?

{error}

: - - {releases.map((release: Release) => ( -
-
-

{release.name || release.tag_name}

- - {new Date(release.published_at).toLocaleDateString()} + {!releases.length ?

Failed to fetch releases.

: + + {releases.map((release: Release) => ( +
+
+

{release.name || release.tag_name}

+ + {new Date(release.published_at).toISOString().split('T')[0]} -
-
- - {formatPullLinks(release.body || "_No release notes provided._")} - -
- View on GitHub
- ))} - +
+ + {formatPullLinks(release.body || "_No release notes provided._")} + +
+ View on GitHub +
+ ))} + } )