gdq-archive/frontend/pages/index.tsx

106 lines
3.1 KiB
TypeScript

/**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import Head from 'next/head';
import Link from 'next/link';
import ListGroup from 'react-bootstrap/ListGroup';
import { useIntl } from 'react-intl';
import { GetServerSideProps, NextPage } from 'next';
import { FormattedMessage } from '../components/localization';
import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
import { getIndex } from '../util/api';
interface HomeProps {
index: VideoOnDemandIndex
}
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
props: {
// Fetch VOD IDs and announcements
index: await getIndex(),
},
});
const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids } }) {
const intl = useIntl();
return (
<div>
<Head>
<title>
{intl.formatMessage({
id: 'App.title',
description: 'The full title of the website',
defaultMessage: 'Games Done Quick Instant Archive',
})}
</title>
<meta name="color-scheme" content="light dark" />
</Head>
{/* <Breadcrumb>
<Link legacyBehavior passHref href="/">
<Breadcrumb.Item active>
<FormattedMessage
id="Breadcrumb.homeTitle"
defaultMessage="GDQ Instant Archive"
description="Root node text in breadcrumb"
/>
</Breadcrumb.Item>
</Link>
</Breadcrumb> */}
<h1>
<FormattedMessage
id="Home.introText1"
defaultMessage="Instant access to your favorite VODs of Games Done Quick!"
/>
</h1>
<p>
<FormattedMessage
id="Home.introText2"
defaultMessage="This website collects all the broadcasted runs and allows streaming and downloading them."
/>
</p>
{
announcements.map((text, id) => (
// eslint-disable-next-line react/no-array-index-key
<p key={id}>
<b>Announcement:</b>
{' '}
{text}
</p>
))
}
<ListGroup>
{ids.map(({ id, longTitle }) => (
<Link legacyBehavior key={id} passHref href="/[id]" as={`/${id}`}>
<ListGroup.Item action>
<h5>{longTitle}</h5>
</ListGroup.Item>
</Link>
))}
</ListGroup>
</div>
);
};
export default Home;