Merge pull request #1366 from ghoshnirmalya/feat/upgrade-site

Updates design of site
ghoshnirmalya · Jan 4, 2021 · 19a79c1 · 19a79c1 · vercel · Jan 4, 2021
2 parents 5c16c16 + 2a553fe
commit 19a79c1
Show file tree

Hide file tree

Showing 65 changed files with 3,313 additions and 3,034 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.release-it.json b/.release-it.json
@@ -11,5 +11,8 @@
       "preset": "angular",
       "infile": "changelog.md"
     }
+  },
+  "hooks": {
+    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
   }
 }
diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -1,29 +1,13 @@
-import React, { FC } from "react";
-import {
-  Stack,
-  Image,
-  Box,
-  Link as _Link,
-  Text,
-  useColorMode,
-} from "@chakra-ui/react";
+import { Box, Image, Link as _Link, Text, VStack } from "@chakra-ui/react";
 import Link from "next/link";
+import React, { FC } from "react";
 
 const SocialLinks: FC = () => {
-  const { colorMode } = useColorMode();
-  const sectionBgColor = { light: "gray.100", dark: "gray.900" };
-  const sectionColor = { light: "gray.900", dark: "gray.100" };
-
   return (
-    <Box
-      bg={sectionBgColor[colorMode]}
-      color={sectionColor[colorMode]}
-      p={4}
-      as="footer"
-    >
+    <Box p={4} as="footer">
       <Box maxW="6xl" mx="auto" fontSize="xs">
         <Box d="flex" textAlign="center" justifyContent="center">
-          <Stack spacing={2}>
+          <VStack spacing={2}>
             <Box>
               <Link href="/">
                 <_Link href="/" target="_blank">
@@ -36,8 +20,11 @@ const SocialLinks: FC = () => {
                 </_Link>
               </Link>
             </Box>
-            <Box>
-              <_Link href="https://github.com/ghoshnirmalya/nirmalyaghosh.com">
+            <Box p={4}>
+              <_Link
+                href="https://github.com/ghoshnirmalya/nirmalyaghosh.com"
+                p={4}
+              >
                 Source code on Github
               </_Link>
             </Box>
@@ -46,7 +33,7 @@ const SocialLinks: FC = () => {
                 Copyright &copy; {new Date().getFullYear()} Nirmalya Ghosh
               </Text>
             </Box>
-          </Stack>
+          </VStack>
         </Box>
       </Box>
     </Box>

diff --git a/components/layouts/articles/index.tsx b/components/layouts/articles/index.tsx
@@ -1,26 +1,27 @@
-import { ArrowForwardIcon, MinusIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
   Heading,
+  HStack,
   Image,
   Input,
   Link as _Link,
-  Stack,
   Text,
   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 { IoMdArrowForward, IoMdArrowRoundForward } from "react-icons/io";
 import IArticle from "types/article";
+import IPublication from "types/publication";
 
 dayjs.extend(localizedFormat);
 
 interface Props {
-  articles: IArticle[];
+  articles: (IArticle & IPublication)[];
   hideViewAllLinksNode?: boolean;
 }
 
@@ -31,24 +32,29 @@ const Articles: FC<Props> = ({
   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 sortedArticles = articles
     .sort(
-      (a: IArticle, b: IArticle) =>
-        Number(new Date(b.date)) - Number(new Date(a.date))
+      (a: IArticle & IPublication, b: IArticle & IPublication) =>
+        Number(new Date(b.frontMatter.date)) -
+        Number(new Date(a.frontMatter.date))
     )
-    .filter((article) =>
-      article.title.toLowerCase().includes(searchQuery.toLowerCase())
+    .filter((article: IArticle) =>
+      article.frontMatter.title
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
     );
 
   const viewAllLinksNode = () => {
     return (
       <Link href="/articles">
         <_Link p={2} href="/articles" rounded="md">
-          <Stack spacing={2} isInline alignItems="center">
+          <HStack spacing={2} alignItems="center">
             <Box fontWeight="bold">View all articles</Box>
             <Box as={IoMdArrowRoundForward} size="15px" />
-          </Stack>
+          </HStack>
         </_Link>
       </Link>
     );
@@ -76,12 +82,12 @@ const Articles: FC<Props> = ({
     if (hideViewAllLinksNode) {
       return (
         <Box>
-          <Stack spacing={2}>
+          <VStack spacing={2} align="left">
             <Heading as="h1" size="xl">
               Articles
             </Heading>
             <Text>Posts related to some of the latest technologies</Text>
-          </Stack>
+          </VStack>
         </Box>
       );
     }
@@ -96,23 +102,24 @@ const Articles: FC<Props> = ({
     );
   };
 
-  const metaNode = (date: string, readingTime: string) => {
+  const metaNode = (date: string) => {
     return (
-      <Stack spacing={4} isInline alignItems="center">
-        <Box>
-          <Text fontSize="xs">{dayjs(date).format("LL")}</Text>
-        </Box>
-        <MinusIcon size="12px" />
-        <Box>
-          <Text fontSize="xs">{readingTime}</Text>
-        </Box>
-      </Stack>
+      <Box>
+        <Text fontSize="xs">{dayjs(date).format("LL")}</Text>
+      </Box>
     );
   };
 
   const titleNode = (title: string) => {
     return (
-      <Heading as="h3" size="md" letterSpacing="tight" lineHeight="tall">
+      <Heading
+        as="h3"
+        size="md"
+        letterSpacing="tight"
+        lineHeight="tall"
+        color={linkColor[colorMode]}
+        fontWeight="bold"
+      >
         {title}
       </Heading>
     );
@@ -124,7 +131,7 @@ const Articles: FC<Props> = ({
 
   const ctaNode = () => {
     return (
-      <Button rightIcon={<ArrowForwardIcon />} variant="link" fontSize="sm">
+      <Button rightIcon={<IoMdArrowForward />} variant="link" fontSize="sm">
         Read more
       </Button>
     );
@@ -133,37 +140,50 @@ const Articles: FC<Props> = ({
   const articlesNode = () => {
     if (!sortedArticles.length) {
       return (
-        <Stack mx="auto" textAlign="center">
+        <VStack mx="auto" textAlign="center">
           <Image
             src="/images/common/no-items.svg"
             alt="No articles found!"
             size={64}
           />
           <Text>No articles found!</Text>
-        </Stack>
+        </VStack>
       );
     }
 
-    return sortedArticles.map((article: IArticle) => {
-      const permalink = article.__resourcePath.replace(".mdx", "");
+    return sortedArticles.map((article: IArticle & IPublication) => {
+      if (!article.slug) {
+        return (
+          <Box key={article.frontMatter.url}>
+            <a
+              href={article.frontMatter.url}
+              target="_blank"
+              rel="nofollow noopener noreferrer"
+            >
+              <Box>
+                <VStack spacing={2} align="left">
+                  {metaNode(article.frontMatter.date)}
+                  {titleNode(article.frontMatter.title)}
+                  {descriptionNode(article.frontMatter.description)}
+                  <Box>{ctaNode()}</Box>
+                </VStack>
+              </Box>
+            </a>
+          </Box>
+        );
+      }
 
       return (
-        <Box key={permalink}>
-          <Link href={`/${permalink}`}>
+        <Box key={article.slug}>
+          <Link href={`/articles/${article.slug}`}>
             <a>
-              <Box
-                bg={cardBgColor[colorMode]}
-                color={cardColor[colorMode]}
-                p={8}
-                rounded="md"
-                shadow="md"
-              >
-                <Stack spacing={4}>
-                  {metaNode(article.date, article.readingTime.text)}
-                  {titleNode(article.title)}
-                  {descriptionNode(article.description)}
+              <Box>
+                <VStack spacing={2} align="left">
+                  {metaNode(article.frontMatter.date)}
+                  {titleNode(article.frontMatter.title)}
+                  {descriptionNode(article.frontMatter.description)}
                   <Box>{ctaNode()}</Box>
-                </Stack>
+                </VStack>
               </Box>
             </a>
           </Link>
@@ -173,11 +193,11 @@ const Articles: FC<Props> = ({
   };
 
   return (
-    <Stack spacing={8}>
+    <VStack spacing={8} align="left">
       {headingNode()}
       {searchNode()}
       {articlesNode()}
-    </Stack>
+    </VStack>
   );
 };