From bee43e4ebca0e0ad55c438cb2089581e3c76ebbf Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 8 Dec 2022 07:41:54 +0200
Subject: [PATCH 01/49] first-commit

---
 components/Intro.tsx                          | 83 ++++++++++++++-----
 ...ng-this-blog-and-why-you-should-as-well.md |  2 +-
 helpers/markdownDocumentsReader.ts            | 18 ++++
 pages/api/getUpcomingPosts.ts                 |  8 ++
 4 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 pages/api/getUpcomingPosts.ts

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 2b87c239..b9762c2e 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,30 +1,67 @@
 import config from "config";
+import { useEffect, useState } from "react";
 
-const Intro = () => (
-  <section className="intro-section">
-    <div className="container">
-      <div className="intro-content">
-        <div className="intro-avatar">
-          <div className="image">
-            <img
-              src="/images/author-avatar.jpg"
-              alt="author-avatar"
-              width={90}
-              height={90}
-            />
+const Intro = () => {
+  const [upcommingPosts, setUpcommingPosts] = useState();
+
+  let admin = false;
+
+  if (typeof window !== "undefined") {
+    if (localStorage.getItem("admin") == "true") {
+      console.log(upcommingPosts);
+      admin = true;
+    }
+  }
+  useEffect(() => {
+    const fetchData = async () => {
+      const posts = await fetch("/api/getUpcomingPosts").then((data) =>
+        data.json()
+      );
+      setUpcommingPosts(posts);
+    };
+    fetchData();
+  }, [admin]);
+
+  const handleClick = (event: MouseEvent) => {
+    if (event.detail === 2) {
+      if (localStorage.getItem("admin") == "true") {
+        alert("Turning off editor mode");
+        localStorage.setItem("admin", "false");
+      } else {
+        alert("Turning on editor mode");
+        localStorage.setItem("admin", "true");
+        console.log(upcommingPosts);
+      }
+    }
+  };
+
+  return (
+    <section className="intro-section">
+      <div className="container">
+        <div className="intro-content">
+          <div className="intro-avatar">
+            <div className="image">
+              <img
+                onClick={handleClick}
+                src="/images/author-avatar.jpg"
+                alt="author-avatar"
+                width={90}
+                height={90}
+              />
+            </div>
+            <div className="name">{config.author_name}</div>
+            <div className="job">{config.author_position}</div>
+          </div>
+          <div className="intro-text">
+            <h1>Hello, I am {config.author_name}</h1>
+            <p style={{ whiteSpace: "break-spaces" }}>
+              {config.site_description}
+            </p>
           </div>
-          <div className="name">{config.author_name}</div>
-          <div className="job">{config.author_position}</div>
-        </div>
-        <div className="intro-text">
-          <h1>Hello, I am {config.author_name}</h1>
-          <p style={{ whiteSpace: "break-spaces" }}>
-            {config.site_description}
-          </p>
         </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default Intro;
diff --git a/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md b/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
index 1eae85ac..3c0f8a28 100644
--- a/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
+++ b/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
@@ -2,7 +2,7 @@
 title: Why I'm starting this blog, and why you should as well
 date: 2021-10-15 13:08:28
 featuredImage: /post-images/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.webp
-draft: false
+draft: true
 tags:
   - SoftSkills
 ---
diff --git a/helpers/markdownDocumentsReader.ts b/helpers/markdownDocumentsReader.ts
index 9a9bff60..176fb157 100644
--- a/helpers/markdownDocumentsReader.ts
+++ b/helpers/markdownDocumentsReader.ts
@@ -45,3 +45,21 @@ export function getAllPostDocuments(): PostDocumentWithoutContent[] {
 
   return JSONSerialize(docs);
 }
+
+export function getUpcomingPosts(): PostDocumentWithoutContent[] {
+  const slugs = fs.readdirSync(documentsDirectory);
+  const docs = slugs
+    .map((slug) => getPostDocumentBySlug(slug))
+    .filter((post: PostDocument) => {
+      if (isPostADraft(post) || isPostInTheFuture(post)) {
+        return true;
+      }
+    })
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .map((post) => {
+      const { content, ...postWithoutContent } = post;
+      return postWithoutContent;
+    });
+
+  return JSONSerialize(docs);
+}
diff --git a/pages/api/getUpcomingPosts.ts b/pages/api/getUpcomingPosts.ts
new file mode 100644
index 00000000..f65313d6
--- /dev/null
+++ b/pages/api/getUpcomingPosts.ts
@@ -0,0 +1,8 @@
+import { getUpcomingPosts } from "helpers/markdownDocumentsReader";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const posts = getUpcomingPosts();
+
+  res.status(200).json(posts);
+}

From d066a4f14e6f8e9d6807824f70a3c7cb2b8b6c58 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 8 Dec 2022 07:42:53 +0200
Subject: [PATCH 02/49] little-fix

---
 ...0-15-why-im-starting-this-blog-and-why-you-should-as-well.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md b/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
index 3c0f8a28..1eae85ac 100644
--- a/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
+++ b/content/posts/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.md
@@ -2,7 +2,7 @@
 title: Why I'm starting this blog, and why you should as well
 date: 2021-10-15 13:08:28
 featuredImage: /post-images/2021-10-15-why-im-starting-this-blog-and-why-you-should-as-well.webp
-draft: true
+draft: false
 tags:
   - SoftSkills
 ---

From 678c67cffeb0f414be1723b92aabbb160eb80a18 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 8 Dec 2022 07:45:19 +0200
Subject: [PATCH 03/49] fix-type-temporarily

---
 components/Intro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index b9762c2e..c63b6928 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -22,7 +22,7 @@ const Intro = () => {
     fetchData();
   }, [admin]);
 
-  const handleClick = (event: MouseEvent) => {
+  const handleClick = (event: any) => {
     if (event.detail === 2) {
       if (localStorage.getItem("admin") == "true") {
         alert("Turning off editor mode");

From 774f1060c407a479a1dad31d9bf1ba1a6fe29909 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 12 Dec 2022 08:52:02 +0200
Subject: [PATCH 04/49] test-with-post

---
 content/posts/2022-01-03-benefits-of-mentoring.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/posts/2022-01-03-benefits-of-mentoring.md b/content/posts/2022-01-03-benefits-of-mentoring.md
index 7aebce1f..2b8cbb17 100644
--- a/content/posts/2022-01-03-benefits-of-mentoring.md
+++ b/content/posts/2022-01-03-benefits-of-mentoring.md
@@ -2,7 +2,7 @@
 title: Benefits of mentoring
 date: 2022-01-03 02:56:25
 featuredImage: /post-images/2022-01-03-benefits-of-mentoring.webp
-draft: false
+draft: true
 tags:
   - SoftSkills
 ---

From deffb4cf2045e975e708a8006ec87662fab4aeaf Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 12 Dec 2022 09:19:40 +0200
Subject: [PATCH 05/49] remove-test

---
 content/posts/2022-01-03-benefits-of-mentoring.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/posts/2022-01-03-benefits-of-mentoring.md b/content/posts/2022-01-03-benefits-of-mentoring.md
index 2b8cbb17..7aebce1f 100644
--- a/content/posts/2022-01-03-benefits-of-mentoring.md
+++ b/content/posts/2022-01-03-benefits-of-mentoring.md
@@ -2,7 +2,7 @@
 title: Benefits of mentoring
 date: 2022-01-03 02:56:25
 featuredImage: /post-images/2022-01-03-benefits-of-mentoring.webp
-draft: true
+draft: false
 tags:
   - SoftSkills
 ---

From 1a17ac875669301c465597b7f8f36aa102b2f332 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 20 Dec 2022 19:47:55 +0200
Subject: [PATCH 06/49] improvment-by-cookie-&-result-version

---
 components/Intro.tsx         | 29 ++++-------------------------
 components/UpcomingPosts.tsx | 24 ++++++++++++++++++++++++
 package.json                 |  1 +
 pages/index.tsx              | 18 ++++++++++++++++++
 yarn.lock                    | 24 ++++++++++++++++++++++++
 5 files changed, 71 insertions(+), 25 deletions(-)
 create mode 100644 components/UpcomingPosts.tsx

diff --git a/components/Intro.tsx b/components/Intro.tsx
index c63b6928..7c8544df 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,36 +1,15 @@
 import config from "config";
-import { useEffect, useState } from "react";
+import { getCookie, setCookie } from "cookies-next";
 
 const Intro = () => {
-  const [upcommingPosts, setUpcommingPosts] = useState();
-
-  let admin = false;
-
-  if (typeof window !== "undefined") {
-    if (localStorage.getItem("admin") == "true") {
-      console.log(upcommingPosts);
-      admin = true;
-    }
-  }
-  useEffect(() => {
-    const fetchData = async () => {
-      const posts = await fetch("/api/getUpcomingPosts").then((data) =>
-        data.json()
-      );
-      setUpcommingPosts(posts);
-    };
-    fetchData();
-  }, [admin]);
-
   const handleClick = (event: any) => {
     if (event.detail === 2) {
-      if (localStorage.getItem("admin") == "true") {
+      if (getCookie("admin")) {
         alert("Turning off editor mode");
-        localStorage.setItem("admin", "false");
+        setCookie("admin", "false");
       } else {
         alert("Turning on editor mode");
-        localStorage.setItem("admin", "true");
-        console.log(upcommingPosts);
+        setCookie("admin", "true");
       }
     }
   };
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
new file mode 100644
index 00000000..83d6e7cf
--- /dev/null
+++ b/components/UpcomingPosts.tsx
@@ -0,0 +1,24 @@
+import { PostDocumentWithoutContent } from "interfaces";
+
+import PostCard from "./PostCard";
+
+interface Props {
+  posts: PostDocumentWithoutContent[];
+}
+
+const UpcomingPosts = ({ posts }: Props) => (
+  <>
+    <div style={{ marginBottom: "50px" }}>
+      <div className="intro-text" style={{ marginBottom: "36px" }}>
+        <h1>Upcoming Posts</h1>
+      </div>
+      <ul className="posts-list">
+        {posts.map((post, index) => (
+          <PostCard key={index} post={post} />
+        ))}
+      </ul>
+    </div>
+  </>
+);
+
+export default UpcomingPosts;
diff --git a/package.json b/package.json
index 1af5ecf1..e376ab97 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.5",
+    "cookies-next": "^2.1.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "gray-matter": "^4.0.3",
     "next": "12.2.1",
diff --git a/pages/index.tsx b/pages/index.tsx
index 2f94363d..c1e93506 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,13 @@
 import config from "config";
+import { getCookie } from "cookies-next";
+import {
+  isPostADraft,
+  isPostInTheFuture,
+} from "helpers/checkOfDraftOrFuturePost";
 import { getAllPostDocuments } from "helpers/markdownDocumentsReader";
 import { PostDocumentWithoutContent } from "interfaces";
 import type { NextPage } from "next";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useAppSelector } from "redux/typesHooks";
 
@@ -13,6 +19,12 @@ import Posts from "@/components/Posts";
 import StandWithUkraine from "@/components/StandWithUkraine";
 import Tags from "@/components/Tags";
 
+const UpcomingPosts = dynamic(() => import("@/components/UpcomingPosts"), {
+  ssr: false,
+});
+
+const admin = getCookie("admin");
+
 const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
   const uniqueTags = Array.from(
     new Set([...posts.map((post) => post.tags).flat()])
@@ -26,6 +38,11 @@ const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
 
     return selectedTags.some((tag) => post.tags.includes(tag));
   });
+  const filteredUpcomingPosts = posts.filter((post) => {
+    if (isPostADraft(post) || isPostInTheFuture(post)) {
+      return true;
+    }
+  });
 
   const pagesCount = Math.ceil(filteredPosts.length / config.posts_per_page);
   const currentPage = useAppSelector((state) => state.pagination.currentPage);
@@ -52,6 +69,7 @@ const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
       <Intro />
       <section className="simple-section">
         <div className="container">
+          {admin ? <UpcomingPosts posts={filteredUpcomingPosts} /> : null}
           <Tags uniqueTags={uniqueTags} />
           <Posts posts={postsToRender} />
           <Pagination pagesCount={pagesCount} />
diff --git a/yarn.lock b/yarn.lock
index fa5d774b..2defab55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -213,6 +213,11 @@
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/cookie@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
+  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
+
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz"
@@ -272,6 +277,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-18.0.3.tgz"
   integrity sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==
 
+"@types/node@^16.10.2":
+  version "16.18.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.10.tgz#d7415ef18c94f8d4e4a82ebcc8b8999f965d8920"
+  integrity sha512-XU1+v7h81p7145ddPfjv7jtWvkSilpcnON3mQ+bDi9Yuf7OI56efOglXRyXWgQ57xH3fEQgh7WOJMncRHVew5w==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -920,6 +930,20 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
+cookie@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
+cookies-next@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-2.1.1.tgz#8d82f1b78fccfb19d9d7c26766fa5707a3ec4695"
+  integrity sha512-AZGZPdL1hU3jCjN2UMJTGhLOYzNUN9Gm+v8BdptYIHUdwz397Et1p+sZRfvAl8pKnnmMdX2Pk9xDRKCGBum6GA==
+  dependencies:
+    "@types/cookie" "^0.4.1"
+    "@types/node" "^16.10.2"
+    cookie "^0.4.0"
+
 core-js-pure@^3.20.2:
   version "3.23.3"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.3.tgz"

From 7d3148c3bd060764262321368c663e51e03550d4 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 20 Dec 2022 19:58:10 +0200
Subject: [PATCH 07/49] remake-index-file-for-netlify

---
 pages/index.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c1e93506..8f1c82ba 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,10 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
-import { getAllPostDocuments } from "helpers/markdownDocumentsReader";
+import {
+  getAllPostDocuments,
+  getUpcomingPosts,
+} from "helpers/markdownDocumentsReader";
 import { PostDocumentWithoutContent } from "interfaces";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
@@ -25,7 +28,10 @@ const UpcomingPosts = dynamic(() => import("@/components/UpcomingPosts"), {
 
 const admin = getCookie("admin");
 
-const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
+const Home: NextPage<{
+  posts: PostDocumentWithoutContent[];
+  upcomingPosts: PostDocumentWithoutContent[];
+}> = ({ posts, upcomingPosts }) => {
   const uniqueTags = Array.from(
     new Set([...posts.map((post) => post.tags).flat()])
   );
@@ -38,11 +44,6 @@ const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
 
     return selectedTags.some((tag) => post.tags.includes(tag));
   });
-  const filteredUpcomingPosts = posts.filter((post) => {
-    if (isPostADraft(post) || isPostInTheFuture(post)) {
-      return true;
-    }
-  });
 
   const pagesCount = Math.ceil(filteredPosts.length / config.posts_per_page);
   const currentPage = useAppSelector((state) => state.pagination.currentPage);
@@ -69,7 +70,7 @@ const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {admin ? <UpcomingPosts posts={filteredUpcomingPosts} /> : null}
+          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
           <Tags uniqueTags={uniqueTags} />
           <Posts posts={postsToRender} />
           <Pagination pagesCount={pagesCount} />
@@ -82,10 +83,12 @@ const Home: NextPage<{ posts: PostDocumentWithoutContent[] }> = ({ posts }) => {
 
 export const getStaticProps = async () => {
   const posts = getAllPostDocuments();
+  const upcomingPosts = getUpcomingPosts();
 
   return {
     props: {
       posts,
+      upcomingPosts,
     },
   };
 };

From 20e352054a320f658159bf2b8b1d325c7eb9c551 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:13:18 +0200
Subject: [PATCH 08/49] Update yarn.lock

---
 yarn.lock | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 09d2c621..9198120e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -183,11 +183,6 @@
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@types/cookie@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
-  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
-
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz"
@@ -768,16 +763,6 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-console-control-strings@^1.0.0, console-control-strings@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
-cookie@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
-
 cookies-next@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-2.1.1.tgz#8d82f1b78fccfb19d9d7c26766fa5707a3ec4695"

From e29a1e194f1dfd3f5df2b8af6e3e71b2175e82bb Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:34:52 +0200
Subject: [PATCH 09/49] remake-functional-to-localStorage

---
 components/AdminProvider.tsx | 29 +++++++++++++++++++++++++++++
 components/Intro.tsx         | 10 ++++++----
 pages/_app.tsx               |  9 ++++++---
 pages/index.tsx              | 17 ++++-------------
 redux/slices/admin.ts        | 24 ++++++++++++++++++++++++
 redux/store.ts               |  2 ++
 6 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 components/AdminProvider.tsx
 create mode 100644 redux/slices/admin.ts

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
new file mode 100644
index 00000000..1465fcbf
--- /dev/null
+++ b/components/AdminProvider.tsx
@@ -0,0 +1,29 @@
+import { Admin, defaultPremissions, setAdmin } from "redux/slices/admin";
+import { useAppDispatch } from "redux/typesHooks";
+
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+
+interface Props {
+  children: JSX.Element;
+}
+
+const getStoragePremissions = (): Admin | undefined => {
+  return localStorage.admin;
+};
+
+const getInitialAdmin = (): Admin =>
+  getStoragePremissions() || defaultPremissions;
+
+const AdminProvider = ({ children }: Props) => {
+  const dispatch = useAppDispatch();
+
+  useIsomorphicLayoutEffect(() => {
+    const admin = getInitialAdmin();
+
+    dispatch(setAdmin(admin));
+  }, [dispatch]);
+
+  return children;
+};
+
+export default AdminProvider;
diff --git a/components/Intro.tsx b/components/Intro.tsx
index 7c8544df..f21b1a62 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,15 +1,17 @@
 import config from "config";
-import { getCookie, setCookie } from "cookies-next";
+import { useDispatch } from "react-redux";
+import { setAdmin } from "redux/slices/admin";
 
 const Intro = () => {
+  const dispatch = useDispatch();
   const handleClick = (event: any) => {
     if (event.detail === 2) {
-      if (getCookie("admin")) {
+      if (localStorage.admin == "true") {
         alert("Turning off editor mode");
-        setCookie("admin", "false");
+        dispatch(setAdmin("false"));
       } else {
         alert("Turning on editor mode");
-        setCookie("admin", "true");
+        dispatch(setAdmin("true"));
       }
     }
   };
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 20479fbc..9a722da7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import Script from "next/script";
 import { Provider } from "react-redux";
 import store from "redux/store";
 
+import AdminProvider from "@/components/AdminProvider";
 import ThemeProvider from "@/components/ThemeProvider";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
@@ -24,9 +25,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => (
           `}
     </Script>
 
-    <ThemeProvider>
-      <Component {...pageProps} />
-    </ThemeProvider>
+    <AdminProvider>
+      <ThemeProvider>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </AdminProvider>
   </Provider>
 );
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 1b32a16b..6adb1b94 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,16 +1,10 @@
 import config from "config";
-import { getCookie } from "cookies-next";
-import {
-  isPostADraft,
-  isPostInTheFuture,
-} from "helpers/checkOfDraftOrFuturePost";
 import {
   getAllPostDocuments,
   getUpcomingPosts,
 } from "helpers/markdownDocumentsReader";
 import { PostDocumentWithoutContent } from "interfaces";
 import type { NextPage } from "next";
-import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useAppSelector } from "redux/typesHooks";
 
@@ -21,12 +15,7 @@ import Pagination from "@/components/Pagination";
 import Posts from "@/components/Posts";
 import StandWithUkraine from "@/components/StandWithUkraine";
 import Tags from "@/components/Tags";
-
-const UpcomingPosts = dynamic(() => import("@/components/UpcomingPosts"), {
-  ssr: false,
-});
-
-const admin = getCookie("admin");
+import UpcomingPosts from "@/components/UpcomingPosts";
 
 const Home: NextPage<{
   posts: PostDocumentWithoutContent[];
@@ -63,6 +52,8 @@ const Home: NextPage<{
     (currentPage + 1) * config.posts_per_page
   );
 
+  const admin = useAppSelector((state) => state.admin);
+
   return (
     <>
       <Head>
@@ -81,7 +72,7 @@ const Home: NextPage<{
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
+          {admin == "true" ? <UpcomingPosts posts={upcomingPosts} /> : null}
           {/* TODO: Implement tags count for the admin user */}
           <Tags uniqueTags={uniqueSortedTags} />
           <Posts posts={postsToRender} />
diff --git a/redux/slices/admin.ts b/redux/slices/admin.ts
new file mode 100644
index 00000000..d5f09d8f
--- /dev/null
+++ b/redux/slices/admin.ts
@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type Admin = "true" | "false";
+
+export const defaultPremissions = "false";
+
+const initialState = defaultPremissions;
+
+export const premissionsSlice = createSlice({
+  name: "admin",
+  initialState,
+  reducers: {
+    setAdmin: (state, action: PayloadAction<Admin>) => {
+      const admin = action.payload;
+      localStorage.admin = admin;
+
+      return (state = admin);
+    },
+  },
+});
+
+export const { setAdmin } = premissionsSlice.actions;
+
+export default premissionsSlice.reducer;
diff --git a/redux/store.ts b/redux/store.ts
index 2acf6e1e..d2e6ae99 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,5 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 
+import premissionsSlice from "./slices/admin";
 import paginationSlice from "./slices/pagination";
 import selectedTagsSlice from "./slices/selectedTags";
 import themeSlice from "./slices/theme";
@@ -9,6 +10,7 @@ const store = configureStore({
     selectedTags: selectedTagsSlice,
     pagination: paginationSlice,
     theme: themeSlice,
+    admin: premissionsSlice,
   },
 });
 

From 613723932c2e076d37409c7bb3c236ccc3985520 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:42:21 +0200
Subject: [PATCH 10/49] add-breakpoint

---
 components/Intro.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index f21b1a62..6f9f875a 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -4,6 +4,7 @@ import { setAdmin } from "redux/slices/admin";
 
 const Intro = () => {
   const dispatch = useDispatch();
+
   const handleClick = (event: any) => {
     if (event.detail === 2) {
       if (localStorage.admin == "true") {

From ab448bacbe14b5fe11d1840cb7a6ef9d9608ad14 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:45:11 +0200
Subject: [PATCH 11/49] remove-useful-npm

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 5ea4dc75..bdf25218 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.5",
-    "cookies-next": "^2.1.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "gray-matter": "^4.0.3",
     "next": "^13.0.6",

From 18672bfea2dd29892524c9af720faba199d57b7c Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:49:40 +0200
Subject: [PATCH 12/49] change-name-slice

---
 components/AdminProvider.tsx |  4 ++--
 redux/slices/admin.ts        | 10 +++++-----
 redux/store.ts               |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index 1465fcbf..bc424cda 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -1,4 +1,4 @@
-import { Admin, defaultPremissions, setAdmin } from "redux/slices/admin";
+import { Admin, defaultPermissions, setAdmin } from "redux/slices/admin";
 import { useAppDispatch } from "redux/typesHooks";
 
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
@@ -12,7 +12,7 @@ const getStoragePremissions = (): Admin | undefined => {
 };
 
 const getInitialAdmin = (): Admin =>
-  getStoragePremissions() || defaultPremissions;
+  getStoragePremissions() || defaultPermissions;
 
 const AdminProvider = ({ children }: Props) => {
   const dispatch = useAppDispatch();
diff --git a/redux/slices/admin.ts b/redux/slices/admin.ts
index d5f09d8f..17a81687 100644
--- a/redux/slices/admin.ts
+++ b/redux/slices/admin.ts
@@ -2,11 +2,11 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export type Admin = "true" | "false";
 
-export const defaultPremissions = "false";
+export const defaultPermissions = "false";
 
-const initialState = defaultPremissions;
+const initialState = defaultPermissions;
 
-export const premissionsSlice = createSlice({
+export const permissionsSlice = createSlice({
   name: "admin",
   initialState,
   reducers: {
@@ -19,6 +19,6 @@ export const premissionsSlice = createSlice({
   },
 });
 
-export const { setAdmin } = premissionsSlice.actions;
+export const { setAdmin } = permissionsSlice.actions;
 
-export default premissionsSlice.reducer;
+export default permissionsSlice.reducer;
diff --git a/redux/store.ts b/redux/store.ts
index d2e6ae99..ca168423 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,6 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 
-import premissionsSlice from "./slices/admin";
+import permissionsSlice from "./slices/admin";
 import paginationSlice from "./slices/pagination";
 import selectedTagsSlice from "./slices/selectedTags";
 import themeSlice from "./slices/theme";
@@ -10,7 +10,7 @@ const store = configureStore({
     selectedTags: selectedTagsSlice,
     pagination: paginationSlice,
     theme: themeSlice,
-    admin: premissionsSlice,
+    admin: permissionsSlice,
   },
 });
 

From 6475744bfa6da4ae442fb8427a5d941a6539e01e Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:52:22 +0200
Subject: [PATCH 13/49] remove-useful-npm

---
 yarn.lock | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9198120e..4db60ca2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -237,16 +237,6 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-18.0.3.tgz"
   integrity sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==
 
-"@types/node@^16.10.2":
-  version "16.18.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.10.tgz#d7415ef18c94f8d4e4a82ebcc8b8999f965d8920"
-  integrity sha512-XU1+v7h81p7145ddPfjv7jtWvkSilpcnON3mQ+bDi9Yuf7OI56efOglXRyXWgQ57xH3fEQgh7WOJMncRHVew5w==
-
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
-  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
-
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
@@ -762,15 +752,6 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
-
-cookies-next@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-2.1.1.tgz#8d82f1b78fccfb19d9d7c26766fa5707a3ec4695"
-  integrity sha512-AZGZPdL1hU3jCjN2UMJTGhLOYzNUN9Gm+v8BdptYIHUdwz397Et1p+sZRfvAl8pKnnmMdX2Pk9xDRKCGBum6GA==
-  dependencies:
-    "@types/cookie" "^0.4.1"
-    "@types/node" "^16.10.2"
-    cookie "^0.4.0"
     
 core-js-pure@^3.20.2:
   version "3.23.3"

From a5e63d1cdb8bcc3566cca8b151f85f95b308f695 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:53:06 +0200
Subject: [PATCH 14/49] Update yarn.lock

---
 yarn.lock | 1 -
 1 file changed, 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 4db60ca2..302d6cf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -752,7 +752,6 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
-    
 core-js-pure@^3.20.2:
   version "3.23.3"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.3.tgz"

From 08d4a62e0f98950873249443aa345811da36ebdc Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:55:41 +0200
Subject: [PATCH 15/49] Update yarn.lock

---
 yarn.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/yarn.lock b/yarn.lock
index 302d6cf1..6f9176d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -752,6 +752,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+  
 core-js-pure@^3.20.2:
   version "3.23.3"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.3.tgz"

From b1a39f980e084a8c5cb7f0577c69159d06d122f3 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 22 Dec 2022 15:54:03 +0200
Subject: [PATCH 16/49] change-name

---
 components/AdminProvider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index bc424cda..289a59ee 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -7,12 +7,12 @@ interface Props {
   children: JSX.Element;
 }
 
-const getStoragePremissions = (): Admin | undefined => {
+const getStoragePermissions = (): Admin | undefined => {
   return localStorage.admin;
 };
 
 const getInitialAdmin = (): Admin =>
-  getStoragePremissions() || defaultPermissions;
+  getStoragePermissions() || defaultPermissions;
 
 const AdminProvider = ({ children }: Props) => {
   const dispatch = useAppDispatch();

From 2033da2f3e62296b3107ae37b5103405aa84409b Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Fri, 23 Dec 2022 12:36:41 +0200
Subject: [PATCH 17/49] change-double-click-event

---
 components/Intro.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 6f9f875a..16c0dae3 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -5,15 +5,13 @@ import { setAdmin } from "redux/slices/admin";
 const Intro = () => {
   const dispatch = useDispatch();
 
-  const handleClick = (event: any) => {
-    if (event.detail === 2) {
-      if (localStorage.admin == "true") {
-        alert("Turning off editor mode");
-        dispatch(setAdmin("false"));
-      } else {
-        alert("Turning on editor mode");
-        dispatch(setAdmin("true"));
-      }
+  const handleClick = () => {
+    if (localStorage.admin == "true") {
+      alert("Turning off editor mode");
+      dispatch(setAdmin("false"));
+    } else {
+      alert("Turning on editor mode");
+      dispatch(setAdmin("true"));
     }
   };
 
@@ -24,7 +22,7 @@ const Intro = () => {
           <div className="intro-avatar">
             <div className="image">
               <img
-                onClick={handleClick}
+                onDoubleClick={handleClick}
                 src="/images/author-avatar.jpg"
                 alt="author-avatar"
                 width={90}

From 81cbccb4baa58db9cab85fd0e7ef46a0fa7df9b2 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Fri, 23 Dec 2022 12:53:40 +0200
Subject: [PATCH 18/49] remove-useless-fragment

---
 components/UpcomingPosts.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 83d6e7cf..6d05eced 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -7,18 +7,16 @@ interface Props {
 }
 
 const UpcomingPosts = ({ posts }: Props) => (
-  <>
-    <div style={{ marginBottom: "50px" }}>
-      <div className="intro-text" style={{ marginBottom: "36px" }}>
-        <h1>Upcoming Posts</h1>
-      </div>
-      <ul className="posts-list">
-        {posts.map((post, index) => (
-          <PostCard key={index} post={post} />
-        ))}
-      </ul>
+  <div style={{ marginBottom: "50px" }}>
+    <div className="intro-text" style={{ marginBottom: "36px" }}>
+      <h1>Upcoming Posts</h1>
     </div>
-  </>
+    <ul className="posts-list">
+      {posts.map((post, index) => (
+        <PostCard key={index} post={post} />
+      ))}
+    </ul>
+  </div>
 );
 
 export default UpcomingPosts;

From 1618fcafd765ebd2c0948a78f94679cba2773be5 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 9 Jan 2023 19:02:37 +0200
Subject: [PATCH 19/49] fix-by-code-review-&-improvements

---
 components/AdminProvider.tsx       |  9 ++++-----
 components/Intro.tsx               | 26 +++++++++++++++++++++-----
 components/Post/LatestPosts.tsx    | 30 ++++++++++++------------------
 components/Post/PostContent.tsx    |  6 ++----
 components/PostCard.tsx            | 25 ++++++++++---------------
 components/UpcomingPosts.tsx       |  3 ++-
 helpers/isUpcomingPost.ts          |  9 +++++++++
 helpers/markdownDocumentsReader.ts |  6 +++---
 pages/index.tsx                    |  2 +-
 public/images/edit.svg             | 11 +++++++++++
 redux/slices/admin.ts              | 12 +++++-------
 redux/store.ts                     |  4 ++--
 styles/main.scss                   | 19 +++++++++++++++++++
 styles/responsive.scss             |  5 +++++
 14 files changed, 106 insertions(+), 61 deletions(-)
 create mode 100644 helpers/isUpcomingPost.ts
 create mode 100644 public/images/edit.svg

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index 289a59ee..ccdfd14a 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -1,4 +1,4 @@
-import { Admin, defaultPermissions, setAdmin } from "redux/slices/admin";
+import { Admin, setAdmin } from "redux/slices/admin";
 import { useAppDispatch } from "redux/typesHooks";
 
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
@@ -7,12 +7,11 @@ interface Props {
   children: JSX.Element;
 }
 
-const getStoragePermissions = (): Admin | undefined => {
-  return localStorage.admin;
+const getAdmin = (): Admin | undefined => {
+  return JSON.parse(localStorage.admin);
 };
 
-const getInitialAdmin = (): Admin =>
-  getStoragePermissions() || defaultPermissions;
+const getInitialAdmin = (): Admin => getAdmin() || false;
 
 const AdminProvider = ({ children }: Props) => {
   const dispatch = useAppDispatch();
diff --git a/components/Intro.tsx b/components/Intro.tsx
index 16c0dae3..0138179d 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,17 +1,18 @@
 import config from "config";
 import { useDispatch } from "react-redux";
 import { setAdmin } from "redux/slices/admin";
+import { useAppSelector } from "redux/typesHooks";
 
 const Intro = () => {
   const dispatch = useDispatch();
 
+  const admin = useAppSelector((state) => state.admin);
+
   const handleClick = () => {
     if (localStorage.admin == "true") {
-      alert("Turning off editor mode");
-      dispatch(setAdmin("false"));
+      dispatch(setAdmin(false));
     } else {
-      alert("Turning on editor mode");
-      dispatch(setAdmin("true"));
+      dispatch(setAdmin(true));
     }
   };
 
@@ -20,7 +21,12 @@ const Intro = () => {
       <div className="container">
         <div className="intro-content">
           <div className="intro-avatar">
-            <div className="image">
+            <div
+              className="image"
+              style={
+                admin ? { border: "3px solid #fe6c0a" } : { border: "none" }
+              }
+            >
               <img
                 onDoubleClick={handleClick}
                 src="/images/author-avatar.jpg"
@@ -28,6 +34,16 @@ const Intro = () => {
                 width={90}
                 height={90}
               />
+              {admin ? (
+                <div className="edit-background">
+                  <img
+                    src="/images/edit.svg"
+                    alt="edit"
+                    width={19}
+                    height={19}
+                  />
+                </div>
+              ) : null}
             </div>
             <div className="name">{config.author_name}</div>
             <div className="job">{config.author_position}</div>
diff --git a/components/Post/LatestPosts.tsx b/components/Post/LatestPosts.tsx
index 80a3b1bd..e6d019fc 100644
--- a/components/Post/LatestPosts.tsx
+++ b/components/Post/LatestPosts.tsx
@@ -1,7 +1,4 @@
-import {
-  isPostADraft,
-  isPostInTheFuture,
-} from "helpers/checkOfDraftOrFuturePost";
+import { isUpcomingPost } from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
@@ -21,21 +18,17 @@ const LatestPosts = ({ latestPosts }: Props) => {
       {latestPosts.map((post) => (
         <div className="related-posts-block" key={post.title}>
           <Link href={post.slug} className="image">
-
             <Image
               src={post.featuredImage ?? "/post-images/draft.webp"}
               alt="blog post image"
               fill
               sizes="100vw"
               style={{
-                filter:
-                  isPostADraft(post) || isPostInTheFuture(post)
-                    ? "grayscale(50%)"
-                    : "none",
-
-                objectFit: "cover"
-              }} />
+                filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
 
+                objectFit: "cover",
+              }}
+            />
           </Link>
           <div className="inner">
             <Link href={post.slug} className="name">
@@ -43,10 +36,13 @@ const LatestPosts = ({ latestPosts }: Props) => {
             </Link>
             <div className="tags">
               {post.tags.map((tag) => (
-                (<Link href="/" key={tag} onClick={() => dispatch(setTags([tag]))}>
+                <Link
+                  href="/"
+                  key={tag}
+                  onClick={() => dispatch(setTags([tag]))}
+                >
                   #{tag}
-
-                </Link>)
+                </Link>
               ))}
             </div>
           </div>
@@ -54,9 +50,7 @@ const LatestPosts = ({ latestPosts }: Props) => {
       ))}
 
       <Link href="/" className="btn" onClick={() => dispatch(resetTags())}>
-        
-          See all posts
-        
+        See all posts
       </Link>
     </div>
   );
diff --git a/components/Post/PostContent.tsx b/components/Post/PostContent.tsx
index c1adc476..e90a4fdc 100644
--- a/components/Post/PostContent.tsx
+++ b/components/Post/PostContent.tsx
@@ -3,6 +3,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
+import { isUpcomingPost } from "helpers/isUpcomingPost";
 import toHumanReadableDate from "helpers/toHumanReadableDate";
 import { PostDocument } from "interfaces";
 import Head from "next/head";
@@ -53,10 +54,7 @@ const PostContent = ({ post }: Props) => {
           width={790}
           height={394}
           style={{
-            filter:
-              isPostADraft(post) || isPostInTheFuture(post)
-                ? "grayscale(50%)"
-                : "none",
+            filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
             borderRadius: "3px",
           }}
         />
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index 7d30ab09..80e1bcb8 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -2,6 +2,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
+import { isUpcomingPost } from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
@@ -57,14 +58,11 @@ const PostCard = ({ post }: Props) => {
 
       <div
         className={`posts-list-block ${
-          isPostADraft(post) || isPostInTheFuture(post)
-            ? "posts-list-block-draft-or-future"
-            : ""
+          isUpcomingPost(post) ? "posts-list-block-draft-or-future" : ""
         }`}
       >
         <div className="content">
           <Link href={`/post/${post.slug}`} className="post-img">
-
             <Image
               src={post.featuredImage ?? "/post-images/draft.webp"}
               alt="blog post image"
@@ -75,27 +73,24 @@ const PostCard = ({ post }: Props) => {
               fill
               sizes="100vw"
               style={{
-                filter:
-                  isPostADraft(post) || isPostInTheFuture(post)
-                    ? "grayscale(50%)"
-                    : "none",
-
-                objectFit: "cover"
-              }} />
+                filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
 
+                objectFit: "cover",
+              }}
+            />
           </Link>
           <div className="tags">
             {post.tags.map((tag) => (
-              (<Link
+              <Link
                 href="/"
                 key={tag}
                 onClick={(event) => {
                   event.preventDefault();
                   dispatch(setTags([tag]));
-                }}>
+                }}
+              >
                 #{tag}
-
-              </Link>)
+              </Link>
             ))}
           </div>
           <Link href={`/post/${post.slug}`} className="link">
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 6d05eced..de459aad 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const UpcomingPosts = ({ posts }: Props) => (
-  <div style={{ marginBottom: "50px" }}>
+  <div style={{ marginBottom: "70px" }}>
     <div className="intro-text" style={{ marginBottom: "36px" }}>
       <h1>Upcoming Posts</h1>
     </div>
@@ -16,6 +16,7 @@ const UpcomingPosts = ({ posts }: Props) => (
         <PostCard key={index} post={post} />
       ))}
     </ul>
+    <hr />
   </div>
 );
 
diff --git a/helpers/isUpcomingPost.ts b/helpers/isUpcomingPost.ts
new file mode 100644
index 00000000..933eee55
--- /dev/null
+++ b/helpers/isUpcomingPost.ts
@@ -0,0 +1,9 @@
+import { PostDocumentWithoutContent } from "interfaces";
+
+import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
+
+export function isUpcomingPost(post: PostDocumentWithoutContent) {
+  if (isPostADraft(post) || isPostInTheFuture(post)) {
+    return true;
+  } else return false;
+}
diff --git a/helpers/markdownDocumentsReader.ts b/helpers/markdownDocumentsReader.ts
index 176fb157..82a481df 100644
--- a/helpers/markdownDocumentsReader.ts
+++ b/helpers/markdownDocumentsReader.ts
@@ -3,7 +3,7 @@ import matter from "gray-matter";
 import { PostDocument, PostDocumentWithoutContent } from "interfaces";
 import { join } from "path";
 
-import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
+import { isUpcomingPost } from "./isUpcomingPost";
 
 const documentsDirectory = join(process.cwd(), "content/posts");
 
@@ -31,7 +31,7 @@ export function getAllPostDocuments(): PostDocumentWithoutContent[] {
         return true;
       }
 
-      if (isPostADraft(post) || isPostInTheFuture(post)) {
+      if (isUpcomingPost(post)) {
         return false;
       }
 
@@ -51,7 +51,7 @@ export function getUpcomingPosts(): PostDocumentWithoutContent[] {
   const docs = slugs
     .map((slug) => getPostDocumentBySlug(slug))
     .filter((post: PostDocument) => {
-      if (isPostADraft(post) || isPostInTheFuture(post)) {
+      if (isUpcomingPost(post)) {
         return true;
       }
     })
diff --git a/pages/index.tsx b/pages/index.tsx
index 6adb1b94..97525146 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -72,7 +72,7 @@ const Home: NextPage<{
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {admin == "true" ? <UpcomingPosts posts={upcomingPosts} /> : null}
+          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
           {/* TODO: Implement tags count for the admin user */}
           <Tags uniqueTags={uniqueSortedTags} />
           <Posts posts={postsToRender} />
diff --git a/public/images/edit.svg b/public/images/edit.svg
new file mode 100644
index 00000000..112e96a3
--- /dev/null
+++ b/public/images/edit.svg
@@ -0,0 +1,11 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1638_2521)">
+<path d="M7.61418 7.6944L6.50815 11.3827C6.41422 11.6964 6.50003 12.0368 6.73167 12.2681C6.90098 12.4374 7.12857 12.529 7.36137 12.529C7.44689 12.529 7.533 12.5169 7.61708 12.4914L11.3057 11.3856C11.4469 11.3433 11.5756 11.2667 11.6797 11.1624L18.4423 4.39979C18.6093 4.23279 18.7032 4.00608 18.7032 3.77008C18.7032 3.53409 18.6093 3.30737 18.4423 3.14038L15.8594 0.557801C15.5115 0.2099 14.9479 0.2099 14.6 0.557801L7.83771 7.32041C7.73333 7.42478 7.6568 7.55292 7.61418 7.6944ZM9.25598 8.42093L15.2297 2.4469L16.5529 3.77008L10.5792 9.74411L8.68948 10.3106L9.25598 8.42093Z" fill="black"/>
+<path d="M17.8125 8.60938C17.3205 8.60938 16.9219 9.0083 16.9219 9.5V15.4375C16.9219 16.2562 16.2559 16.9219 15.4375 16.9219H3.5625C2.74406 16.9219 2.07812 16.2562 2.07812 15.4375V3.5625C2.07812 2.74377 2.74406 2.07812 3.5625 2.07812H9.5C9.99199 2.07812 10.3906 1.6792 10.3906 1.1875C10.3906 0.695804 9.99199 0.296875 9.5 0.296875H3.5625C1.76183 0.296875 0.296875 1.76211 0.296875 3.5625V15.4375C0.296875 17.2379 1.76183 18.7031 3.5625 18.7031H15.4375C17.2382 18.7031 18.7031 17.2379 18.7031 15.4375V9.5C18.7031 9.0083 18.3045 8.60938 17.8125 8.60938Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1638_2521">
+<rect width="19" height="19" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/redux/slices/admin.ts b/redux/slices/admin.ts
index 17a81687..169bbaef 100644
--- a/redux/slices/admin.ts
+++ b/redux/slices/admin.ts
@@ -1,12 +1,10 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-export type Admin = "true" | "false";
+export type Admin = true | false;
 
-export const defaultPermissions = "false";
+const initialState = false;
 
-const initialState = defaultPermissions;
-
-export const permissionsSlice = createSlice({
+export const adminSlice = createSlice({
   name: "admin",
   initialState,
   reducers: {
@@ -19,6 +17,6 @@ export const permissionsSlice = createSlice({
   },
 });
 
-export const { setAdmin } = permissionsSlice.actions;
+export const { setAdmin } = adminSlice.actions;
 
-export default permissionsSlice.reducer;
+export default adminSlice.reducer;
diff --git a/redux/store.ts b/redux/store.ts
index ca168423..9d8b5e4d 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,6 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 
-import permissionsSlice from "./slices/admin";
+import adminSlice from "./slices/admin";
 import paginationSlice from "./slices/pagination";
 import selectedTagsSlice from "./slices/selectedTags";
 import themeSlice from "./slices/theme";
@@ -10,7 +10,7 @@ const store = configureStore({
     selectedTags: selectedTagsSlice,
     pagination: paginationSlice,
     theme: themeSlice,
-    admin: permissionsSlice,
+    admin: adminSlice,
   },
 });
 
diff --git a/styles/main.scss b/styles/main.scss
index 65b0263b..dbc9484d 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -53,6 +53,9 @@ hr {
   height: 1px;
   border: none;
   background: #e8e8e8;
+  position: absolute;
+  width: 100%;
+  left: 0;
 }
 
 .page {
@@ -440,6 +443,7 @@ header {
 }
 
 .intro-avatar {
+  position: relative;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: auto;
@@ -464,6 +468,21 @@ header {
   object-fit: cover;
 }
 
+.intro-avatar .image .edit-background {
+  position: absolute;
+  width: 39px;
+  height: 39px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  top: 36%;
+  left: 36%;
+}
+
+.intro-avatar .image .edit-background img {
+  object-fit: none;
+}
+
 .intro-avatar .name {
   color: #3a3a3a;
   font-size: 16px;
diff --git a/styles/responsive.scss b/styles/responsive.scss
index 891087fb..334ef217 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -259,6 +259,11 @@
     margin-bottom: 20px;
   }
 
+  .intro-avatar .image .edit-background {
+    top: 43%;
+    left: calc(50% - 18px);
+  }
+
   .posts-list li {
     width: calc(50% - 10px);
   }

From 5848e5e1e40776de156c4f296cb8476b45e47fcb Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 9 Jan 2023 20:51:39 +0200
Subject: [PATCH 20/49] remove-admin-type

---
 components/AdminProvider.tsx | 6 +++---
 redux/slices/admin.ts        | 4 +---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index ccdfd14a..28e32887 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -1,4 +1,4 @@
-import { Admin, setAdmin } from "redux/slices/admin";
+import { setAdmin } from "redux/slices/admin";
 import { useAppDispatch } from "redux/typesHooks";
 
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
@@ -7,11 +7,11 @@ interface Props {
   children: JSX.Element;
 }
 
-const getAdmin = (): Admin | undefined => {
+const getAdmin = (): boolean | undefined => {
   return JSON.parse(localStorage.admin);
 };
 
-const getInitialAdmin = (): Admin => getAdmin() || false;
+const getInitialAdmin = (): boolean => getAdmin() || false;
 
 const AdminProvider = ({ children }: Props) => {
   const dispatch = useAppDispatch();
diff --git a/redux/slices/admin.ts b/redux/slices/admin.ts
index 169bbaef..142d6252 100644
--- a/redux/slices/admin.ts
+++ b/redux/slices/admin.ts
@@ -1,14 +1,12 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-export type Admin = true | false;
-
 const initialState = false;
 
 export const adminSlice = createSlice({
   name: "admin",
   initialState,
   reducers: {
-    setAdmin: (state, action: PayloadAction<Admin>) => {
+    setAdmin: (state, action: PayloadAction<boolean>) => {
       const admin = action.payload;
       localStorage.admin = admin;
 

From b276f8415bf16d1652584c636791d720923e665a Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 10:14:37 +0200
Subject: [PATCH 21/49] fix-hr-element-&-remove-class-edit-background

---
 components/Intro.tsx         | 15 +++++++--------
 components/UpcomingPosts.tsx |  8 +++++++-
 styles/main.scss             |  8 +-------
 styles/responsive.scss       |  2 +-
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 0138179d..77e0156c 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -35,14 +35,13 @@ const Intro = () => {
                 height={90}
               />
               {admin ? (
-                <div className="edit-background">
-                  <img
-                    src="/images/edit.svg"
-                    alt="edit"
-                    width={19}
-                    height={19}
-                  />
-                </div>
+                <img
+                  className="edit"
+                  src="/images/edit.svg"
+                  alt="edit"
+                  width={19}
+                  height={19}
+                />
               ) : null}
             </div>
             <div className="name">{config.author_name}</div>
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index de459aad..06d03b22 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -16,7 +16,13 @@ const UpcomingPosts = ({ posts }: Props) => (
         <PostCard key={index} post={post} />
       ))}
     </ul>
-    <hr />
+    <hr
+      style={{
+        position: "absolute",
+        width: "100%",
+        left: 0,
+      }}
+    />
   </div>
 );
 
diff --git a/styles/main.scss b/styles/main.scss
index dbc9484d..c7e87238 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -53,9 +53,6 @@ hr {
   height: 1px;
   border: none;
   background: #e8e8e8;
-  position: absolute;
-  width: 100%;
-  left: 0;
 }
 
 .page {
@@ -468,7 +465,7 @@ header {
   object-fit: cover;
 }
 
-.intro-avatar .image .edit-background {
+.intro-avatar .image .edit {
   position: absolute;
   width: 39px;
   height: 39px;
@@ -477,9 +474,6 @@ header {
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   top: 36%;
   left: 36%;
-}
-
-.intro-avatar .image .edit-background img {
   object-fit: none;
 }
 
diff --git a/styles/responsive.scss b/styles/responsive.scss
index 334ef217..38b469e5 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -259,7 +259,7 @@
     margin-bottom: 20px;
   }
 
-  .intro-avatar .image .edit-background {
+  .intro-avatar .image .edit {
     top: 43%;
     left: calc(50% - 18px);
   }

From 43ac166fa4c647e8ec8a88b0dd87db3a948763cb Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 11:05:33 +0200
Subject: [PATCH 22/49] remove-localstorage-check-to-boolean

---
 components/Intro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 77e0156c..7386695c 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -9,7 +9,7 @@ const Intro = () => {
   const admin = useAppSelector((state) => state.admin);
 
   const handleClick = () => {
-    if (localStorage.admin == "true") {
+    if (admin == true) {
       dispatch(setAdmin(false));
     } else {
       dispatch(setAdmin(true));

From 279304022dc2b1a77dcf75396f339e4d19d16e9b Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 11:54:01 +0200
Subject: [PATCH 23/49] test-to-fix-error

---
 pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 97525146..5ab04d60 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -72,7 +72,7 @@ const Home: NextPage<{
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
+          {/* {admin ? <UpcomingPosts posts={upcomingPosts} /> : null} */}
           {/* TODO: Implement tags count for the admin user */}
           <Tags uniqueTags={uniqueSortedTags} />
           <Posts posts={postsToRender} />

From e48bef96f6424123c2f20fc3ab44335eb50f2b0a Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 11:57:47 +0200
Subject: [PATCH 24/49] test-to-fix-error

---
 pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 5ab04d60..31ad74b4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -86,12 +86,12 @@ const Home: NextPage<{
 
 export const getStaticProps = async () => {
   const posts = getAllPostDocuments();
-  const upcomingPosts = getUpcomingPosts();
+  //   const upcomingPosts = getUpcomingPosts();
 
   return {
     props: {
       posts,
-      upcomingPosts,
+      //   upcomingPosts,
     },
   };
 };

From 628f9badbecef07f0a8e99372ee6836b41e03fc0 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 12:08:21 +0200
Subject: [PATCH 25/49] test-to-fix-error

---
 components/AdminProvider.tsx | 2 +-
 pages/index.tsx              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index 28e32887..fb57c169 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const getAdmin = (): boolean | undefined => {
-  return JSON.parse(localStorage.admin);
+  return localStorage.admin;
 };
 
 const getInitialAdmin = (): boolean => getAdmin() || false;
diff --git a/pages/index.tsx b/pages/index.tsx
index 31ad74b4..97525146 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -72,7 +72,7 @@ const Home: NextPage<{
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {/* {admin ? <UpcomingPosts posts={upcomingPosts} /> : null} */}
+          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
           {/* TODO: Implement tags count for the admin user */}
           <Tags uniqueTags={uniqueSortedTags} />
           <Posts posts={postsToRender} />
@@ -86,12 +86,12 @@ const Home: NextPage<{
 
 export const getStaticProps = async () => {
   const posts = getAllPostDocuments();
-  //   const upcomingPosts = getUpcomingPosts();
+  const upcomingPosts = getUpcomingPosts();
 
   return {
     props: {
       posts,
-      //   upcomingPosts,
+      upcomingPosts,
     },
   };
 };

From cbc0c8de3924674971ab2769dc1a422bb4dde38b Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 12:18:09 +0200
Subject: [PATCH 26/49] fix-problem

---
 components/AdminProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index fb57c169..94cd38f5 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const getAdmin = (): boolean | undefined => {
-  return localStorage.admin;
+  return localStorage.admin === "true" ? true : false;
 };
 
 const getInitialAdmin = (): boolean => getAdmin() || false;

From 331d2605907731e831a57c706aa3e0218c40d514 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 12:56:24 +0200
Subject: [PATCH 27/49] correct-check-localStorage

---
 components/AdminProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/AdminProvider.tsx b/components/AdminProvider.tsx
index 94cd38f5..c0f69a52 100644
--- a/components/AdminProvider.tsx
+++ b/components/AdminProvider.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const getAdmin = (): boolean | undefined => {
-  return localStorage.admin === "true" ? true : false;
+  return localStorage.admin === "true";
 };
 
 const getInitialAdmin = (): boolean => getAdmin() || false;

From 0d00cee8a8569ac1d180657eb7fe35fcd2725eaa Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 10 Jan 2023 18:44:27 +0200
Subject: [PATCH 28/49] change-equation-&-change-helper-usUpcomingPost

---
 components/Intro.tsx      | 2 +-
 helpers/isUpcomingPost.ts | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 7386695c..f3b6455f 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -9,7 +9,7 @@ const Intro = () => {
   const admin = useAppSelector((state) => state.admin);
 
   const handleClick = () => {
-    if (admin == true) {
+    if (admin === true) {
       dispatch(setAdmin(false));
     } else {
       dispatch(setAdmin(true));
diff --git a/helpers/isUpcomingPost.ts b/helpers/isUpcomingPost.ts
index 933eee55..d6c395c1 100644
--- a/helpers/isUpcomingPost.ts
+++ b/helpers/isUpcomingPost.ts
@@ -3,7 +3,5 @@ import { PostDocumentWithoutContent } from "interfaces";
 import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
 
 export function isUpcomingPost(post: PostDocumentWithoutContent) {
-  if (isPostADraft(post) || isPostInTheFuture(post)) {
-    return true;
-  } else return false;
+  return isPostADraft(post) || isPostInTheFuture(post);
 }

From d1566c7c30aa6fb778a70398c7d8a19dae0e8e40 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 12 Jan 2023 13:22:38 +0200
Subject: [PATCH 29/49] changes-by-review

changed isUpcomingPost helper
changed by remarks
commit without animation
---
 components/Intro.tsx               | 34 +++++++++++++++---------------
 components/Post/LatestPosts.tsx    |  2 +-
 components/Post/PostContent.tsx    |  2 +-
 components/PostCard.tsx            |  4 ++--
 components/UpcomingPosts.tsx       |  8 +------
 helpers/isUpcomingPost.ts          |  2 +-
 helpers/markdownDocumentsReader.ts |  2 +-
 pages/index.tsx                    |  2 +-
 styles/main.scss                   | 11 +++++-----
 styles/responsive.scss             |  7 +++---
 10 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index f3b6455f..d05ec3ec 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -23,26 +23,26 @@ const Intro = () => {
           <div className="intro-avatar">
             <div
               className="image"
-              style={
-                admin ? { border: "3px solid #fe6c0a" } : { border: "none" }
-              }
+              style={{ border: admin ? "3px solid #fe6c0a" : "none" }}
             >
-              <img
-                onDoubleClick={handleClick}
-                src="/images/author-avatar.jpg"
-                alt="author-avatar"
-                width={90}
-                height={90}
-              />
-              {admin ? (
+              <div className={`wrapper`}>
                 <img
-                  className="edit"
-                  src="/images/edit.svg"
-                  alt="edit"
-                  width={19}
-                  height={19}
+                  onDoubleClick={handleClick}
+                  src="/images/author-avatar.jpg"
+                  alt="author-avatar"
+                  width={90}
+                  height={90}
                 />
-              ) : null}
+                {admin && (
+                  <img
+                    className="editor-icon"
+                    src="/images/edit.svg"
+                    alt="edit"
+                    width={19}
+                    height={19}
+                  />
+                )}
+              </div>
             </div>
             <div className="name">{config.author_name}</div>
             <div className="job">{config.author_position}</div>
diff --git a/components/Post/LatestPosts.tsx b/components/Post/LatestPosts.tsx
index e6d019fc..0da5526d 100644
--- a/components/Post/LatestPosts.tsx
+++ b/components/Post/LatestPosts.tsx
@@ -1,4 +1,4 @@
-import { isUpcomingPost } from "helpers/isUpcomingPost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/components/Post/PostContent.tsx b/components/Post/PostContent.tsx
index e90a4fdc..4a2449c8 100644
--- a/components/Post/PostContent.tsx
+++ b/components/Post/PostContent.tsx
@@ -3,7 +3,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
-import { isUpcomingPost } from "helpers/isUpcomingPost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import toHumanReadableDate from "helpers/toHumanReadableDate";
 import { PostDocument } from "interfaces";
 import Head from "next/head";
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index 80e1bcb8..270ab69c 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -2,7 +2,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
-import { isUpcomingPost } from "helpers/isUpcomingPost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
@@ -58,7 +58,7 @@ const PostCard = ({ post }: Props) => {
 
       <div
         className={`posts-list-block ${
-          isUpcomingPost(post) ? "posts-list-block-draft-or-future" : ""
+          isUpcomingPost(post) ? "upcoming-posts-list-block" : ""
         }`}
       >
         <div className="content">
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 06d03b22..97be9130 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -16,13 +16,7 @@ const UpcomingPosts = ({ posts }: Props) => (
         <PostCard key={index} post={post} />
       ))}
     </ul>
-    <hr
-      style={{
-        position: "absolute",
-        width: "100%",
-        left: 0,
-      }}
-    />
+    <hr style={{ position: "absolute", width: "100%", left: 0 }} />
   </div>
 );
 
diff --git a/helpers/isUpcomingPost.ts b/helpers/isUpcomingPost.ts
index d6c395c1..01fb40b0 100644
--- a/helpers/isUpcomingPost.ts
+++ b/helpers/isUpcomingPost.ts
@@ -2,6 +2,6 @@ import { PostDocumentWithoutContent } from "interfaces";
 
 import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
 
-export function isUpcomingPost(post: PostDocumentWithoutContent) {
+export default function isUpcomingPost(post: PostDocumentWithoutContent) {
   return isPostADraft(post) || isPostInTheFuture(post);
 }
diff --git a/helpers/markdownDocumentsReader.ts b/helpers/markdownDocumentsReader.ts
index 82a481df..00b67015 100644
--- a/helpers/markdownDocumentsReader.ts
+++ b/helpers/markdownDocumentsReader.ts
@@ -3,7 +3,7 @@ import matter from "gray-matter";
 import { PostDocument, PostDocumentWithoutContent } from "interfaces";
 import { join } from "path";
 
-import { isUpcomingPost } from "./isUpcomingPost";
+import isUpcomingPost from "./isUpcomingPost";
 
 const documentsDirectory = join(process.cwd(), "content/posts");
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 97525146..d304ddad 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -72,7 +72,7 @@ const Home: NextPage<{
       <Intro />
       <section className="simple-section">
         <div className="container">
-          {admin ? <UpcomingPosts posts={upcomingPosts} /> : null}
+          {admin && <UpcomingPosts posts={upcomingPosts} />}
           {/* TODO: Implement tags count for the admin user */}
           <Tags uniqueTags={uniqueSortedTags} />
           <Posts posts={postsToRender} />
diff --git a/styles/main.scss b/styles/main.scss
index c7e87238..ea1f76cf 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -458,23 +458,24 @@ header {
   margin: 0 auto 16px;
 }
 
-.intro-avatar .image img {
+.intro-avatar .image .wrapper img {
   display: block;
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
-.intro-avatar .image .edit {
+.intro-avatar .image .wrapper .editor-icon {
   position: absolute;
   width: 39px;
   height: 39px;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  top: 36%;
-  left: 36%;
   object-fit: none;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .intro-avatar .name {
@@ -1483,7 +1484,7 @@ blockquote p:last-child {
   top: -43px;
 }
 
-.posts-list-block-draft-or-future .post-img:after {
+.upcoming-posts-list-block .post-img:after {
   border: none;
   height: 50%;
 }
diff --git a/styles/responsive.scss b/styles/responsive.scss
index 38b469e5..1dc27092 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -259,9 +259,10 @@
     margin-bottom: 20px;
   }
 
-  .intro-avatar .image .edit {
-    top: 43%;
-    left: calc(50% - 18px);
+  .intro-avatar .image .wrapper .editor-icon {
+    left: 50%;
+    top: 55%;
+    transform: translate(-50%, -50%);
   }
 
   .posts-list li {

From f742ac1c77287949a2998bb5aa30dfc765f790c3 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Thu, 12 Jan 2023 14:07:33 +0200
Subject: [PATCH 30/49] change-className

---
 components/Intro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index d05ec3ec..278bc833 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -25,7 +25,7 @@ const Intro = () => {
               className="image"
               style={{ border: admin ? "3px solid #fe6c0a" : "none" }}
             >
-              <div className={`wrapper`}>
+              <div className="wrapper">
                 <img
                   onDoubleClick={handleClick}
                   src="/images/author-avatar.jpg"

From 76166c50f11ccfe7e36cee3fdcb262ca236ec07a Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Fri, 13 Jan 2023 22:28:13 +0200
Subject: [PATCH 31/49] change-name-of-icon

---
 components/Intro.tsx                        | 2 +-
 public/images/{edit.svg => editor-icon.svg} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename public/images/{edit.svg => editor-icon.svg} (100%)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 278bc833..cc1db98c 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -36,7 +36,7 @@ const Intro = () => {
                 {admin && (
                   <img
                     className="editor-icon"
-                    src="/images/edit.svg"
+                    src="/images/editor-icon.svg"
                     alt="edit"
                     width={19}
                     height={19}
diff --git a/public/images/edit.svg b/public/images/editor-icon.svg
similarity index 100%
rename from public/images/edit.svg
rename to public/images/editor-icon.svg

From 28615b00cf0f5b0679add6bdff73616c66bf6603 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 16 Jan 2023 16:17:10 +0200
Subject: [PATCH 32/49] add-upcoming-posts-styles-&-add-animation-&-fixes

---
 components/Intro.tsx               | 55 +++++++++++++++-------
 components/UpcomingPosts.tsx       |  6 +--
 helpers/markdownDocumentsReader.ts |  6 +--
 styles/dark-theme.scss             |  4 ++
 styles/main.scss                   | 74 +++++++++++++++++++++++++++++-
 styles/responsive.scss             | 11 ++++-
 6 files changed, 128 insertions(+), 28 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index cc1db98c..47c16d6c 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,13 +1,15 @@
 import config from "config";
+import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { setAdmin } from "redux/slices/admin";
 import { useAppSelector } from "redux/typesHooks";
 
 const Intro = () => {
   const dispatch = useDispatch();
-
   const admin = useAppSelector((state) => state.admin);
 
+  const [isFirstRender, setIsFirstRender] = useState(true);
+
   const handleClick = () => {
     if (admin === true) {
       dispatch(setAdmin(false));
@@ -16,32 +18,51 @@ const Intro = () => {
     }
   };
 
+  useEffect(() => {
+    const imageWrapper = document.querySelector("div.image-wrapper");
+    const editIcon = document.querySelector("img.editor-icon");
+
+    if (admin) {
+      imageWrapper?.setAttribute("admin", "");
+      editIcon?.setAttribute("admin", "");
+      setIsFirstRender(false);
+    } else if (!admin && isFirstRender === false) {
+      imageWrapper?.setAttribute("closing", "");
+      editIcon?.setAttribute("closing", "");
+      imageWrapper?.addEventListener(
+        "animationend",
+        () => {
+          editIcon?.removeAttribute("closing");
+          imageWrapper?.removeAttribute("closing");
+        },
+        { once: true }
+      );
+      imageWrapper?.removeAttribute("admin");
+      editIcon?.removeAttribute("admin");
+    }
+  }, [admin, isFirstRender]);
+
   return (
     <section className="intro-section">
       <div className="container">
         <div className="intro-content">
           <div className="intro-avatar">
-            <div
-              className="image"
-              style={{ border: admin ? "3px solid #fe6c0a" : "none" }}
-            >
-              <div className="wrapper">
+            <div className="image">
+              <div className="image-wrapper">
                 <img
                   onDoubleClick={handleClick}
                   src="/images/author-avatar.jpg"
                   alt="author-avatar"
-                  width={90}
-                  height={90}
+                  width="90"
+                  height="90"
+                />
+                <img
+                  className="editor-icon"
+                  src="/images/editor-icon.svg"
+                  alt="edit"
+                  width="19"
+                  height="19"
                 />
-                {admin && (
-                  <img
-                    className="editor-icon"
-                    src="/images/editor-icon.svg"
-                    alt="edit"
-                    width={19}
-                    height={19}
-                  />
-                )}
               </div>
             </div>
             <div className="name">{config.author_name}</div>
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 97be9130..cb73c31e 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -7,8 +7,8 @@ interface Props {
 }
 
 const UpcomingPosts = ({ posts }: Props) => (
-  <div style={{ marginBottom: "70px" }}>
-    <div className="intro-text" style={{ marginBottom: "36px" }}>
+  <div className="upcoming-posts-block">
+    <div className="upcoming-posts-title">
       <h1>Upcoming Posts</h1>
     </div>
     <ul className="posts-list">
@@ -16,7 +16,7 @@ const UpcomingPosts = ({ posts }: Props) => (
         <PostCard key={index} post={post} />
       ))}
     </ul>
-    <hr style={{ position: "absolute", width: "100%", left: 0 }} />
+    <hr />
   </div>
 );
 
diff --git a/helpers/markdownDocumentsReader.ts b/helpers/markdownDocumentsReader.ts
index 00b67015..f3525125 100644
--- a/helpers/markdownDocumentsReader.ts
+++ b/helpers/markdownDocumentsReader.ts
@@ -50,11 +50,7 @@ export function getUpcomingPosts(): PostDocumentWithoutContent[] {
   const slugs = fs.readdirSync(documentsDirectory);
   const docs = slugs
     .map((slug) => getPostDocumentBySlug(slug))
-    .filter((post: PostDocument) => {
-      if (isUpcomingPost(post)) {
-        return true;
-      }
-    })
+    .filter((post: PostDocument) => isUpcomingPost(post))
     .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
     .map((post) => {
       const { content, ...postWithoutContent } = post;
diff --git a/styles/dark-theme.scss b/styles/dark-theme.scss
index a6b09817..976ac4e4 100644
--- a/styles/dark-theme.scss
+++ b/styles/dark-theme.scss
@@ -53,6 +53,10 @@
     color: #fff;
   }
 
+  .upcoming-posts-title h1 {
+    color: #fff;
+  }
+
   .filter-tags-list a {
     background: #33393f;
     color: #f2f5f7;
diff --git a/styles/main.scss b/styles/main.scss
index ea1f76cf..93577fbe 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -458,14 +458,37 @@ header {
   margin: 0 auto 16px;
 }
 
-.intro-avatar .image .wrapper img {
+.intro-avatar .image .image-wrapper:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  width: 90px;
+  height: 90px;
+  left: 50%;
+  top: 26.7%;
+  transform: translate(-50%, -50%);
+  border: 3px solid #fe6c0a;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.intro-avatar .image .image-wrapper[admin]:after {
+  animation: fade-in 500ms forwards;
+}
+
+.intro-avatar .image .image-wrapper[closing]:after {
+  animation: fade-out 500ms forwards;
+}
+
+.intro-avatar .image .image-wrapper img {
   display: block;
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
-.intro-avatar .image .wrapper .editor-icon {
+.intro-avatar .image .image-wrapper .editor-icon {
   position: absolute;
   width: 39px;
   height: 39px;
@@ -476,6 +499,35 @@ header {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+}
+
+.intro-avatar .image .image-wrapper .editor-icon[admin] {
+  animation: fade-in 500ms forwards;
+}
+
+.intro-avatar .image .image-wrapper .editor-icon[closing] {
+  animation: fade-out 500ms forwards;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .intro-avatar .name {
@@ -732,6 +784,24 @@ header {
   border-color: #fe6c0a !important;
 }
 
+.upcoming-posts-block {
+  margin-bottom: 70px;
+}
+
+.upcoming-posts-block .upcoming-posts-title h1 {
+  color: #3a3a3a;
+  line-height: 1.28;
+  font-weight: 700;
+  font-size: 43px;
+  margin-bottom: 36px;
+}
+
+.upcoming-posts-block hr {
+  position: absolute;
+  width: 100%;
+  left: 0;
+}
+
 /*footer =======================================================*/
 
 footer {
diff --git a/styles/responsive.scss b/styles/responsive.scss
index 1dc27092..f3aa9867 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -259,12 +259,16 @@
     margin-bottom: 20px;
   }
 
-  .intro-avatar .image .wrapper .editor-icon {
+  .intro-avatar .image .image-wrapper .editor-icon {
     left: 50%;
     top: 55%;
     transform: translate(-50%, -50%);
   }
 
+  .intro-avatar .image .image-wrapper:after {
+    top: 30.5%;
+  }
+
   .posts-list li {
     width: calc(50% - 10px);
   }
@@ -618,6 +622,11 @@
     margin-bottom: 13px;
   }
 
+  .upcoming-posts-title h1 {
+    font-size: 26px;
+    margin-bottom: 27px;
+  }
+
   .filter-tags-list {
     margin: 0 -4px 15px;
     font-size: 13px;

From 5bb938f76dd0120b3cdd0d30b329c502af2e63b1 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 16 Jan 2023 16:54:32 +0200
Subject: [PATCH 33/49] change-test-condition

---
 components/Intro.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 47c16d6c..962ea3cd 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -26,7 +26,8 @@ const Intro = () => {
       imageWrapper?.setAttribute("admin", "");
       editIcon?.setAttribute("admin", "");
       setIsFirstRender(false);
-    } else if (!admin && isFirstRender === false) {
+    }
+    if (!admin && isFirstRender === false) {
       imageWrapper?.setAttribute("closing", "");
       editIcon?.setAttribute("closing", "");
       imageWrapper?.addEventListener(

From 2ee9b312a79a16597ee1e258babccf00b5f10230 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 17 Jan 2023 16:43:06 +0200
Subject: [PATCH 34/49] remove-magic-number

---
 components/Intro.tsx   | 36 ++++++++++++++++++------------------
 styles/main.scss       | 19 ++++++++++---------
 styles/responsive.scss |  6 +-----
 3 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 962ea3cd..42860751 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -19,7 +19,7 @@ const Intro = () => {
   };
 
   useEffect(() => {
-    const imageWrapper = document.querySelector("div.image-wrapper");
+    const imageWrapper = document.querySelector("div.image-avatar");
     const editIcon = document.querySelector("img.editor-icon");
 
     if (admin) {
@@ -48,23 +48,23 @@ const Intro = () => {
       <div className="container">
         <div className="intro-content">
           <div className="intro-avatar">
-            <div className="image">
-              <div className="image-wrapper">
-                <img
-                  onDoubleClick={handleClick}
-                  src="/images/author-avatar.jpg"
-                  alt="author-avatar"
-                  width="90"
-                  height="90"
-                />
-                <img
-                  className="editor-icon"
-                  src="/images/editor-icon.svg"
-                  alt="edit"
-                  width="19"
-                  height="19"
-                />
-              </div>
+            <div className="image-avatar">
+              <img
+                onDoubleClick={handleClick}
+                src="/images/author-avatar.jpg"
+                alt="author-avatar"
+                width="90"
+                height="90"
+              />
+            </div>
+            <div className="image-editor">
+              <img
+                className="editor-icon"
+                src="/images/editor-icon.svg"
+                alt="edit"
+                width="19"
+                height="19"
+              />
             </div>
             <div className="name">{config.author_name}</div>
             <div className="job">{config.author_position}</div>
diff --git a/styles/main.scss b/styles/main.scss
index 062484df..ea08a086 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -453,7 +453,8 @@ header {
   order: 2;
 }
 
-.intro-avatar .image {
+.intro-avatar .image-avatar {
+  position: relative;
   width: 90px;
   height: 90px;
   border-radius: 50%;
@@ -461,14 +462,14 @@ header {
   margin: 0 auto 16px;
 }
 
-.intro-avatar .image .image-wrapper:after {
+.intro-avatar .image-avatar:after {
   content: "";
   position: absolute;
   border-radius: 50%;
   width: 90px;
   height: 90px;
   left: 50%;
-  top: 26.7%;
+  top: 50%;
   transform: translate(-50%, -50%);
   border: 3px solid #fe6c0a;
   z-index: 1;
@@ -476,22 +477,22 @@ header {
   opacity: 0;
 }
 
-.intro-avatar .image .image-wrapper[admin]:after {
+.intro-avatar .image-avatar[admin]:after {
   animation: fade-in 500ms forwards;
 }
 
-.intro-avatar .image .image-wrapper[closing]:after {
+.intro-avatar .image-avatar[closing]:after {
   animation: fade-out 500ms forwards;
 }
 
-.intro-avatar .image .image-wrapper img {
+.intro-avatar .image-avatar img {
   display: block;
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
-.intro-avatar .image .image-wrapper .editor-icon {
+.intro-avatar .image-editor .editor-icon {
   position: absolute;
   width: 39px;
   height: 39px;
@@ -507,11 +508,11 @@ header {
   opacity: 0;
 }
 
-.intro-avatar .image .image-wrapper .editor-icon[admin] {
+.intro-avatar .image-editor .editor-icon[admin] {
   animation: fade-in 500ms forwards;
 }
 
-.intro-avatar .image .image-wrapper .editor-icon[closing] {
+.intro-avatar .image-editor .editor-icon[closing] {
   animation: fade-out 500ms forwards;
 }
 
diff --git a/styles/responsive.scss b/styles/responsive.scss
index ad3e365e..d9d68d73 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -259,16 +259,12 @@
     margin-bottom: 20px;
   }
 
-  .intro-avatar .image .image-wrapper .editor-icon {
+  .intro-avatar .image-editor .editor-icon {
     left: 50%;
     top: 55%;
     transform: translate(-50%, -50%);
   }
 
-  .intro-avatar .image .image-wrapper:after {
-    top: 30.5%;
-  }
-
   .posts-list li {
     width: calc(50% - 10px);
   }

From 1b01b4e4aefc538fa88523d914fabf075353063e Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 30 Jan 2023 23:24:31 +0200
Subject: [PATCH 35/49] implement-feature-of-count-tags-in-admin

---
 components/Tags.tsx | 7 +++++--
 pages/index.tsx     | 7 ++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/Tags.tsx b/components/Tags.tsx
index a828d2d4..31cd9408 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -5,9 +5,11 @@ import { useAppDispatch, useAppSelector } from "redux/typesHooks";
 
 interface Props {
   uniqueTags: string[];
+  admin: boolean;
+  countOfPostsInTags: number[];
 }
 
-const Tags = ({ uniqueTags }: Props) => {
+const Tags = ({ uniqueTags, admin, countOfPostsInTags }: Props) => {
   const selectedTags = useAppSelector((state) => state.selectedTags);
 
   const dispatch = useAppDispatch();
@@ -27,7 +29,7 @@ const Tags = ({ uniqueTags }: Props) => {
       >
         ALL
       </li>
-      {uniqueTags.map((uniqueTag) => (
+      {uniqueTags.map((uniqueTag, index) => (
         <li
           key={uniqueTag}
           className={selectedTags.includes(uniqueTag) ? "active" : ""}
@@ -44,6 +46,7 @@ const Tags = ({ uniqueTags }: Props) => {
           }}
         >
           {uniqueTag}
+          {admin && ` ${countOfPostsInTags[index]}`}
         </li>
       ))}
     </ul>
diff --git a/pages/index.tsx b/pages/index.tsx
index d304ddad..44d45de9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -35,6 +35,7 @@ const Home: NextPage<{
   const sortedTags = Object.entries(tagsFrequency).sort((a, b) => b[1] - a[1]);
 
   const uniqueSortedTags = sortedTags.map((tag) => tag[0]);
+  const countOfPostsInTags = sortedTags.map((tag) => tag[1]);
 
   const selectedTags = useAppSelector((state) => state.selectedTags);
   const filteredPosts = posts.filter((post) => {
@@ -74,7 +75,11 @@ const Home: NextPage<{
         <div className="container">
           {admin && <UpcomingPosts posts={upcomingPosts} />}
           {/* TODO: Implement tags count for the admin user */}
-          <Tags uniqueTags={uniqueSortedTags} />
+          <Tags
+            uniqueTags={uniqueSortedTags}
+            admin={admin}
+            countOfPostsInTags={countOfPostsInTags}
+          />
           <Posts posts={postsToRender} />
           <Pagination pagesCount={pagesCount} />
         </div>

From f65560a183f4da2352757f36b0320a9b5ebaf032 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 30 Jan 2023 23:27:35 +0200
Subject: [PATCH 36/49] change-import-admin-state

---
 components/Tags.tsx | 4 ++--
 pages/index.tsx     | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/Tags.tsx b/components/Tags.tsx
index 31cd9408..d0456296 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -5,12 +5,12 @@ import { useAppDispatch, useAppSelector } from "redux/typesHooks";
 
 interface Props {
   uniqueTags: string[];
-  admin: boolean;
   countOfPostsInTags: number[];
 }
 
-const Tags = ({ uniqueTags, admin, countOfPostsInTags }: Props) => {
+const Tags = ({ uniqueTags, countOfPostsInTags }: Props) => {
   const selectedTags = useAppSelector((state) => state.selectedTags);
+  const admin = useAppSelector((state) => state.admin);
 
   const dispatch = useAppDispatch();
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 44d45de9..58d4cad2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -77,7 +77,6 @@ const Home: NextPage<{
           {/* TODO: Implement tags count for the admin user */}
           <Tags
             uniqueTags={uniqueSortedTags}
-            admin={admin}
             countOfPostsInTags={countOfPostsInTags}
           />
           <Posts posts={postsToRender} />

From 4649e6395a5e0616f8dedb02cc6c4497400da27d Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Wed, 1 Feb 2023 00:19:52 +0200
Subject: [PATCH 37/49] change-number-to-square-brackets

---
 components/Tags.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Tags.tsx b/components/Tags.tsx
index d0456296..8efe6669 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -46,7 +46,7 @@ const Tags = ({ uniqueTags, countOfPostsInTags }: Props) => {
           }}
         >
           {uniqueTag}
-          {admin && ` ${countOfPostsInTags[index]}`}
+          {admin && ` [${countOfPostsInTags[index]}]`}
         </li>
       ))}
     </ul>

From 4580d44328a3bd2ea1b42c7eb78af8f9b3b3cc2e Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 27 Feb 2023 12:56:15 +0200
Subject: [PATCH 38/49] fix-an-arror-after-merge

---
 pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1bb6f7e9..c21b0b29 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,7 +6,7 @@ import { Provider } from "react-redux";
 import store from "redux/store";
 
 import AdminProvider from "@/components/AdminProvider";
-import ThemeProvider from "@/components/ThemeProvider";
+import ThemeProvider from "@/components/MUI/ThemeProvider";
 
 const GA_TRACKING_ID = "G-1JHZSH8YH4";
 

From 55f27129a5aa5c08676d551faef3c0f78dbd25d8 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Wed, 1 Mar 2023 13:18:46 +0200
Subject: [PATCH 39/49] refactor-upcomingPost-component-to-MUI

---
 components/UpcomingPosts.tsx | 29 +++++++++++++++++++++++------
 styles/dark-theme.scss       |  4 ----
 styles/main.scss             | 18 ------------------
 styles/responsive.scss       |  5 -----
 4 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index cb73c31e..476ec9d6 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -1,3 +1,4 @@
+import { Box, Divider, Typography } from "@mui/material";
 import { PostDocumentWithoutContent } from "interfaces";
 
 import PostCard from "./PostCard";
@@ -7,17 +8,33 @@ interface Props {
 }
 
 const UpcomingPosts = ({ posts }: Props) => (
-  <div className="upcoming-posts-block">
-    <div className="upcoming-posts-title">
-      <h1>Upcoming Posts</h1>
-    </div>
+  <Box sx={{ mb: 17.5 }}>
+    <Box
+      sx={(theme) => ({
+        color: theme.palette.mode === "light" ? "#3a3a3a" : "#fff",
+      })}
+    >
+      <Typography
+        sx={{
+          lineHeight: 1.28,
+          fontWeight: 700,
+          fontSize: "43px",
+          mb: 9,
+          ["@media (max-width: 480px)"]: {
+            fontSize: "28px",
+          },
+        }}
+      >
+        Upcoming Posts
+      </Typography>
+    </Box>
     <ul className="posts-list">
       {posts.map((post, index) => (
         <PostCard key={index} post={post} />
       ))}
     </ul>
-    <hr />
-  </div>
+    <Divider sx={{ position: "absolute", width: "100%", left: 0 }} />
+  </Box>
 );
 
 export default UpcomingPosts;
diff --git a/styles/dark-theme.scss b/styles/dark-theme.scss
index 67486253..f578b3c3 100644
--- a/styles/dark-theme.scss
+++ b/styles/dark-theme.scss
@@ -53,10 +53,6 @@
     color: #fff;
   }
 
-  .upcoming-posts-title h1 {
-    color: #fff;
-  }
-  
   .filter-tags-list li {
     background: #33393f;
     color: #f2f5f7;
diff --git a/styles/main.scss b/styles/main.scss
index 760725df..b7fa89fd 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -784,24 +784,6 @@ header {
   border-color: #fe6c0a !important;
 }
 
-.upcoming-posts-block {
-  margin-bottom: 70px;
-}
-
-.upcoming-posts-block .upcoming-posts-title h1 {
-  color: #3a3a3a;
-  line-height: 1.28;
-  font-weight: 700;
-  font-size: 43px;
-  margin-bottom: 36px;
-}
-
-.upcoming-posts-block hr {
-  position: absolute;
-  width: 100%;
-  left: 0;
-}
-
 /*footer =======================================================*/
 
 footer {
diff --git a/styles/responsive.scss b/styles/responsive.scss
index 480a2094..ac394109 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -579,11 +579,6 @@
     margin-bottom: 13px;
   }
 
-  .upcoming-posts-title h1 {
-    font-size: 26px;
-    margin-bottom: 27px;
-  }
-
   .filter-tags-list {
     margin: 0 -4px 15px;
     font-size: 13px;

From 60ce23d146da0a23e9756d67597ea1d3d72995f9 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Wed, 1 Mar 2023 13:26:26 +0200
Subject: [PATCH 40/49] remake-postImg-after-style

---
 styles/main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/main.scss b/styles/main.scss
index b7fa89fd..78431896 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1415,7 +1415,7 @@ blockquote p:last-child {
   top: -43px;
 }
 
-.upcoming-posts-list-block .post-img:after {
+.post-img:after {
   border: none;
   height: 50%;
 }

From f0b10b5b395c813622693ff938a3b1c56d739553 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Wed, 1 Mar 2023 13:31:21 +0200
Subject: [PATCH 41/49] merge-two-style-into-one

---
 components/UpcomingPosts.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 476ec9d6..4ef427a6 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -9,13 +9,10 @@ interface Props {
 
 const UpcomingPosts = ({ posts }: Props) => (
   <Box sx={{ mb: 17.5 }}>
-    <Box
-      sx={(theme) => ({
-        color: theme.palette.mode === "light" ? "#3a3a3a" : "#fff",
-      })}
-    >
+    <Box>
       <Typography
-        sx={{
+        sx={(theme) => ({
+          color: theme.palette.mode === "light" ? "#3a3a3a" : "#fff",
           lineHeight: 1.28,
           fontWeight: 700,
           fontSize: "43px",
@@ -23,7 +20,7 @@ const UpcomingPosts = ({ posts }: Props) => (
           ["@media (max-width: 480px)"]: {
             fontSize: "28px",
           },
-        }}
+        })}
       >
         Upcoming Posts
       </Typography>

From 69fbaf9ca3f5454d87e82439761c1afb1650072a Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Sun, 5 Mar 2023 17:34:42 +0200
Subject: [PATCH 42/49] changes-by-code-review

---
 components/Intro.tsx         | 5 +++--
 components/UpcomingPosts.tsx | 2 +-
 pages/_app.tsx               | 7 +++----
 pages/index.tsx              | 1 -
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 42860751..08653ee7 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -11,7 +11,7 @@ const Intro = () => {
   const [isFirstRender, setIsFirstRender] = useState(true);
 
   const handleClick = () => {
-    if (admin === true) {
+    if (admin) {
       dispatch(setAdmin(false));
     } else {
       dispatch(setAdmin(true));
@@ -27,7 +27,8 @@ const Intro = () => {
       editIcon?.setAttribute("admin", "");
       setIsFirstRender(false);
     }
-    if (!admin && isFirstRender === false) {
+
+    if (!admin && !isFirstRender) {
       imageWrapper?.setAttribute("closing", "");
       editIcon?.setAttribute("closing", "");
       imageWrapper?.addEventListener(
diff --git a/components/UpcomingPosts.tsx b/components/UpcomingPosts.tsx
index 4ef427a6..20b77eef 100644
--- a/components/UpcomingPosts.tsx
+++ b/components/UpcomingPosts.tsx
@@ -12,7 +12,7 @@ const UpcomingPosts = ({ posts }: Props) => (
     <Box>
       <Typography
         sx={(theme) => ({
-          color: theme.palette.mode === "light" ? "#3a3a3a" : "#fff",
+          color: theme.palette.mode === "light" ? "#3a3a3a" : "white",
           lineHeight: 1.28,
           fontWeight: 700,
           fontSize: "43px",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d644b802..2ffa7638 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,12 @@
 import "../styles/root.scss";
 
+import AdminProvider from "components/AdminProvider";
+import GoogleAnalytics from "components/GoogleAnalytics";
+import ThemeProvider from "components/MUI/ThemeProvider";
 import type { AppProps } from "next/app";
 import { Provider } from "react-redux";
 import store from "redux/store";
 
-import AdminProvider from "@/components/AdminProvider";
-import GoogleAnalytics from "@/components/GoogleAnalytics";
-import ThemeProvider from "@/components/MUI/ThemeProvider";
-
 const MyApp = ({ Component, pageProps }: AppProps) => (
   <Provider store={store}>
     <GoogleAnalytics />
diff --git a/pages/index.tsx b/pages/index.tsx
index 58d4cad2..298dcf6a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -74,7 +74,6 @@ const Home: NextPage<{
       <section className="simple-section">
         <div className="container">
           {admin && <UpcomingPosts posts={upcomingPosts} />}
-          {/* TODO: Implement tags count for the admin user */}
           <Tags
             uniqueTags={uniqueSortedTags}
             countOfPostsInTags={countOfPostsInTags}

From b6f09584d11c4e57b0d516d51837fcd4d504d25e Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 10:56:39 +0200
Subject: [PATCH 43/49] refactor-intro-component-to-mui

---
 components/Intro.tsx   | 219 ++++++++++++++++++++++++++++++++++++-----
 styles/dark-theme.scss |  13 ---
 styles/main.scss       | 136 -------------------------
 styles/responsive.scss |  38 -------
 4 files changed, 196 insertions(+), 210 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 08653ee7..08a3ae35 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -1,15 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import { keyframes } from "@mui/system";
 import config from "config";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { setAdmin } from "redux/slices/admin";
 import { useAppSelector } from "redux/typesHooks";
 
+const fadeIn = keyframes({
+  "0%": {
+    opacity: 0,
+  },
+  "100%": {
+    opacity: 1,
+  },
+});
+
+const fadeOut = keyframes({
+  "0%": {
+    opacity: 1,
+  },
+  "100%": {
+    opacity: 0,
+  },
+});
+
+const animate = (animationName: string) => ({
+  animationName: `${animationName}`,
+  animationDuration: "500ms",
+  animationFillMode: "forwards",
+});
+
 const Intro = () => {
   const dispatch = useDispatch();
   const admin = useAppSelector((state) => state.admin);
 
   const [isFirstRender, setIsFirstRender] = useState(true);
 
+  const imageAvaterRef = useRef<HTMLDivElement>(null);
+  const editorIconRef = useRef<HTMLImageElement>(null);
+
   const handleClick = () => {
     if (admin) {
       dispatch(setAdmin(false));
@@ -19,8 +48,8 @@ const Intro = () => {
   };
 
   useEffect(() => {
-    const imageWrapper = document.querySelector("div.image-avatar");
-    const editIcon = document.querySelector("img.editor-icon");
+    const imageWrapper = imageAvaterRef.current;
+    const editIcon = editorIconRef.current;
 
     if (admin) {
       imageWrapper?.setAttribute("admin", "");
@@ -45,11 +74,76 @@ const Intro = () => {
   }, [admin, isFirstRender]);
 
   return (
-    <section className="intro-section">
-      <div className="container">
-        <div className="intro-content">
-          <div className="intro-avatar">
-            <div className="image-avatar">
+    <Box
+      sx={(theme) => ({
+        py: 8.75,
+        background: theme.palette.mode === "light" ? "#f8fafc" : "#070809",
+        color: theme.palette.mode === "light" ? "#707070" : "#f2f5f7",
+      })}
+    >
+      <Box className="container">
+        {/* check, do we need to rewrite this className? */}
+        <Box
+          sx={(theme) => ({
+            display: ["-ms-flexbox", "flex"],
+            msFlexAlign: "center",
+            alignItems: "center",
+            [theme.breakpoints.down(768)]: {
+              textAlign: "center",
+              display: "block",
+            },
+          })}
+        >
+          <Box
+            sx={(theme) => ({
+              position: "relative",
+              msFlexNegative: 0,
+              flexShrink: 0,
+              marginLeft: "auto",
+              textAlign: "center",
+              maxWidth: "136px",
+              msFlexOrder: 2,
+              order: 2,
+              [theme.breakpoints.down(768)]: {
+                width: "100%",
+                maxWidth: "100%",
+                marginBottom: "20px",
+              },
+            })}
+          >
+            <Box
+              ref={imageAvaterRef}
+              sx={{
+                position: "relative",
+                width: "90px",
+                height: "90px",
+                borderRadius: "50%",
+                overflow: "hidden",
+                margin: "0 auto 16px",
+                "&:after": {
+                  content: '""',
+                  position: "absolute",
+                  borderRadius: "50%",
+                  width: "90px",
+                  height: "90px",
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
+                  border: "3px solid #fe6c0a",
+                  zIndex: 1,
+                  pointerEvents: "none",
+                  opacity: 0,
+                },
+                "&[admin]:after": animate(fadeIn),
+                "&[closing]:after": animate(fadeOut),
+                "& img": {
+                  display: "block",
+                  height: "100%",
+                  width: "100%",
+                  objectFit: "cover",
+                },
+              }}
+            >
               <img
                 onDoubleClick={handleClick}
                 src="/images/author-avatar.jpg"
@@ -57,28 +151,107 @@ const Intro = () => {
                 width="90"
                 height="90"
               />
-            </div>
-            <div className="image-editor">
+            </Box>
+            <Box
+              sx={(theme) => ({
+                "& img": {
+                  position: "absolute",
+                  width: "39px",
+                  height: "39px",
+                  borderRadius: "50%",
+                  backgroundColor: "#ffffff",
+                  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+                  objectFit: "none",
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  zIndex: 2,
+                  opacity: 0,
+                  [theme.breakpoints.down(768)]: {
+                    top: "55%",
+                  },
+                  "&[admin]": animate(fadeIn),
+                  "&[closing]": animate(fadeOut),
+                },
+              })}
+            >
               <img
-                className="editor-icon"
+                ref={editorIconRef}
                 src="/images/editor-icon.svg"
                 alt="edit"
                 width="19"
                 height="19"
               />
-            </div>
-            <div className="name">{config.author_name}</div>
-            <div className="job">{config.author_position}</div>
-          </div>
-          <div className="intro-text">
-            <h1>Hello, I am {config.author_name}</h1>
-            <p style={{ whiteSpace: "break-spaces" }}>
+            </Box>
+            <Box
+              sx={(theme) => ({
+                color: theme.palette.mode === "light" ? "#3a3a3a" : "white",
+                fontSize: "16px",
+                fontWeight: 700,
+                textTransform: "uppercase",
+                marginBottom: "4px",
+              })}
+            >
+              {config.author_name}
+            </Box>
+            <Box
+              sx={{
+                lineHeight: 1.5,
+                fontSize: 14,
+              }}
+            >
+              {config.author_position}
+            </Box>
+          </Box>
+          <Box
+            className="intro-text"
+            sx={(theme) => ({
+              pr: 17.5,
+              [theme.breakpoints.down(1260)]: {
+                pr: 10,
+              },
+              [theme.breakpoints.down(1020)]: {
+                pr: 8.75,
+              },
+              [theme.breakpoints.down(768)]: {
+                pr: 0,
+              },
+            })}
+          >
+            <Typography
+              sx={(theme) => ({
+                color: theme.palette.mode === "light" ? "#3a3a3a" : "white",
+                lineHeight: 1.28,
+                fontWeight: "bold",
+                fontSize: "50px",
+                marginBottom: "17px",
+                letterSpacing: 0,
+                [theme.breakpoints.down(1020)]: {
+                  fontSize: "40px",
+                },
+                [theme.breakpoints.down(481)]: {
+                  fontSize: "30px",
+                  mb: 3.25,
+                },
+              })}
+            >
+              Hello, I am {config.author_name}
+            </Typography>
+            <Typography
+              variant="body1"
+              sx={{
+                whiteSpace: "break-spaces",
+                lineHeight: "1.69",
+                letterSpacing: 0,
+              }}
+            >
               {config.site_description}
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/styles/dark-theme.scss b/styles/dark-theme.scss
index f578b3c3..2df5b6ec 100644
--- a/styles/dark-theme.scss
+++ b/styles/dark-theme.scss
@@ -40,19 +40,6 @@
     filter: brightness(0) invert(1);
   }
 
-  .intro-section {
-    background: #070809;
-    color: #f2f5f7;
-  }
-
-  .intro-text h1 {
-    color: #fff;
-  }
-
-  .intro-avatar .name {
-    color: #fff;
-  }
-
   .filter-tags-list li {
     background: #33393f;
     color: #f2f5f7;
diff --git a/styles/main.scss b/styles/main.scss
index 78431896..c0771032 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -427,142 +427,6 @@ header {
   background: #fe6c0a;
 }
 
-/*intro-section =================================================*/
-
-.intro-section {
-  background: #f8fafc;
-  padding: 35px 0;
-  color: #707070;
-}
-
-.intro-content {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.intro-avatar {
-  position: relative;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: auto;
-  text-align: center;
-  max-width: 136px;
-  -ms-flex-order: 2;
-  order: 2;
-}
-
-.intro-avatar .image-avatar {
-  position: relative;
-  width: 90px;
-  height: 90px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin: 0 auto 16px;
-}
-
-.intro-avatar .image-avatar:after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  width: 90px;
-  height: 90px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border: 3px solid #fe6c0a;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.intro-avatar .image-avatar[admin]:after {
-  animation: fade-in 500ms forwards;
-}
-
-.intro-avatar .image-avatar[closing]:after {
-  animation: fade-out 500ms forwards;
-}
-
-.intro-avatar .image-avatar img {
-  display: block;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-.intro-avatar .image-editor .editor-icon {
-  position: absolute;
-  width: 39px;
-  height: 39px;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  object-fit: none;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 2;
-  opacity: 0;
-}
-
-.intro-avatar .image-editor .editor-icon[admin] {
-  animation: fade-in 500ms forwards;
-}
-
-.intro-avatar .image-editor .editor-icon[closing] {
-  animation: fade-out 500ms forwards;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.intro-avatar .name {
-  color: #3a3a3a;
-  font-size: 16px;
-  font-weight: 700;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-
-.intro-avatar .job {
-  line-height: 1.5;
-  font-size: 14px;
-}
-
-.intro-text {
-  padding-right: 70px;
-}
-
-.intro-text h1 {
-  color: #3a3a3a;
-  line-height: 1.28;
-  font-weight: bold;
-  font-size: 50px;
-  margin-bottom: 17px;
-}
-
-.intro-text p {
-  line-height: 1.69;
-}
-
 /*simple-section =================================================*/
 
 .simple-section {
diff --git a/styles/responsive.scss b/styles/responsive.scss
index ac394109..c20183ea 100644
--- a/styles/responsive.scss
+++ b/styles/responsive.scss
@@ -26,10 +26,6 @@
 }
 
 @media (max-width: 1259px) {
-  .intro-text {
-    padding-right: 40px;
-  }
-
   .posts-list-block .content {
     padding: 25px 20px;
   }
@@ -85,14 +81,6 @@
     max-width: 150px;
   }
 
-  .intro-text {
-    padding-right: 35px;
-  }
-
-  .intro-text h1 {
-    font-size: 40px;
-  }
-
   .filter-tags-list {
     margin: 0 -5px 16px;
   }
@@ -223,31 +211,10 @@
     width: 6px;
   }
 
-  .intro-content {
-    text-align: center;
-    display: block;
-  }
-
-  .intro-avatar {
-    width: 100%;
-    max-width: 100%;
-    margin-bottom: 20px;
-  }
-
-  .intro-avatar .image-editor .editor-icon {
-    left: 50%;
-    top: 55%;
-    transform: translate(-50%, -50%);
-  }
-
   .posts-list li {
     width: calc(50% - 10px);
   }
 
-  .intro-text {
-    padding-right: 0;
-  }
-
   .filter-tags-list {
     -ms-flex-pack: center;
     justify-content: center;
@@ -574,11 +541,6 @@
 }
 
 @media (max-width: 480px) {
-  .intro-text h1 {
-    font-size: 30px;
-    margin-bottom: 13px;
-  }
-
   .filter-tags-list {
     margin: 0 -4px 15px;
     font-size: 13px;

From 122b50344fa59ce0266b999c85035317b88c8bdd Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 10:58:54 +0200
Subject: [PATCH 44/49] remove-useless-className

---
 components/Intro.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 08a3ae35..116b215a 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -205,7 +205,6 @@ const Intro = () => {
             </Box>
           </Box>
           <Box
-            className="intro-text"
             sx={(theme) => ({
               pr: 17.5,
               [theme.breakpoints.down(1260)]: {

From 4977a57eda340e878d7700c978ad49f6638e0b20 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 11:17:05 +0200
Subject: [PATCH 45/49] change-color-name-to-correct

---
 components/Intro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 116b215a..55f2787a 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -159,7 +159,7 @@ const Intro = () => {
                   width: "39px",
                   height: "39px",
                   borderRadius: "50%",
-                  backgroundColor: "#ffffff",
+                  backgroundColor: "white",
                   boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
                   objectFit: "none",
                   left: "50%",

From 942726b4861c67306ff8a603ffa293d46f8a7fa9 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 11:25:22 +0200
Subject: [PATCH 46/49] changes-by-code-review

---
 components/Post/LatestPosts.tsx | 1 -
 components/PostCard.tsx         | 6 +-----
 components/Tags.tsx             | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/components/Post/LatestPosts.tsx b/components/Post/LatestPosts.tsx
index ba098ad3..07e80abf 100644
--- a/components/Post/LatestPosts.tsx
+++ b/components/Post/LatestPosts.tsx
@@ -26,7 +26,6 @@ const LatestPosts = ({ latestPosts }: Props) => {
               sizes="100vw"
               style={{
                 filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
-                
                 objectFit: "cover",
               }}
             />
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index c1fedcc4..6e917238 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -56,11 +56,7 @@ const PostCard = ({ post }: Props) => {
       {isPostADraft(post) && <DraftPostMark />}
       {isPostInTheFuture(post) && <FuturePostMark />}
 
-      <div
-        className={`posts-list-block ${
-          isUpcomingPost(post) ? "upcoming-posts-list-block" : ""
-        }`}
-      >
+      <div className="posts-list-block">
         <div className="content">
           <Link href={`/post/${post.slug}`} className="post-img">
             <Image
diff --git a/components/Tags.tsx b/components/Tags.tsx
index 8efe6669..e2c98b59 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -46,7 +46,7 @@ const Tags = ({ uniqueTags, countOfPostsInTags }: Props) => {
           }}
         >
           {uniqueTag}
-          {admin && ` [${countOfPostsInTags[index]}]`}
+          {admin && `[${countOfPostsInTags[index]}]`}
         </li>
       ))}
     </ul>

From 52b6637dcf48d705e76eca3a4e0cb17abaa2991a Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 11:31:57 +0200
Subject: [PATCH 47/49] change-name-of-variable-to-correct

---
 components/Intro.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 55f2787a..38091d95 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -36,7 +36,7 @@ const Intro = () => {
 
   const [isFirstRender, setIsFirstRender] = useState(true);
 
-  const imageAvaterRef = useRef<HTMLDivElement>(null);
+  const imageAvatarRef = useRef<HTMLDivElement>(null);
   const editorIconRef = useRef<HTMLImageElement>(null);
 
   const handleClick = () => {
@@ -48,7 +48,7 @@ const Intro = () => {
   };
 
   useEffect(() => {
-    const imageWrapper = imageAvaterRef.current;
+    const imageWrapper = imageAvatarRef.current;
     const editIcon = editorIconRef.current;
 
     if (admin) {
@@ -112,7 +112,7 @@ const Intro = () => {
             })}
           >
             <Box
-              ref={imageAvaterRef}
+              ref={imageAvatarRef}
               sx={{
                 position: "relative",
                 width: "90px",

From e370af1e718fbd2536720a7e0402143a61c5e8c5 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Mon, 6 Mar 2023 11:35:37 +0200
Subject: [PATCH 48/49] changes-by-prettier

---
 components/Post/PostContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Post/PostContent.tsx b/components/Post/PostContent.tsx
index b8bb7c16..316a3861 100644
--- a/components/Post/PostContent.tsx
+++ b/components/Post/PostContent.tsx
@@ -3,8 +3,8 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
-import isUpcomingPost from "helpers/isUpcomingPost";
 import getFirstParagraph from "helpers/getFirstParagraph";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import toHumanReadableDate from "helpers/toHumanReadableDate";
 import { PostDocument } from "interfaces";
 import Head from "next/head";

From 732869a66d567532acfed37551b59732edffe6b6 Mon Sep 17 00:00:00 2001
From: Denis Abashin <79473861+fordelord@users.noreply.github.com>
Date: Tue, 16 May 2023 10:57:23 +0300
Subject: [PATCH 49/49] remove admin edit icon

---
 components/Intro.tsx          | 38 -----------------------------------
 public/images/editor-icon.svg | 11 ----------
 2 files changed, 49 deletions(-)
 delete mode 100644 public/images/editor-icon.svg

diff --git a/components/Intro.tsx b/components/Intro.tsx
index 38091d95..363cdd1f 100644
--- a/components/Intro.tsx
+++ b/components/Intro.tsx
@@ -37,7 +37,6 @@ const Intro = () => {
   const [isFirstRender, setIsFirstRender] = useState(true);
 
   const imageAvatarRef = useRef<HTMLDivElement>(null);
-  const editorIconRef = useRef<HTMLImageElement>(null);
 
   const handleClick = () => {
     if (admin) {
@@ -49,27 +48,22 @@ const Intro = () => {
 
   useEffect(() => {
     const imageWrapper = imageAvatarRef.current;
-    const editIcon = editorIconRef.current;
 
     if (admin) {
       imageWrapper?.setAttribute("admin", "");
-      editIcon?.setAttribute("admin", "");
       setIsFirstRender(false);
     }
 
     if (!admin && !isFirstRender) {
       imageWrapper?.setAttribute("closing", "");
-      editIcon?.setAttribute("closing", "");
       imageWrapper?.addEventListener(
         "animationend",
         () => {
-          editIcon?.removeAttribute("closing");
           imageWrapper?.removeAttribute("closing");
         },
         { once: true }
       );
       imageWrapper?.removeAttribute("admin");
-      editIcon?.removeAttribute("admin");
     }
   }, [admin, isFirstRender]);
 
@@ -152,38 +146,6 @@ const Intro = () => {
                 height="90"
               />
             </Box>
-            <Box
-              sx={(theme) => ({
-                "& img": {
-                  position: "absolute",
-                  width: "39px",
-                  height: "39px",
-                  borderRadius: "50%",
-                  backgroundColor: "white",
-                  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
-                  objectFit: "none",
-                  left: "50%",
-                  top: "50%",
-                  transform: "translate(-50%, -50%)",
-                  pointerEvents: "none",
-                  zIndex: 2,
-                  opacity: 0,
-                  [theme.breakpoints.down(768)]: {
-                    top: "55%",
-                  },
-                  "&[admin]": animate(fadeIn),
-                  "&[closing]": animate(fadeOut),
-                },
-              })}
-            >
-              <img
-                ref={editorIconRef}
-                src="/images/editor-icon.svg"
-                alt="edit"
-                width="19"
-                height="19"
-              />
-            </Box>
             <Box
               sx={(theme) => ({
                 color: theme.palette.mode === "light" ? "#3a3a3a" : "white",
diff --git a/public/images/editor-icon.svg b/public/images/editor-icon.svg
deleted file mode 100644
index 112e96a3..00000000
--- a/public/images/editor-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1638_2521)">
-<path d="M7.61418 7.6944L6.50815 11.3827C6.41422 11.6964 6.50003 12.0368 6.73167 12.2681C6.90098 12.4374 7.12857 12.529 7.36137 12.529C7.44689 12.529 7.533 12.5169 7.61708 12.4914L11.3057 11.3856C11.4469 11.3433 11.5756 11.2667 11.6797 11.1624L18.4423 4.39979C18.6093 4.23279 18.7032 4.00608 18.7032 3.77008C18.7032 3.53409 18.6093 3.30737 18.4423 3.14038L15.8594 0.557801C15.5115 0.2099 14.9479 0.2099 14.6 0.557801L7.83771 7.32041C7.73333 7.42478 7.6568 7.55292 7.61418 7.6944ZM9.25598 8.42093L15.2297 2.4469L16.5529 3.77008L10.5792 9.74411L8.68948 10.3106L9.25598 8.42093Z" fill="black"/>
-<path d="M17.8125 8.60938C17.3205 8.60938 16.9219 9.0083 16.9219 9.5V15.4375C16.9219 16.2562 16.2559 16.9219 15.4375 16.9219H3.5625C2.74406 16.9219 2.07812 16.2562 2.07812 15.4375V3.5625C2.07812 2.74377 2.74406 2.07812 3.5625 2.07812H9.5C9.99199 2.07812 10.3906 1.6792 10.3906 1.1875C10.3906 0.695804 9.99199 0.296875 9.5 0.296875H3.5625C1.76183 0.296875 0.296875 1.76211 0.296875 3.5625V15.4375C0.296875 17.2379 1.76183 18.7031 3.5625 18.7031H15.4375C17.2382 18.7031 18.7031 17.2379 18.7031 15.4375V9.5C18.7031 9.0083 18.3045 8.60938 17.8125 8.60938Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_1638_2521">
-<rect width="19" height="19" fill="white"/>
-</clipPath>
-</defs>
-</svg>