|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- import type {GetStaticProps, NextPage} from 'next';
- import * as React from 'react'
- import {useRouter} from 'next/router';
- import ReactMarkdown from 'react-markdown';
- import {Layouts} from '@tesseract-design/viewfinder-react';
- import {LinkButton} from '@tesseract-design/web-navigation-react';
- import Link from 'next/link';
- import {getDocs, getMainReadmeFileContents, getPlatforms, PLATFORMS} from '@/utils/data';
-
- export interface Props {
- markdown: string;
- docsPages: any;
- platforms: string[];
- }
-
- const IndexPage: NextPage<Props> = ({
- markdown,
- docsPages,
- platforms,
- }) => {
- const router = useRouter();
-
- return (
- <Layouts.Basic.Root>
- <Layouts.Basic.ContentContainer>
- <ReactMarkdown
- className="my-12 leading-loose"
- components={{
- ul: ({node, ordered: _ordered, ...props}) => (
- <ul
- {...props}
- className="list-disc pl-4"
- />
- ),
- li: ({node, ...props}) => (
- <li
- {...props}
- className="list-item pl-4"
- />
- ),
- }}
- >
- {markdown}
- </ReactMarkdown>
- <nav>
- <h1>Platforms</h1>
- <div className="grid xs:grid-cols-2 gap-4">
- {platforms.map((platformName) => {
- const platform = PLATFORMS[platformName as keyof typeof PLATFORMS];
-
- return (
- <div
- key={platformName}
- >
- <Link href={platform.href} passHref legacyBehavior>
- <LinkButton
- href={platform.href}
- menuItem
- block
- variant="outline"
- >
- {platform.label}
- </LinkButton>
- </Link>
- </div>
- )
- })}
- </div>
- </nav>
- <nav>
- <h1>Docs</h1>
- <div className="grid xs:grid-cols-2 gap-4">
- {docsPages.map((page) => (
- <div
- key={page.id}
- >
- <Link href={page.href} passHref legacyBehavior>
- <LinkButton
- href={page.href}
- menuItem
- block
- variant="outline"
- >
- {page.label}
- </LinkButton>
- </Link>
- </div>
- ))}
- </div>
- </nav>
- </Layouts.Basic.ContentContainer>
- </Layouts.Basic.Root>
- );
- }
-
- export const getStaticProps: GetStaticProps = async () => {
- const props = {} as Record<string, unknown>;
-
- props.markdown = await getMainReadmeFileContents('README.md') ?? null;
- props.docsPages = await getDocs({
- deriveHrefFromFilename: d => `/docs/${
- d
- .replace(/\.md/i, '')
- .split('-')
- .slice(1)
- .join('-')
- }`,
- deriveLabelFromFilename: d => (
- d
- .split('-')
- .slice(1)
- .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
- .join(' ')
- .replace(/\.md/i, '')
- ),
- });
- props.platforms = await getPlatforms();
-
- return {
- props,
- };
- };
-
- export default IndexPage
|