Add the Blog Pages and Functionality

articles/nestjs.mdx

@@ -0,0 +1,15 @@
+---
+title: 'nest JS'
+dateString: 'November 12, 2021'
+mainImageUrl: 'https://i.imgur.com/RpJgO04.jpeg'
+excerpt: 'Learn nest JS'
+tags: ['Nest', 'Node']
+---
+
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!

articles/nextjs.mdx

@@ -0,0 +1,22 @@
+---
+title: 'Next JS'
+dateString: 'November 12, 2021'
+mainImageUrl: 'https://i.imgur.com/RpJgO04.jpeg'
+excerpt: 'Learn Next JS'
+tags: ['Next', 'React']
+---
+
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas similique accusamus libero consequuntur, dolore eaque sit quasi numquam, suscipit ducimus at? Blanditiis, aliquam. Distinctio ducimus voluptate iure doloribus eveniet reiciendis!

components/BlogHeader.component.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface Props {
+  title: string;
+  dateString: string;
+  mainImageUrl: string;
+}
+
+const BlogHeaderComponent: FC<Props> = ({
+  title,
+  dateString,
+  mainImageUrl,
+}) => {
+  return (
+    <div style={{ width: '600px', margin: 'auto', padding: "20px" }}>
+      <img style={{ width: '600px' }} className="main-image" src={mainImageUrl} />
+      <h1 className="text-bold text-9xl text-center p-10">{title}</h1>
+      <p className="text-center p-10">Posted on {dateString}</p>
+    </div>
+  );
+};
+
+export default BlogHeaderComponent;

components/BlogPost.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const BlogPost = () => {
+  return (
+    <div>BlogPost</div>
+  )
+}
+
+export default BlogPost;

components/Card.component.tsx

