feat: integrate RapidAPI Instagram feed, apply Bodoni Moda font globally, disable prisma query logs, and fix UI minor issues
This commit is contained in:
mstfyldz
+6
-11
@@ -1,17 +1,12 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Playfair_Display, Lato } from "next/font/google";
|
||||
import { Bodoni_Moda } from "next/font/google";
|
||||
import "../globals.css";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
const playfair = Playfair_Display({
|
||||
variable: "--font-playfair",
|
||||
const bodoni = Bodoni_Moda({
|
||||
variable: "--font-bodoni",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const lato = Lato({
|
||||
variable: "--font-lato",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "700", "900"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export async function generateStaticParams() {
|
||||
@@ -147,14 +142,14 @@ export default async function RootLayout({
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang={lang} className="scroll-smooth">
|
||||
<html lang={lang} className={`scroll-smooth ${bodoni.variable}`}>
|
||||
<head>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
</head>
|
||||
<body className={`${lato.variable} ${playfair.variable} antialiased`}>
|
||||
<body className="antialiased font-sans">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+42
-3
@@ -9,15 +9,54 @@ import Footer from "@/components/Footer";
|
||||
import { getDictionary } from "../dictionaries";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
async function getInstagramData() {
|
||||
try {
|
||||
const res = await fetch('https://instagram120.p.rapidapi.com/api/instagram/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'x-rapidapi-key': process.env.RAPIDAPI_KEY || '',
|
||||
'x-rapidapi-host': 'instagram120.p.rapidapi.com',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: 'moy_akyaka',
|
||||
maxId: ''
|
||||
}),
|
||||
next: { revalidate: 86400 } // 24 hours
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('Instagram verisi çekilemedi:', await res.text());
|
||||
return [];
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const edges = data?.result?.edges || [];
|
||||
|
||||
// Get the first 4 posts and map them
|
||||
return edges.slice(0, 4).map((edge: any) => ({
|
||||
id: edge.node.id || edge.node.code,
|
||||
url: `https://www.instagram.com/p/${edge.node.code}/`,
|
||||
imageUrl: edge.node.image_versions2?.candidates?.[0]?.url || edge.node.display_uri || '',
|
||||
caption: edge.node.caption?.text || '',
|
||||
isVideo: edge.node.media_type === 2
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Instagram API hatası:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
|
||||
const { lang } = await params;
|
||||
const dict = await getDictionary(lang);
|
||||
|
||||
const [dbPhotos, dbServices, heroMediaList, dbSettings] = await Promise.all([
|
||||
const [dbPhotos, dbServices, heroMediaList, dbSettings, instagramPosts] = await Promise.all([
|
||||
prisma.gallery.findMany({ orderBy: { createdAt: 'desc' } }),
|
||||
prisma.service.findMany({ orderBy: { createdAt: 'asc' } }),
|
||||
prisma.heroMedia.findMany(),
|
||||
prisma.siteSettings.findFirst()
|
||||
prisma.siteSettings.findFirst(),
|
||||
getInstagramData()
|
||||
]);
|
||||
|
||||
const dbHeroMedia = heroMediaList.length > 0 ? heroMediaList[0] : null;
|
||||
@@ -29,7 +68,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
|
||||
<About dict={dict} />
|
||||
<Services dict={dict} dbServices={dbServices} />
|
||||
<Gallery dict={dict} dbPhotos={dbPhotos} />
|
||||
<InstagramFeed dict={dict} />
|
||||
<InstagramFeed dict={dict} posts={instagramPosts} />
|
||||
<Contact dict={dict} dbSettings={dbSettings} />
|
||||
<Footer dict={dict} dbSettings={dbSettings} />
|
||||
</main>
|
||||
|
||||
+2
-2
@@ -16,8 +16,8 @@
|
||||
--color-brand-white: #FFFFFF;
|
||||
--color-brand-black: #171717;
|
||||
|
||||
--font-serif: var(--font-playfair);
|
||||
--font-sans: var(--font-lato);
|
||||
--font-serif: var(--font-bodoni);
|
||||
--font-sans: var(--font-bodoni);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
@@ -37,6 +37,7 @@ export default function Header({ dict, lang, dbSettings }: { dict: any, lang: st
|
||||
width={120}
|
||||
height={48}
|
||||
className={`h-12 w-auto transition-all duration-300 ${(!isScrolled && !dbSettings?.logoUrl) ? "brightness-0 invert opacity-90" : ""}`}
|
||||
style={{ width: "auto" }}
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
||||
+1
-1
@@ -59,7 +59,7 @@ export default function Hero({ dict, dbHeroMedia }: { dict: any, dbHeroMedia?: a
|
||||
/>
|
||||
|
||||
{/* Main Title — word-by-word reveal */}
|
||||
<h1 className="text-[4.5rem] md:text-[8rem] lg:text-[11rem] font-serif text-white leading-none tracking-tight mb-6">
|
||||
<h1 className="text-[4.5rem] md:text-[6rem] lg:text-[10rem] font-serif text-white leading-none tracking-tight mb-6">
|
||||
{words.map((word, i) => (
|
||||
<span key={word} className="inline-block overflow-hidden">
|
||||
<motion.span
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
const reels = [
|
||||
{ id: 1, url: "https://www.instagram.com/reel/C97iqFqoSyl/embed" },
|
||||
{ id: 2, url: "https://www.instagram.com/reel/C-slzOcIQB3/embed" },
|
||||
{ id: 3, url: "https://www.instagram.com/reel/DLM8ng6MOKf/embed" },
|
||||
{ id: 4, url: "https://www.instagram.com/reel/DX-BDErM5qd/embed" },
|
||||
];
|
||||
export interface InstagramPost {
|
||||
id: string;
|
||||
url: string;
|
||||
imageUrl: string;
|
||||
caption: string;
|
||||
isVideo: boolean;
|
||||
}
|
||||
|
||||
function InstagramIcon() {
|
||||
return (
|
||||
@@ -17,7 +18,7 @@ function InstagramIcon() {
|
||||
);
|
||||
}
|
||||
|
||||
export default function InstagramFeed({ dict }: { dict: any }) {
|
||||
export default function InstagramFeed({ dict, posts = [] }: { dict: any, posts?: InstagramPost[] }) {
|
||||
return (
|
||||
<section className="py-24 bg-sand-light text-sea-dark overflow-hidden">
|
||||
<div className="container mx-auto px-6 max-w-7xl">
|
||||
@@ -48,24 +49,46 @@ export default function InstagramFeed({ dict }: { dict: any }) {
|
||||
|
||||
{/* Reels grid */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{reels.map((reel) => (
|
||||
<div
|
||||
key={reel.id}
|
||||
className="group relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:shadow-sea-dark/10 transition-all duration-500 hover:-translate-y-1"
|
||||
{posts.map((post) => (
|
||||
<a
|
||||
key={post.id}
|
||||
href={post.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:shadow-sea-dark/10 transition-all duration-500 hover:-translate-y-1 block"
|
||||
>
|
||||
{/* Thin coral top border accent */}
|
||||
<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-coral/0 via-coral to-coral/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10" />
|
||||
|
||||
<iframe
|
||||
src={reel.url}
|
||||
className="w-full h-[520px] md:h-[580px]"
|
||||
style={{ border: "none", display: "block" }}
|
||||
scrolling="no"
|
||||
frameBorder="0"
|
||||
allow="encrypted-media"
|
||||
title={`Instagram Reel ${reel.id}`}
|
||||
<div className="relative aspect-[4/5] w-full overflow-hidden bg-sand-dark/10">
|
||||
<img
|
||||
src={post.imageUrl || ''}
|
||||
alt={post.caption ? post.caption.substring(0, 50) : 'Instagram Post'}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
|
||||
{/* Hover Overlay */}
|
||||
<div className="absolute inset-0 bg-sea-dark/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<div className="text-white transform scale-90 group-hover:scale-100 transition-transform duration-300">
|
||||
{post.isVideo ? (
|
||||
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
) : (
|
||||
<InstagramIcon />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{post.caption && (
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-sea-dark/80 line-clamp-2">
|
||||
{post.caption}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -7,7 +7,7 @@ const globalForPrisma = globalThis as unknown as {
|
||||
export const prisma =
|
||||
globalForPrisma.prisma ??
|
||||
new PrismaClient({
|
||||
log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
|
||||
log: process.env.NODE_ENV === 'development' ? ['error', 'warn'] : ['error'],
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
|
||||
|
||||
Reference in New Issue
Block a user