coder/offlinedocs/pages/[[...slug]].tsx

import {
  Box,
  Button,
  Code,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerOverlay,
  Flex,
  Grid,
  GridProps,
  Heading,
  Icon,
  Img,
  Link,
  OrderedList,
  Table,
  TableContainer,
  Td,
  Text,
  Th,
  Thead,
  Tr,
  UnorderedList,
  useDisclosure,
} from "@chakra-ui/react";
import fm from "front-matter";
import { readFileSync } from "fs";
import _ from "lodash";
import { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Head from "next/head";
import NextLink from "next/link";
import { useRouter } from "next/router";
import path from "path";
import { MdMenu } from "react-icons/md";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";

type FilePath = string;
type UrlPath = string;
type Route = {
  path: FilePath;
  title: string;
  description?: string;
  children?: Route[];
};
type Manifest = { versions: string[]; routes: Route[] };
type NavItem = { title: string; path: UrlPath; children?: NavItem[] };
type Nav = NavItem[];

const readContentFile = (filePath: string) => {
  const baseDir = process.cwd();
  const docsPath = path.join(baseDir, "..", "docs");
  return readFileSync(path.join(docsPath, filePath), { encoding: "utf-8" });
};

const removeTrailingSlash = (path: string) => path.replace(/\/+$/, "");

const removeMkdExtension = (path: string) => path.replace(/\.md/g, "");

const removeIndexFilename = (path: string) => {
  if (path.endsWith("index")) {
    path = path.replace("index", "");
  }

  return path;
};

const removeREADMEName = (path: string) => {
  if (path.startsWith("README")) {
    path = path.replace("README", "");
  }

  return path;
};

// transformLinkUri converts the links in the markdown file to
// href html links. All index page routes are the directory name, and all
// other routes are the filename without the .md extension.
// This means all relative links are off by one directory on non-index pages.
//
// index.md -> ./subdir/file = ./subdir/file
// index.md -> ../file-next-to-index = ./file-next-to-index
// file.md -> ./subdir/file = ../subdir/file
// file.md -> ../file-next-to-file = ../file-next-to-file
const transformLinkUriSource = (sourceFile: string) => {
  return (href = "") => {
    const isExternal = href.startsWith("http") || href.startsWith("https");
    if (!isExternal) {
      // Remove .md form the path
      href = removeMkdExtension(href);

      // Add the extra '..' if not an index file.
      sourceFile = removeMkdExtension(sourceFile);
      if (!sourceFile.endsWith("index")) {
        href = "../" + href;
      }

      // Remove the index path
      href = removeIndexFilename(href);
      href = removeREADMEName(href);
    }
    return href;
  };
};

const transformFilePathToUrlPath = (filePath: string) => {
  // Remove markdown extension
  let urlPath = removeMkdExtension(filePath);

  // Remove relative path
  if (urlPath.startsWith("./")) {
    urlPath = urlPath.replace("./", "");
  }

  // Remove index from the root file
  urlPath = removeIndexFilename(urlPath);
  urlPath = removeREADMEName(urlPath);

  // Remove trailing slash
  if (urlPath.endsWith("/")) {
    urlPath = removeTrailingSlash(urlPath);
  }

  return urlPath;
};

const mapRoutes = (manifest: Manifest): Record<UrlPath, Route> => {
  const paths: Record<UrlPath, Route> = {};

  const addPaths = (routes: Route[]) => {
    for (const route of routes) {
      paths[transformFilePathToUrlPath(route.path)] = route;

      if (route.children) {
        addPaths(route.children);
      }
    }
  };

  addPaths(manifest.routes);

  return paths;
};

let manifest: Manifest | undefined;

const getManifest = () => {
  if (manifest) {
    return manifest;
  }

  const manifestContent = readContentFile("manifest.json");
  manifest = JSON.parse(manifestContent) as Manifest;
  return manifest;
};

let navigation: Nav | undefined;

const getNavigation = (manifest: Manifest): Nav => {
  if (navigation) {
    return navigation;
  }

  const getNavItem = (route: Route, parentPath?: UrlPath): NavItem => {
    const path = parentPath
      ? `${parentPath}/${transformFilePathToUrlPath(route.path)}`
      : transformFilePathToUrlPath(route.path);
    const navItem: NavItem = {
      title: route.title,
      path,
    };

    if (route.children) {
      navItem.children = [];

      for (const childRoute of route.children) {
        navItem.children.push(getNavItem(childRoute));
      }
    }

    return navItem;
  };

  navigation = [];

  for (const route of manifest.routes) {
    navigation.push(getNavItem(route));
  }

  return navigation;
};

const removeHtmlComments = (string: string) => {
  return string.replace(/<!--[\s\S]*?-->/g, "");
};

export const getStaticPaths: GetStaticPaths = () => {
  const manifest = getManifest();
  const routes = mapRoutes(manifest);
  const paths = Object.keys(routes).map((urlPath) => ({
    params: { slug: urlPath.split("/") },
  }));

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps = (context) => {
  // When it is home page, the slug is undefined because there is no url path
  // so we make it an empty string to work good with the mapRoutes
  const { slug = [""] } = context.params as { slug: string[] };
  const manifest = getManifest();
  const routes = mapRoutes(manifest);
  const urlPath = slug.join("/");
  const route = routes[urlPath];
  const { body } = fm(readContentFile(route.path));
  // Serialize MDX to support custom components
  const content = removeHtmlComments(body);
  const navigation = getNavigation(manifest);
  const version = manifest.versions[0];

  return {
    props: {
      content,
      navigation,
      route,
      version,
    },
  };
};

const SidebarNavItem: React.FC<{ item: NavItem; nav: Nav }> = ({
  item,
  nav,
}) => {
  const router = useRouter();
  let isActive = router.asPath.startsWith(`/${item.path}`);

  // Special case to handle the home path
  if (item.path === "") {
    isActive = router.asPath === "/";

    // Special case to handle the home path children
    const homeNav = nav.find((navItem) => navItem.path === "") as NavItem;
    const homeNavPaths =
      homeNav.children?.map((item) => `/${item.path}/`) ?? [];
    if (homeNavPaths.includes(router.asPath)) {
      isActive = true;
    }
  }

  return (
    <Box>
      <NextLink href={"/" + item.path} passHref>
        <Link
          fontWeight={isActive ? 600 : 400}
          color={isActive ? "gray.900" : "gray.700"}
        >
          {item.title}
        </Link>
      </NextLink>

      {isActive && item.children && (
        <Grid
          as="nav"
          pt={2}
          pl={3}
          maxW="sm"
          autoFlow="row"
          gap={2}
          autoRows="min-content"
        >
          {item.children.map((subItem) => (
            <SidebarNavItem key={subItem.path} item={subItem} nav={nav} />
          ))}
        </Grid>
      )}
    </Box>
  );
};

const SidebarNav: React.FC<{ nav: Nav; version: string } & GridProps> = ({
  nav,
  version,
  ...gridProps
}) => {
  return (
    <Grid
      h="100vh"
      overflowY="scroll"
      as="nav"
      p={8}
      w="300px"
      autoFlow="row"
      gap={2}
      autoRows="min-content"
      bgColor="white"
      borderRightWidth={1}
      borderColor="gray.200"
      borderStyle="solid"
      {...gridProps}
    >
      <Box mb={6}>
        <Img src="/logo.svg" alt="Coder logo" />
      </Box>

      {nav.map((navItem) => (
        <SidebarNavItem key={navItem.path} item={navItem} nav={nav} />
      ))}
    </Grid>
  );
};

const MobileNavbar: React.FC<{ nav: Nav; version: string }> = ({
  nav,
  version,
}) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Flex
        bgColor="white"
        px={6}
        alignItems="center"
        h={16}
        borderBottomWidth={1}
      >
        <Img src="/logo.svg" alt="Coder logo" w={28} />

        <Button variant="ghost" ml="auto" onClick={onOpen}>
          <Icon as={MdMenu} fontSize="2xl" />
        </Button>
      </Flex>

      <Drawer onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerBody p={0}>
            <SidebarNav nav={nav} version={version} border={0} />
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
};

const slugifyTitle = (title: string) => {
  return _.kebabCase(title.toLowerCase());
};

const getImageUrl = (src: string | undefined) => {
  if (src === undefined) {
    return "";
  }
  const assetPath = src.split("images/")[1];
  return `/images/${assetPath}`;
};

const DocsPage: NextPage<{
  content: string;
  navigation: Nav;
  route: Route;
  version: string;
}> = ({ content, navigation, route, version }) => {
  return (
    <>
      <Head>
        <title>{route.title}</title>
        <meta name="source" content={route.path} />
      </Head>
      <Box
        display={{ md: "grid" }}
        gridTemplateColumns="max-content 1fr"
        fontSize="md"
        color="gray.700"
      >
        <Box display={{ base: "none", md: "block" }}>
          <SidebarNav nav={navigation} version={version} />
        </Box>

        <Box display={{ base: "block", md: "none" }}>
          <MobileNavbar nav={navigation} version={version} />
        </Box>

        <Box
          as="main"
          w="full"
          pb={20}
          px={{ base: 6, md: 10 }}
          pl={{ base: 6, md: 20 }}
          h="100vh"
          overflowY="auto"
        >
          <Box maxW="872">
            <Box lineHeight="tall">
              {/* Some docs don't have the title */}
              <Heading
                as="h1"
                fontSize="4xl"
                pt={10}
                pb={2}
                // Hide this title if the doc has the title already
                sx={{ "& + h1": { display: "none" } }}
              >
                {route.title}
              </Heading>
              <ReactMarkdown
                rehypePlugins={[rehypeRaw]}
                remarkPlugins={[remarkGfm]}
                transformLinkUri={transformLinkUriSource(route.path)}
                components={{
                  h1: ({ children }) => (
                    <Heading
                      as="h1"
                      fontSize="4xl"
                      pt={10}
                      pb={2}
                      id={slugifyTitle(children[0] as string)}
                    >
                      {children}
                    </Heading>
                  ),
                  h2: ({ children }) => (
                    <Heading
                      as="h2"
                      fontSize="3xl"
                      pt={10}
                      pb={2}
                      id={slugifyTitle(children[0] as string)}
                    >
                      {children}
                    </Heading>
                  ),
                  h3: ({ children }) => (
                    <Heading
                      as="h3"
                      fontSize="2xl"
                      pt={10}
                      pb={2}
                      id={slugifyTitle(children[0] as string)}
                    >
                      {children}
                    </Heading>
                  ),
                  img: ({ src }) => (
                    <Img
                      src={getImageUrl(src)}
                      mb={2}
                      borderWidth={1}
                      borderColor="gray.200"
                      borderStyle="solid"
                      rounded="md"
                      height="auto"
                    />
                  ),
                  p: ({ children }) => (
                    <Text pt={2} pb={2}>
                      {children}
                    </Text>
                  ),
                  ul: ({ children }) => (
                    <UnorderedList
                      mb={4}
                      display="grid"
                      gridAutoFlow="row"
                      gap={2}
                    >
                      {children}
                    </UnorderedList>
                  ),
                  ol: ({ children }) => (
                    <OrderedList
                      mb={4}
                      display="grid"
                      gridAutoFlow="row"
                      gap={2}
                    >
                      {children}
                    </OrderedList>
                  ),
                  a: ({ children, href = "" }) => {
                    const isExternal =
                      href.startsWith("http") || href.startsWith("https");

                    return (
                      <Link
                        href={href}
                        target={isExternal ? "_blank" : undefined}
                        fontWeight={500}
                        color="blue.600"
                      >
                        {children}
                      </Link>
                    );
                  },
                  code: ({ node, ...props }) => (
                    <Code {...props} bgColor="gray.100" />
                  ),
                  pre: ({ children }) => (
                    <Box
                      as="pre"
                      w="full"
                      sx={{ "& > code": { w: "full", p: 4, rounded: "md" } }}
                      mb={2}
                    >
                      {children}
                    </Box>
                  ),
                  table: ({ children }) => (
                    <TableContainer
                      mt={1}
                      mb={2}
                      bgColor="white"
                      rounded="md"
                      borderWidth={1}
                      borderColor="gray.100"
                      borderStyle="solid"
                    >
                      <Table variant="simple">{children}</Table>
                    </TableContainer>
                  ),
                  thead: ({ children }) => <Thead>{children}</Thead>,
                  th: ({ children }) => <Th>{children}</Th>,
                  td: ({ children }) => <Td>{children}</Td>,
                  tr: ({ children }) => <Tr>{children}</Tr>,
                }}
              >
                {content}
              </ReactMarkdown>
            </Box>
          </Box>
        </Box>
      </Box>
    </>
  );
};

export default DocsPage;