Merge pull request #28 from AX99:staging

url

Author: AX99

gatsby-config.js

@@ -163,7 +163,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-offline`,
       options: {
-        precachePages: [`/`, `/blog/*`, `/property/*`],
+        precachePages: [`/`, `/blog/*`, `/properties/*`],
         workboxConfig: {
           runtimeCaching: [
             {

gatsby-node.js

@@ -69,10 +69,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   // Create a page for each property
   propertyResult.data.allSanityProperty.nodes.forEach((node) => {
     // Use slug if available, otherwise use ID
-    const path = node.slug?.current 
-      ? `/property/${node.slug.current}/` 
-      : `/property/${node._id}/`;
-      
+    const path = node.slug?.current
+      ? `/properties/${node.slug.current}/`
+      : `/properties/${node._id}/`;
+
     createPage({
       path,
       component: propertyDetailTemplate,

makefile

@@ -1,43 +1,57 @@
-init:
+NODE_VERSION := $(shell node -v 2>/dev/null)
+REQUIRED_NODE := v18.20.8
+
+check-node:
+	@if [ -z "$(NODE_VERSION)" ]; then \
+		echo "Error: Node.js is not installed. Please install Node.js $(REQUIRED_NOTE)"; \
+		exit 1; \
+	elif [ "$(NODE_VERSION)" != "$(REQUIRED_NODE)" ]; then \
+		echo "Error: Wrong Node.js version. Please switch to $(REQUIRED_NODE) (current: $(NODE_VERSION))"; \
+		echo "Run: nvm use lts/hydrogen"; \
+		exit 1; \
+	fi
+
+init: check-node
 	yarn install
 
 clean:
 	rm -rf .cache || true
 	rm -rf public || true
 	yarn run clean
 
-clean-dev:
+clean-dev: check-node
 	make clean || true
 	make dev
 
-dev:
+dev: check-node
 	yarn run develop
 
-dev-m:
+dev-m: check-node
 	yarn run develop-net
 
-clean-dev-m:
+clean-dev-m: check-node
 	make clean || true
 	make dev-m
 
-format:
+format: check-node
 	yarn run format
 
-build:
+build: check-node
 	yarn run build
 
-serve:
+serve: check-node
 	yarn run serve
 
-serve-m:
+serve-m: check-node
 	yarn run serve-net
 
-docker-buildup:
+docker-buildup: check-node
 	docker-compose build || true
 	docker-compose up
 
-docker-up:
+docker-up: check-node
 	docker-compose up
+
 # deploy-live:
 # 	git pull upstream master || true
 # git push origin master

package.json

@@ -29,7 +29,7 @@
     "@types/mapbox-gl": "^3.4.1",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.1.7",
-    "gatsby": "~5.13.4",
+    "gatsby": "^5.14.5",
     "gatsby-plugin-gatsby-cloud": "~5.13.1",
     "gatsby-plugin-google-adsense": "^1.1.3",
     "gatsby-plugin-google-gtag": "~5.13.1",

src/components/PropertyCard.js

@@ -15,13 +15,13 @@ const PropertyCard = ({ property }) => {
   const imageData = mainImage?.asset?.gatsbyImageData
 
   // Format location string from location object
-  const locationString = location?.city ? 
-    `${location.city}${location.state ? `, ${location.state}` : ''}` : 
+  const locationString = location?.city ?
+    `${location.city}${location.state ? `, ${location.state}` : ''}` :
     'Location not specified'
-  
+
   // Status badge styling
   const getStatusBadge = () => {
-    switch(status) {
+    switch (status) {
       case 'sold':
         return (
           <div className="absolute top-0 left-0 bg-red-600 text-white px-4 py-2 rounded-br-lg font-semibold">
@@ -44,23 +44,23 @@ const PropertyCard = ({ property }) => {
         return null;
     }
   };
-  
+
   // Check if property is sold or rented
   const isUnavailable = status === 'sold' || status === 'rented';
-  
+
   return (
-    <motion.div 
+    <motion.div
       className="bg-white rounded-lg shadow-lg overflow-hidden h-full flex flex-col"
       whileHover={{ y: -5 }}
       transition={{ duration: 0.3 }}
     >
       <div className="relative h-52 bg-neutral-200">
         {/* Image with overlay link to full details */}
-        <Link to={`/property/${slug?.current || property._id}`} className="block h-full">
+        <Link to={`/properties/${slug?.current || property._id}`} className="block h-full">
           {imageData ? (
             <>
-              <GatsbyImage 
-                image={imageData} 
+              <GatsbyImage
+                image={imageData}
                 alt={title}
                 className="h-full w-full object-cover"
               />
@@ -84,16 +84,16 @@ const PropertyCard = ({ property }) => {
         </div> */}
         {getStatusBadge()}
       </div>
-      
+
       <div className="p-6 flex-grow">
-        <Link to={`/property/${slug?.current || property._id}`} className="block hover:text-primary-600 transition-colors">
+        <Link to={`/properties/${slug?.current || property._id}`} className="block hover:text-primary-600 transition-colors">
           <h3 className="text-xl font-semibold mb-2">{title}</h3>
         </Link>
         <div className="flex items-center text-neutral-600 mb-4">
           <FaMapMarkerAlt className="mr-2 text-primary-600" />
           <span>{locationString}</span>
         </div>
-        
+
         <div className="grid grid-cols-3 gap-4 mb-4">
           <div className="flex items-center">
             <FaBed className="mr-2 text-primary-600" />
@@ -108,24 +108,24 @@ const PropertyCard = ({ property }) => {
             <span>{area ? `${area} ${property.areaUnit || 'sqft'}` : 'N/A'}</span>
           </div>
         </div>
-        
+
         {description && (
           <div className="text-neutral-600 mb-4 line-clamp-3">
             {description[0]?.children?.map(child => child.text).join(' ') || 'No description available'}
           </div>
         )}
-        
+
         {amenities && amenities.length > 0 && (
-        <div className="flex flex-wrap gap-2 mb-4">
+          <div className="flex flex-wrap gap-2 mb-4">
             {amenities.slice(0, 3).map((amenity, index) => (
-            <span key={index} className="bg-neutral-100 text-neutral-700 px-2 py-1 rounded-full text-xs">
+              <span key={index} className="bg-neutral-100 text-neutral-700 px-2 py-1 rounded-full text-xs">
                 {amenity}
-            </span>
-          ))}
-        </div>
+              </span>
+            ))}
+          </div>
         )}
       </div>
-      
+
       <div className="p-6 pt-0">
         {isUnavailable ? (
           <motion.button
@@ -148,7 +148,7 @@ const PropertyCard = ({ property }) => {
               <FaEye className="mr-2" />
               Quick View
             </motion.button>
-            
+
             <motion.div
               className="flex-1 text-center rounded-md"
               whileHover={{ scale: 1.02 }}
@@ -158,7 +158,7 @@ const PropertyCard = ({ property }) => {
                 formType={FORM_TYPES.PROPERTY_ENQUIRY}
                 buttonText="Enquire"
                 buttonClass="bg-primary-600 w-full hover:bg-primary-700 text-white font-semibold py-3 px-4 rounded-md transition-colors"
-                data={{ 
+                data={{
                   property: `${title} (${slug?.current || property._id})`
                 }}
               />