Refactor types/index.ts and add LadderPayload interface

app/(personal)/page.tsx

@@ -4,19 +4,20 @@ import Link from 'next/link'
 
 import { HomePage } from '@/components/pages/home/HomePage'
 import { studioUrl } from '@/sanity/lib/api'
-import { loadAllProject,loadHomePage } from '@/sanity/loader/loadQuery'
+import { loadAllProject,loadHomePage, loadLadder } from '@/sanity/loader/loadQuery'
 const HomePagePreview = dynamic(
   () => import('@/components/pages/home/HomePagePreview'),
 )
 
 export default async function IndexRoute() {
   const initial = await loadHomePage()
+  const initial1 = await loadLadder()
   const page = 1 // specify the desired page number
   const limit = 100 // specify the number of items per page
   const initial2 = await loadAllProject(page, limit)
 
   if (draftMode().isEnabled) {
-    return <HomePagePreview initial={initial} />
+    return <HomePagePreview initial={initial} initial1={initial1} />
   }
 
   if (!initial.data) {
@@ -31,5 +32,5 @@ export default async function IndexRoute() {
     )
   }
 
-  return <HomePage data2={initial2?.data} data={initial.data} />
+  return <HomePage data2={initial2?.data} data1={initial1.data} data={initial.data} />
 }

components/pages/home/HomePage.tsx

@@ -6,19 +6,27 @@ import { ProjectListItem } from '@/components/pages/home/ProjectListItem'
 import AllProjects from '@/components/shared/allProjects'
 import { Header } from '@/components/shared/Header'
 import { resolveHref } from '@/sanity/lib/utils'
-import type { HomePagePayload } from '@/types'
+import type { HomePagePayload, LadderPayload } from '@/types'
 
 import { Gemini } from './Gemini'
 import { GlobeView } from './GlobeView'
 import { TimelineShowcase } from './TimelineShowcase'
 
 export interface HomePageProps {
   data: HomePagePayload | null
+  data1: LadderPayload | null
   data2: any
   encodeDataAttribute?: EncodeDataAttributeCallback
+  encodeDataAttribute1?: EncodeDataAttributeCallback
 }
 
-export function HomePage({ data, data2, encodeDataAttribute }: HomePageProps) {
+export function HomePage({
+  data,
+  data1,
+  data2,
+  encodeDataAttribute,
+  encodeDataAttribute1,
+}: HomePageProps) {
   // Default to an empty object to allow previews on non-existent documents
   const { overview = [], showcaseProjects = [], title = '' } = data ?? {}
 
@@ -50,11 +58,12 @@ export function HomePage({ data, data2, encodeDataAttribute }: HomePageProps) {
           })}
         </div>
       )}
-      <TimelineShowcase />
+      <TimelineShowcase data1={data1} encodeDataAttribute1={encodeDataAttribute1} />
       <AllProjects data2={data2} />
       <Gemini />
-      <Suspense><GlobeView /></Suspense>
-
+      <Suspense>
+        <GlobeView />
+      </Suspense>
     </div>
   )
 }

components/pages/home/HomePagePreview.tsx

@@ -2,31 +2,50 @@
 
 import { type QueryResponseInitial } from '@sanity/react-loader'
 
-import { homePageQuery } from '@/sanity/lib/queries'
+import { homePageQuery, ladderQuery } from '@/sanity/lib/queries'
 import { useQuery } from '@/sanity/loader/useQuery'
