From 14570ea55c96e7305bd02339e13c3e3e1350a91e Mon Sep 17 00:00:00 2001
From: Ammar Mirza <itsammarmirza@gmail.com>
Date: Thu, 29 Aug 2024 11:42:37 +0530
Subject: [PATCH] Fixed page layout and deleted unnecessary components

---
 generated/graphq.ts                           | 193 +++++++++++-------
 src/app/[slug]/layout.tsx                     |  94 ---------
 src/app/[slug]/page.tsx                       |  38 ----
 src/app/changelog/layout.tsx                  |  43 ----
 src/app/changelog/page.tsx                    |  90 --------
 src/app/global-error.tsx                      |   2 +-
 src/app/layout.tsx                            |  46 +++--
 src/app/not-found.tsx                         |   2 +-
 src/app/page.tsx                              |  89 +++++++-
 .../{changelog => preview}/[slug]/layout.tsx  |   0
 .../{changelog => preview}/[slug]/page.tsx    |   6 +-
 src/app/projects/page.tsx                     |  21 --
 src/components/AboutMe.tsx                    |  73 -------
 src/components/Blogs.tsx                      |  51 -----
 src/components/ContactMe.tsx                  |  33 ---
 src/components/Navbar.tsx                     |  55 -----
 src/components/Post.tsx                       |   2 +-
 src/components/PostHeader.tsx                 |   0
 src/components/Projects.tsx                   |  31 ---
 src/components/SingleBlog.tsx                 |  54 -----
 src/components/SingleProject.tsx              |  80 --------
 src/components/SocialLinks.tsx                |  35 ----
 src/schema_files/StaticPage.graphql           |  21 --
 src/utils/consts/index.tsx                    |  39 ----
 24 files changed, 228 insertions(+), 870 deletions(-)
 delete mode 100644 src/app/[slug]/layout.tsx
 delete mode 100644 src/app/[slug]/page.tsx
 delete mode 100644 src/app/changelog/layout.tsx
 delete mode 100644 src/app/changelog/page.tsx
 rename src/app/{changelog => preview}/[slug]/layout.tsx (100%)
 rename src/app/{changelog => preview}/[slug]/page.tsx (97%)
 delete mode 100644 src/app/projects/page.tsx
 delete mode 100644 src/components/AboutMe.tsx
 delete mode 100644 src/components/Blogs.tsx
 delete mode 100644 src/components/ContactMe.tsx
 delete mode 100644 src/components/Navbar.tsx
 delete mode 100644 src/components/PostHeader.tsx
 delete mode 100644 src/components/Projects.tsx
 delete mode 100644 src/components/SingleBlog.tsx
 delete mode 100644 src/components/SingleProject.tsx
 delete mode 100644 src/components/SocialLinks.tsx
 delete mode 100644 src/schema_files/StaticPage.graphql

