pre-populate home page with sanity data

lib/sanity.client.ts

@@ -4,6 +4,7 @@ import { type Listing, listingAndMoreListingsQuery, listingBySlugQuery, listings
 import { type Settings, settingsQuery } from 'lib/sanity.queries/settings';
 import { createClient } from 'next-sanity';
 
+import { homepageDataQuery } from './sanity.queries/homepage';
 import {
   LongTermRental,
   longTermRentalAndMoreLongTermRentalQuery,
@@ -181,3 +182,11 @@ export async function getLongTermRentalsAndMoreLongTermRentals(slug: string, tok
   }
   return { rental: null, moreListings: [] };
 }
+
+// Homepage
+export async function getHomepageSectionData(): Promise<any> {
+  if (client) {
+    return (await client.fetch(homepageDataQuery)) || {};
+  }
+  return {};
+}

lib/sanity.queries/blog.ts

@@ -1,6 +1,6 @@
 import { groq } from 'next-sanity';
 
-const postFields = groq`
+export const postFields = groq`
   _id,
   title,
   date,

lib/sanity.queries/homepage.ts

@@ -0,0 +1,23 @@
+import { groq } from 'next-sanity';
+
+import { postFields } from './blog';
+import { listingFields } from './listings';
+import { longTermRentalFields } from './long-term-rentals';
+import { vacationRetnalFields } from './vacation-rentals';
+
+export const homepageDataQuery = groq`
+{
+  "featuredPosts": *[_type == "post"] | order(date desc, _updatedAt desc)[0...2] {
+    content,
+    ${postFields}
+  },
+  "featuredListings": *[_type == "listing"] | order(date desc, _updatedAt desc)[0...2] {
+    ${listingFields}
+  },
+  "featuredLongTermRentals": *[_type == "rentals"] | order(date desc, _updatedAt desc)[0...2] {
+    ${longTermRentalFields}
+  },
+  "featuredVacationRentals": *[_type == "vacationRentals"] | order(date desc, _updatedAt desc)[0...2] {
+    ${vacationRetnalFields}
+  }
+}`;

lib/sanity.queries/listings.ts

@@ -1,6 +1,6 @@
 import { groq } from 'next-sanity';
 
-const listingFields = groq`
+export const listingFields = groq`
   _id,
   title,
   "slug": slug.current,

lib/sanity.queries/long-term-rentals.ts

@@ -47,7 +47,7 @@ export interface LongTermRental {
   contact?: Contact;
 }
 
-const listingFields = groq`
+export const longTermRentalFields = groq`
   _id,
   title,
   "slug": slug.current,
@@ -80,16 +80,16 @@ const listingFields = groq`
 
 export const longTermRentalIndexQuery = groq`
 *[_type == "rentals"] | order(date desc, _updatedAt desc) {
-  ${listingFields}
+  ${longTermRentalFields}
 }`;
 
 export const longTermRentalAndMoreLongTermRentalQuery = groq`
 {
   "rental": *[_type == "rentals" && slug.current == $slug] | order(_updatedAt desc) [0] {
-    ${listingFields}
+    ${longTermRentalFields}
   },
   "moreListings": *[_type == "rentals" && slug.current != $slug] | order(date desc, _updatedAt desc) [0...2] {
-    ${listingFields}
+    ${longTermRentalFields}
   }
 }`;
 
@@ -99,6 +99,6 @@ export const longTermRentalSlugsQuery = groq`
 
 export const longTermRentalBySlugQuery = groq`
 *[_type == "rentals" && slug.current == $slug][0] {
-  ${listingFields}
+  ${longTermRentalFields}
 }
 `;

lib/sanity.queries/vacation-rentals.ts

@@ -47,7 +47,7 @@ export interface VacationRental {
   contact?: Contact;
 }
 
-const listingFields = groq`
+export const vacationRetnalFields = groq`
   _id,
   title,
   "slug": slug.current,
@@ -80,16 +80,16 @@ const listingFields = groq`
 
 export const vacationRentalsIndexQuery = groq`
 *[_type == "vacationRentals"] | order(date desc, _updatedAt desc) {
-  ${listingFields}
+  ${vacationRetnalFields}
 }`;
 
 export const vacationRentalsAndMoreVacationRentalsQuery = groq`
 {
   "vacationRental": *[_type == "vacationRentals" && slug.current == $slug] | order(_updatedAt desc) [0] {
-    ${listingFields}
+    ${vacationRetnalFields}
   },
   "moreListings": *[_type == "vacationRentals" && slug.current != $slug] | order(date desc, _updatedAt desc) [0...2] {
-    ${listingFields}
+    ${vacationRetnalFields}
   }
 }`;
 
@@ -99,6 +99,6 @@ export const vacationRentalsSlugsQuery = groq`
 
 export const vacationRentalsBySlugQuery = groq`
 *[_type == "vacationRentals" && slug.current == $slug][0] {
-  ${listingFields}
+  ${vacationRetnalFields}
 }
 `;

pages/index.tsx

@@ -1,5 +1,6 @@
 import FeaturedPropertyCardBanner from 'components/common/banners/FeaturedPropertyBanner';
 import LatestNewsBanner from 'components/common/banners/LatestNewsBanner';
+import { Blog } from 'components/common/cards/FeaturedBlogCard';
 import LargeModal from 'components/common/modals/LargeModal';
 import Newsletter from 'components/common/NewsLetter';
 import WhyUsSection from 'components/common/WhyUs';
@@ -12,10 +13,26 @@ import WhyUsSection from 'components/common/WhyUs';
 // import PropertiesByCategorySection from '../components/properties-by-category-section';
 // import WhyUsSection from '../components/why-us-section';
 import { featuredBlogPostsMock, featuredListingsMock } from 'lib/demo.data';
-import type { NextPage } from 'next';
+import { getHomepageSectionData, getSettings } from 'lib/sanity.client';
+import type { Listing } from 'lib/sanity.queries/listings';
+import type { LongTermRental } from 'lib/sanity.queries/long-term-rentals';
+import type { Settings } from 'lib/sanity.queries/settings';
+import type { VacationRental } from 'lib/sanity.queries/vacation-rentals';
+import type { GetStaticProps, NextPage } from 'next';
 import Image from 'next/image';
+import type { PreviewData, Query } from 'types/sanity-queries';
 
-const Homepage: NextPage = () => {
+interface PageProps {
+  featuredPosts: Blog[];
+  featuredListings: Listing[];
+  featuredLongTermRentals: LongTermRental[];
+  featuredVacationRentals: VacationRental[];
+  settings?: Settings;
+  preview: boolean;
+  token: string | null;
+}
+
+const Homepage: NextPage = ({ featuredPosts, featuredListings, featuredLongTermRentals, featuredVacationRentals, settings, preview, token }: PageProps) => {
   return (
     <div className='relative flex w-full flex-col items-start justify-start gap-[3.94rem] overflow-hidden bg-white'>
       <main className='flex flex-col items-center justify-center gap-[7.06rem] self-stretch'>
@@ -61,13 +78,13 @@ const Homepage: NextPage = () => {
             </h1>
           </div>
         </section>
-        <FeaturedPropertyCardBanner resource={'listings'} title='Popular Properties For You' listings={featuredListingsMock} ctaLink='/listings' />
+        <FeaturedPropertyCardBanner resource={'listings'} title='Popular Properties For Sale' listings={featuredListings} ctaLink='/listings' />
         <WhyUsSection />
-        <FeaturedPropertyCardBanner resource='rentals' title='Long Term Rentals For You' listings={featuredListingsMock} ctaLink='/rentals' />
+        <FeaturedPropertyCardBanner resource='rentals' title='Long Term Rentals For You' listings={featuredLongTermRentals} ctaLink='/rentals' />
         <Newsletter />
-        <FeaturedPropertyCardBanner resource='vacation-rentals' title='Vacation Rentals For You' listings={featuredListingsMock} ctaLink='/vacation-rentals' />
+        <FeaturedPropertyCardBanner resource='vacation-rentals' title='Vacation Rentals For You' listings={featuredVacationRentals} ctaLink='/vacation-rentals' />
         {/* <PropertiesByCategorySection /> */}
-        <LatestNewsBanner featuredBlogCards={featuredBlogPostsMock} />
+        <LatestNewsBanner featuredBlogCards={featuredPosts} />
         {/* <NearbyPropertiesSection /> */}
         {/* <CustomerTestimonials /> */}
       </main>
@@ -76,10 +93,24 @@ const Homepage: NextPage = () => {
   );
 };
 
-export async function getStaticProps() {
+export const getStaticProps: GetStaticProps<PageProps, Query, PreviewData> = async (ctx) => {
+  const { preview = false, previewData = {}, params = {} } = ctx;
+
+  const token = previewData.token;
+
+  const [settings, { featuredPosts, featuredListings, featuredLongTermRentals, featuredVacationRentals }] = await Promise.all([getSettings(), getHomepageSectionData()]);
+
   return {
-    props: {},
+    props: {
+      settings,
+      featuredPosts,
+      featuredListings,
+      featuredLongTermRentals,
+      featuredVacationRentals,
+      preview,
+      token: token ?? null,
+    },
     revalidate: 10,
   };
-}
+};
 export default Homepage;

schemas/post.ts

@@ -49,6 +49,7 @@ export default defineType({
       name: 'excerpt',
       title: 'Excerpt',
       type: 'text',
+      validation: (Rule) => Rule.required().max(140),
     }),
     defineField({
       name: 'coverImage',