From bac04ef40ef5b1e57f4ca6939816367e3d792320 Mon Sep 17 00:00:00 2001
From: Artem Abramov1 <artem_abramov1@epam.com>
Date: Sun, 1 Dec 2024 16:34:18 +0400
Subject: [PATCH] feat: lint with biome

---
 biome.json                                    |  72 +++---
 src/app/about/page.tsx                        |   4 +-
 src/app/blog/(posts)/[slug]/page.tsx          |  16 +-
 .../categories/[category]/page.tsx            |  50 ++--
 .../[category]/pages/[page]/page.tsx          |  64 ++---
 src/app/blog/(taxonomies)/layout.tsx          |  24 +-
 .../blog/(taxonomies)/pages/[page]/page.tsx   |  58 ++---
 src/app/blog/(taxonomies)/tags/[tag]/page.tsx |  48 ++--
 .../tags/[tag]/pages/[page]/page.tsx          |  64 ++---
 src/app/blog/page.tsx                         |  46 ++--
 .../components/AboutWidget/AboutWidget.tsx    |  36 +--
 .../AdvertisementWidget.tsx                   |  22 +-
 .../CategoryWidget/CategoryWidget.tsx         |  30 +--
 src/app/components/Sidebar/Sidebar.tsx        |  30 +--
 .../components/SocialWidget/SocialWidget.tsx  |  30 +--
 src/app/components/TagWidget/TagWidget.tsx    |  34 +--
 src/app/contact/page.tsx                      |   2 +-
 src/app/layout.tsx                            |  58 ++---
 src/app/page.tsx                              |  98 ++++----
 src/components/AboutPage/AboutPage.tsx        |  48 ++--
 src/components/ContactForm/ContactForm.tsx    | 106 ++++----
 src/components/ContactPage/ContactPage.tsx    | 102 ++++----
 src/components/DropdownMenu/DropdownMenu.tsx  |  68 ++---
 src/components/FeaturedPost/FeaturedPost.tsx  |  76 +++---
 src/components/Footer/Footer.tsx              |  98 ++++----
 src/components/Gallery/Gallery.tsx            |  52 ++--
 src/components/Header/Header.tsx              | 238 +++++++++---------
 src/components/Icon/Icon.tsx                  |  40 +--
 src/components/Icon/Icon.types.ts             |  10 +-
 src/components/MDXComponent/MDXComponent.tsx  |   6 +-
 src/components/Newsletter/Newsletter.tsx      |  68 ++---
 src/components/Pagination/Pagination.tsx      | 164 ++++++------
 src/components/Paginator/Paginator.tsx        |  96 +++----
 src/components/PillarPost/PillarPost.tsx      |  76 +++---
 src/components/SearchList/SearchList.tsx      |  60 ++---
 src/components/SinglePost/SinglePost.tsx      |  92 +++----
 src/lib/fetch-utils/getAuthorBio.ts           |   4 +-
 src/lib/fetch-utils/getAuthorInfo.ts          |   4 +-
 src/lib/fetch-utils/getBlogs.ts               |  20 +-
 src/lib/fetch-utils/getCategoryLinks.ts       |  16 +-
 src/lib/fetch-utils/getSiteInfo.ts            |   4 +-
 src/lib/fetch-utils/getSocialLinks.ts         |   4 +-
 src/lib/fetch-utils/getTagLinks.ts            |  12 +-
 src/lib/mdx.ts                                | 172 ++++++-------
 src/lib/utils.ts                              |  42 ++--
 src/models/index.ts                           |  36 +--
 46 files changed, 1251 insertions(+), 1249 deletions(-)

diff --git a/biome.json b/biome.json
index edcf34f..b8b757d 100644
--- a/biome.json
+++ b/biome.json
@@ -1,37 +1,39 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false,
-		"ignore": []
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "tab"
-	},
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"security": {
-				"noDangerouslySetInnerHtml": "warn"
-			},
-			"a11y": {
-				"useSemanticElements": "warn",
-				"useKeyWithClickEvents": "warn"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "single"
-		}
-	}
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "security": {
+        "noDangerouslySetInnerHtml": "warn"
+      },
+      "a11y": {
+        "useSemanticElements": "warn",
+        "useKeyWithClickEvents": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  }
 }
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index bf5b93c..02090b2 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,7 +3,7 @@ import { getAuthorBio } from '@/lib/fetch-utils';
 import { AboutPage } from '@/components/AboutPage';
 
 export default async function About() {
-	const data = await getAuthorBio();
+  const data = await getAuthorBio();
 
-	return <AboutPage {...data} />;
+  return <AboutPage {...data} />;
 }
diff --git a/src/app/blog/(posts)/[slug]/page.tsx b/src/app/blog/(posts)/[slug]/page.tsx
index 435c091..fd75693 100644
--- a/src/app/blog/(posts)/[slug]/page.tsx
+++ b/src/app/blog/(posts)/[slug]/page.tsx
@@ -6,20 +6,20 @@ import { getFileBySlug } from '@/lib/mdx';
 import { SinglePost } from '@/components/SinglePost';
 
 async function getData(slug: string) {
-	return getFileBySlug('blog', slug);
+  return getFileBySlug('blog', slug);
 }
 
 export default async function Blog({ params }: { params: { slug: string } }) {
-	const data = await getData(params.slug);
-	const { authorName } = await getAuthorInfo();
+  const data = await getData(params.slug);
+  const { authorName } = await getAuthorInfo();
 
-	return <SinglePost {...data} authorName={authorName} />;
+  return <SinglePost {...data} authorName={authorName} />;
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return blogs.posts.map((post) => ({
-		slug: slugify(post.slug ?? ''),
-	}));
+  return blogs.posts.map((post) => ({
+    slug: slugify(post.slug ?? ''),
+  }));
 }
diff --git a/src/app/blog/(taxonomies)/categories/[category]/page.tsx b/src/app/blog/(taxonomies)/categories/[category]/page.tsx
index ae5c4b1..121f7af 100644
--- a/src/app/blog/(taxonomies)/categories/[category]/page.tsx
+++ b/src/app/blog/(taxonomies)/categories/[category]/page.tsx
@@ -12,34 +12,34 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Categories({
-	params,
+  params,
 }: { params: { category: string } }) {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-	const allPostsByCategory = allPosts.filter((post) =>
-		post.categories?.map((item) => slugify(item)).includes(params.category),
-	);
-	const data = allPostsByCategory.slice(0, POSTS_PER_PAGE);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<>
-			<div className="row">
-				<Paginator pages={data} authorName={authorName} />
-			</div>
-			<div className="row">
-				<Pagination
-					itemsNumber={allPostsByCategory.length}
-					parentPath={`blog/categories/${params.category}`}
-				/>
-			</div>
-		</>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const allPostsByCategory = allPosts.filter((post) =>
+    post.categories?.map((item) => slugify(item)).includes(params.category),
+  );
+  const data = allPostsByCategory.slice(0, POSTS_PER_PAGE);
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <>
+      <div className="row">
+        <Paginator pages={data} authorName={authorName} />
+      </div>
+      <div className="row">
+        <Pagination
+          itemsNumber={allPostsByCategory.length}
+          parentPath={`blog/categories/${params.category}`}
+        />
+      </div>
+    </>
+  );
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return blogs.categories.map((category) => ({
-		category: slugify(category ?? ''),
-	}));
+  return blogs.categories.map((category) => ({
+    category: slugify(category ?? ''),
+  }));
 }
diff --git a/src/app/blog/(taxonomies)/categories/[category]/pages/[page]/page.tsx b/src/app/blog/(taxonomies)/categories/[category]/pages/[page]/page.tsx
index 35eddac..e904cb2 100644
--- a/src/app/blog/(taxonomies)/categories/[category]/pages/[page]/page.tsx
+++ b/src/app/blog/(taxonomies)/categories/[category]/pages/[page]/page.tsx
@@ -12,41 +12,41 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Pages({
-	params,
+  params,
 }: { params: { category: string; page: string } }) {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-	const pageIndex = Number.parseInt(params.page, 10) - 1;
-	const allPostsByCategory = allPosts.filter((post) =>
-		post.categories?.map((item) => slugify(item)).includes(params.category),
-	);
-	const data = allPostsByCategory.slice(
-		pageIndex * POSTS_PER_PAGE,
-		(pageIndex + 1) * POSTS_PER_PAGE,
-	);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<>
-			<div className="row">
-				<Paginator pages={data} authorName={authorName} />
-			</div>
-			<div className="row">
-				<Pagination
-					itemsNumber={allPostsByCategory.length}
-					currentPage={Number(params.page)}
-					parentPath={`blog/categories/${params.category}`}
-				/>
-			</div>
-		</>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const pageIndex = Number.parseInt(params.page, 10) - 1;
+  const allPostsByCategory = allPosts.filter((post) =>
+    post.categories?.map((item) => slugify(item)).includes(params.category),
+  );
+  const data = allPostsByCategory.slice(
+    pageIndex * POSTS_PER_PAGE,
+    (pageIndex + 1) * POSTS_PER_PAGE,
+  );
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <>
+      <div className="row">
+        <Paginator pages={data} authorName={authorName} />
+      </div>
+      <div className="row">
+        <Pagination
+          itemsNumber={allPostsByCategory.length}
+          currentPage={Number(params.page)}
+          parentPath={`blog/categories/${params.category}`}
+        />
+      </div>
+    </>
+  );
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return getPageNumbers(blogs.posts.length)
-		.slice(1)
-		.map((page) => ({
-			page,
-		}));
+  return getPageNumbers(blogs.posts.length)
+    .slice(1)
+    .map((page) => ({
+      page,
+    }));
 }