diff --git a/generated/graphq.ts b/generated/graphq.ts
index d94c264..15f38b5 100644
--- a/generated/graphq.ts
+++ b/generated/graphq.ts
@@ -15,6 +15,7 @@ export type Scalars = {
   Int: { input: number; output: number; }
   Float: { input: number; output: number; }
   DateTime: { input: any; output: any; }
+  JSONObject: { input: any; output: any; }
   ObjectId: { input: any; output: any; }
   TimeZone: { input: any; output: any; }
   URL: { input: any; output: any; }
@@ -1198,6 +1199,18 @@ export enum DeviceType {
   Tablet = 'TABLET'
 }
 
+/** The input for disabling AI search for a documentation project */
+export type DisableDocumentationProjectAiSearchInput = {
+  /** The ID of the documentation project */
+  projectId: Scalars['ID']['input'];
+};
+
+/** The response to disabling AI search for a documentation project */
+export type DisableDocumentationProjectAiSearchPayload = {
+  __typename?: 'DisableDocumentationProjectAISearchPayload';
+  project?: Maybe<DocumentationProject>;
+};
+
 export type DisableDocumentationProjectHeadlessCmsInput = {
   projectId: Scalars['ID']['input'];
 };
@@ -1254,6 +1267,10 @@ export type DocsVisitors = {
 
 export type DocumentationApiReference = IGuide & {
   __typename?: 'DocumentationApiReference';
+  /** The parsed Swagger Definition of the API Reference. */
+  definition?: Maybe<Scalars['JSONObject']['output']>;
+  /** The base64 encoded gzip compressed string of the parsed OpenAPI Definition of the API Reference. */
+  definitionV2?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
   lastModified: Scalars['DateTime']['output'];
   name: Scalars['String']['output'];
@@ -1417,6 +1434,7 @@ export type DocumentationPageDraft = {
 
 export type DocumentationProject = Node & {
   __typename?: 'DocumentationProject';
+  ai?: Maybe<DocumentationProjectAiPreference>;
   analytics: DocumentationProjectAnalytics;
   appearance: DocumentationProjectAppearance;
   createdAt: Scalars['DateTime']['output'];
@@ -1445,6 +1463,7 @@ export type DocumentationProject = Node & {
   /** A user search to find users with a specific status */
   searchUsers: DocumentationProjectSearchUserConnection;
   settings: DocumentationProjectSettings;
+  subscription?: Maybe<DocumentationProjectSubscription>;
   updatedAt?: Maybe<Scalars['DateTime']['output']>;
   /** Url of the documentation project. */
   url: Scalars['String']['output'];
@@ -1480,6 +1499,30 @@ export type DocumentationProjectSearchUsersArgs = {
   input: DocumentationProjectSearchUsersInput;
 };
 
+export type DocumentationProjectAiPreference = {
+  __typename?: 'DocumentationProjectAIPreference';
+  /** The prompts for the documentation project. These prompts are shown to the user when AI Search chatbot is opened. */
+  prompts: Array<DocumentationProjectAiPrompt>;
+  /** The settings for the AI feature. */
+  settings: DocumentationProjectAiSettings;
+};
+
+export type DocumentationProjectAiPrompt = {
+  __typename?: 'DocumentationProjectAIPrompt';
+  /** The date the prompt was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** The ID of the prompt. */
+  id: Scalars['ID']['output'];
+  /** The prompt text. */
+  prompt: Scalars['String']['output'];
+};
+
+export type DocumentationProjectAiSettings = {
+  __typename?: 'DocumentationProjectAISettings';
+  /** A flag to indicate if the AI search feature is enabled. */
+  isSearchEnabled: Scalars['Boolean']['output'];
+};
+
 export type DocumentationProjectAnalytics = {
   __typename?: 'DocumentationProjectAnalytics';
   views?: Maybe<ProjectViewsConnection>;
@@ -1689,6 +1732,11 @@ export type DocumentationProjectPendingInviteConnection = PageConnection & {
   totalDocuments: Scalars['Int']['output'];
 };
 
+export enum DocumentationProjectProductName {
+  Enterprise = 'ENTERPRISE',
+  Startup = 'STARTUP'
+}
+
 /** A connection for the user search result. */
 export type DocumentationProjectSearchUserConnection = PageConnection & {
   __typename?: 'DocumentationProjectSearchUserConnection';
@@ -1730,6 +1778,20 @@ export type DocumentationProjectSettingsInput = {
   allowRobots?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
+export type DocumentationProjectSubscription = {
+  __typename?: 'DocumentationProjectSubscription';
+  nextBillingCycle?: Maybe<Scalars['DateTime']['output']>;
+  productName: DocumentationProjectProductName;
+  status: DocumentationProjectSubscriptionStatus;
+};
+
+export enum DocumentationProjectSubscriptionStatus {
+  Active = 'ACTIVE',
+  Canceled = 'CANCELED',
+  PastDue = 'PAST_DUE',
+  Unpaid = 'UNPAID'
+}
+
 export type DocumentationSection = IDocumentationNestableSidebarItem & IDocumentationSidebarItem & {
   __typename?: 'DocumentationSection';
   createdAt: Scalars['DateTime']['output'];
@@ -1845,6 +1907,8 @@ export type Draft = Node & {
   /** The publication the draft belongs to. */
   publication?: Maybe<Publication>;
   publishAs?: Maybe<User>;
+  /** Returns the published post when the draft is published, returns null otherwise */
+  publishedPost?: Maybe<Post>;
   readTimeInMinutes: Scalars['Int']['output'];
   /** The date the draft is scheduled to be published. */
   scheduledDate?: Maybe<Scalars['DateTime']['output']>;
@@ -2026,6 +2090,18 @@ export type EmailNotificationPreferences = {
   weeklyNewsletterEmails: Scalars['Boolean']['output'];
 };
 
+/** The input for enabling AI search for a documentation project */
+export type EnableDocumentationProjectAiSearchInput = {
+  /** The ID of the documentation project */
+  projectId: Scalars['ID']['input'];
+};
+
+/** The response to enabling AI search for a documentation project */
+export type EnableDocumentationProjectAiSearchPayload = {
+  __typename?: 'EnableDocumentationProjectAISearchPayload';
+  project?: Maybe<DocumentationProject>;
+};
+
 export type EnableDocumentationProjectHeadlessCmsInput = {
   projectId: Scalars['ID']['input'];
 };
@@ -2530,6 +2606,7 @@ export type IGuide = {
   id: Scalars['ID']['output'];
   lastModified: Scalars['DateTime']['output'];
   name: Scalars['String']['output'];
+  seo?: Maybe<Seo>;
   slug: Scalars['String']['output'];
   versionId?: Maybe<Scalars['String']['output']>;
 };
@@ -2785,7 +2862,11 @@ export type Mutation = {
   /** Deletes a role based invite. */
   deleteRoleBasedInvite: DeleteRoleBasedInvitePayload;
   deleteWebhook: DeleteWebhookPayload;
+  /** Mutation to disable AI search for a documentation project */
+  disableDocumentationProjectAISearch: DisableDocumentationProjectAiSearchPayload;
   disableDocumentationProjectHeadlessCms: DisableDocumentationProjectHeadlessCmsPayload;
+  /** Mutation to enable AI search for a documentation project */
+  enableDocumentationProjectAISearch: EnableDocumentationProjectAiSearchPayload;
   enableDocumentationProjectHeadlessCms: EnableDocumentationProjectHeadlessCmsPayload;
   /**
    * Will generate a authorization JWT to preview a docs project.
@@ -2852,6 +2933,8 @@ export type Mutation = {
   scheduleDraft: ScheduleDraftPayload;
   setDocumentationSidebarItemVisibility: SetDocumentationSidebarItemVisibilityPayload;
   subscribeToNewsletter: SubscribeToNewsletterPayload;
+  /** Mutation to sync documentation API reference definition */
+  syncDocumentationProjectApiDefinition: SyncDocumentationProjectApiDefinitionPayload;
   /** Toggle allowContributorEdits flag to allow or restrict external contributors to further edit published articles. */
   toggleAllowContributorEdits: ToggleAllowContributorEditsPayload;
   /**
@@ -2878,7 +2961,7 @@ export type Mutation = {
   updateDocumentationLink: UpdateDocumentationLinkPayload;
   updateDocumentationPageSettings: UpdateDocumentationPageSettingsPayload;
   updateDocumentationProjectSubdomain: UpdateDocumentationProjectSubdomainPayload;
-  /** Mutation to update a section in a guide  */
+  /** Mutation to update a section in a guide */
   updateDocumentationSection: UpdateDocumentationSectionPayload;
   updatePost: UpdatePostPayload;
   updateRedirectionRule: UpdateRedirectionRulePayload;
@@ -3013,11 +3096,21 @@ export type MutationDeleteWebhookArgs = {
 };
 
 
+export type MutationDisableDocumentationProjectAiSearchArgs = {
+  input: DisableDocumentationProjectAiSearchInput;
+};
+
+
 export type MutationDisableDocumentationProjectHeadlessCmsArgs = {
   input: DisableDocumentationProjectHeadlessCmsInput;
 };
 
 
+export type MutationEnableDocumentationProjectAiSearchArgs = {
+  input: EnableDocumentationProjectAiSearchInput;
+};
+
+
 export type MutationEnableDocumentationProjectHeadlessCmsArgs = {
   input: EnableDocumentationProjectHeadlessCmsInput;
 };
@@ -3218,6 +3311,11 @@ export type MutationSubscribeToNewsletterArgs = {
 };
 
 
+export type MutationSyncDocumentationProjectApiDefinitionArgs = {
+  input: SyncDocumentationProjectApiDefinitionInput;
+};
+
+
 export type MutationToggleAllowContributorEditsArgs = {
   input: ToggleAllowContributorEditsInput;
 };
@@ -5664,6 +5762,23 @@ export type SubscribeToNewsletterPayload = {
   status?: Maybe<NewsletterSubscribeStatus>;
 };
 
+/** The input for syncing API reference definitions */
+export type SyncDocumentationProjectApiDefinitionInput = {
+  /** The ID of the docs API reference */
+  apiReferenceId: Scalars['ID']['input'];
+  /** The ID of the documentation project */
+  projectId: Scalars['ID']['input'];
+  /** The ID of the reference version */
+  versionId: Scalars['ID']['input'];
+};
+
+/** The response to syncing documentation project API Reference definition */
+export type SyncDocumentationProjectApiDefinitionPayload = {
+  __typename?: 'SyncDocumentationProjectApiDefinitionPayload';
+  /** Signifies if the mutation was successful. */
+  success: Scalars['Boolean']['output'];
+};
+
 export type TableOfContentsFeature = Feature & {
   __typename?: 'TableOfContentsFeature';
   /** Whether or not the user has chosen to show a table of contents on the post. */
@@ -6626,14 +6741,6 @@ export type PublicationQueryVariables = Exact<{
 
 export type PublicationQuery = { __typename?: 'Query', publication?: { __typename?: 'Publication', id: string, descriptionSEO?: string | null, displayTitle?: string | null, title: string, isTeam: boolean, favicon?: string | null, followersCount?: number | null, preferences: { __typename?: 'Preferences', logo?: string | null }, ogMetaData: { __typename?: 'OpenGraphMetaData', image?: string | null }, links?: { __typename?: 'PublicationLinks', twitter?: string | null, instagram?: string | null, github?: string | null, website?: string | null, hashnode?: string | null, youtube?: string | null, linkedin?: string | null, mastodon?: string | null } | null, posts: { __typename?: 'PublicationPostConnection', edges: Array<{ __typename?: 'PostEdge', node: { __typename?: 'Post', id: string, slug: string, title: string, brief: string, coverImage?: { __typename?: 'PostCoverImage', url: string } | null } }> }, author: { __typename?: 'User', name: string, profilePicture?: string | null, location?: string | null, bio?: { __typename?: 'Content', html: string, text: string } | null } } | null };
 
-export type StaticPageQueryVariables = Exact<{
-  host?: InputMaybe<Scalars['String']['input']>;
-  slug: Scalars['String']['input'];
-}>;
-
-
-export type StaticPageQuery = { __typename?: 'Query', publication?: { __typename?: 'Publication', staticPage?: { __typename?: 'StaticPage', id: string, title: string, slug: string, hidden: boolean, content: { __typename?: 'Content', markdown: string, html: string }, ogMetaData?: { __typename?: 'OpenGraphMetaData', image?: string | null } | null, seo?: { __typename?: 'SEO', title?: string | null, description?: string | null } | null } | null } | null };
-
 
 
 export const PostDocument = `
@@ -6905,71 +7012,3 @@ useInfinitePublicationQuery.getKey = (variables?: PublicationQueryVariables) =>
 
 
 usePublicationQuery.fetcher = (variables?: PublicationQueryVariables, options?: RequestInit['headers']) => fetchData<PublicationQuery, PublicationQueryVariables>(PublicationDocument, variables, options);
-
-export const StaticPageDocument = `
-    query StaticPage($host: String, $slug: String!) {
-  publication(host: $host) {
-    staticPage(slug: $slug) {
-      id
-      title
-      slug
-      content {
-        markdown
-        html
-      }
-      hidden
-      ogMetaData {
-        image
-      }
-      seo {
-        title
-        description
-      }
-    }
-  }
-}
-    `;
-
-export const useStaticPageQuery = <
-      TData = StaticPageQuery,
-      TError = unknown
-    >(
-      variables: StaticPageQueryVariables,
-      options?: Omit<UseQueryOptions<StaticPageQuery, TError, TData>, 'queryKey'> & { queryKey?: UseQueryOptions<StaticPageQuery, TError, TData>['queryKey'] }
-    ) => {
-    
-    return useQuery<StaticPageQuery, TError, TData>(
-      {
-    queryKey: ['StaticPage', variables],
-    queryFn: fetchData<StaticPageQuery, StaticPageQueryVariables>(StaticPageDocument, variables),
-    ...options
-  }
-    )};
-
-useStaticPageQuery.document = StaticPageDocument;
-
-useStaticPageQuery.getKey = (variables: StaticPageQueryVariables) => ['StaticPage', variables];
-
-export const useInfiniteStaticPageQuery = <
-      TData = InfiniteData<StaticPageQuery>,
-      TError = unknown
-    >(
-      variables: StaticPageQueryVariables,
-      options: Omit<UseInfiniteQueryOptions<StaticPageQuery, TError, TData>, 'queryKey'> & { queryKey?: UseInfiniteQueryOptions<StaticPageQuery, TError, TData>['queryKey'] }
-    ) => {
-    
-    return useInfiniteQuery<StaticPageQuery, TError, TData>(
-      (() => {
-    const { queryKey: optionsQueryKey, ...restOptions } = options;
-    return {
-      queryKey: optionsQueryKey ?? ['StaticPage.infinite', variables],
-      queryFn: (metaData) => fetchData<StaticPageQuery, StaticPageQueryVariables>(StaticPageDocument, {...variables, ...(metaData.pageParam ?? {})})(),
-      ...restOptions
-    }
-  })()
-    )};
-
-useInfiniteStaticPageQuery.getKey = (variables: StaticPageQueryVariables) => ['StaticPage.infinite', variables];
-
-
-useStaticPageQuery.fetcher = (variables: StaticPageQueryVariables, options?: RequestInit['headers']) => fetchData<StaticPageQuery, StaticPageQueryVariables>(StaticPageDocument, variables, options);
diff --git a/src/app/[slug]/layout.tsx b/src/app/[slug]/layout.tsx
deleted file mode 100644
index 0ad9af9..0000000
--- a/src/app/[slug]/layout.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import getQueryClient from '@/utils/getQueryClient';
-import { StaticPageQuery, useStaticPageQuery } from '../../../generated/graphq';
-import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import Script from 'next/script';
-import { Metadata, ResolvingMetadata } from 'next';
-import { notFound } from 'next/navigation';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-interface StaticPageLayoutProps {
-  children: React.ReactNode;
-  params: {
-    slug: string;
-  };
-}
-
-interface Props {
-  params: {
-    slug: string;
-  };
-}
-
-export async function generateMetadata(
-  props: Props,
-  parent: ResolvingMetadata
-): Promise<Metadata> {
-  const queryClient = getQueryClient();
-
-  await queryClient.prefetchQuery({
-    queryKey: useStaticPageQuery.getKey({
-      host,
-      slug: props.params.slug,
-    }),
-    queryFn: useStaticPageQuery.fetcher({
-      host,
-      slug: props.params.slug,
-    }),
-  });
-  const data = queryClient.getQueryData<StaticPageQuery>(
-    useStaticPageQuery.getKey({
-      host,
-      slug: props.params.slug,
-    })
-  );
-
-  const page = data?.publication?.staticPage;
-
-  if (!page)
-    return {
-      title: '404 not found',
-    };
-
-  return {
-    title: page.seo?.title || page.title,
-    description: page.seo?.description,
-    openGraph: {
-      title: page.seo?.title!,
-      description: page.seo?.description!,
-      images: [
-        {
-          url: page.ogMetaData?.image!,
-          width: 1200,
-          height: 630,
-        },
-      ],
-    },
-  };
-}
-
-export default async function StaticPageLayoutProps({
-  children,
-  params,
-}: StaticPageLayoutProps) {
-  const queryClient = getQueryClient();
-
-  await queryClient.prefetchQuery({
-    queryKey: useStaticPageQuery.getKey({
-      host,
-      slug: params.slug,
-    }),
-    queryFn: useStaticPageQuery.fetcher({
-      host,
-      slug: params.slug,
-    }),
-  });
-
-  return (
-    <>
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        {children}
-      </HydrationBoundary>
-      <Script src='../../../utils/highlight.js' />
-    </>
-  );
-}
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
deleted file mode 100644
index 5d4a18d..0000000
--- a/src/app/[slug]/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-import { useQuery } from '@tanstack/react-query';
-import { useStaticPageQuery } from '../../../generated/graphq';
-import { Container } from '@/components/Container';
-import { MarkdownToHtml } from '@/components/MarkdownToHtml';
-import { ContactMe } from '@/components/ContactMe';
-import { notFound } from 'next/navigation';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export default function StaticPage({ params }: { params: { slug: string } }) {
-  const { data, error } = useQuery({
-    queryKey: useStaticPageQuery.getKey({
-      host,
-      slug: params.slug,
-    }),
-    queryFn: useStaticPageQuery.fetcher({
-      host,
-      slug: params.slug,
-    }),
-  });
-
-  if (!data || error) throw error;
-  const staticPage = data.publication?.staticPage;
-  if (!staticPage) notFound();
-
-  return (
-    <Container>
-      <div className='w-full rounded-3xl bg-white p-4 shadow-md md:p-8 dark:border dark:border-slate-800 dark:bg-slate-900'>
-        <h1 className='mb-6 w-full text-center text-3xl font-semibold text-slate-950 md:text-4xl dark:text-zinc-100'>
-          {staticPage.title}
-        </h1>
-        <hr className='mb-6 h-px border-0 bg-slate-800' />
-        <MarkdownToHtml contentMarkdown={staticPage.content.markdown} />
-      </div>
-      <ContactMe />
-    </Container>
-  );
-}
diff --git a/src/app/changelog/layout.tsx b/src/app/changelog/layout.tsx
deleted file mode 100644
index c8452fd..0000000
--- a/src/app/changelog/layout.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import {
-  useInfinitePostsQuery,
-  usePostsQuery,
-} from '../../../generated/graphq';
-import getQueryClient from '@/utils/getQueryClient';
-import Script from 'next/script';
-import '../../utils/highlightjs.css';
-
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-const pageSize = 2;
-const page = 1;
-
-export default async function BlogLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const queryClient = getQueryClient();
-
-  await queryClient.prefetchInfiniteQuery({
-    queryKey: useInfinitePostsQuery.getKey({
-      host,
-      pageSize,
-      page,
-    }),
-    queryFn: usePostsQuery.fetcher({
-      host,
-      pageSize,
-      page,
-    }),
-    initialPageParam: page,
-  });
-
-  return (
-    <>
-      <HydrationBoundary state={dehydrate(getQueryClient())}>
-        {children}
-      </HydrationBoundary>
-      <Script src='../../../utils/highlight.js' />
-    </>
-  );
-}
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx
deleted file mode 100644
index a0fe42c..0000000
--- a/src/app/changelog/page.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client';
-import { Container } from '@/components/Container';
-import {
-  useInfinitePostsQuery,
-  usePostsQuery,
-} from '../../../generated/graphq';
-import { Post } from '@/components/Post';
-import { Waypoint } from 'react-waypoint';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export default function Blog() {
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isFetching,
-    error,
-  } = useInfinitePostsQuery(
-    {
-      host,
-      pageSize: 2,
-      page: 1,
-    },
-    {
-      queryFn: ({ pageParam }) =>
-        usePostsQuery.fetcher({
-          host,
-          pageSize: 2,
-          page: pageParam as number,
-        })(),
-      initialPageParam: 1,
-      getNextPageParam: (lastPage) => {
-        return lastPage.publication?.postsViaPage.pageInfo.nextPage ?? null;
-      },
-    }
-  );
-
-  const onEnter = () => {
-    if (!isFetching && data && hasNextPage) fetchNextPage();
-  };
-
-  if (!data || error) throw error;
-
-  const posts =
-    data.pages.flatMap((page) => page.publication?.postsViaPage.nodes) || [];
-
-  return (
-    <Container>
-      <div className='flex flex-col gap-5 py-6 text-slate-950 dark:text-zinc-300'>
-        <div className='flex flex-col gap-5'>
-          <h1 className='text-3xl font-bold md:text-4xl dark:text-zinc-100'>
-            Hashnode Changelog
-          </h1>
-          <p className='font-light md:w-[560px]'>
-            Explore the latest updates, improvements, and bug fixes with
-            Hashnode Changelogs. Stay informed about the evolving features and
-            enhancements to enhance your coding experience.
-          </p>
-        </div>
-        {posts.length === 0 && (
-          <p className='flex w-full flex-1 items-center justify-center gap-3 text-lg font-semibold'>
-            <ExclamationTriangleIcon className='h-8 w-8' />
-            No posts found
-          </p>
-        )}
-        {posts.length > 0 && (
-          <div className='relative flex flex-col gap-20 border-slate-200 sm:border-l dark:border-slate-800'>
-            {posts.map((post, index) => (
-              <>
-                {index === 0 && (
-                  <div className='absolute -left-2 -top-1 hidden aspect-square w-4 bg-white sm:block dark:bg-slate-800' />
-                )}
-                <Post key={post?.id} postInfo={post} />
-              </>
-            ))}
-            {isFetchingNextPage && (
-              <div className='flex items-center justify-center'>
-                <p className='text-lg font-semibold'>Loading...</p>
-              </div>
-            )}
-            <Waypoint onEnter={onEnter} />
-          </div>
-        )}
-      </div>
-    </Container>
-  );
-}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 7b43e85..ab4c5ef 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -14,7 +14,7 @@ export default function GlobalError({
     <html>
       <body className='bg-slate-300 dark:bg-slate-950'>
         <Container>
-          <div className='mb-20 flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-3xl bg-white px-4 py-8 text-slate-950 shadow-md md:px-12 dark:border dark:border-slate-800 dark:bg-slate-900 dark:text-zinc-300'>
+          <div className='mb-20 flex aspect-video w-full flex-col items-center justify-center gap-3 bg-white px-4 py-8 text-slate-950 md:px-12 dark:bg-slate-900 dark:text-zinc-300'>
             <ExclamationTriangleIcon className='aspect-square h-16' />
             <h1 className='text-2xl font-bold lg:text-4xl'>
               Some Error Occurred
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa152ab..dd98f1a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,15 +1,23 @@
 import { Metadata, ResolvingMetadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import { Navbar } from '@/components/Navbar';
 import { ReactQueryProvider } from '@/components/ReactQueryProvider';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import { config } from '@fortawesome/fontawesome-svg-core';
-import { PublicationQuery, usePublicationQuery } from '../../generated/graphq';
+import {
+  PublicationQuery,
+  useInfinitePostsQuery,
+  usePostsQuery,
+  usePublicationQuery,
+} from '../../generated/graphq';
 import getQueryClient from '@/utils/getQueryClient';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { getAutogeneratedPublicationOG } from '@/utils/social/og';
+import Script from 'next/script';
+
 const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
+const pageSize = 2;
+const page = 1;
 
 config.autoAddCss = false;
 
@@ -38,10 +46,10 @@ export async function generateMetadata(
   if (!data?.publication) return {};
 
   return {
-    title: data.publication.author.name,
+    title: data.publication.title,
     description:
       data.publication.descriptionSEO ||
-      `${data.publication.author.name}'s Blog` ||
+      `${data.publication.title}'s Changelog` ||
       '',
     twitter: {
       card: 'summary_large_image',
@@ -50,10 +58,7 @@ export async function generateMetadata(
         data.publication.title ||
         'Hashnode Blog Starter Kit',
       description:
-        data.publication.descriptionSEO ||
-        data.publication.title ||
-        `${data.publication.author.name}'s Blog` ||
-        '',
+        data.publication.descriptionSEO || data.publication.title || '',
       images: [
         {
           url:
@@ -72,7 +77,7 @@ export async function generateMetadata(
       description:
         data.publication.descriptionSEO ||
         data.publication.title ||
-        `${data.publication.author.name}'s Blog` ||
+        `${data.publication.title}'s Changelog` ||
         '',
       images: [
         {
@@ -94,32 +99,29 @@ export default async function RootLayout({
 }>) {
   const queryClient = getQueryClient();
 
-  await queryClient.prefetchQuery({
-    queryKey: usePublicationQuery.getKey({
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: useInfinitePostsQuery.getKey({
       host,
+      pageSize,
+      page,
     }),
-    queryFn: usePublicationQuery.fetcher({
+    queryFn: usePostsQuery.fetcher({
       host,
+      pageSize,
+      page,
     }),
+    initialPageParam: page,
   });
 
-  const data = queryClient.getQueryData<PublicationQuery>(
-    usePublicationQuery.getKey({
-      host,
-    })
-  );
-
-  if (!data?.publication)
-    throw new Error('Please check the host name in your .env file');
-
   return (
     <html lang='en'>
       <body className={`${inter.className} dark:bg-slate-950`}>
         <ReactQueryProvider>
-          <HydrationBoundary state={dehydrate(queryClient)}>
+          <HydrationBoundary state={dehydrate(getQueryClient())}>
             {children}
           </HydrationBoundary>
         </ReactQueryProvider>
+        <Script src='../utils/highlight.js' />
       </body>
     </html>
   );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 825d1ff..d19d624 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -5,7 +5,7 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 export default function NotFound() {
   return (
     <Container>
-      <div className='mb-20 flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-3xl bg-white px-4 py-8 text-slate-950 shadow-md md:px-12 dark:border dark:border-slate-800 dark:bg-slate-900 dark:text-zinc-300'>
+      <div className='mb-20 flex aspect-video w-full flex-col items-center justify-center gap-3 bg-white px-4 py-8 text-slate-950 md:px-12 dark:bg-slate-900 dark:text-zinc-300'>
         <ExclamationTriangleIcon className='aspect-square h-16' />
         <h1 className='text-2xl font-bold lg:text-4xl'>404</h1>
         <Link href='/'>Take me back to Home</Link>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 90afac7..d5e0b65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,87 @@
-import { AboutMe } from '@/components/AboutMe';
-import { Blogs } from '@/components/Blogs';
-import { ContactMe } from '@/components/ContactMe';
+'use client';
 import { Container } from '@/components/Container';
-import { Projects } from '@/components/Projects';
+import { useInfinitePostsQuery, usePostsQuery } from '../../generated/graphq';
+import { Post } from '@/components/Post';
+import { Waypoint } from 'react-waypoint';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
+
+export default function Home() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    error,
+  } = useInfinitePostsQuery(
+    {
+      host,
+      pageSize: 2,
+      page: 1,
+    },
+    {
+      queryFn: ({ pageParam }) =>
+        usePostsQuery.fetcher({
+          host,
+          pageSize: 2,
+          page: pageParam as number,
+        })(),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage) => {
+        return lastPage.publication?.postsViaPage.pageInfo.nextPage ?? null;
+      },
+    }
+  );
+
+  const onEnter = () => {
+    if (!isFetching && data && hasNextPage) fetchNextPage();
+  };
+
+  if (!data || error) throw error;
+
+  const posts =
+    data.pages.flatMap((page) => page.publication?.postsViaPage.nodes) || [];
 
-export default async function Home() {
   return (
     <Container>
-      <AboutMe />
-      <Blogs />
-      <Projects />
-      <ContactMe />
+      <div className='flex flex-col gap-5 py-6 text-slate-950 dark:text-zinc-300'>
+        <div className='flex flex-col gap-5'>
+          <h1 className='text-3xl font-bold md:text-4xl dark:text-zinc-100'>
+            Hashnode Changelog
+          </h1>
+          <p className='font-light md:w-[560px]'>
+            Explore the latest updates, improvements, and bug fixes with
+            Hashnode Changelogs. Stay informed about the evolving features and
+            enhancements to enhance your coding experience.
+          </p>
+        </div>
+        {posts.length === 0 && (
+          <p className='flex w-full flex-1 items-center justify-center gap-3 text-lg font-semibold'>
+            <ExclamationTriangleIcon className='h-8 w-8' />
+            No posts found
+          </p>
+        )}
+        {posts.length > 0 && (
+          <div className='relative flex flex-col gap-20 border-slate-200 sm:border-l dark:border-slate-800'>
+            {posts.map((post, index) => (
+              <>
+                {index === 0 && (
+                  <div className='absolute -left-2 -top-1 hidden aspect-square w-4 bg-white sm:block dark:bg-slate-950' />
+                )}
+                <Post key={post?.id} postInfo={post} />
+              </>
+            ))}
+            {isFetchingNextPage && (
+              <div className='flex items-center justify-center'>
+                <p className='text-lg font-semibold'>Loading...</p>
+              </div>
+            )}
+            <Waypoint onEnter={onEnter} />
+          </div>
+        )}
+      </div>
     </Container>
   );
 }
diff --git a/src/app/changelog/[slug]/layout.tsx b/src/app/preview/[slug]/layout.tsx
similarity index 100%
rename from src/app/changelog/[slug]/layout.tsx
rename to src/app/preview/[slug]/layout.tsx
diff --git a/src/app/changelog/[slug]/page.tsx b/src/app/preview/[slug]/page.tsx
similarity index 97%
rename from src/app/changelog/[slug]/page.tsx
rename to src/app/preview/[slug]/page.tsx
index 1a8e86d..a471526 100644
--- a/src/app/changelog/[slug]/page.tsx
+++ b/src/app/preview/[slug]/page.tsx
@@ -15,7 +15,11 @@ import { formatDate } from '@/utils/consts/format-date';
 
 const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
 
-export default function BlogContent({ params }: { params: { slug: string } }) {
+export default function ChangelogContent({
+  params,
+}: {
+  params: { slug: string };
+}) {
   const { data, error } = useQuery({
     queryKey: usePostQuery.getKey({
       host,
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
deleted file mode 100644
index a5026d2..0000000
--- a/src/app/projects/page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@/components/Container';
-import { SingleProject } from '@/components/SingleProject';
-import { ContactMe } from '@/components/ContactMe';
-import { PROJECTS } from '@/utils/consts/index';
-export default function Project() {
-  return (
-    <Container>
-      <div className='flex flex-col gap-5 rounded-3xl bg-white px-5 py-5 dark:border dark:border-slate-800 dark:bg-slate-900'>
-        <h1 className='w-full text-center text-3xl font-semibold text-slate-950 md:text-4xl dark:text-zinc-100'>
-          Projects
-        </h1>
-        <div className='mx-auto flex w-full flex-col gap-5 sm:flex-row sm:justify-center md:gap-8'>
-          {PROJECTS.slice(0, 2).map((project) => (
-            <SingleProject project={project} key={project.name} />
-          ))}
-        </div>
-      </div>
-      <ContactMe />
-    </Container>
-  );
-}
diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
deleted file mode 100644
index 73871f7..0000000
--- a/src/components/AboutMe.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client';
-import Image from 'next/image';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
-import { usePublicationQuery } from '../../generated/graphq';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export const AboutMe = () => {
-  const { data, error } = usePublicationQuery({
-    host,
-  });
-
-  if (!data?.publication || error) return null;
-
-  const { publication } = data;
-  const isAvailableLink =
-    publication.links?.linkedin || publication.links?.twitter;
-  return (
-    <div className='flex w-full flex-col items-center gap-7 rounded-3xl bg-white p-4 shadow-md sm:flex-row dark:border dark:border-slate-800 dark:bg-slate-900'>
-      {publication.author.profilePicture && (
-        <div className='flex aspect-square w-full overflow-hidden rounded-xl sm:max-w-52'>
-          <Image
-            src={publication.author.profilePicture}
-            alt='profile pic'
-            width={1000}
-            height={1000}
-            className='flex-1'
-          />
-        </div>
-      )}
-
-      <div className='flex max-w-full flex-1 flex-col'>
-        <div className='mb-4 flex w-full flex-col items-center justify-between gap-2 sm:flex-row lg:gap-0'>
-          {isAvailableLink && (
-            <a
-              href={isAvailableLink}
-              target='_blank'
-              className='hidden rounded-2xl bg-green-200 px-3 py-1 text-sm text-green-700 md:block'
-            >
-              &#8226; Available for work
-            </a>
-          )}
-          {isAvailableLink && (
-            <a
-              href={isAvailableLink}
-              target='_blank'
-              className='block rounded-2xl bg-green-200 px-3 py-1 text-sm text-green-700 md:hidden'
-            >
-              &#8226; Available
-            </a>
-          )}
-        </div>
-        <div className='mb-4 mr-4 flex flex-col gap-3'>
-          <h1 className='w-full text-2xl font-semibold text-slate-950 sm:text-3xl dark:text-zinc-100'>{`Hi There! I am ${publication.author.name}!`}</h1>
-          {publication.author.bio && (
-            <div
-              className='text-justify text-slate-500 lg:text-left dark:text-zinc-300'
-              dangerouslySetInnerHTML={{
-                __html: publication.author.bio.html || '',
-              }}
-            />
-          )}
-        </div>
-        {publication.author.location && (
-          <p className='flex w-full items-center gap-2 text-sm text-slate-500 dark:text-zinc-300'>
-            <FontAwesomeIcon icon={faLocationDot} />
-            {publication.author.location}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/Blogs.tsx b/src/components/Blogs.tsx
deleted file mode 100644
index 240fd02..0000000
--- a/src/components/Blogs.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-import { SingleBlog } from './SingleBlog';
-import Link from 'next/link';
-import { usePublicationQuery } from '../../generated/graphq';
-import {
-  ArrowRightIcon,
-  ExclamationTriangleIcon,
-} from '@heroicons/react/24/outline';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export const Blogs = () => {
-  const { data } = usePublicationQuery({
-    host,
-  });
-
-  if (!data || !data.publication) return null;
-  const posts = data.publication.posts.edges;
-
-  return (
-    <div className='flex min-h-80 w-full flex-col items-start rounded-3xl bg-white p-6 text-slate-950 shadow-lg dark:border dark:border-slate-800 dark:bg-slate-900 dark:text-zinc-300'>
-      <div className='mb-6 flex w-full flex-row items-center justify-between'>
-        <h2 className='text-2xl font-semibold dark:text-zinc-100'>Blogs</h2>
-        <Link
-          href={'/blog'}
-          className='hidden flex-row items-center gap-2 rounded-full px-3 py-1 text-sm hover:bg-slate-600 hover:text-white md:flex dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-        >
-          All blogs <ArrowRightIcon className='h-4 w-4' />
-        </Link>
-      </div>
-      {posts.length > 0 && (
-        <div className='flex w-full flex-col gap-5 sm:flex-row sm:justify-center md:gap-8'>
-          {posts.map((edge) => (
-            <SingleBlog blogInfo={edge.node} key={edge.node.id} />
-          ))}
-        </div>
-      )}
-      {posts.length === 0 && (
-        <p className='flex w-full flex-1 items-center justify-center gap-3 text-lg font-semibold'>
-          <ExclamationTriangleIcon className='h-8 w-8' />
-          No posts found
-        </p>
-      )}
-      <Link
-        href={'/blog'}
-        className='mt-6 flex flex-row items-center gap-2 self-center rounded-full px-4 py-2 text-sm shadow-sm hover:bg-slate-600 hover:text-white sm:text-base md:hidden dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-      >
-        All blogs <ArrowRightIcon className='h-4 w-4' />
-      </Link>
-    </div>
-  );
-};
diff --git a/src/components/ContactMe.tsx b/src/components/ContactMe.tsx
deleted file mode 100644
index 3e88755..0000000
--- a/src/components/ContactMe.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-import { usePublicationQuery } from '../../generated/graphq';
-import { SocialLinks } from './SocialLinks';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export const ContactMe = () => {
-  const { data } = usePublicationQuery({
-    host,
-  });
-
-  return (
-    <footer className='mb-20 flex w-full flex-col items-center gap-5 rounded-3xl bg-white p-6 text-slate-950 shadow-lg md:p-8 dark:border dark:border-slate-800 dark:bg-slate-900 dark:text-zinc-300'>
-      <h2 className='text-xl font-semibold lg:text-2xl'>
-        Have a Project Idea?
-      </h2>
-      <div className='flex flex-col items-center gap-2'>
-        <p className='text-base lg:text-lg'>Let&apos;s connect</p>
-        <SocialLinks />
-      </div>
-      <p className='text-sm text-slate-500 dark:text-zinc-300'>
-        Template by{' '}
-        <a href='//twitter.com/iammarmirza' target='_blank'>
-          Ammar Mirza
-        </a>
-      </p>
-      {data?.publication?.title && (
-        <p className='flex items-center gap-1 text-sm text-slate-500 dark:text-zinc-300'>
-          &copy; {data.publication.title} 2024
-        </p>
-      )}
-    </footer>
-  );
-};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
deleted file mode 100644
index b67ab96..0000000
--- a/src/components/Navbar.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import {
-  HomeIcon as HomeIconOutline,
-  NewspaperIcon as NewspaperIconOutline,
-  CogIcon as CogIconOutline,
-} from '@heroicons/react/24/outline';
-
-import {
-  HomeIcon as HomeIconSolid,
-  NewspaperIcon as NewspaperIconSolid,
-  CogIcon as CogIconSolid,
-} from '@heroicons/react/24/solid';
-
-const NAVLINKS = [
-  {
-    name: 'Home',
-    href: '/',
-    icon: <HomeIconOutline className='h-6 w-6' />,
-    activeIcon: <HomeIconSolid className='h-6 w-6' />,
-  },
-  {
-    name: 'Blog',
-    href: '/blog',
-    icon: <NewspaperIconOutline className='h-6 w-6' />,
-    activeIcon: <NewspaperIconSolid className='h-6 w-6' />,
-  },
-  {
-    name: 'Projects',
-    href: '/projects',
-    icon: <CogIconOutline className='h-6 w-6' />,
-    activeIcon: <CogIconSolid className='h-6 w-6' />,
-  },
-];
-
-export const Navbar = () => {
-  const path = usePathname();
-  return (
-    <div className='fixed bottom-5 z-20 flex w-full justify-center'>
-      <nav className='flex flex-row gap-3 rounded-full border border-zinc-100 bg-slate-100 px-3 py-2 md:gap-5 dark:border-slate-800 dark:bg-slate-900'>
-        {NAVLINKS.map((navlink) => (
-          <Link
-            href={navlink.href}
-            key={navlink.name}
-            className={`rounded-full p-3 shadow-sm dark:text-slate-400 dark:hover:bg-slate-50/10 ${path === navlink.href ? 'bg-slate-300 dark:bg-slate-50/10 dark:text-slate-50' : 'bg-white dark:bg-slate-950 dark:text-slate-400'}`}
-          >
-            {path === navlink.href ? navlink.activeIcon : navlink.icon}
-          </Link>
-        ))}
-      </nav>
-    </div>
-  );
-};
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 91fbaf9..66ed0c1 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -89,7 +89,7 @@ export const Post = (props: PostProps) => {
     <div className='relative flex w-full flex-col px-2 sm:px-0 sm:pl-20'>
       <div className='absolute -left-2 top-3 hidden aspect-square w-4 rounded-full bg-slate-300 sm:block dark:bg-slate-700'></div>
       <Link
-        href={`/changelog/${postInfo.slug}`}
+        href={`/preview/${postInfo.slug}`}
         className='mb-5 w-full text-3xl font-semibold dark:text-zinc-100'
       >
         {postInfo.title}
diff --git a/src/components/PostHeader.tsx b/src/components/PostHeader.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
deleted file mode 100644
index 71d6f3d..0000000
--- a/src/components/Projects.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Link from 'next/link';
-import { SingleProject } from './SingleProject';
-import { PROJECTS } from '@/utils/consts';
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
-
-export const Projects = () => {
-  return (
-    <div className='flex w-full flex-col rounded-3xl bg-white p-6 shadow-lg dark:border dark:border-slate-800 dark:bg-slate-900'>
-      <div className='mb-6 flex w-full flex-row items-center justify-between text-slate-950 dark:text-zinc-300'>
-        <h2 className='text-2xl font-semibold dark:text-zinc-100'>Projects</h2>
-        <Link
-          href={'/projects'}
-          className='hidden flex-row items-center gap-2 rounded-full px-3 py-1 text-sm hover:bg-slate-600 hover:text-white md:flex dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-        >
-          All projects <ArrowRightIcon className='h-4 w-4' />
-        </Link>
-      </div>
-      <div className='mx-auto flex w-full flex-col gap-5 sm:flex-row sm:justify-center md:gap-8'>
-        {PROJECTS.slice(0, 2).map((project) => (
-          <SingleProject project={project} key={project.name} />
-        ))}
-      </div>
-      <Link
-        href={'/projects'}
-        className='mt-6 flex flex-row items-center gap-2 self-center rounded-full px-4 py-2 text-sm shadow-sm hover:bg-slate-600 hover:text-white sm:text-base md:hidden dark:text-zinc-300 dark:hover:bg-slate-950'
-      >
-        All projects <ArrowRightIcon className='h-4 w-4' />
-      </Link>
-    </div>
-  );
-};
diff --git a/src/components/SingleBlog.tsx b/src/components/SingleBlog.tsx
deleted file mode 100644
index 76fa39b..0000000
--- a/src/components/SingleBlog.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import Link from 'next/link';
-import { resizeImage } from '@/utils/image';
-import { CoverImage } from './CoverImage';
-import { ImagePlaceholder } from './ImagePlaceholder';
-
-interface SingleBlogProps {
-  blogInfo: {
-    __typename?: 'Post' | undefined;
-    id: string;
-    slug: string;
-    title: string;
-    brief: string;
-    publishedAt?: any;
-    coverImage?:
-      | {
-          __typename?: 'PostCoverImage' | undefined;
-          url: string;
-        }
-      | null
-      | undefined;
-  };
-}
-
-export const SingleBlog = (props: SingleBlogProps) => {
-  const { brief, title, slug } = props.blogInfo;
-  const coverImageSrc = props.blogInfo.coverImage?.url
-    ? resizeImage(props.blogInfo.coverImage.url, {
-        w: 1600,
-        h: 840,
-        c: 'thumb',
-      })
-    : undefined;
-
-  return (
-    <Link
-      href={`/blog/${slug}`}
-      className='group w-full items-center rounded-2xl border border-zinc-100 px-4 py-4 text-slate-950 hover:border-zinc-200 sm:max-w-72 md:max-w-80 lg:max-w-96 dark:border-slate-800 dark:hover:border-slate-700'
-    >
-      <article className='relative flex w-full flex-col gap-3'>
-        {coverImageSrc ? (
-          <CoverImage title={title} src={coverImageSrc} priority={true} />
-        ) : (
-          <ImagePlaceholder />
-        )}
-        <h3 className='line-clamp-2 text-xl font-semibold dark:text-zinc-100'>
-          {title}
-        </h3>
-        <p className='line-clamp-3 text-justify text-sm leading-snug text-slate-500 dark:text-zinc-300'>
-          {brief}
-        </p>
-      </article>
-    </Link>
-  );
-};
diff --git a/src/components/SingleProject.tsx b/src/components/SingleProject.tsx
deleted file mode 100644
index fe7083f..0000000
--- a/src/components/SingleProject.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import Image from 'next/image';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faArrowRight,
-  faArrowRightArrowLeft,
-  faArrowRightRotate,
-  faArrowUpRightFromSquare,
-} from '@fortawesome/free-solid-svg-icons';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { PhotoIcon } from '@heroicons/react/24/outline';
-
-interface SingleProjectProps {
-  project: {
-    name: string;
-    url?: string;
-    demoLink?: string;
-    imageUrl?: string;
-  };
-}
-export const SingleProject = (props: SingleProjectProps) => {
-  const { project } = props;
-  return (
-    <div className='w-full items-center rounded-2xl border border-zinc-100 px-4 py-4 hover:border-zinc-200 sm:max-w-72 md:max-w-80 lg:max-w-96 dark:border-slate-800 dark:hover:border-slate-700'>
-      <div className='flex w-full flex-col gap-3 text-slate-950 dark:text-zinc-300'>
-        {project.imageUrl ? (
-          <div className='flex aspect-video w-full overflow-hidden rounded-xl'>
-            <Image
-              src={project.imageUrl}
-              width={2000}
-              height={2000}
-              alt='Project Image'
-              className='flex-1'
-            />
-          </div>
-        ) : (
-          <div className='flex aspect-video w-full items-center justify-center rounded-xl bg-slate-300 dark:bg-slate-950'>
-            <p className='font-semibold text-slate-950 dark:text-zinc-300'>
-              <PhotoIcon className='h-12 w-12' />
-            </p>
-          </div>
-        )}
-        <p className='text-xl font-semibold dark:text-zinc-100'>
-          {project.name}
-        </p>
-        <div className='flex w-full flex-row items-center gap-2 text-xs'>
-          {project.url ? (
-            <a
-              href={`//${project.url}`}
-              target='_blank'
-              className='flex items-center gap-2 rounded-full px-2 py-1 hover:bg-slate-600 hover:text-white dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-            >
-              <FontAwesomeIcon icon={faGithub} />
-              Source Code
-            </a>
-          ) : (
-            <div className='flex cursor-pointer items-center gap-2 rounded-full px-2 py-1 hover:bg-slate-600 hover:text-white dark:hover:bg-slate-950 dark:hover:text-zinc-300'>
-              <FontAwesomeIcon icon={faGithub} />
-              Source Code
-            </div>
-          )}
-          {project.demoLink ? (
-            <a
-              href={`//${project.demoLink}`}
-              target='_blank'
-              className='flex items-center gap-2 rounded-full px-2 py-1 hover:bg-slate-600 hover:text-white dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-            >
-              Live Demo
-              <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-            </a>
-          ) : (
-            <div className='flex cursor-pointer items-center gap-2 rounded-full px-2 py-1 hover:bg-slate-600 hover:text-white dark:hover:bg-slate-950 dark:hover:text-zinc-300'>
-              Live Demo
-              <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/SocialLinks.tsx b/src/components/SocialLinks.tsx
deleted file mode 100644
index 245531c..0000000
--- a/src/components/SocialLinks.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SOCIAL_LINKS } from '@/utils/consts';
-import { PublicationLinks, usePublicationQuery } from '../../generated/graphq';
-const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST as string;
-
-export const SocialLinks = () => {
-  const { data } = usePublicationQuery({
-    host,
-  });
-
-  if (!data?.publication?.links) return null;
-  const links = Object.entries(data.publication.links).filter(
-    ([key, value]) => value
-  ) as Array<[keyof PublicationLinks, string]>;
-
-  return (
-    <div className='flex flex-wrap gap-3 md:gap-4'>
-      {links.map(([socialName, socialLink]) => (
-        <a
-          href={socialLink as string}
-          target='_blank'
-          className='flex rounded-full p-2 text-slate-950 hover:bg-slate-600 hover:text-white hover:shadow-sm dark:text-zinc-300 dark:hover:bg-slate-950 dark:hover:text-zinc-300'
-          key={socialName}
-        >
-          <FontAwesomeIcon
-            icon={SOCIAL_LINKS[socialName]!}
-            className='h-5 w-5'
-          />
-        </a>
-      ))}
-    </div>
-  );
-};
diff --git a/src/schema_files/StaticPage.graphql b/src/schema_files/StaticPage.graphql
deleted file mode 100644
index b3988ae..0000000
--- a/src/schema_files/StaticPage.graphql
+++ /dev/null
@@ -1,21 +0,0 @@
-query StaticPage($host: String, $slug: String!) {
-  publication(host: $host) {
-    staticPage(slug: $slug) {
-      id
-      title
-      slug
-      content {
-        markdown
-        html
-      }
-      hidden
-      ogMetaData {
-        image
-      }
-      seo {
-        title
-        description
-      }
-    }
-  }
-}
diff --git a/src/utils/consts/index.tsx b/src/utils/consts/index.tsx
index de62c24..e69de29 100644
--- a/src/utils/consts/index.tsx
+++ b/src/utils/consts/index.tsx
@@ -1,39 +0,0 @@
-import { PublicationLinks } from '../../../generated/graphq';
-import {
-  faGithub,
-  faHashnode,
-  faInstagram,
-  faLinkedin,
-  faMastodon,
-  faXTwitter,
-  faYoutube,
-  IconDefinition,
-} from '@fortawesome/free-brands-svg-icons';
-import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-
-export const SOCIAL_LINKS: {
-  [key in keyof PublicationLinks]: IconDefinition;
-} = {
-  instagram: faInstagram,
-  github: faGithub,
-  website: faGlobe,
-  hashnode: faHashnode,
-  youtube: faYoutube,
-  linkedin: faLinkedin,
-  mastodon: faMastodon,
-  twitter: faXTwitter,
-};
-
-export const PROJECTS: {
-  name: string;
-  url?: string;
-  demoLink?: string;
-  imageUrl?: string;
-}[] = [
-  {
-    name: 'Project 1',
-  },
-  {
-    name: 'Project 2',
-  },
-];