added projects

pages/blog/[slug].tsx

@@ -3,7 +3,7 @@ import fs from "fs";
 import { ParsedUrlQuery } from "querystring";
 import {
   BLOGS_PATH,
-  getFileContentBySlug,
+  getBlogContentBySlug,
   renderMarkdown,
 } from "../../utils/markdown";
 import { MarkdownRenderingResult } from "../../types/types";
@@ -27,15 +27,17 @@ export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
         {date}
       </div>
       <div className="lg:text-5xl font-bold">{title}</div>
-      <div className="mt-2 font-medium">
-        By{" "}
-        {authorLink && (
-          <Link href={authorLink} className="text-action">
-            @{author}
-          </Link>
-        )}
-        {!authorLink && <span className="text-action">@{author}</span>}
-      </div>
+      {author && (
+        <div className="mt-2 font-medium">
+          By{" "}
+          {authorLink && (
+            <Link href={authorLink} className="text-action">
+              @{author}
+            </Link>
+          )}
+          {!authorLink && <span className="text-action">@{author}</span>}
+        </div>
+      )}
       <div className="mt-2">{description}</div>
       <div
         className="mt-4 prose prose-headings:text-primary-text prose-p:text-gray-400"
@@ -62,7 +64,7 @@ export const getStaticPaths: GetStaticPaths<BlogProps> = async () => {
 export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
   params,
 }) => {
-  const markdownContent = getFileContentBySlug(params?.slug as string);
+  const markdownContent = getBlogContentBySlug(params?.slug as string);
   const renderedHTML = await renderMarkdown(markdownContent.content);
   return {
     props: {

pages/blog/index.tsx

@@ -1,8 +1,9 @@
 import { GetServerSideProps } from "next";
 import { MainLayout } from "../../layouts/MainLayout";
-import { BlogPost, getAllFilesFrontMatter } from "../../utils/markdown";
+import { Post, getAllBlogsFrontMatter } from "../../utils/markdown";
 import { FrontMatter } from "../../types/types";
 import Link from "next/link";
+import { formatDate } from "../../utils/general";
 
 export interface BasicBlogProps extends FrontMatter {
   title: string;
@@ -13,19 +14,10 @@ export interface BasicBlogProps extends FrontMatter {
 }
 
 const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
-  const format = (date: string) => {
-    const [day, month, year] = date.split(".");
-    const d = new Date(`${year}-${month}-${day}`);
-    return d.toLocaleDateString("en-US", {
-      month: "long",
-      day: "numeric",
-      year: "numeric",
-    });
-  };
   return (
     <div className="p-4 rounded-md border border-gray-700">
       <div className="text-sm font-medium text-gray-500">
-        {format(blog.date)}
+        {formatDate(blog.date)}
       </div>
       <h2 className="text-2xl font-bold">{blog.title}</h2>
       <p className="text-gray-400 text-lg">{blog.description}</p>
@@ -38,7 +30,7 @@ const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
   );
 };
 
-const Blog = ({ posts }: { posts: BlogPost[] }) => {
+const Blog = ({ posts }: { posts: Post[] }) => {
   return (
     <MainLayout>
       <h1 className="text-3xl font-bold">Blog</h1>
@@ -57,7 +49,7 @@ const Blog = ({ posts }: { posts: BlogPost[] }) => {
 };
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllFilesFrontMatter();
+  const posts = getAllBlogsFrontMatter();
   return {
     props: {
       posts,

pages/project/[slug].tsx

@@ -0,0 +1,79 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import fs from "fs";
+import { ParsedUrlQuery } from "querystring";
+import {
+  getProjectContentBySlug,
+  PROJECTS_PATH,
+  renderMarkdown,
+} from "../../utils/markdown";
+import { MarkdownRenderingResult } from "../../types/types";
+import { MainLayout } from "../../layouts/MainLayout";
+import Link from "next/link";
+import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
+import { BasicProjectProps } from "../projects";
+
+export const ProjectArticle = ({
+  frontMatter,
+  html,
+}: MarkdownRenderingResult) => {
+  const { title, author, date, description, authorLink } =
+    frontMatter as BasicProjectProps;
+  return (
+    <MainLayout>
+      <Link href="/projects">
+        <button className="flex flex-row items-center gap-2 text-secondary hover:text-secondary/50 transition-all ease-in duration-75">
+          <BackIcon />
+          <span>Go Back</span>
+        </button>
+      </Link>
+      <div className="lg:mt-10 mt-4 mb-2 text-sm font-medium text-gray-500">
+        {date}
+      </div>
+      <div className="lg:text-5xl font-bold">{title}</div>
+      {author && (
+        <div className="mt-2 font-medium">
+          By{" "}
+          {authorLink && (
+            <Link href={authorLink} className="text-action">
+              @{author}
+            </Link>
+          )}
+          {!authorLink && <span className="text-action">@{author}</span>}
+        </div>
+      )}
+      <div className="mt-2 mb-10">{description}</div>
+      <div
+        className="prose prose-headings:text-primary-text prose-p:text-gray-400 prose-img:w-full prose-img:h-auto xl:prose-img:max-h-96 prose-img:object-cover"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </MainLayout>
+  );
+};
+interface ProjectProps extends ParsedUrlQuery {
+  slug: string;
+}
+export const getStaticPaths: GetStaticPaths<ProjectProps> = async () => {
+  const paths = fs
+    .readdirSync(PROJECTS_PATH)
+    .map((path) => path.replace(/\.mdx?$/, ""))
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
+  params,
+}) => {
+  const markdownContent = getProjectContentBySlug(params?.slug as string);
+  const renderedHTML = await renderMarkdown(markdownContent.content);
+  return {
+    props: {
+      frontMatter: markdownContent.frontMatter,
+      html: renderedHTML,
+    },
+  };
+};
+export default ProjectArticle;

pages/projects/index.tsx

@@ -0,0 +1,76 @@
+import { GetServerSideProps } from "next";
+import { MainLayout } from "../../layouts/MainLayout";
+import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
+import { FrontMatter } from "../../types/types";
+import Link from "next/link";
+import { formatDate } from "../../utils/general";
+
+export interface BasicProjectProps extends FrontMatter {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  authorLink: string;
+  thumbnail: string;
+}
+
+const ProjectCard = ({
+  project,
+  slug,
+}: {
+  project: BasicProjectProps;
+  slug: string;
+}) => {
+  return (
+    <div className="p-4 rounded-md border border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
+      <div className="order-last xl:order-1">
+        <div className="text-sm font-medium text-gray-500">
+          {formatDate(project.date)}
+        </div>
+        <h2 className="text-2xl font-bold">{project.title}</h2>
+        <p className="text-gray-400 text-lg">{project.description}</p>
+        <Link href={`project/${slug}`}>
+          <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
+            Read more
+          </button>
+        </Link>
+      </div>
+      {project.thumbnail && (
+        <img
+          src={project.thumbnail}
+          alt={`${slug}-thumbnail`}
+          className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
+        />
+      )}
+    </div>
+  );
+};
+
+const Projects = ({ posts }: { posts: Post[] }) => {
+  return (
+    <MainLayout>
+      <h1 className="text-3xl font-bold">Projects</h1>
+      <div className="w-full h-0.5 bg-white/50 my-4 rounded-full" />
+      <div className="grid grid-cols-1 gap-4">
+        {posts.map((post, index) => (
+          <ProjectCard
+            key={index}
+            project={post.frontMatter as BasicProjectProps}
+            slug={post.slug}
+          />
+        ))}
+      </div>
+    </MainLayout>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const posts = getAllProjectsFrontMatter();
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+export default Projects;