diff --git a/src/app/blog/(taxonomies)/layout.tsx b/src/app/blog/(taxonomies)/layout.tsx
index dad3adc..161bb7e 100644
--- a/src/app/blog/(taxonomies)/layout.tsx
+++ b/src/app/blog/(taxonomies)/layout.tsx
@@ -1,17 +1,17 @@
 import { Sidebar } from '@/app/components/Sidebar';
 
 export default async function TaxonomiesLayout({
-	children,
+  children,
 }: { children: React.ReactNode }) {
-	return (
-		<section className="section pb-0">
-			<div className="container">
-				<div className="row">
-					<div className="col-lg-8 mb-5 mb-lg-0">{children}</div>
-					{/* @ts-expect-error Async Server Component */}
-					<Sidebar />
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section pb-0">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mb-5 mb-lg-0">{children}</div>
+          {/* @ts-expect-error Async Server Component */}
+          <Sidebar />
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/src/app/blog/(taxonomies)/pages/[page]/page.tsx b/src/app/blog/(taxonomies)/pages/[page]/page.tsx
index 34e6e97..8e0902f 100644
--- a/src/app/blog/(taxonomies)/pages/[page]/page.tsx
+++ b/src/app/blog/(taxonomies)/pages/[page]/page.tsx
@@ -10,37 +10,37 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Pages({ params }: { params: { page: string } }) {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-	const pageIndex = Number.parseInt(params.page, 10) - 1;
-
-	const data = allPosts.slice(
-		pageIndex * POSTS_PER_PAGE,
-		(pageIndex + 1) * POSTS_PER_PAGE,
-	);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<>
-			<div className="row">
-				<Paginator pages={data} authorName={authorName} />
-			</div>
-			<div className="row">
-				<Pagination
-					itemsNumber={allPosts.length}
-					currentPage={Number(params.page)}
-					parentPath="blog"
-				/>
-			</div>
-		</>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const pageIndex = Number.parseInt(params.page, 10) - 1;
+
+  const data = allPosts.slice(
+    pageIndex * POSTS_PER_PAGE,
+    (pageIndex + 1) * POSTS_PER_PAGE,
+  );
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <>
+      <div className="row">
+        <Paginator pages={data} authorName={authorName} />
+      </div>
+      <div className="row">
+        <Pagination
+          itemsNumber={allPosts.length}
+          currentPage={Number(params.page)}
+          parentPath="blog"
+        />
+      </div>
+    </>
+  );
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return getPageNumbers(blogs.posts.length)
-		.slice(1)
-		.map((page) => ({
-			page,
-		}));
+  return getPageNumbers(blogs.posts.length)
+    .slice(1)
+    .map((page) => ({
+      page,
+    }));
 }
diff --git a/src/app/blog/(taxonomies)/tags/[tag]/page.tsx b/src/app/blog/(taxonomies)/tags/[tag]/page.tsx
index 708e995..755517d 100644
--- a/src/app/blog/(taxonomies)/tags/[tag]/page.tsx
+++ b/src/app/blog/(taxonomies)/tags/[tag]/page.tsx
@@ -12,32 +12,32 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Tags({ params }: { params: { tag: string } }) {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-	const allPostsByTag = allPosts.filter((post) =>
-		post.tags?.map((item) => slugify(item)).includes(params.tag),
-	);
-	const data = allPostsByTag.slice(0, POSTS_PER_PAGE);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<>
-			<div className="row">
-				<Paginator pages={data} authorName={authorName} />
-			</div>
-			<div className="row">
-				<Pagination
-					itemsNumber={allPostsByTag.length}
-					parentPath={`blog/tags/${params.tag}`}
-				/>
-			</div>
-		</>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const allPostsByTag = allPosts.filter((post) =>
+    post.tags?.map((item) => slugify(item)).includes(params.tag),
+  );
+  const data = allPostsByTag.slice(0, POSTS_PER_PAGE);
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <>
+      <div className="row">
+        <Paginator pages={data} authorName={authorName} />
+      </div>
+      <div className="row">
+        <Pagination
+          itemsNumber={allPostsByTag.length}
+          parentPath={`blog/tags/${params.tag}`}
+        />
+      </div>
+    </>
+  );
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return blogs.tags.map((tag) => ({
-		tag: slugify(tag ?? ''),
-	}));
+  return blogs.tags.map((tag) => ({
+    tag: slugify(tag ?? ''),
+  }));
 }
