Merge pull request #1382 from ghoshnirmalya/feat/upgrade-docs

Update guides

components/footer/index.tsx

@@ -1,16 +1,29 @@
-import { Box, Image, Link as _Link, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Image, Link as _Link, Text } from "@chakra-ui/react";
 import Link from "next/link";
 import React, { FC } from "react";
 
 const SocialLinks: FC = () => {
   return (
     <Box p={4} as="footer">
       <Box maxW="6xl" mx="auto" fontSize="xs">
-        <Box d="flex" textAlign="center" justifyContent="center">
-          <VStack spacing={2}>
+        <Box
+          d="flex"
+          textAlign="center"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <HStack spacing={2}>
+            <Box>
+              <_Link
+                href="https://github.com/ghoshnirmalya/nirmalyaghosh.com"
+                p={4}
+              >
+                Source code on Github
+              </_Link>
+            </Box>
             <Box>
               <Link href="/">
-                <_Link href="/" target="_blank">
+                <_Link href="/" target="_blank" p={4}>
                   <Image
                     src="/images/common/favicon.svg"
                     alt="Logo"
@@ -21,19 +34,11 @@ const SocialLinks: FC = () => {
               </Link>
             </Box>
             <Box p={4}>
-              <_Link
-                href="https://github.com/ghoshnirmalya/nirmalyaghosh.com"
-                p={4}
-              >
-                Source code on Github
-              </_Link>
-            </Box>
-            <Box>
               <Text>
                 Copyright &copy; {new Date().getFullYear()} Nirmalya Ghosh
               </Text>
             </Box>
-          </VStack>
+          </HStack>
         </Box>
       </Box>
     </Box>

components/layouts/docs/index.tsx → components/layouts/guides/index.tsx

@@ -9,53 +9,33 @@ import {
   useColorMode,
   VStack,
 } from "@chakra-ui/react";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 import Link from "next/link";
 import React, { FC, FormEvent, useState } from "react";
 import { IoMdArrowRoundForward } from "react-icons/io";
-import IDoc from "types/doc";
-
-dayjs.extend(localizedFormat);
+import IGuide from "types/guide";
 
 interface Props {
-  docs: IDoc[];
-  hideViewAllLinksNode?: boolean;
+  guides: IGuide[];
 }
 
-const Docs: FC<Props> = ({ docs = [], hideViewAllLinksNode = false }) => {
+const Guides: FC<Props> = ({ guides = [] }) => {
   const { colorMode } = useColorMode();
   const cardBgColor = { light: "white", dark: "gray.900" };
   const cardColor = { light: "gray.900", dark: "white" };
   const linkColor = { light: "blue.600", dark: "blue.400" };
   const [searchQuery, setSearchQuery] = useState("");
 
-  const sortedDocs = docs
+  const sortedGuides = guides
     .sort(
-      (a: IDoc, b: IDoc) =>
+      (a: IGuide, b: IGuide) =>
         Number(new Date(b.frontMatter.date)) -
         Number(new Date(a.frontMatter.date))
     )
-    .filter((doc: IDoc) =>
-      doc.frontMatter.title.toLowerCase().includes(searchQuery.toLowerCase())
+    .filter((guide: IGuide) =>
+      guide.frontMatter.title.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
-  const viewAllLinksNode = () => {
-    return (
-      <Link href="/docs">
-        <_Link p={2} href="/docs" rounded="md">
-          <HStack spacing={2} alignItems="center">
-            <Box fontWeight="bold">View all documents</Box>
-            <Box as={IoMdArrowRoundForward} size="15px" />
-          </HStack>
-        </_Link>
-      </Link>
-    );
-  };
-
   const searchNode = () => {
-    if (!hideViewAllLinksNode) return false;
-
     return (
       <Box>
         <Input
@@ -65,40 +45,23 @@ const Docs: FC<Props> = ({ docs = [], hideViewAllLinksNode = false }) => {
           onChange={(e: FormEvent<HTMLInputElement>) =>
             setSearchQuery(e.currentTarget.value)
           }
-          placeholder="Search for a document"
+          placeholder="Search for a guide"
         />
       </Box>
     );
   };
 
   const headingNode = () => {
-    if (hideViewAllLinksNode) {
-      return (
-        <Box>
-          <VStack spacing={2} align="left">
-            <Heading as="h1" size="xl">
-              Documents
-            </Heading>
-            <Text>Posts related to some of the latest technologies</Text>
-          </VStack>
-        </Box>
-      );
-    }
-
-    return (
-      <Box d="flex" justifyContent="space-between" alignItems="center">
-        <Heading as="h2" size="xl">
-          Documents
-        </Heading>
-        {viewAllLinksNode()}
-      </Box>
-    );
-  };
-
-  const metaNode = (date: string) => {
     return (
       <Box>
-        <Text fontSize="xs">{dayjs(date).format("LL")}</Text>
+        <VStack spacing={2} align="left">
+          <Heading as="h1" size="xl">
+            Guides
+          </Heading>
+          <Text>
+            Guides related to some of the projects that I've developed
+          </Text>
+        </VStack>
       </Box>
     );
   };
@@ -122,30 +85,29 @@ const Docs: FC<Props> = ({ docs = [], hideViewAllLinksNode = false }) => {
     return <Text fontSize="sm">{description}</Text>;
   };
 
-  const docsNode = () => {
-    if (!sortedDocs.length) {
+  const guidesNode = () => {
+    if (!sortedGuides.length) {
       return (
         <VStack mx="auto" textAlign="center">
           <Image
             src="/images/common/no-items.svg"
-            alt="No docs found!"
+            alt="No guides found!"
             size={64}
           />
-          <Text>No docs found!</Text>
+          <Text>No guides found!</Text>
         </VStack>
       );
     }
 
-    return sortedDocs.map((doc: IDoc) => {
+    return sortedGuides.map((guide: IGuide) => {
       return (
-        <Box key={doc.slug}>
-          <Link href={`/docs/${doc.slug}`}>
+        <Box key={guide.slug}>
+          <Link href={`/guides/${guide.slug}`}>
             <a>
               <Box>
                 <VStack spacing={1} align="left">
-                  {metaNode(doc.frontMatter.date)}
-                  {titleNode(doc.frontMatter.title)}
-                  {descriptionNode(doc.frontMatter.description)}
+                  {titleNode(guide.frontMatter.title)}
+                  {descriptionNode(guide.frontMatter.description)}
                 </VStack>
               </Box>
             </a>
@@ -159,9 +121,9 @@ const Docs: FC<Props> = ({ docs = [], hideViewAllLinksNode = false }) => {
     <VStack spacing={8} align="left">
       {headingNode()}
       {searchNode()}
-      {docsNode()}
+      {guidesNode()}
     </VStack>
   );
 };
 
-export default Docs;
+export default Guides;

components/mdx/jumbotron.tsx

@@ -0,0 +1,107 @@
+import {
+  Box,
+  Heading,
+  HStack,
+  Link as _Link,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { FC } from "react";
+import { IoLogoGithub, IoMdEye } from "react-icons/io";
+
+interface IProps {
+  heading: string;
+  description: string;
+  githubLink: string;
+  demoLink: string;
+}
+
+const Jumbotron: FC<IProps> = ({
+  heading,
+  description,
+  githubLink,
+  demoLink,
+}) => {
+  const githubButtonNode = () => {
+    if (!githubLink) {
+      return false;
+    }
+
+    return (
+      <_Link
+        py={2}
+        px={4}
+        href={githubLink}
+        rounded="md"
+        bg="#333"
+        color="#fff"
+        fontWeight="bold"
+        isExternal
+        textDecoration="none"
+      >
+        <HStack spacing={2} alignItems="center">
+          <Box as={IoLogoGithub} />
+          <Box>View source</Box>
+        </HStack>
+      </_Link>
+    );
+  };
+
+  const demoButtonNode = () => {
+    if (!demoLink) {
+      return false;
+    }
+
+    return (
+      <_Link
+        py={2}
+        px={4}
+        href={demoLink}
+        rounded="md"
+        bg="#754abb"
+        color="#fff"
+        fontWeight="bold"
+        isExternal
+      >
+        <HStack spacing={2} alignItems="center">
+          <Box as={IoMdEye} />
+          <Box>View demo</Box>
+        </HStack>
+      </_Link>
+    );
+  };
+
+  return (
+    <VStack
+      spacing={2}
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      p={[4, 12, 16]}
+    >
+      <Box>
+        <Heading
+          as="h1"
+          fontFamily="body"
+          bgGradient="linear-gradient(to left, #45abff, #673AB7)"
+          bgClip="text"
+        >
+          {heading}
+        </Heading>
+      </Box>
+      <Box>
+        <Text>{description}</Text>
+      </Box>
+      <Box>
+        <Box d="flex" alignItems="center">
+          <HStack spacing={4}>
+            {githubButtonNode()}
+            {demoButtonNode()}
+          </HStack>
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default Jumbotron;

components/mdx/link.tsx

@@ -0,0 +1,17 @@
+import _Link from "next/link";
+import React, { FC } from "react";
+
+interface IProps {
+  href: string;
+  text: string;
+}
+
+const Link: FC<IProps> = ({ href, text }) => {
+  return (
+    <_Link href={href}>
+      <a>{text}</a>
+    </_Link>
+  );
+};
+
+export default Link;

components/navbar/index.tsx

@@ -31,8 +31,8 @@ const LINKS = [
     title: "Articles",
   },
   {
-    url: "/docs",
-    title: "Documents",
+    url: "/guides",
+    title: "Guides",
   },
   {
     url: "/about",