iconoir/iconoir.com/pages/docs/changelog.tsx
2023-01-11 19:08:14 +01:00

88 lines
2.5 KiB
TypeScript

import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';
import {
ChangelogEntry,
ChangelogEntryProps,
} from '../../components/ChangelogEntry';
import { REPO } from '../../lib/constants';
import {
DocumentationNavigation,
DocumentationNavigationProps,
} from '../../components/DocumentationNavigation';
import { Footer } from '../../components/Footer';
import { Header, HeaderProps } from '../../components/Header';
import { Layout } from '../../components/Layout';
import { ReadOnGitHub } from '../../components/ReadOnGitHub';
import { SEO } from '../../components/SEO';
import { H1 } from '../../components/Typography';
import { getHeaderProps } from '../../lib/getHeaderProps';
import { octokit } from '../../lib/octokit';
import {
Container,
ContentContainer,
getDocumentationStructure,
InnerContentContainer,
NavigationContainer,
} from './[...slug]';
export interface ChangelogProps extends HeaderProps {
documentationProps: DocumentationNavigationProps;
entries: ChangelogEntryProps[];
}
export default function Changelog({
documentationProps,
entries,
...headerProps
}: ChangelogProps) {
return (
<Layout>
<SEO title={'Changelog'} />
<Header {...headerProps} currentVersionColor={'var(--green)'} />
<Container>
<NavigationContainer>
<DocumentationNavigation {...documentationProps} />
</NavigationContainer>
<ContentContainer>
<InnerContentContainer>
<H1 style={{ marginBottom: 72 }}>Changelog</H1>
{entries.map((entry) => (
<ChangelogEntry key={entry.name} {...entry} />
))}
<ReadOnGitHub path={'../../releases'} resource="the releases" />
</InnerContentContainer>
</ContentContainer>
</Container>
<Footer />
</Layout>
);
}
export async function getStaticProps() {
const { data: releases } = await octokit.rest.repos.listReleases({
...REPO,
});
const entries: ChangelogEntryProps[] = [];
for (const release of releases) {
entries.push({
name: release.name || release.tag_name,
url: release.html_url,
created_at: release.created_at,
...(release.body && {
body: await serialize(release.body, {
mdxOptions: {
remarkPlugins: [require('remark-prism'), remarkGfm],
},
}),
}),
});
}
const items = getDocumentationStructure();
return {
props: {
entries,
...getHeaderProps(),
documentationProps: { documentationItems: items },
},
};
}