diff --git a/src/app/blog/(taxonomies)/tags/[tag]/pages/[page]/page.tsx b/src/app/blog/(taxonomies)/tags/[tag]/pages/[page]/page.tsx
index 4fcc0bc..432064b 100644
--- a/src/app/blog/(taxonomies)/tags/[tag]/pages/[page]/page.tsx
+++ b/src/app/blog/(taxonomies)/tags/[tag]/pages/[page]/page.tsx
@@ -12,41 +12,41 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Pages({
-	params,
+  params,
 }: { params: { tag: string; page: string } }) {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-	const pageIndex = Number.parseInt(params.page, 10) - 1;
-	const allPostsByTag = allPosts.filter((post) =>
-		post.tags?.map((item) => slugify(item)).includes(params.tag),
-	);
-	const data = allPostsByTag.slice(
-		pageIndex * POSTS_PER_PAGE,
-		(pageIndex + 1) * POSTS_PER_PAGE,
-	);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<>
-			<div className="row">
-				<Paginator pages={data} authorName={authorName} />
-			</div>
-			<div className="row">
-				<Pagination
-					itemsNumber={allPosts.length}
-					currentPage={Number(params.page)}
-					parentPath={`blog/tags/${params.tag}`}
-				/>
-			</div>
-		</>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const pageIndex = Number.parseInt(params.page, 10) - 1;
+  const allPostsByTag = allPosts.filter((post) =>
+    post.tags?.map((item) => slugify(item)).includes(params.tag),
+  );
+  const data = allPostsByTag.slice(
+    pageIndex * POSTS_PER_PAGE,
+    (pageIndex + 1) * POSTS_PER_PAGE,
+  );
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <>
+      <div className="row">
+        <Paginator pages={data} authorName={authorName} />
+      </div>
+      <div className="row">
+        <Pagination
+          itemsNumber={allPosts.length}
+          currentPage={Number(params.page)}
+          parentPath={`blog/tags/${params.tag}`}
+        />
+      </div>
+    </>
+  );
 }
 
 export async function generateStaticParams() {
-	const blogs = await getBlogs();
+  const blogs = await getBlogs();
 
-	return getPageNumbers(blogs.posts.length)
-		.slice(1)
-		.map((page) => ({
-			page,
-		}));
+  return getPageNumbers(blogs.posts.length)
+    .slice(1)
+    .map((page) => ({
+      page,
+    }));
 }
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 1bf373a..737f9c8 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -12,27 +12,27 @@ import { Pagination } from '@/components/Pagination';
 import { Paginator } from '@/components/Paginator';
 
 export default async function Blog() {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
-
-	const data = allPosts.slice(0, POSTS_PER_PAGE);
-	const { authorName } = await getAuthorInfo();
-
-	return (
-		<section className="section pb-0">
-			<div className="container">
-				<div className="row">
-					<div className="col-lg-8 mb-5 mb-lg-0">
-						<div className="row">
-							<Paginator pages={data} authorName={authorName} />
-						</div>
-						<div className="row">
-							<Pagination itemsNumber={allPosts.length} parentPath="blog" />
-						</div>
-					</div>
-					{/* @ts-expect-error Async Server Component */}
-					<Sidebar />
-				</div>
-			</div>
-		</section>
-	);
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+
+  const data = allPosts.slice(0, POSTS_PER_PAGE);
+  const { authorName } = await getAuthorInfo();
+
+  return (
+    <section className="section pb-0">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mb-5 mb-lg-0">
+            <div className="row">
+              <Paginator pages={data} authorName={authorName} />
+            </div>
+            <div className="row">
+              <Pagination itemsNumber={allPosts.length} parentPath="blog" />
+            </div>
+          </div>
+          {/* @ts-expect-error Async Server Component */}
+          <Sidebar />
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/src/app/components/AboutWidget/AboutWidget.tsx b/src/app/components/AboutWidget/AboutWidget.tsx
index 1912fb2..c5dff04 100644
--- a/src/app/components/AboutWidget/AboutWidget.tsx
+++ b/src/app/components/AboutWidget/AboutWidget.tsx
@@ -5,23 +5,23 @@ import Link from 'next/link';
 import { getAuthorInfo } from '@/lib/fetch-utils';
 
 export default async function AboutWidget() {
-	const authorInfo = await getAuthorInfo();
-	const { title, image, authorName, summary } = authorInfo;
+  const authorInfo = await getAuthorInfo();
+  const { title, image, authorName, summary } = authorInfo;
 
-	return (
-		<div className="widget">
-			<h4 className="widget-title">{title}</h4>
-			<Image
-				src={ensureLeadingSlash(image)}
-				alt={authorName}
-				className="img-fluid author-thumb-sm d-block mx-auto rounded-circle mb-4"
-				width="165"
-				height="165"
-			/>
-			<p>{summary}</p>
-			<Link href="/about" className="btn btn-outline-primary">
-				Know More
-			</Link>
-		</div>
-	);
+  return (
+    <div className="widget">
+      <h4 className="widget-title">{title}</h4>
+      <Image
+        src={ensureLeadingSlash(image)}
+        alt={authorName}
+        className="img-fluid author-thumb-sm d-block mx-auto rounded-circle mb-4"
+        width="165"
+        height="165"
+      />
+      <p>{summary}</p>
+      <Link href="/about" className="btn btn-outline-primary">
+        Know More
+      </Link>
+    </div>
+  );
 }
diff --git a/src/app/components/AdvertisementWidget/AdvertisementWidget.tsx b/src/app/components/AdvertisementWidget/AdvertisementWidget.tsx
index e11fb41..2bd93c3 100644
--- a/src/app/components/AdvertisementWidget/AdvertisementWidget.tsx
+++ b/src/app/components/AdvertisementWidget/AdvertisementWidget.tsx
@@ -1,15 +1,15 @@
 import Image from 'next/image';
 
 export const AdvertisementWidget = () => {
-	return (
-		<div className="widget">
-			<Image
-				className="img-fluid"
-				src="/images/promotion.png"
-				width="318"
-				height="329"
-				alt=""
-			/>
-		</div>
-	);
+  return (
+    <div className="widget">
+      <Image
+        className="img-fluid"
+        src="/images/promotion.png"
+        width="318"
+        height="329"
+        alt=""
+      />
+    </div>
+  );
 };
diff --git a/src/app/components/CategoryWidget/CategoryWidget.tsx b/src/app/components/CategoryWidget/CategoryWidget.tsx
index 4a3ed7e..a8a1fdf 100644
--- a/src/app/components/CategoryWidget/CategoryWidget.tsx
+++ b/src/app/components/CategoryWidget/CategoryWidget.tsx
@@ -3,20 +3,20 @@ import Link from 'next/link';
 import { getCategoryLinks } from '@/lib/fetch-utils';
 
 export default async function CategoryWidget() {
-	const categoryLinks = await getCategoryLinks();
+  const categoryLinks = await getCategoryLinks();
 
-	return (
-		<div className="widget">
-			<h4 className="widget-title">Category</h4>
-			{categoryLinks.length !== 0 && (
-				<ul className="list-unstyled">
-					{categoryLinks.map(({ title, url }) => (
-						<li key={title}>
-							<Link href={url}>{title}</Link>
-						</li>
-					))}
-				</ul>
-			)}
-		</div>
-	);
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Category</h4>
+      {categoryLinks.length !== 0 && (
+        <ul className="list-unstyled">
+          {categoryLinks.map(({ title, url }) => (
+            <li key={title}>
+              <Link href={url}>{title}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
 }
diff --git a/src/app/components/Sidebar/Sidebar.tsx b/src/app/components/Sidebar/Sidebar.tsx
index b88b719..0874276 100644
--- a/src/app/components/Sidebar/Sidebar.tsx
+++ b/src/app/components/Sidebar/Sidebar.tsx
@@ -5,19 +5,19 @@ import { SocialWidget } from '@/server-components/SocialWidget';
 import { TagWidget } from '@/server-components/TagWidget';
 
 export default async function Sidebar() {
-	return (
-		<div className="col-lg-4">
-			<div className="widgets">
-				{/* @ts-expect-error Async Server Component */}
-				<AboutWidget />
-				{/* @ts-expect-error Async Server Component */}
-				<CategoryWidget />
-				{/* @ts-expect-error Async Server Component */}
-				<TagWidget />
-				{/* @ts-expect-error Async Server Component */}
-				<SocialWidget />
-				<AdvertisementWidget />
-			</div>
-		</div>
-	);
+  return (
+    <div className="col-lg-4">
+      <div className="widgets">
+        {/* @ts-expect-error Async Server Component */}
+        <AboutWidget />
+        {/* @ts-expect-error Async Server Component */}
+        <CategoryWidget />
+        {/* @ts-expect-error Async Server Component */}
+        <TagWidget />
+        {/* @ts-expect-error Async Server Component */}
+        <SocialWidget />
+        <AdvertisementWidget />
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/components/SocialWidget/SocialWidget.tsx b/src/app/components/SocialWidget/SocialWidget.tsx
index 7e5120b..df8b969 100644
--- a/src/app/components/SocialWidget/SocialWidget.tsx
+++ b/src/app/components/SocialWidget/SocialWidget.tsx
@@ -5,20 +5,20 @@ import { getSocialLinks } from '@/lib/fetch-utils';
 import { Icon } from '@/components/Icon';
 
 export default async function SocialWidget() {
-	const socialLinks = await getSocialLinks();
+  const socialLinks = await getSocialLinks();
 
-	return (
-		<div className="widget">
-			<h4 className="widget-title">Social</h4>
-			<ul className="list-inline social-links">
-				{socialLinks.map(({ title, url, icon }) => (
-					<li key={title} className="list-inline-item">
-						<Link href={url}>
-							<Icon icon={icon} />
-						</Link>
-					</li>
-				))}
-			</ul>
-		</div>
-	);
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Social</h4>
+      <ul className="list-inline social-links">
+        {socialLinks.map(({ title, url, icon }) => (
+          <li key={title} className="list-inline-item">
+            <Link href={url}>
+              <Icon icon={icon} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 }
diff --git a/src/app/components/TagWidget/TagWidget.tsx b/src/app/components/TagWidget/TagWidget.tsx
index 1582ff1..df00fb1 100644
--- a/src/app/components/TagWidget/TagWidget.tsx
+++ b/src/app/components/TagWidget/TagWidget.tsx
@@ -3,22 +3,22 @@ import Link from 'next/link';
 import { getTagLinks } from '@/lib/fetch-utils';
 
 export default async function TagWidget() {
-	const tagLinks = await getTagLinks();
+  const tagLinks = await getTagLinks();
 
-	return (
-		<div className="widget">
-			<h4 className="widget-title">Tag</h4>
-			{tagLinks.length !== 0 && (
-				<ul className="list-inline">
-					{tagLinks.map(({ title, url }) => (
-						<li key={title} className="list-inline-item">
-							<Link href={url} className="d-block p-2 bg-primary text-white">
-								{title}
-							</Link>
-						</li>
-					))}
-				</ul>
-			)}
-		</div>
-	);
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Tag</h4>
+      {tagLinks.length !== 0 && (
+        <ul className="list-inline">
+          {tagLinks.map(({ title, url }) => (
+            <li key={title} className="list-inline-item">
+              <Link href={url} className="d-block p-2 bg-primary text-white">
+                {title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index e7f2f4f..e59cba5 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,5 +1,5 @@
 import { ContactPage } from '@/components/ContactPage';
 
 export default function Contact() {
-	return <ContactPage />;
+  return <ContactPage />;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6c46c19..4ab3def 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,46 +13,46 @@ import { Newsletter } from '@/components/Newsletter/Newsletter';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-	title: 'Liva | Personal blog template for Next.js',
-	description: `Liva is a modern and fully customizable minimal blog theme that will help you create any kind of website
+  title: 'Liva | Personal blog template for Next.js',
+  description: `Liva is a modern and fully customizable minimal blog theme that will help you create any kind of website
     whether that's personal, travel, news, photography, tech, food, or other niches.`,
 };
 
 type HeaderMenuData = {
-	items: NavigationItem[];
+  items: NavigationItem[];
 };
 
 type FooterData = FooterProps;
 
 async function getData() {
-	const siteInfo = await getSiteInfo();
-	const headerMenu = await getFileMetadata<HeaderMenuData>(
-		'_metadata',
-		'header-menu',
-	);
-	const footer = await getFileBySlug<FooterData>('_metadata', 'footer');
-
-	return { headerMenu, footer, siteInfo };
+  const siteInfo = await getSiteInfo();
+  const headerMenu = await getFileMetadata<HeaderMenuData>(
+    '_metadata',
+    'header-menu',
+  );
+  const footer = await getFileBySlug<FooterData>('_metadata', 'footer');
+
+  return { headerMenu, footer, siteInfo };
 }
 
 export default async function RootLayout({
-	children,
+  children,
 }: { children: React.ReactNode }) {
-	const { headerMenu, footer, siteInfo } = await getData();
-
-	return (
-		<html lang="en">
-			<body className={inter.className}>
-				<Navigation
-					items={headerMenu.items}
-					socialLinks={siteInfo.socialLinks}
-				/>
-				{children}
-				<Newsletter />
-				<Footer {...footer}>
-					<MDXComponent code={footer.code} />
-				</Footer>
-			</body>
-		</html>
-	);
+  const { headerMenu, footer, siteInfo } = await getData();
+
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Navigation
+          items={headerMenu.items}
+          socialLinks={siteInfo.socialLinks}
+        />
+        {children}
+        <Newsletter />
+        <Footer {...footer}>
+          <MDXComponent code={footer.code} />
+        </Footer>
+      </body>
+    </html>
+  );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9cc53c6..8d911d7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,56 +16,56 @@ import { PillarPost } from '@/components/PillarPost';
 import { Sidebar } from '@/server-components/Sidebar';
 
 export default async function Home() {
-	const allPosts = await getAllFilesMetadata<PostInfo>('blog');
+  const allPosts = await getAllFilesMetadata<PostInfo>('blog');
 
-	const data = allPosts.slice(0, POSTS_PER_PAGE);
-	const { authorName } = await getAuthorInfo();
+  const data = allPosts.slice(0, POSTS_PER_PAGE);
+  const { authorName } = await getAuthorInfo();
 
-	const recentPosts = allPosts
-		.filter((post) => post.type === 'featured')
-		.slice(0, 3);
-	const pillarPost = allPosts.find((post) => post.type === 'pillar');
+  const recentPosts = allPosts
+    .filter((post) => post.type === 'featured')
+    .slice(0, 3);
+  const pillarPost = allPosts.find((post) => post.type === 'pillar');
 
-	return (
-		<div>
-			<section className="section-sm">
-				<div className="container">
-					<div className="row justify-content-center">
-						{pillarPost && (
-							<PillarPost post={pillarPost} authorName={authorName} />
-						)}
-					</div>
-				</div>
-			</section>
-			<section>
-				<div className="container">
-					<div className="row">
-						{recentPosts.map((post) => (
-							<FeaturedPost
-								key={getBlogLink(post.slug)}
-								post={post}
-								authorName={authorName}
-							/>
-						))}
-					</div>
-				</div>
-			</section>
-			<section className="section pb-0">
-				<div className="container">
-					<div className="row">
-						<div className="col-lg-8 mb-5 mb-lg-0">
-							<div className="row">
-								<Paginator pages={data} authorName={authorName} />
-							</div>
-							<div className="row">
-								<Pagination itemsNumber={allPosts.length} parentPath="blog" />
-							</div>
-						</div>
-						{/* @ts-expect-error Async Server Component */}
-						<Sidebar />
-					</div>
-				</div>
-			</section>
-		</div>
-	);
+  return (
+    <div>
+      <section className="section-sm">
+        <div className="container">
+          <div className="row justify-content-center">
+            {pillarPost && (
+              <PillarPost post={pillarPost} authorName={authorName} />
+            )}
+          </div>
+        </div>
+      </section>
+      <section>
+        <div className="container">
+          <div className="row">
+            {recentPosts.map((post) => (
+              <FeaturedPost
+                key={getBlogLink(post.slug)}
+                post={post}
+                authorName={authorName}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="section pb-0">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-8 mb-5 mb-lg-0">
+              <div className="row">
+                <Paginator pages={data} authorName={authorName} />
+              </div>
+              <div className="row">
+                <Pagination itemsNumber={allPosts.length} parentPath="blog" />
+              </div>
+            </div>
+            {/* @ts-expect-error Async Server Component */}
+            <Sidebar />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
 }
diff --git a/src/components/AboutPage/AboutPage.tsx b/src/components/AboutPage/AboutPage.tsx
index e6d29ae..7763dde 100644
--- a/src/components/AboutPage/AboutPage.tsx
+++ b/src/components/AboutPage/AboutPage.tsx
@@ -8,29 +8,29 @@ import { MDXComponent } from '@/components/MDXComponent';
 export type SinglePostProps = AuthorInfo & FileInfo & FileContent;
 
 export const AboutPage = (props: SinglePostProps) => {
-	const { title, image, code, authorName } = props;
+  const { title, image, code, authorName } = props;
 
-	return (
-		<section className="section-sm">
-			<div className="container">
-				<div className="row">
-					<div className="col-lg-8 mx-auto text-center">
-						{image && (
-							<Image
-								src={ensureLeadingSlash(image)}
-								alt={authorName}
-								width="335"
-								height="335"
-								className="img-fluid d-block mx-auto rounded-circle mb-4"
-							/>
-						)}
-						<h4 className="widget-title">{title}</h4>
-						<div className="content">
-							<MDXComponent code={code} />
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section-sm">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mx-auto text-center">
+            {image && (
+              <Image
+                src={ensureLeadingSlash(image)}
+                alt={authorName}
+                width="335"
+                height="335"
+                className="img-fluid d-block mx-auto rounded-circle mb-4"
+              />
+            )}
+            <h4 className="widget-title">{title}</h4>
+            <div className="content">
+              <MDXComponent code={code} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
index fabc1b5..e7cb73b 100644
--- a/src/components/ContactForm/ContactForm.tsx
+++ b/src/components/ContactForm/ContactForm.tsx
@@ -1,55 +1,55 @@
 export const ContactForm = () => {
-	return (
-		<section className="section-sm pb-0">
-			<div className="container">
-				<div className="row justify-content-center">
-					<div className="col-lg-8 text-center">
-						<h2 className="mb-4">Hi Write To Me</h2>
-						<form action="#" method="POST" className="row">
-							<div className="col-lg-6">
-								<input
-									type="text"
-									className="form-control mb-4"
-									id="name"
-									name="name"
-									placeholder="Your Name"
-								/>
-							</div>
-							<div className="col-lg-6">
-								<input
-									type="email"
-									className="form-control mb-4"
-									id="email"
-									name="email"
-									placeholder="Your Email"
-								/>
-							</div>
-							<div className="col-12">
-								<input
-									type="text"
-									className="form-control mb-4"
-									id="subject"
-									name="subject"
-									placeholder="Subject"
-								/>
-							</div>
-							<div className="col-12">
-								<textarea
-									name="message"
-									id="message"
-									className="form-control mb-4"
-									placeholder="Your Message"
-								/>
-							</div>
-							<div className="col-12">
-								<button type="submit" className="btn btn-primary">
-									Send Message
-								</button>
-							</div>
-						</form>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section-sm pb-0">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-8 text-center">
+            <h2 className="mb-4">Hi Write To Me</h2>
+            <form action="#" method="POST" className="row">
+              <div className="col-lg-6">
+                <input
+                  type="text"
+                  className="form-control mb-4"
+                  id="name"
+                  name="name"
+                  placeholder="Your Name"
+                />
+              </div>
+              <div className="col-lg-6">
+                <input
+                  type="email"
+                  className="form-control mb-4"
+                  id="email"
+                  name="email"
+                  placeholder="Your Email"
+                />
+              </div>
+              <div className="col-12">
+                <input
+                  type="text"
+                  className="form-control mb-4"
+                  id="subject"
+                  name="subject"
+                  placeholder="Subject"
+                />
+              </div>
+              <div className="col-12">
+                <textarea
+                  name="message"
+                  id="message"
+                  className="form-control mb-4"
+                  placeholder="Your Message"
+                />
+              </div>
+              <div className="col-12">
+                <button type="submit" className="btn btn-primary">
+                  Send Message
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/components/ContactPage/ContactPage.tsx b/src/components/ContactPage/ContactPage.tsx
index 1c75eb6..a442595 100644
--- a/src/components/ContactPage/ContactPage.tsx
+++ b/src/components/ContactPage/ContactPage.tsx
@@ -3,62 +3,62 @@ import { TfiEmail, TfiLocationPin, TfiMobile } from 'react-icons/tfi';
 import { ContactForm } from '@/components/ContactForm';
 
 export type GetInTouchProps = {
-	title: string;
-	content: string;
-	mobile: string;
-	email: string;
-	location: string;
+  title: string;
+  content: string;
+  mobile: string;
+  email: string;
+  location: string;
 };
 
 export const GetInTouch = ({
-	title,
-	content,
-	mobile,
-	email,
-	location,
+  title,
+  content,
+  mobile,
+  email,
+  location,
 }: GetInTouchProps) => {
-	return (
-		<section className="section-sm pb-0">
-			<div className="container">
-				<div className="row justify-content-center">
-					<div className="col-lg-8 text-center">
-						<h2>{title}</h2>
-						<div className="content mb-4">{content}</div>
-						<div className="row">
-							<div className="col-lg-4 small-post-border">
-								<TfiMobile className="h1 text-primary" />
-								<h5 className="fw-light my-3">Phone</h5>
-								{mobile}
-							</div>
-							<div className="col-lg-4 small-post-border">
-								<TfiEmail className="h1 text-primary" />
-								<h5 className="fw-light my-3">Email</h5>
-								{email}
-							</div>
-							<div className="col-lg-4 small-post-border">
-								<TfiLocationPin className="h1 text-primary" />
-								<h5 className="fw-light my-3">Location</h5>
-								{location}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section-sm pb-0">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-8 text-center">
+            <h2>{title}</h2>
+            <div className="content mb-4">{content}</div>
+            <div className="row">
+              <div className="col-lg-4 small-post-border">
+                <TfiMobile className="h1 text-primary" />
+                <h5 className="fw-light my-3">Phone</h5>
+                {mobile}
+              </div>
+              <div className="col-lg-4 small-post-border">
+                <TfiEmail className="h1 text-primary" />
+                <h5 className="fw-light my-3">Email</h5>
+                {email}
+              </div>
+              <div className="col-lg-4 small-post-border">
+                <TfiLocationPin className="h1 text-primary" />
+                <h5 className="fw-light my-3">Location</h5>
+                {location}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export const ContactPage = () => {
-	return (
-		<>
-			<GetInTouch
-				title="Get in touch"
-				content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo."
-				mobile="+91 1234567890"
-				email="mail@example.com"
-				location="123 Street, City, Country"
-			/>
-			<ContactForm />
-		</>
-	);
+  return (
+    <>
+      <GetInTouch
+        title="Get in touch"
+        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo."
+        mobile="+91 1234567890"
+        email="mail@example.com"
+        location="123 Street, City, Country"
+      />
+      <ContactForm />
+    </>
+  );
 };
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 9cee1d5..6adf286 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -6,42 +6,42 @@ import cx from 'clsx';
 import Link from 'next/link';
 
 export type DropdownMenuProps = {
-	title: string;
-	url: string;
-	submenu: {
-		title: string;
-		url: string;
-	}[];
+  title: string;
+  url: string;
+  submenu: {
+    title: string;
+    url: string;
+  }[];
 };
 
 export const DropdownMenu = (props: DropdownMenuProps) => {
-	const { title, url, submenu } = props;
-	const [open, setOpen] = useState(false);
+  const { title, url, submenu } = props;
+  const [open, setOpen] = useState(false);
 
-	return (
-		<li key={title} className={cx('nav-item', 'dropdown', { show: open })}>
-			<div
-				className="nav-link dropdown-toggle"
-				role="button"
-				data-toggle="dropdown"
-				aria-haspopup="true"
-				aria-expanded="false"
-				onClick={() => setOpen(!open)}
-				tabIndex={0}
-			>
-				{title}
-			</div>
-			<div className={cx('dropdown-menu', { show: open })}>
-				{submenu.map((subMenuItem) => (
-					<Link
-						className="dropdown-item"
-						href={subMenuItem.url}
-						key={subMenuItem.title}
-					>
-						{subMenuItem.title}
-					</Link>
-				))}
-			</div>
-		</li>
-	);
+  return (
+    <li key={title} className={cx('nav-item', 'dropdown', { show: open })}>
+      <div
+        className="nav-link dropdown-toggle"
+        role="button"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+        onClick={() => setOpen(!open)}
+        tabIndex={0}
+      >
+        {title}
+      </div>
+      <div className={cx('dropdown-menu', { show: open })}>
+        {submenu.map((subMenuItem) => (
+          <Link
+            className="dropdown-item"
+            href={subMenuItem.url}
+            key={subMenuItem.title}
+          >
+            {subMenuItem.title}
+          </Link>
+        ))}
+      </div>
+    </li>
+  );
 };
diff --git a/src/components/FeaturedPost/FeaturedPost.tsx b/src/components/FeaturedPost/FeaturedPost.tsx
index b9f5b12..84a0fb1 100644
--- a/src/components/FeaturedPost/FeaturedPost.tsx
+++ b/src/components/FeaturedPost/FeaturedPost.tsx
@@ -6,45 +6,45 @@ import type { PostFileInfo } from '@/models';
 import { formatPostDate, getBlogLink } from '@/lib/utils';
 
 export type FeaturedPostProps = {
-	post: PostFileInfo;
-	authorName: string;
+  post: PostFileInfo;
+  authorName: string;
 };
 
 export const FeaturedPost = ({ post, authorName }: FeaturedPostProps) => {
-	return (
-		<div className="col-lg-4 small-post-border">
-			<article className="d-flex">
-				<div className="flex-shrink-0">
-					{post.image && (
-						<div className="recent-post-thumb me-3">
-							<Image
-								alt={post.title ?? ''}
-								src={post.image}
-								fill
-								style={{
-									objectFit: 'cover',
-								}}
-							/>
-						</div>
-					)}
-				</div>
-				<div className="flex-grow-1 ms-3">
-					<div className="mb-3 post-meta">
-						<span>By {authorName}</span>
-						<span className="border-bottom border-primary px-2 mx-1" />
-						<span>{formatPostDate(post.date)}</span>
-					</div>
-					<Link href={getBlogLink(post.slug)} className="h5 d-block mb-3">
-						{post.title}
-					</Link>
-					<Link
-						href={getBlogLink(post.slug)}
-						className="btn btn-outline-primary"
-					>
-						read more
-					</Link>
-				</div>
-			</article>
-		</div>
-	);
+  return (
+    <div className="col-lg-4 small-post-border">
+      <article className="d-flex">
+        <div className="flex-shrink-0">
+          {post.image && (
+            <div className="recent-post-thumb me-3">
+              <Image
+                alt={post.title ?? ''}
+                src={post.image}
+                fill
+                style={{
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex-grow-1 ms-3">
+          <div className="mb-3 post-meta">
+            <span>By {authorName}</span>
+            <span className="border-bottom border-primary px-2 mx-1" />
+            <span>{formatPostDate(post.date)}</span>
+          </div>
+          <Link href={getBlogLink(post.slug)} className="h5 d-block mb-3">
+            {post.title}
+          </Link>
+          <Link
+            href={getBlogLink(post.slug)}
+            className="btn btn-outline-primary"
+          >
+            read more
+          </Link>
+        </div>
+      </article>
+    </div>
+  );
 };
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index d8740c6..98354db 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -4,56 +4,56 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 export type FooterProps = {
-	copyright?: string;
-	contentTitle?: string;
-	menu: {
-		title: string;
-		links: {
-			title: string;
-			url: string;
-		}[];
-	}[];
+  copyright?: string;
+  contentTitle?: string;
+  menu: {
+    title: string;
+    links: {
+      title: string;
+      url: string;
+    }[];
+  }[];
 };
 
 export const Footer = (props: PropsWithChildren<FooterProps>) => {
-	return (
-		<footer className="text-capitalize">
-			<div className="container">
-				<div className="row justify-content-center">
-					<div className="col-12 text-center mb-5">
-						<Link href="/">
-							<Image
-								src="/images/logo.png"
-								width="65"
-								height="34"
-								alt="Site Title"
-							/>
-						</Link>
-					</div>
-					<div className="col-lg-3 col-sm-6 mb-5">
-						<h6 className="mb-4">{props.contentTitle}</h6>
-						{props.children}
-					</div>
-					{props.menu.map((menuItem) => (
-						<div key={menuItem.title} className="col-lg-3 col-sm-6 mb-5">
-							<h6 className="mb-4">{menuItem.title}</h6>
-							<ul className="list-unstyled">
-								{menuItem.links.map((link) => (
-									<li className="mb-3" key={link.title}>
-										<Link className="text-dark" href={link.url}>
-											{link.title}
-										</Link>
-									</li>
-								))}
-							</ul>
-						</div>
-					))}
-					<div
-						className="col-12 border-top py-4 text-center"
-						dangerouslySetInnerHTML={{ __html: props.copyright ?? '' }}
-					/>
-				</div>
-			</div>
-		</footer>
-	);
+  return (
+    <footer className="text-capitalize">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-12 text-center mb-5">
+            <Link href="/">
+              <Image
+                src="/images/logo.png"
+                width="65"
+                height="34"
+                alt="Site Title"
+              />
+            </Link>
+          </div>
+          <div className="col-lg-3 col-sm-6 mb-5">
+            <h6 className="mb-4">{props.contentTitle}</h6>
+            {props.children}
+          </div>
+          {props.menu.map((menuItem) => (
+            <div key={menuItem.title} className="col-lg-3 col-sm-6 mb-5">
+              <h6 className="mb-4">{menuItem.title}</h6>
+              <ul className="list-unstyled">
+                {menuItem.links.map((link) => (
+                  <li className="mb-3" key={link.title}>
+                    <Link className="text-dark" href={link.url}>
+                      {link.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+          <div
+            className="col-12 border-top py-4 text-center"
+            dangerouslySetInnerHTML={{ __html: props.copyright ?? '' }}
+          />
+        </div>
+      </div>
+    </footer>
+  );
 };
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index e719481..6ad599b 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -1,33 +1,33 @@
 import Link from 'next/link';
 
 export type GalleryProps = {
-	gallery: {
-		id: string;
-		imageURL: string;
-	}[];
+  gallery: {
+    id: string;
+    imageURL: string;
+  }[];
 };
 
 export const Gallery = ({ gallery }: GalleryProps) => {
-	return (
-		<section>
-			<div className="container-fluid px-0">
-				<div className="text-center">
-					<h4 className="widget-title">My Gallery</h4>
-				</div>
-				<div className="row g-0">
-					{gallery.map((item) => (
-						<div key={item.id} className="col-lg-2 col-md-3 col-sm-4 col-6">
-							<Link
-								href={item.imageURL}
-								className="venobox"
-								data-gall="gallery"
-							>
-								<img className="img-fluid w-100" src={item.imageURL} alt="" />
-							</Link>
-						</div>
-					))}
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section>
+      <div className="container-fluid px-0">
+        <div className="text-center">
+          <h4 className="widget-title">My Gallery</h4>
+        </div>
+        <div className="row g-0">
+          {gallery.map((item) => (
+            <div key={item.id} className="col-lg-2 col-md-3 col-sm-4 col-6">
+              <Link
+                href={item.imageURL}
+                className="venobox"
+                data-gall="gallery"
+              >
+                <img className="img-fluid w-100" src={item.imageURL} alt="" />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index db93dd7..2e5d4ca 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,134 +8,134 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 import { Icon } from '@/components/Icon';
 
 export type NavigationItem = {
-	title: string;
-	url: string;
-	submenu?: {
-		title: string;
-		url: string;
-	}[];
+  title: string;
+  url: string;
+  submenu?: {
+    title: string;
+    url: string;
+  }[];
 };
 
 export type NavigationProps = {
-	items: NavigationItem[];
-	socialLinks: IconLink[];
+  items: NavigationItem[];
+  socialLinks: IconLink[];
 };
 
 export const Navigation = (props: NavigationProps) => {
-	return (
-		<>
-			{/* navigation */}
-			<header className="navigation">
-				<div className="container">
-					<nav className="navbar navbar-expand-lg navbar-white bg-transparent border-bottom ps-0">
-						<Link className="navbar-brand mobile-view" href="/">
-							<Image
-								className="img-fluid"
-								src="/images/logo.png"
-								width="65"
-								height="34"
-								alt="Site Title"
-							/>
-						</Link>
-						<button
-							className="navbar-toggler border-0"
-							type="button"
-							data-toggle="collapse"
-							data-target="#navigation"
-						>
-							<TfiMenu />
-						</button>
+  return (
+    <>
+      {/* navigation */}
+      <header className="navigation">
+        <div className="container">
+          <nav className="navbar navbar-expand-lg navbar-white bg-transparent border-bottom ps-0">
+            <Link className="navbar-brand mobile-view" href="/">
+              <Image
+                className="img-fluid"
+                src="/images/logo.png"
+                width="65"
+                height="34"
+                alt="Site Title"
+              />
+            </Link>
+            <button
+              className="navbar-toggler border-0"
+              type="button"
+              data-toggle="collapse"
+              data-target="#navigation"
+            >
+              <TfiMenu />
+            </button>
 
-						<div
-							className="collapse navbar-collapse text-center"
-							id="navigation"
-						>
-							<div className="desktop-view">
-								<ul className="navbar-nav me-auto">
-									{props.socialLinks.map(({ title, url, icon }) => (
-										<li className="nav-item" key={title}>
-											<Link className="nav-link" href={url}>
-												<Icon icon={icon} />
-											</Link>
-										</li>
-									))}
-								</ul>
-							</div>
+            <div
+              className="collapse navbar-collapse text-center"
+              id="navigation"
+            >
+              <div className="desktop-view">
+                <ul className="navbar-nav me-auto">
+                  {props.socialLinks.map(({ title, url, icon }) => (
+                    <li className="nav-item" key={title}>
+                      <Link className="nav-link" href={url}>
+                        <Icon icon={icon} />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
 
-							<Link className="navbar-brand mx-auto desktop-view" href="/">
-								<Image
-									className="img-fluid"
-									src="/images/logo.png"
-									width="65"
-									height="34"
-									alt="Site Title"
-								/>
-							</Link>
+              <Link className="navbar-brand mx-auto desktop-view" href="/">
+                <Image
+                  className="img-fluid"
+                  src="/images/logo.png"
+                  width="65"
+                  height="34"
+                  alt="Site Title"
+                />
+              </Link>
 
-							<ul className="navbar-nav">
-								{props.items.map((menuItem) => {
-									return menuItem.submenu && menuItem.submenu.length !== 0 ? (
-										<DropdownMenu
-											key={menuItem.title}
-											title={menuItem.title}
-											url={menuItem.url}
-											submenu={menuItem.submenu}
-										/>
-									) : (
-										<li key={menuItem.title} className="nav-item">
-											<Link className="nav-link" href={menuItem.url}>
-												{menuItem.title}
-											</Link>
-										</li>
-									);
-								})}
-							</ul>
+              <ul className="navbar-nav">
+                {props.items.map((menuItem) => {
+                  return menuItem.submenu && menuItem.submenu.length !== 0 ? (
+                    <DropdownMenu
+                      key={menuItem.title}
+                      title={menuItem.title}
+                      url={menuItem.url}
+                      submenu={menuItem.submenu}
+                    />
+                  ) : (
+                    <li key={menuItem.title} className="nav-item">
+                      <Link className="nav-link" href={menuItem.url}>
+                        {menuItem.title}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
 
-							{process.env.SEARCH_ENABLE && (
-								/* search */
-								<div className="search pl-lg-4">
-									<button id="searchOpen" className="search-btn" type="button">
-										<TfiSearch />
-									</button>
-									<div className="search-wrapper">
-										<form
-											action={`${process.env.PUBLIC_URL}/search`}
-											className="h-100"
-										>
-											<input
-												className="search-box px-4"
-												id="search-query"
-												name="s"
-												type="search"
-												placeholder="Type & Hit Enter..."
-											/>
-										</form>
-										<button
-											id="searchClose"
-											className="search-close"
-											type="button"
-										>
-											<TfiClose className="text-dark" />
-										</button>
-									</div>
-								</div>
-							)}
+              {process.env.SEARCH_ENABLE && (
+                /* search */
+                <div className="search pl-lg-4">
+                  <button id="searchOpen" className="search-btn" type="button">
+                    <TfiSearch />
+                  </button>
+                  <div className="search-wrapper">
+                    <form
+                      action={`${process.env.PUBLIC_URL}/search`}
+                      className="h-100"
+                    >
+                      <input
+                        className="search-box px-4"
+                        id="search-query"
+                        name="s"
+                        type="search"
+                        placeholder="Type & Hit Enter..."
+                      />
+                    </form>
+                    <button
+                      id="searchClose"
+                      className="search-close"
+                      type="button"
+                    >
+                      <TfiClose className="text-dark" />
+                    </button>
+                  </div>
+                </div>
+              )}
 
-							{process.env.NAV_BUTTON_ENABLE && (
-								/* get start btn */
-								<Link
-									href="/"
-									className="btn btn-primary ms-lg-4"
-									type="button"
-								>
-									{process.env.NAV_BUTTON_LABEL}
-								</Link>
-							)}
-						</div>
-					</nav>
-				</div>
-			</header>
-			{/* /navigation */}
-		</>
-	);
+              {process.env.NAV_BUTTON_ENABLE && (
+                /* get start btn */
+                <Link
+                  href="/"
+                  className="btn btn-primary ms-lg-4"
+                  type="button"
+                >
+                  {process.env.NAV_BUTTON_LABEL}
+                </Link>
+              )}
+            </div>
+          </nav>
+        </div>
+      </header>
+      {/* /navigation */}
+    </>
+  );
 };
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index b319882..fd9ce77 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,30 +1,30 @@
 import {
-	TfiDribbble,
-	TfiGithub,
-	TfiLinkedin,
-	TfiStackOverflow,
-	TfiTwitter,
+  TfiDribbble,
+  TfiGithub,
+  TfiLinkedin,
+  TfiStackOverflow,
+  TfiTwitter,
 } from 'react-icons/tfi';
 
 import { TfiIcons } from '@/components/Icon/Icon.types';
 
 export type IconProps = {
-	icon: string;
+  icon: string;
 };
 
 export const Icon = (props: IconProps) => {
-	switch (props.icon) {
-		case TfiIcons.github:
-			return <TfiGithub />;
-		case TfiIcons.linkedin:
-			return <TfiLinkedin />;
-		case TfiIcons.twitter:
-			return <TfiTwitter />;
-		case TfiIcons.dribbble:
-			return <TfiDribbble />;
-		case TfiIcons.stackoverflow:
-			return <TfiStackOverflow />;
-		default:
-			return null;
-	}
+  switch (props.icon) {
+    case TfiIcons.github:
+      return <TfiGithub />;
+    case TfiIcons.linkedin:
+      return <TfiLinkedin />;
+    case TfiIcons.twitter:
+      return <TfiTwitter />;
+    case TfiIcons.dribbble:
+      return <TfiDribbble />;
+    case TfiIcons.stackoverflow:
+      return <TfiStackOverflow />;
+    default:
+      return null;
+  }
 };
diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts
index b5fd4e0..9dc23e9 100644
--- a/src/components/Icon/Icon.types.ts
+++ b/src/components/Icon/Icon.types.ts
@@ -1,7 +1,7 @@
 export enum TfiIcons {
-	github = 'github',
-	linkedin = 'linkedin',
-	twitter = 'twitter',
-	dribbble = 'dribbble',
-	stackoverflow = 'stackoverflow',
+  github = 'github',
+  linkedin = 'linkedin',
+  twitter = 'twitter',
+  dribbble = 'dribbble',
+  stackoverflow = 'stackoverflow',
 }
diff --git a/src/components/MDXComponent/MDXComponent.tsx b/src/components/MDXComponent/MDXComponent.tsx
index 9827c12..3973c04 100644
--- a/src/components/MDXComponent/MDXComponent.tsx
+++ b/src/components/MDXComponent/MDXComponent.tsx
@@ -3,11 +3,11 @@ import { useMemo } from 'react';
 import { getMDXComponent } from 'mdx-bundler/client';
 
 export type MDXComponentProps = {
-	code: string;
+  code: string;
 };
 
 export const MDXComponent = ({ code }: MDXComponentProps) => {
-	const Component = useMemo(() => getMDXComponent(code), [code]);
+  const Component = useMemo(() => getMDXComponent(code), [code]);
 
-	return <Component />;
+  return <Component />;
 };
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 7532eb0..f63a706 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@@ -1,38 +1,38 @@
 export const Newsletter = () => {
-	const newsletterTitle = 'Newsletter Title'; // Replace with actual data
-	const newsletterContent = 'Newsletter content goes here'; // Replace with actual data
+  const newsletterTitle = 'Newsletter Title'; // Replace with actual data
+  const newsletterContent = 'Newsletter content goes here'; // Replace with actual data
 
-	const handleSubscribe = () => {
-		// Implement subscribe functionality
-	};
+  const handleSubscribe = () => {
+    // Implement subscribe functionality
+  };
 
-	return (
-		<section className="section-sm">
-			<div className="container">
-				<div className="row">
-					<div className="col-lg-8 mx-auto text-center">
-						<h2>{newsletterTitle}</h2>
-						<p className="text-light px-md-5 py-4 border-start border-end border-primary">
-							{newsletterContent}
-						</p>
-						<form className="row justify-content-center">
-							<div className="input-group col-md-8">
-								<input
-									type="text"
-									className="form-control"
-									placeholder="Your Email Address"
-								/>
-								<button
-									type="submit"
-									className="input-group-text btn btn-primary"
-								>
-									Subscribe
-								</button>
-							</div>
-						</form>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section-sm">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mx-auto text-center">
+            <h2>{newsletterTitle}</h2>
+            <p className="text-light px-md-5 py-4 border-start border-end border-primary">
+              {newsletterContent}
+            </p>
+            <form className="row justify-content-center">
+              <div className="input-group col-md-8">
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Your Email Address"
+                />
+                <button
+                  type="submit"
+                  className="input-group-text btn btn-primary"
+                >
+                  Subscribe
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 09980bf..065fca6 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -5,97 +5,97 @@ import Link from 'next/link';
 import { getPageLink, getPageNumbers } from '@/lib/utils';
 
 export type PaginationProps = {
-	itemsNumber: number;
-	parentPath?: string;
-	currentPage?: number;
+  itemsNumber: number;
+  parentPath?: string;
+  currentPage?: number;
 };
 
 const getPaginationLink = (parentFolder: string, page: string | number) => {
-	const pageString = typeof page === 'number' ? page.toString() : page;
+  const pageString = typeof page === 'number' ? page.toString() : page;
 
-	const parentPath =
-		parentFolder === '' ? '/' : ensureLeadingSlash(parentFolder);
+  const parentPath =
+    parentFolder === '' ? '/' : ensureLeadingSlash(parentFolder);
 
-	if (pageString === '1') return parentPath;
+  if (pageString === '1') return parentPath;
 
-	return `${parentPath}${getPageLink(pageString)}`;
+  return `${parentPath}${getPageLink(pageString)}`;
 };
 
 export const Pagination = ({
-	itemsNumber,
-	parentPath = '',
-	currentPage = 1,
+  itemsNumber,
+  parentPath = '',
+  currentPage = 1,
 }: PaginationProps) => {
-	const pages = getPageNumbers(itemsNumber);
-	const pagesNumber = pages.length;
+  const pages = getPageNumbers(itemsNumber);
+  const pagesNumber = pages.length;
 
-	return (
-		<ul className="pagination pagination-default">
-			{currentPage !== 1 && (
-				<>
-					<li className="page-item">
-						<Link
-							href={getPaginationLink(parentPath, 1)}
-							aria-label="First"
-							className="page-link"
-							role="button"
-						>
-							<span aria-hidden="true">««</span>
-						</Link>
-					</li>
-					<li className="page-item">
-						<Link
-							href={getPaginationLink(parentPath, currentPage - 1)}
-							aria-label="Previous"
-							className="page-link"
-							role="button"
-						>
-							<span aria-hidden="true">«</span>
-						</Link>
-					</li>
-				</>
-			)}
-			{pages.map((page) => (
-				<li
-					key={page}
-					className={cx('page-item', {
-						active: currentPage.toString() === page,
-					})}
-				>
-					<Link
-						href={getPaginationLink(parentPath, page)}
-						aria-label={page}
-						className="page-link"
-						role="button"
-					>
-						{page}
-					</Link>
-				</li>
-			))}
-			{currentPage < pagesNumber && (
-				<>
-					<li className="page-item">
-						<Link
-							href={getPaginationLink(parentPath, currentPage + 1)}
-							aria-label="Next"
-							className="page-link"
-							role="button"
-						>
-							<span aria-hidden="true">»</span>
-						</Link>
-					</li>
-					<li className="page-item">
-						<Link
-							href={getPaginationLink(parentPath, pagesNumber)}
-							aria-label="Last"
-							className="page-link"
-							role="button"
-						>
-							<span aria-hidden="true">»»</span>
-						</Link>
-					</li>
-				</>
-			)}
-		</ul>
-	);
+  return (
+    <ul className="pagination pagination-default">
+      {currentPage !== 1 && (
+        <>
+          <li className="page-item">
+            <Link
+              href={getPaginationLink(parentPath, 1)}
+              aria-label="First"
+              className="page-link"
+              role="button"
+            >
+              <span aria-hidden="true">««</span>
+            </Link>
+          </li>
+          <li className="page-item">
+            <Link
+              href={getPaginationLink(parentPath, currentPage - 1)}
+              aria-label="Previous"
+              className="page-link"
+              role="button"
+            >
+              <span aria-hidden="true">«</span>
+            </Link>
+          </li>
+        </>
+      )}
+      {pages.map((page) => (
+        <li
+          key={page}
+          className={cx('page-item', {
+            active: currentPage.toString() === page,
+          })}
+        >
+          <Link
+            href={getPaginationLink(parentPath, page)}
+            aria-label={page}
+            className="page-link"
+            role="button"
+          >
+            {page}
+          </Link>
+        </li>
+      ))}
+      {currentPage < pagesNumber && (
+        <>
+          <li className="page-item">
+            <Link
+              href={getPaginationLink(parentPath, currentPage + 1)}
+              aria-label="Next"
+              className="page-link"
+              role="button"
+            >
+              <span aria-hidden="true">»</span>
+            </Link>
+          </li>
+          <li className="page-item">
+            <Link
+              href={getPaginationLink(parentPath, pagesNumber)}
+              aria-label="Last"
+              className="page-link"
+              role="button"
+            >
+              <span aria-hidden="true">»»</span>
+            </Link>
+          </li>
+        </>
+      )}
+    </ul>
+  );
 };
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
index af55421..8ab6ecd 100644
--- a/src/components/Paginator/Paginator.tsx
+++ b/src/components/Paginator/Paginator.tsx
@@ -9,55 +9,55 @@ import type { PostFileInfo } from '@/models';
 import { formatPostDate, getBlogLink, getCategoryLink } from '@/lib/utils';
 
 export type PaginatorProps = {
-	pages: PostFileInfo[];
-	authorName?: string;
+  pages: PostFileInfo[];
+  authorName?: string;
 };
 
 export const Paginator = ({ pages, authorName }: PaginatorProps) => {
-	return (
-		<div className="row">
-			{pages.map((page) => (
-				<div key={page.slug} className="col-md-6 mb-4">
-					<article className="card">
-						{page.image && (
-							<div className="card-img-wrapper">
-								<Image
-									src={ensureLeadingSlash(page.image)}
-									className="card-img-top"
-									alt={page.title ?? ''}
-									fill
-								/>
-							</div>
-						)}
-						<div className="card-body px-0">
-							{page.categories?.map((category) => (
-								<Link
-									key={category}
-									href={getCategoryLink(slugify(category))}
-									className="text-primary"
-								>
-									{category}
-								</Link>
-							))}
-							<Link href={getBlogLink(page.slug)} className="h5 d-block my-3">
-								{page.title}
-							</Link>
-							<div className="mb-3 post-meta">
-								<span>By {authorName}</span>
-								<span className="border-bottom border-primary px-2 mx-1" />
-								<span>{formatPostDate(page.date)}</span>
-							</div>
-							<p className="card-text">{page.summary}</p>
-							<Link
-								href={getBlogLink(page.slug)}
-								className="btn btn-outline-primary"
-							>
-								read more
-							</Link>
-						</div>
-					</article>
-				</div>
-			))}
-		</div>
-	);
+  return (
+    <div className="row">
+      {pages.map((page) => (
+        <div key={page.slug} className="col-md-6 mb-4">
+          <article className="card">
+            {page.image && (
+              <div className="card-img-wrapper">
+                <Image
+                  src={ensureLeadingSlash(page.image)}
+                  className="card-img-top"
+                  alt={page.title ?? ''}
+                  fill
+                />
+              </div>
+            )}
+            <div className="card-body px-0">
+              {page.categories?.map((category) => (
+                <Link
+                  key={category}
+                  href={getCategoryLink(slugify(category))}
+                  className="text-primary"
+                >
+                  {category}
+                </Link>
+              ))}
+              <Link href={getBlogLink(page.slug)} className="h5 d-block my-3">
+                {page.title}
+              </Link>
+              <div className="mb-3 post-meta">
+                <span>By {authorName}</span>
+                <span className="border-bottom border-primary px-2 mx-1" />
+                <span>{formatPostDate(page.date)}</span>
+              </div>
+              <p className="card-text">{page.summary}</p>
+              <Link
+                href={getBlogLink(page.slug)}
+                className="btn btn-outline-primary"
+              >
+                read more
+              </Link>
+            </div>
+          </article>
+        </div>
+      ))}
+    </div>
+  );
 };
diff --git a/src/components/PillarPost/PillarPost.tsx b/src/components/PillarPost/PillarPost.tsx
index 754ae81..d54ae06 100644
--- a/src/components/PillarPost/PillarPost.tsx
+++ b/src/components/PillarPost/PillarPost.tsx
@@ -8,45 +8,45 @@ import type { PostFileInfo } from '@/models';
 import { formatPostDate, getBlogLink } from '@/lib/utils';
 
 export type PillarPostProps = {
-	post: PostFileInfo;
-	authorName: string;
+  post: PostFileInfo;
+  authorName: string;
 };
 
 export const PillarPost = ({ post, authorName }: PillarPostProps) => {
-	return (
-		<div className="col-10">
-			<article className="card featured-post">
-				<div className="row g-0 align-items-center">
-					<div className="col-md-5">
-						{post.image && (
-							<div className="pillar-img-wrapper">
-								<Image
-									src={ensureLeadingSlash(post.image)}
-									className="pillar-img"
-									alt={post.title ?? ''}
-									fill
-								/>
-							</div>
-						)}
-					</div>
-					<div className="col-md-6 offset-md-1">
-						<div className="card-body">
-							<div className="mb-3 post-meta">
-								<span>By {authorName}</span>
-								<span className="border-bottom border-primary px-2 mx-1" />
-								<span>{formatPostDate(post.date)}</span>
-							</div>
-							<Link
-								href={getBlogLink(post.slug)}
-								className="h1 fw-bold d-block text-dark mb-4 card-title"
-							>
-								{post.title}
-							</Link>
-							<p className="card-text">{post.summary}...</p>
-						</div>
-					</div>
-				</div>
-			</article>
-		</div>
-	);
+  return (
+    <div className="col-10">
+      <article className="card featured-post">
+        <div className="row g-0 align-items-center">
+          <div className="col-md-5">
+            {post.image && (
+              <div className="pillar-img-wrapper">
+                <Image
+                  src={ensureLeadingSlash(post.image)}
+                  className="pillar-img"
+                  alt={post.title ?? ''}
+                  fill
+                />
+              </div>
+            )}
+          </div>
+          <div className="col-md-6 offset-md-1">
+            <div className="card-body">
+              <div className="mb-3 post-meta">
+                <span>By {authorName}</span>
+                <span className="border-bottom border-primary px-2 mx-1" />
+                <span>{formatPostDate(post.date)}</span>
+              </div>
+              <Link
+                href={getBlogLink(post.slug)}
+                className="h1 fw-bold d-block text-dark mb-4 card-title"
+              >
+                {post.title}
+              </Link>
+              <p className="card-text">{post.summary}...</p>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
 };
diff --git a/src/components/SearchList/SearchList.tsx b/src/components/SearchList/SearchList.tsx
index c704759..af96224 100644
--- a/src/components/SearchList/SearchList.tsx
+++ b/src/components/SearchList/SearchList.tsx
@@ -1,35 +1,35 @@
 import Link from 'next/link';
 
 export const SearchList = () => {
-	const mockData = [
-		{
-			id: 'mock-key',
-			link: 'https://mock-link.com',
-			title: 'Mock Title',
-			snippet: 'Mock snippet',
-			tags: 'Mock Tags',
-			categories: 'Mock Categories',
-		},
-	];
+  const mockData = [
+    {
+      id: 'mock-key',
+      link: 'https://mock-link.com',
+      title: 'Mock Title',
+      snippet: 'Mock snippet',
+      tags: 'Mock Tags',
+      categories: 'Mock Categories',
+    },
+  ];
 
-	return (
-		<section className="section">
-			<div className="container">
-				<div className="row justify-content-center">
-					<div className="col-lg-10">
-						{mockData.map((item) => (
-							<div className="py-4 border-bottom" key={`summary-${item.id}`}>
-								<h4>
-									<Link href={item.link}>{item.title}</Link>
-								</h4>
-								<p>{item.snippet}</p>
-								{item.tags && <p>Tags: {item.tags}</p>}
-								{item.categories && <p>Categories: {item.categories}</p>}
-							</div>
-						))}
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-10">
+            {mockData.map((item) => (
+              <div className="py-4 border-bottom" key={`summary-${item.id}`}>
+                <h4>
+                  <Link href={item.link}>{item.title}</Link>
+                </h4>
+                <p>{item.snippet}</p>
+                {item.tags && <p>Tags: {item.tags}</p>}
+                {item.categories && <p>Categories: {item.categories}</p>}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/components/SinglePost/SinglePost.tsx b/src/components/SinglePost/SinglePost.tsx
index 911a9e0..ed456ca 100644
--- a/src/components/SinglePost/SinglePost.tsx
+++ b/src/components/SinglePost/SinglePost.tsx
@@ -10,54 +10,54 @@ import { getCategoryLink } from '@/lib/utils';
 import { MDXComponent } from '@/components/MDXComponent';
 
 export type SinglePostProps = Post & {
-	authorName?: string;
+  authorName?: string;
 };
 
 export const SinglePost = (props: SinglePostProps) => {
-	const { categories, title, date, image, code, authorName } = props;
+  const { categories, title, date, image, code, authorName } = props;
 
-	return (
-		<section className="section-sm">
-			<div className="container">
-				<div className="row">
-					<div className="col-lg-8 mx-auto">
-						{categories?.map((category) => (
-							<Link
-								key={category}
-								href={getCategoryLink(slugify(category))}
-								className="text-primary"
-							>
-								{category}
-							</Link>
-						))}
-						<h2>{title}</h2>
-						<div className="mb-3 post-meta">
-							<span>By {authorName}</span>
-							<span className="border-bottom border-primary px-2 mx-1" />
-							<span>
-								{new Date(date ?? Date.now()).toLocaleDateString('en-US', {
-									day: '2-digit',
-									month: 'long',
-									year: 'numeric',
-								})}
-							</span>
-						</div>
-						{image && (
-							<div className="single-img-wrapper mb-4">
-								<Image
-									src={ensureLeadingSlash(image)}
-									className="single-img"
-									alt={title ?? ''}
-									fill
-								/>
-							</div>
-						)}
-						<div className="content mb-5">
-							<MDXComponent code={code} />
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
+  return (
+    <section className="section-sm">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-8 mx-auto">
+            {categories?.map((category) => (
+              <Link
+                key={category}
+                href={getCategoryLink(slugify(category))}
+                className="text-primary"
+              >
+                {category}
+              </Link>
+            ))}
+            <h2>{title}</h2>
+            <div className="mb-3 post-meta">
+              <span>By {authorName}</span>
+              <span className="border-bottom border-primary px-2 mx-1" />
+              <span>
+                {new Date(date ?? Date.now()).toLocaleDateString('en-US', {
+                  day: '2-digit',
+                  month: 'long',
+                  year: 'numeric',
+                })}
+              </span>
+            </div>
+            {image && (
+              <div className="single-img-wrapper mb-4">
+                <Image
+                  src={ensureLeadingSlash(image)}
+                  className="single-img"
+                  alt={title ?? ''}
+                  fill
+                />
+              </div>
+            )}
+            <div className="content mb-5">
+              <MDXComponent code={code} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
diff --git a/src/lib/fetch-utils/getAuthorBio.ts b/src/lib/fetch-utils/getAuthorBio.ts
index 7a62781..0ef5e78 100644
--- a/src/lib/fetch-utils/getAuthorBio.ts
+++ b/src/lib/fetch-utils/getAuthorBio.ts
@@ -3,7 +3,7 @@ import type { AuthorInfo } from '@/models';
 import { getFileBySlug } from '@/lib/mdx';
 
 export const getAuthorBio = async () => {
-	const authorBio = await getFileBySlug<AuthorInfo>('about');
+  const authorBio = await getFileBySlug<AuthorInfo>('about');
 
-	return authorBio;
+  return authorBio;
 };
diff --git a/src/lib/fetch-utils/getAuthorInfo.ts b/src/lib/fetch-utils/getAuthorInfo.ts
index f3994f3..3bf1078 100644
--- a/src/lib/fetch-utils/getAuthorInfo.ts
+++ b/src/lib/fetch-utils/getAuthorInfo.ts
@@ -3,7 +3,7 @@ import type { AuthorInfo } from '@/models';
 import { getFileMetadata } from '@/lib/mdx';
 
 export const getAuthorInfo = async () => {
-	const authorInfo = await getFileMetadata<AuthorInfo>('about');
+  const authorInfo = await getFileMetadata<AuthorInfo>('about');
 
-	return authorInfo;
+  return authorInfo;
 };
diff --git a/src/lib/fetch-utils/getBlogs.ts b/src/lib/fetch-utils/getBlogs.ts
index 33b2a7d..f9f53ec 100644
--- a/src/lib/fetch-utils/getBlogs.ts
+++ b/src/lib/fetch-utils/getBlogs.ts
@@ -3,16 +3,16 @@ import type { PostInfo } from '@/models';
 import { getAllFilesMetadata } from '@/lib/mdx';
 
 export const getBlogs = async () => {
-	const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
+  const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
 
-	const siteCategories = [
-		...new Set(postsMetadata.flatMap((post) => post.categories)),
-	];
-	const siteTags = [...new Set(postsMetadata.flatMap((post) => post.tags))];
+  const siteCategories = [
+    ...new Set(postsMetadata.flatMap((post) => post.categories)),
+  ];
+  const siteTags = [...new Set(postsMetadata.flatMap((post) => post.tags))];
 
-	return {
-		posts: postsMetadata,
-		categories: siteCategories,
-		tags: siteTags,
-	};
+  return {
+    posts: postsMetadata,
+    categories: siteCategories,
+    tags: siteTags,
+  };
 };
diff --git a/src/lib/fetch-utils/getCategoryLinks.ts b/src/lib/fetch-utils/getCategoryLinks.ts
index 0b3bd16..6816223 100644
--- a/src/lib/fetch-utils/getCategoryLinks.ts
+++ b/src/lib/fetch-utils/getCategoryLinks.ts
@@ -6,14 +6,14 @@ import { getAllFilesMetadata } from '@/lib/mdx';
 import { getCategoryLink } from '@/lib/utils';
 
 export const getCategoryLinks = async () => {
-	const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
+  const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
 
-	const siteCategories = [
-		...new Set(postsMetadata.flatMap((post) => post.categories)),
-	];
+  const siteCategories = [
+    ...new Set(postsMetadata.flatMap((post) => post.categories)),
+  ];
 
-	return siteCategories.map((category) => ({
-		title: category,
-		url: getCategoryLink(slugify(category ?? '')),
-	}));
+  return siteCategories.map((category) => ({
+    title: category,
+    url: getCategoryLink(slugify(category ?? '')),
+  }));
 };
diff --git a/src/lib/fetch-utils/getSiteInfo.ts b/src/lib/fetch-utils/getSiteInfo.ts
index 853a762..2589975 100644
--- a/src/lib/fetch-utils/getSiteInfo.ts
+++ b/src/lib/fetch-utils/getSiteInfo.ts
@@ -3,7 +3,7 @@ import type { SiteInfo } from '@/models';
 import { getFileMetadata } from '@/lib/mdx';
 
 export const getSiteInfo = async () => {
-	const siteInfo = await getFileMetadata<SiteInfo>('_metadata', 'site-info');
+  const siteInfo = await getFileMetadata<SiteInfo>('_metadata', 'site-info');
 
-	return siteInfo;
+  return siteInfo;
 };
diff --git a/src/lib/fetch-utils/getSocialLinks.ts b/src/lib/fetch-utils/getSocialLinks.ts
index 2f848a5..df8cb88 100644
--- a/src/lib/fetch-utils/getSocialLinks.ts
+++ b/src/lib/fetch-utils/getSocialLinks.ts
@@ -3,7 +3,7 @@ import type { SiteInfo } from '@/models';
 import { getFileMetadata } from '@/lib/mdx';
 
 export const getSocialLinks = async () => {
-	const siteInfo = await getFileMetadata<SiteInfo>('_metadata', 'site-info');
+  const siteInfo = await getFileMetadata<SiteInfo>('_metadata', 'site-info');
 
-	return siteInfo.socialLinks;
+  return siteInfo.socialLinks;
 };
diff --git a/src/lib/fetch-utils/getTagLinks.ts b/src/lib/fetch-utils/getTagLinks.ts
index 2e350f0..682d790 100644
--- a/src/lib/fetch-utils/getTagLinks.ts
+++ b/src/lib/fetch-utils/getTagLinks.ts
@@ -6,12 +6,12 @@ import { getAllFilesMetadata } from '@/lib/mdx';
 import { getTagLink } from '@/lib/utils';
 
 export const getTagLinks = async () => {
-	const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
+  const postsMetadata = await getAllFilesMetadata<PostInfo>('blog');
 
-	const siteTags = [...new Set(postsMetadata.flatMap((post) => post.tags))];
+  const siteTags = [...new Set(postsMetadata.flatMap((post) => post.tags))];
 
-	return siteTags.map((tag) => ({
-		title: tag,
-		url: getTagLink(slugify(tag ?? '')),
-	}));
+  return siteTags.map((tag) => ({
+    title: tag,
+    url: getTagLink(slugify(tag ?? '')),
+  }));
 };
diff --git a/src/lib/mdx.ts b/src/lib/mdx.ts
index ca625b9..9774b24 100644
--- a/src/lib/mdx.ts
+++ b/src/lib/mdx.ts
@@ -22,104 +22,104 @@ import { getSlugFromFilename } from '@/lib/utils';
 const root = process.cwd();
 
 export async function getFileMetadata<T extends FrontMatter>(
-	type: string,
-	slug = 'index',
+  type: string,
+  slug = 'index',
 ): Promise<T & FileInfo> {
-	const mdxPath = path.join(root, CONTENT_PATH, type, `${slug}.mdx`);
-	const mdPath = path.join(root, CONTENT_PATH, type, `${slug}.md`);
-	const file = fs.existsSync(mdxPath) ? mdxPath : mdPath;
-	const source = fs.readFileSync(file, 'utf8');
-
-	const metadata = matter(source).data as T;
-	return {
-		...metadata,
-		slug: getSlugFromFilename(file, CONTENT_PATH),
-	};
+  const mdxPath = path.join(root, CONTENT_PATH, type, `${slug}.mdx`);
+  const mdPath = path.join(root, CONTENT_PATH, type, `${slug}.md`);
+  const file = fs.existsSync(mdxPath) ? mdxPath : mdPath;
+  const source = fs.readFileSync(file, 'utf8');
+
+  const metadata = matter(source).data as T;
+  return {
+    ...metadata,
+    slug: getSlugFromFilename(file, CONTENT_PATH),
+  };
 }
 
 export async function getAllFilesMetadata<T extends FrontMatter>(
-	folder: string,
+  folder: string,
 ): Promise<(T & FileInfo)[]> {
-	const pattern = `${CONTENT_PATH}/${folder}/**/*.{md,mdx}`;
-
-	const files = await glob(pattern);
-
-	return files.map((file) => {
-		const source = fs.readFileSync(file, 'utf8');
-		const metadata = matter(source).data as T;
-		return {
-			...metadata,
-			slug: getSlugFromFilename(file, CONTENT_PATH, folder),
-		};
-	});
+  const pattern = `${CONTENT_PATH}/${folder}/**/*.{md,mdx}`;
+
+  const files = await glob(pattern);
+
+  return files.map((file) => {
+    const source = fs.readFileSync(file, 'utf8');
+    const metadata = matter(source).data as T;
+    return {
+      ...metadata,
+      slug: getSlugFromFilename(file, CONTENT_PATH, folder),
+    };
+  });
 }
 
 function handleEmbedderHTML(html: string, info: TransformerInfo) {
-	const { url } = info;
+  const { url } = info;
 
-	if (url.includes('youtube.com'))
-		return `<div class="embed-youtube">${html}</div>`;
+  if (url.includes('youtube.com'))
+    return `<div class="embed-youtube">${html}</div>`;
 
-	return html;
+  return html;
 }
 
 export async function getFileBySlug<T extends FrontMatter>(
-	type: string,
-	slug = 'index',
+  type: string,
+  slug = 'index',
 ): Promise<T & FileInfo & FileContent> {
-	const mdxPath = path.join(root, CONTENT_PATH, type, `${slug}.mdx`);
-	const mdPath = path.join(root, CONTENT_PATH, type, `${slug}.md`);
-	const source = fs.existsSync(mdxPath)
-		? fs.readFileSync(mdxPath, 'utf8')
-		: fs.readFileSync(mdPath, 'utf8');
-
-	if (process.platform === 'win32') {
-		process.env.ESBUILD_BINARY_PATH = path.join(
-			root,
-			'node_modules',
-			'esbuild',
-			'esbuild.exe',
-		);
-	} else {
-		process.env.ESBUILD_BINARY_PATH = path.join(
-			root,
-			'node_modules',
-			'esbuild',
-			'bin',
-			'esbuild',
-		);
-	}
-
-	const { code, frontmatter } = await bundleMDX<T>({
-		source,
-		cwd: path.join(root, 'components'),
-		mdxOptions: (options) => {
-			// eslint-disable-next-line no-param-reassign
-			options.remarkPlugins = [
-				...(options.remarkPlugins ?? []),
-				remarkGfm,
-				[remarkFootnotes, { inlineNotes: true }],
-				remarkMath,
-				[
-					remarkEmbedder,
-					{ transformers: [oembedTransformer], handleHTML: handleEmbedderHTML },
-				],
-			];
-			// eslint-disable-next-line no-param-reassign
-			options.rehypePlugins = [
-				...(options.rehypePlugins ?? []),
-				rehypeSlug,
-				rehypeAutolinkHeadings,
-				rehypeKatex,
-				[rehypePrismPlus, { ignoreMissing: true }],
-			];
-			return options;
-		},
-	});
-
-	return {
-		...frontmatter,
-		code,
-		slug,
-	};
+  const mdxPath = path.join(root, CONTENT_PATH, type, `${slug}.mdx`);
+  const mdPath = path.join(root, CONTENT_PATH, type, `${slug}.md`);
+  const source = fs.existsSync(mdxPath)
+    ? fs.readFileSync(mdxPath, 'utf8')
+    : fs.readFileSync(mdPath, 'utf8');
+
+  if (process.platform === 'win32') {
+    process.env.ESBUILD_BINARY_PATH = path.join(
+      root,
+      'node_modules',
+      'esbuild',
+      'esbuild.exe',
+    );
+  } else {
+    process.env.ESBUILD_BINARY_PATH = path.join(
+      root,
+      'node_modules',
+      'esbuild',
+      'bin',
+      'esbuild',
+    );
+  }
+
+  const { code, frontmatter } = await bundleMDX<T>({
+    source,
+    cwd: path.join(root, 'components'),
+    mdxOptions: (options) => {
+      // eslint-disable-next-line no-param-reassign
+      options.remarkPlugins = [
+        ...(options.remarkPlugins ?? []),
+        remarkGfm,
+        [remarkFootnotes, { inlineNotes: true }],
+        remarkMath,
+        [
+          remarkEmbedder,
+          { transformers: [oembedTransformer], handleHTML: handleEmbedderHTML },
+        ],
+      ];
+      // eslint-disable-next-line no-param-reassign
+      options.rehypePlugins = [
+        ...(options.rehypePlugins ?? []),
+        rehypeSlug,
+        rehypeAutolinkHeadings,
+        rehypeKatex,
+        [rehypePrismPlus, { ignoreMissing: true }],
+      ];
+      return options;
+    },
+  });
+
+  return {
+    ...frontmatter,
+    code,
+    slug,
+  };
 }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index db138a2..5585d76 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -3,45 +3,45 @@ import { ensureLeadingSlash } from 'next/dist/shared/lib/page-path/ensure-leadin
 import { POSTS_PER_PAGE } from '@/lib/constants';
 
 export function getSlugFromFilename(
-	filename: string,
-	contentPath: string,
-	folder?: string,
+  filename: string,
+  contentPath: string,
+  folder?: string,
 ) {
-	const folderPath = folder ? `/${folder}` : '';
+  const folderPath = folder ? `/${folder}` : '';
 
-	return filename
-		.replace(`${contentPath}${folderPath}`, '')
-		.replace(/\.(mdx|md)/, '');
+  return filename
+    .replace(`${contentPath}${folderPath}`, '')
+    .replace(/\.(mdx|md)/, '');
 }
 
 export function getBlogLink(slug: string) {
-	return `/blog${ensureLeadingSlash(slug)}`;
+  return `/blog${ensureLeadingSlash(slug)}`;
 }
 
 export function getCategoryLink(slug: string) {
-	return `/blog/categories${ensureLeadingSlash(slug)}`;
+  return `/blog/categories${ensureLeadingSlash(slug)}`;
 }
 
 export function getTagLink(slug: string) {
-	return `/blog/tags${ensureLeadingSlash(slug)}`;
+  return `/blog/tags${ensureLeadingSlash(slug)}`;
 }
 
 export function getPageLink(page: string) {
-	return `/pages${ensureLeadingSlash(page)}`;
+  return `/pages${ensureLeadingSlash(page)}`;
 }
 
 export function getPageNumbers(itemsNumber: number) {
-	return [...Array(Math.ceil(itemsNumber / POSTS_PER_PAGE))].map((_, index) =>
-		(index + 1).toString(),
-	);
+  return [...Array(Math.ceil(itemsNumber / POSTS_PER_PAGE))].map((_, index) =>
+    (index + 1).toString(),
+  );
 }
 
 export function formatPostDate(dateString?: string) {
-	return dateString
-		? new Date(dateString).toLocaleDateString('en-US', {
-				day: '2-digit',
-				month: 'long',
-				year: 'numeric',
-			})
-		: '';
+  return dateString
+    ? new Date(dateString).toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: 'long',
+        year: 'numeric',
+      })
+    : '';
 }
diff --git a/src/models/index.ts b/src/models/index.ts
index 62ad435..5533261 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -1,42 +1,42 @@
 export type FrontMatter = {
-	title?: string;
-	type?: string;
-	[key: string]: unknown;
+  title?: string;
+  type?: string;
+  [key: string]: unknown;
 };
 
 export type PostInfo = FrontMatter & {
-	date?: string;
-	draft?: boolean;
-	image?: string;
-	summary?: string;
-	categories?: string[];
-	tags?: string[];
+  date?: string;
+  draft?: boolean;
+  image?: string;
+  summary?: string;
+  categories?: string[];
+  tags?: string[];
 };
 
 export type FileInfo = {
-	slug: string;
+  slug: string;
 };
 
 export type PostFileInfo = PostInfo & FileInfo;
 
 export type FileContent = {
-	code: string;
+  code: string;
 };
 
 export type Post = PostFileInfo & FileContent;
 
 export type IconLink = {
-	title: string;
-	url: string;
-	icon: string;
+  title: string;
+  url: string;
+  icon: string;
 };
 
 export type SiteInfo = {
-	socialLinks: IconLink[];
+  socialLinks: IconLink[];
 };
 
 export type AuthorInfo = FrontMatter & {
-	authorName: string;
-	summary: string;
-	image: string;
+  authorName: string;
+  summary: string;
+  image: string;
 };