tesseract/showcases/web-kitchensink-reactnext/src/pages/index.tsx

import type {GetStaticProps, NextPage} from 'next';
import * as fs from 'fs/promises';
import * as path from 'path';
import * as React from 'react'
import {useRouter} from 'next/router';
import ReactMarkdown from 'react-markdown';
import {Layouts} from '@tesseract-design/viewfinder-react';

export interface Props {
  markdown: string,
}

const IndexPage: NextPage<Props> = ({
  markdown,
}) => {
  const router = useRouter();
  const sidebarOpen = router.query.open === 'sidebar';

  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>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  );
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const props = {} as Record<string, unknown>;

  const readmePath = path.resolve('../../README.md');
  props.markdown = await fs.readFile(readmePath, 'utf-8');

  return {
    props,
  };
};

export default IndexPage