Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x | import type { NextPage, GetServerSideProps } from "next";
import Head from "next/head";
import { parse as parseYaml } from "yaml";
import type { CalendarYearsData, Chapter } from "~/types";
import StaticHead from "~/components/document/StaticHead";
import SiteHeader from "~/components/ui/SiteHeader";
import TitanicGrids from "~/components/charts/TitanicGrids";
import { convertChaptersToCalendarYearData } from "~/utils";
import {
DEFAULT_CHAPTER_DATA_YAML_URL,
DEFAULT_PAGE_TITLE,
DEFAULT_SITE_DESCRIPTION,
DEFAULT_SITE_NAME,
} from "~/constants";
interface HomeProps {
/** The list of word counts per calendar year. */
data: CalendarYearsData;
/** The minimum year in the dataset. */
minYear: number;
/** The maximum value in the dataset. */
maxValue: number;
}
const Home: NextPage<HomeProps> = ({ data, minYear, maxValue }) => {
const pageTitle = `${DEFAULT_PAGE_TITLE} | ${DEFAULT_SITE_NAME}`;
const pageDescription = DEFAULT_SITE_DESCRIPTION;
return (
<>
<StaticHead />
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={pageDescription} />
</Head>
<SiteHeader data-testid="site-header" />
<main className="h-screen w-screen cursor-move">
<TitanicGrids data={data} startYear={minYear} maxValue={maxValue} />
</main>
</>
);
};
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
const res = await fetch(DEFAULT_CHAPTER_DATA_YAML_URL);
const text = await res.text();
const chapters: Chapter[] = parseYaml(text) as Chapter[];
const { data, minYear, maxValue } =
convertChaptersToCalendarYearData(chapters);
return {
props: {
data,
minYear,
maxValue,
},
};
};
export default Home;
|