@@ -0,0 +1,48 @@
+import Link from 'next/link';
+
+import { FC } from 'react';
+
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+
+import { Post } from '../models/Post.interface';
+import { Tag } from '../models/Tag';
+
+const CardComponent: FC<{ post: Post }> = ({ post }: { post: Post }) => {
+  const { slug, metaData } = post;
+  const { title, dateString, mainImageUrl, excerpt, tags } = metaData;
+  return (
+    <Card sx={{ maxWidth: 500, margin: 'auto', marginTop: 2 }} className="bg-gray-400">
+      <CardMedia component='img' height='200' image={mainImageUrl} />
+      <CardContent>
+        <Typography gutterBottom variant='h5' component='div'>
+          {title}
+        </Typography>
+        <Typography variant='body2'>{dateString}</Typography>
+        <Typography variant='body2' color='text.secondary'>
+          {excerpt}
+        </Typography>
+        <Stack style={{ marginTop: 24 }} direction='row' spacing={1}>
+          {tags.map((tag: Tag, index: number) => (
+            <Link key={index} href={`/blog`} passHref>
+              <Chip label={tag} variant='outlined' onClick={() => {}} />
+            </Link>
+          ))}
+        </Stack>
+      </CardContent>
+      <CardActions>
+        <Link href={`/blog/${slug}`} passHref>
+          <Button size='small'>Read more</Button>
+        </Link>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default CardComponent;

components/CustomLink.tsx

@@ -0,0 +1,11 @@
+import Link from 'next/link';
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return (
+    <>
+      <Link as={as} href={href}>
+        <a {...otherProps} />
+      </Link>
+    </>
+  );
+}

components/Header.component.tsx

@@ -29,9 +29,11 @@ function Header() {
         <h1 className="hover:border-white hover:border-b-2 cursor-pointer text-md">
           Our Motive
         </h1>
-        <h1 className="hover:border-white hover:border-b-2 cursor-pointer text-md">
-          ByteSlash Blog
-        </h1>
+        <a href="/blog">
+          <h1 className="hover:border-white hover:border-b-2 cursor-pointer text-md">
+            ByteSlash Blog
+          </h1>
+        </a>
       </div>
       <div className="hidden sm:inline-flex items-center justify-center gap-10">
         <Link href="https://github.com/byteslash-hub/byteslash-website">

components/TableOfContents.component.tsx

@@ -0,0 +1,133 @@
+import { FC, useState, useEffect } from 'react';
+
+import { useTheme } from '@mui/material';
+
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+interface Props {}
+
+interface Section {
+  topic: string;
+  boundingTop: number;
+  isActive: boolean;
+}
+
+const marginTop = 100;
+
+const TableOfContentsComponent: FC<Props> = () => {
+  const [offsetY, setOffsetY] = useState(0);
+  const [sections, setSections] = useState<Section[]>([]);
+
+  const customTheme = useTheme();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    setOffsetY(0);
+  }, []);
+
+  useEffect(() => {
+    const els: HTMLElement[] = Array.from(
+      document.querySelectorAll('section.section-heading')
+    );
+
+    const allSections = els.map((el: HTMLElement, index: number) => {
+      const { top: boundingTop } = el.getBoundingClientRect();
+
+      return {
+        topic: el.getAttribute('id')!,
+        boundingTop,
+        isActive: index === 0,
+      };
+    });
+
+    setSections(allSections);
+  }, []);
+
+  useEffect(() => {
+    if (sections.length <= 1) return;
+
+    const onScroll = () => {
+      setOffsetY(window.pageYOffset);
+    };
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [sections]);
+
+  useEffect(() => {
+    if (sections.length === 0) return;
+
+    if (sections.length === 1) {
+      sections[0].isActive = true;
+      return;
+    }
+
+    sections.forEach((section: Section, index: number) => {
+      if (index === 0) {
+        section.isActive =
+          sections[index + 1].boundingTop > offsetY + marginTop;
+      } else {
+        if (sections[index + 1]) {
+          section.isActive =
+            sections[index + 1].boundingTop > offsetY + marginTop &&
+            sections[index].boundingTop <= offsetY + marginTop;
+        } else {
+          section.isActive = sections[index].boundingTop <= offsetY + marginTop;
+        }
+      }
+    });
+  }, [sections, offsetY]);
+
+  return (
+    <div style={{ position: 'fixed', top: 140, right: 0, width: 'inherit' }}>
+      <Timeline>
+        {sections?.map((section: Section, index: number) => {
+          return (
+            <TimelineItem key={index}>
+              {index !== sections.length - 1 && (
+                <TimelineSeparator>
+                  <TimelineDot
+                    color='secondary'
+                    variant={section.isActive ? 'filled' : 'outlined'}
+                  />
+                  <TimelineConnector />
+                </TimelineSeparator>
+              )}
+              {index === sections.length - 1 && (
+                <TimelineDot
+                  color='secondary'
+                  variant={section.isActive ? 'filled' : 'outlined'}
+                />
+              )}
+              <TimelineContent>
+                <span
+                  onClick={() => {
+                    window.scrollTo(0, section.boundingTop - marginTop);
+                    setOffsetY(section.boundingTop - marginTop);
+                  }}
+                  style={{
+                    textDecoration: 'none',
+                    color: section.isActive
+                      ? customTheme.palette.secondary.main
+                      : customTheme.palette.text.primary,
+                    textTransform: 'capitalize',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {section.topic}
+                </span>
+              </TimelineContent>
+            </TimelineItem>
+          );
+        })}
+      </Timeline>
+    </div>
+  );
+};
+
+export default TableOfContentsComponent;

components/TableOfContentsItem.component.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  topic: string;
+  children: ReactNode;
+}
+
+const TableOfContentsItemComponent: FC<Props> = ({ topic, children }) => {
+  return (
+    <section id={topic.toLowerCase()} className='section-heading'>
+      <h2>{topic}</h2>
+      <div>{children}</div>
+    </section>
+  );
+};
+
+export default TableOfContentsItemComponent;

models/MetaData.interface.ts

@@ -0,0 +1,9 @@
+import { Tag } from './Tag';
+
+export interface MetaData {
+  title: string;
+  dateString: string;
+  mainImageUrl: string;
+  excerpt: string;
+  tags: Tag[];
+}

models/Post.interface.ts

@@ -0,0 +1,6 @@
+import { MetaData } from "./MetaData.interface";
+
+export interface Post {
+  slug: string;
+  metaData: MetaData;
+}

models/Tag.ts

@@ -0,0 +1,10 @@
+export type Tag = 'Angular' | 'Ionic' | 'React' | 'Next' | 'Nest' | 'Node';
+
+export const tagFilters: Tag[] = [
+  'Angular',
+  'Ionic',
+  'React',
+  'Next',
+  'Nest',
+  'Node',
+];

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited