Skip to content
Merged

url #28

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ module.exports = {
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: [`/`, `/blog/*`, `/property/*`],
precachePages: [`/`, `/blog/*`, `/properties/*`],
workboxConfig: {
runtimeCaching: [
{
Expand Down
8 changes: 4 additions & 4 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
36 changes: 25 additions & 11 deletions makefile
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
46 changes: 23 additions & 23 deletions src/components/PropertyCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
/>
Expand All @@ -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" />
Expand All @@ -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
Expand All @@ -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 }}
Expand All @@ -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})`
}}
/>
Expand Down
Loading
Loading