-import { HomePagePayload } from '@/types'
+import { HomePagePayload, LadderPayload } from '@/types'
 
 import HomePage from './HomePage'
 
 type Props = {
   initial: QueryResponseInitial<HomePagePayload | null>
+  initial1: QueryResponseInitial<LadderPayload | null>
 }
 
 export default function HomePagePreview(props: Props) {
-  const { initial } = props
-  const { data, encodeDataAttribute } = useQuery<HomePagePayload | null>(
-    homePageQuery,
-    {},
-    { initial },
-  )
+  const { initial, initial1 } = props
+
+  // Using distinct variable names to avoid conflicts
+  const { data: homeData, encodeDataAttribute: encodeHomeData } =
+    useQuery<HomePagePayload | null>(homePageQuery, {}, { initial })
+
+  const { data: ladderData, encodeDataAttribute: encodeLadderData } =
+    useQuery<LadderPayload | null>(ladderQuery, {}, { initial: initial1 })
 
-  if (!data) {
+  if (!homeData) {
     return (
       <div className="text-center">
         Please start editing your Home document to see the preview!
       </div>
     )
   }
 
-  return <HomePage data2={undefined} data={data} encodeDataAttribute={encodeDataAttribute} />
+  if (!ladderData) {
+    return (
+      <div className="text-center">
+        Please start editing your Ladder document to see the preview!
+      </div>
+    )
+  }
+
+  return (
+    <HomePage
+      data={homeData}
+      data1={ladderData}
+      data2={undefined}
+      encodeDataAttribute={encodeHomeData}
+      encodeDataAttribute1={encodeLadderData}
+    />
+  )
 }

components/pages/home/TimelineShowcase.tsx

@@ -1,9 +1,12 @@
 import Image from 'next/image'
-import React from 'react'
+import React, { Suspense } from 'react'
 
 import { Timeline } from '@/components/ui/timeline'
+import { LadderPayload } from '@/types'
+import { EncodeDataAttributeCallback } from '@sanity/react-loader'
 
-export function TimelineShowcase() {
+export function TimelineShowcase({data1, encodeDataAttribute1}: {data1:LadderPayload | null, encodeDataAttribute1?: EncodeDataAttributeCallback
+}) {
   const data = [
     {
       title: '2024',
@@ -150,7 +153,13 @@ export function TimelineShowcase() {
   ]
   return (
     <div className="w-full">
-      <Timeline data={data} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <Timeline
+          encodeDataAttribute1={encodeDataAttribute1}
+          data={data}
+          data1={data1}
+        />
+      </Suspense>
     </div>
   )
 }

components/ui/timeline.tsx

@@ -1,18 +1,36 @@
 'use client'
+import { EncodeDataAttributeCallback } from '@sanity/react-loader'
 import {
   motion,
   useMotionValueEvent,
   useScroll,
   useTransform,
 } from 'framer-motion'
+import Link from 'next/link'
+import { PortableTextBlock } from 'next-sanity'
 import React, { useEffect, useRef, useState } from 'react'
 
+import { resolveHref } from '@/sanity/lib/utils'
+import { LadderPayload } from '@/types'
+
+import { CustomPortableText } from '../shared/CustomPortableText'
+
 interface TimelineEntry {
   title: string
   content: React.ReactNode
 }
 
-export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
+export const Timeline = ({
+  data,
+  data1,
+  encodeDataAttribute1,
+}: {
+  data: TimelineEntry[]
+  data1: LadderPayload | null
+  encodeDataAttribute1?: EncodeDataAttributeCallback
+}) => {
+  const { overview = [], showcaseProjects = [], title = '' } = data1 ?? {}
+
   const ref = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const [height, setHeight] = useState(0)
@@ -37,20 +55,41 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
       className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"
       ref={containerRef}
     >
-      <div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
-        <h2 className="text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
-          Changelog from my journey
-        </h2>
-        <p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-base max-w-sm">
-          I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s
-          a timeline of my journey.
-        </p>
-      </div>
+      {title && (
+        <div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
+          <h2 className="text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
+            {data1?.title}
+          </h2>
+
+          <div className="text-neutral-700 font-serif dark:text-neutral-300 text-sm md:text-base max-w-sm">
+            <CustomPortableText
+              value={data1?.overview as PortableTextBlock[]}
+            />
+          </div>
+        </div>
+      )}
 
       <div ref={ref} className="relative max-w-7xl mx-auto pb-20">
-        {data.map((item, index) => (
-          <div
-            key={index}
+        {showcaseProjects && showcaseProjects.length > 0 && (
+          <div className="mx-auto max-w-[100rem] rounded-md border">
+            {showcaseProjects.map((project, key) => {
+              const href = resolveHref(project?._type, project?.slug)
+              const item = project
+              if (!href) {
+                return null
+              }
+              return (
+                <Link
+                  key={key}
+                  href={href}
+                  data-sanity={encodeDataAttribute1?.([
+                    'showcaseProjects',
+                    key,
+                    'slug',
+                  ])}
+                >
+                  {/* <ProjectListItem project={project} odd={key % 2} /> */}
+                  <div
             className="flex justify-start pt-10 md:pt-40 md:gap-10"
           >
             <div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
@@ -64,12 +103,17 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
 
             <div className="relative pl-20 pr-4 md:pl-4 w-full">
               <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
-                {item.title}
+                {item.slug}
               </h3>
-              {item.content}{' '}
+              {/* {item?.content}{' '} */}
             </div>
           </div>
-        ))}
+                </Link>
+              )
+            })}
+          </div>
+        )}
+
         <div
           style={{
             height: height + 'px',

sanity.config.ts

@@ -22,6 +22,8 @@ import timeline from '@/sanity/schemas/objects/timeline'
 import home from '@/sanity/schemas/singletons/home'
 import settings from '@/sanity/schemas/singletons/settings'
 
+import ladder from './sanity/schemas/singletons/ladder'
+
 const title =
   process.env.NEXT_PUBLIC_SANITY_PROJECT_TITLE ||
   'ঋণাত্মক - ২১ - HSTU ECE 21 Batch'
@@ -37,6 +39,7 @@ export default defineConfig({
       // Singletons
       home,
       settings,
+      ladder,
       // Documents
       duration,
       page,
@@ -50,7 +53,7 @@ export default defineConfig({
     cloudinaryAssetSourcePlugin(),
     cloudinarySchemaPlugin(),
     structureTool({
-      structure: pageStructure([home, settings]),
+      structure: pageStructure([home, ladder, settings]),
     }),
     presentationTool({
       resolve,
@@ -61,7 +64,7 @@ export default defineConfig({
       },
     }),
     // Configures the global "new document" button, and document actions, to suit the Settings document singleton
-    singletonPlugin([home.name, settings.name]),
+    singletonPlugin([home.name, ladder.name, settings.name]),
     // Add an image asset source for Unsplash
     unsplashImageAsset(),
     // Vision lets you query your content with GROQ in the studio

sanity/lib/queries.ts

@@ -15,6 +15,21 @@ export const homePageQuery = groq`
     title,
   }
 `
+export const ladderQuery = groq`
+  *[_type == "ladder"][0]{
+    _id,
+    overview,
+    showcaseProjects[]->{
+      _type,
+      coverImage,
+      overview,
+      "slug": slug.current,
+      tags,
+      title,
+    },
+    title,
+  }
+`
 
 export const pagesBySlugQuery = groq`
   *[_type == "page" && slug.current == $slug][0] {

sanity/loader/loadQuery.ts

@@ -7,13 +7,15 @@ import { client } from '@/sanity/lib/client'
 import {
   allProjectSlugQuery,
   homePageQuery,
+  ladderQuery,
   pagesBySlugQuery,
   projectBySlugQuery,
   settingsQuery,
 } from '@/sanity/lib/queries'
 import { token } from '@/sanity/lib/token'
 import {
   HomePagePayload,
+  LadderPayload,
   PagePayload,
   ProjectPayload,
   SettingsPayload,
@@ -79,6 +81,14 @@ export function loadHomePage() {
   )
 }
 
+export function loadLadder() {
+  return loadQuery<LadderPayload | null>(
+    ladderQuery,
+    {},
+    { next: { tags: ['ladder', 'project'] } },
+  )
+}
+
 export function loadProject(slug: string) {
   return loadQuery<ProjectPayload | null>(
     projectBySlugQuery,

sanity/schemas/documents/project.ts

@@ -1,11 +1,12 @@
 import { DocumentIcon, ImageIcon } from '@sanity/icons'
+import { DockIcon } from 'lucide-react'
 import { defineArrayMember, defineField, defineType } from 'sanity'
 
 export default defineType({
   name: 'project',
   title: 'Project',
   type: 'document',
-  icon: DocumentIcon,
+  icon: DockIcon,
   // Uncomment below to have edits publish automatically as you type
   // liveEdit: true,
   fields: [
@@ -81,6 +82,9 @@ export default defineType({
       name: 'duration',
       title: 'Duration',
       type: 'duration',
+      options: {
+        hotspot: true,
+      },
     }),
     defineField({
       name: 'client',