feat: initial project

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# Contentlayer
+.contentlayer

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Bryan Barrios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,14 @@
+# Lil Docs Template
+
+A lil docs template for lil projects. Built with NextJS (Typescript), ChakraUI and ContentLayer.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://www.github.com/bryanbarrios/lil-docs-template)
+
+## Features
+
+1. MDX-ready using ContentLayer
+2. Flexible
+3. SEO
+4. Light / Dark mode
+
+**Note:** No production ready. I need to make some optimization and performance improvements. Also improve the code quality of some components. But you can explore the project.

components/MDXComponents.tsx

@@ -0,0 +1,9 @@
+import Image from "next/image";
+import { Callout } from "@/components/callout/";
+
+const MDXComponents = {
+  Callout,
+  Image,
+};
+
+export default MDXComponents;

components/SearchContext.tsx

@@ -0,0 +1,202 @@
+import { FC, useMemo } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Icon, Input, useColorModeValue } from "@chakra-ui/react";
+import {
+  Action,
+  KBarAnimator,
+  KBarPortal,
+  KBarPositioner,
+  KBarProvider,
+  KBarResults,
+  KBarSearch,
+  useMatches,
+} from "kbar";
+import { RiSearchLine } from "react-icons/ri";
+import { docsSections, siteConfig, topLevelSectionsRoutes } from "@/config";
+import { WithChildren } from "@/types";
+import slugger from "github-slugger";
+
+interface SearchProviderProps extends WithChildren {}
+
+const SearchProvider: FC<SearchProviderProps> = ({ children }) => {
+  const router = useRouter();
+
+  const actions = useMemo(() => {
+    let actions: Action[] = [
+      {
+        id: "homepage",
+        name: "Homepage",
+        keywords: "Lil Docs Template Home Start Index",
+        section: "Home",
+        perform: () => router.push("/"),
+      },
+    ];
+
+    topLevelSectionsRoutes.map((section) =>
+      actions.push({
+        id: `docs-${slugger.slug(section.label)}`,
+        name: section.label,
+        section: "Sections",
+        icon: <Icon as={section.icon} />,
+        perform: () => router.push(section.path),
+      })
+    );
+
+    siteConfig.repo &&
+      actions.push({
+        id: "external-github",
+        name: "GitHub",
+        keywords: "Github Git Repository Repo",
+        section: "External",
+        perform: () => window.open(siteConfig.repo?.url, "_blank"),
+      });
+
+    docsSections.map(({ section, routes }) =>
+      routes.map((route) =>
+        actions.push({
+          id: `docs-${slugger.slug(route.title)}`,
+          name: route.title,
+          section: "Documentation",
+          subtitle: `Docs / ${section} / ${route.title}`,
+          perform: () => router.push(route.path),
+        })
+      )
+    );
+
+    return actions;
+  }, [router]);
+
+  return (
+    <KBarProvider actions={actions}>
+      <KBarPortal>
+        <Box
+          as={KBarPositioner}
+          bgColor={useColorModeValue(
+            "rgba(203,214,224,0.5)",
+            "rgba(26,31,44,0.2)"
+          )}
+          backdropFilter="blur(12px)"
+          zIndex="overlay"
+        >
+          <Box as={KBarAnimator} w="full" maxW="xl">
+            <Box
+              bgColor={useColorModeValue("white", "gray.700")}
+              borderTop="1px"
+              borderColor="rgba(255,255,255,0.1)"
+              borderRadius="3xl"
+              overflow="hidden"
+            >
+              <Flex alignItems="center" p="4">
+                <Icon
+                  as={RiSearchLine}
+                  boxSize="5"
+                  color="gray.500"
+                  mr={{ base: "2", md: "4" }}
+                />
+                <Input
+                  as={KBarSearch}
+                  variant="unstyled"
+                  color={useColorModeValue("gray.700", "gray.200")}
+                  _placeholder={{
+                    color: useColorModeValue("gray.400", "gray.500"),
+                  }}
+                />
+                <Box
+                  as="kbd"
+                  fontSize="x-small"
+                  fontWeight="semibold"
+                  border="1px"
+                  borderColor={useColorModeValue("gray.200", "gray.600")}
+                  borderRadius="md"
+                  px="2"
+                  py="0.5"
+                  ml={{ base: "2", md: "4" }}
+                >
+                  ESC
+                </Box>
+              </Flex>
+              <RenderResults />
+            </Box>
+          </Box>
+        </Box>
+      </KBarPortal>
+      {children}
+    </KBarProvider>
+  );
+};
+
+const RenderResults = () => {
+  const { results } = useMatches();
+
+  if (!!results.length) {
+    <p>No results for your search...</p>;
+  }
+
+  const dividerColor = useColorModeValue(
+    "rgba(0,0,0,0.05)",
+    "rgba(255,255,255,0.05)"
+  );
+  const activeColor = useColorModeValue("gray.50", "gray.600");
+  const itemColor = useColorModeValue("gray.600", "gray.200");
+  const labelColor = useColorModeValue("gray.400", "gray.500");
+
+  if (results.length) {
+    return (
+      <KBarResults
+        items={results}
+        onRender={({ item, active }) => (
+          <Box>
+            {typeof item === "string" ? (
+              <Box pt="3">
+                <Box
+                  borderTop="1px"
+                  borderColor={dividerColor}
+                  fontSize="xs"
+                  fontWeight="semibold"
+                  color={labelColor}
+                  textTransform="uppercase"
+                  letterSpacing="wide"
+                  pt="4"
+                  pb="2"
+                  px="4"
+                >
+                  {item}
+                </Box>
+              </Box>
+            ) : (
+              <Box
+                cursor="pointer"
+                bgColor={active ? activeColor : "transparent"}
+                color={itemColor}
+                px="4"
+                py="2.5"
+              >
+                {item.subtitle && (
+                  <Box fontSize="xs" color={labelColor}>
+                    {item.subtitle}
+                  </Box>
+                )}
+                {item.name}
+              </Box>
+            )}
+          </Box>
+        )}
+      />
+    );
+  } else {
+    return (
+      <Box
+        textAlign="center"
+        color={labelColor}
+        borderTop="1px"
+        borderColor="rgba(255,255,255,0.05)"
+        px="4"
+        py="8"
+      >
+        No results for your search...
+      </Box>
+    );
+  }
+};
+
+export default SearchProvider;

components/callout/Callout.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { Box, Icon, useStyleConfig } from "@chakra-ui/react";
+import {
+  RiInformationFill,
+  RiCheckboxCircleFill,
+  RiAlertFill,
+  RiCloseCircleFill,
+} from "react-icons/ri";
+import { WithChildren } from "@/types";
+
+interface CalloutProps extends WithChildren {
+  size: "sm" | "md";
+  variant: "info" | "success" | "warning" | "error";
+}
+
+const Callout: FC<CalloutProps> = ({ size, variant, children }) => {
+  const styles = useStyleConfig("Callout", { size, variant });
+  let icon;
+
+  switch (variant) {
+    case "info":
+      icon = RiInformationFill;
+      break;
+    case "success":
+      icon = RiCheckboxCircleFill;
+      break;
+    case "warning":
+      icon = RiAlertFill;
+      break;
+    case "error":
+      icon = RiCloseCircleFill;
+      break;
+    default:
+      icon = RiInformationFill;
+      break;
+  }
+
+  return (
+    <Box __css={styles}>
+      <Box>
+        <Icon boxSize="6" as={icon} />
+      </Box>
+      {children}
+    </Box>
+  );
+};
+
+export default Callout;