added instagram embed
This commit is contained in:
parent
a2eafe3037
commit
431be04d28
@ -146,23 +146,23 @@ body {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px dotted white;
|
||||
border: 2px dotted #f5f5f5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dotted-border-corners::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background:
|
||||
/* Corner dots */
|
||||
radial-gradient(circle, white 1px, transparent 1px) 0 0 / 4px 4px,
|
||||
radial-gradient(circle, white 1px, transparent 1px) 100% 0 / 4px 4px,
|
||||
radial-gradient(circle, white 1px, transparent 1px) 0 100% / 4px 4px,
|
||||
radial-gradient(circle, white 1px, transparent 1px) 100% 100% / 4px 4px;
|
||||
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 0 / 6px 6px,
|
||||
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 0 / 6px 6px,
|
||||
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 100% / 6px 6px,
|
||||
radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 100% / 6px 6px;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
44
src/components/InstagramFeed.tsx
Normal file
44
src/components/InstagramFeed.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function InstagramFeed() {
|
||||
useEffect(() => {
|
||||
// Load LightWidget script for Instagram feed
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.lightwidget.com/widgets/lightwidget.js';
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
return () => {
|
||||
// Cleanup script on unmount
|
||||
if (document.body.contains(script)) {
|
||||
document.body.removeChild(script);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<p className="mb-4 text-base sm:text-lg">
|
||||
<strong>Latest from our studio:</strong>
|
||||
</p>
|
||||
|
||||
{/* Instagram Feed Grid - Posts Only */}
|
||||
<div className="mb-4">
|
||||
<iframe
|
||||
src="//lightwidget.com/widgets/fc10b535bf965f9dac01cf8efd6d0189.html"
|
||||
scrolling="no"
|
||||
allowTransparency={true}
|
||||
className="lightwidget-widget"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '200px',
|
||||
border: 'none',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { CursorDotBackground } from "./CursorDotBackground";
|
||||
import { HorizontalAccordion } from "./HorizontalAccordion";
|
||||
import { InstagramFeed } from "./InstagramFeed";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function TempPlaceholder() {
|
||||
@ -67,7 +68,7 @@ export function TempPlaceholder() {
|
||||
className="rounded"
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
<p className="text-sm text-gray-500 mb-6">10-12-2025</p>
|
||||
<p className="text-sm text-gray-500 mb-6">Last updated: 10-12-2025</p>
|
||||
|
||||
<h1 ref={titleRef} className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight">
|
||||
<span ref={titleInnerRef} className="inline-block">
|
||||
@ -146,7 +147,7 @@ export function TempPlaceholder() {
|
||||
<li className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.instagram.com/p/DMykfRxssMR/?utm_source=ig_web_copy_link&igsh=Nmg0YXFuOG9yNGE2"
|
||||
href="https://www.instagram.com/biohazardvfx/"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
@ -221,20 +222,7 @@ export function TempPlaceholder() {
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="mb-4 md:mb-6 text-base sm:text-lg">
|
||||
<strong>
|
||||
Here's our{" "}
|
||||
<a
|
||||
href="https://www.instagram.com/biohazardvfx/"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block break-words"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
</strong>
|
||||
</p>
|
||||
<InstagramFeed />
|
||||
|
||||
<p className="mb-2 text-sm sm:text-base text-gray-300">
|
||||
Contact us:{" "}
|
||||
|
||||
118
src/lib/instagram-api.ts
Normal file
118
src/lib/instagram-api.ts
Normal file
@ -0,0 +1,118 @@
|
||||
// Instagram API utilities for fetching posts and media
|
||||
// Based on Instagram Graph API documentation from Context7
|
||||
|
||||
export interface InstagramPost {
|
||||
id: string;
|
||||
caption: string;
|
||||
media_url: string;
|
||||
permalink: string;
|
||||
timestamp: string;
|
||||
media_type: string;
|
||||
thumbnail_url?: string;
|
||||
}
|
||||
|
||||
// Instagram Graph API oEmbed endpoint for getting embeddable HTML
|
||||
export async function getInstagramEmbedHtml(postUrl: string): Promise<string | null> {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://graph.facebook.com/v23.0/instagram_oembed?url=${encodeURIComponent(postUrl)}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch Instagram embed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.html || null;
|
||||
} catch (error) {
|
||||
console.error('Error fetching Instagram embed:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch Instagram page media using Graph API (requires access token)
|
||||
export async function getInstagramPageMedia(
|
||||
pageId: string,
|
||||
accessToken: string,
|
||||
limit: number = 6
|
||||
): Promise<InstagramPost[]> {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://graph.facebook.com/v23.0/${pageId}/media?fields=id,caption,media_url,permalink,timestamp,media_type,thumbnail_url&limit=${limit}&access_token=${accessToken}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch Instagram media');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching Instagram media:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Alternative: Use a third-party service like EmbedSocial or SnapWidget
|
||||
export function getEmbedSocialWidget(username: string): string {
|
||||
// This would return the embed code for services like EmbedSocial
|
||||
return `
|
||||
<div class="embedsocial-hashtag" data-ref="instagram" data-hashtag="${username}">
|
||||
<a class="feed-powered-by-es" href="https://embedsocial.com/instagram/" target="_blank" title="Widget by EmbedSocial">Widget by EmbedSocial</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Sample data for development/demo purposes
|
||||
export const sampleInstagramPosts: InstagramPost[] = [
|
||||
{
|
||||
id: "1",
|
||||
caption: "Working on some sick VFX for an upcoming project... 🔥",
|
||||
media_url: "https://picsum.photos/400/400?random=1",
|
||||
permalink: "https://www.instagram.com/p/sample1/",
|
||||
timestamp: "2025-01-10T10:00:00Z",
|
||||
media_type: "IMAGE"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
caption: "Behind the scenes of our latest work 🎬",
|
||||
media_url: "https://picsum.photos/400/400?random=2",
|
||||
permalink: "https://www.instagram.com/p/sample2/",
|
||||
timestamp: "2025-01-08T15:30:00Z",
|
||||
media_type: "VIDEO",
|
||||
thumbnail_url: "https://picsum.photos/400/400?random=2"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
caption: "Studio life - coffee, code, and VFX magic ✨",
|
||||
media_url: "https://picsum.photos/400/400?random=3",
|
||||
permalink: "https://www.instagram.com/p/sample3/",
|
||||
timestamp: "2025-01-05T12:00:00Z",
|
||||
media_type: "IMAGE"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
caption: "Client project reveal - can't wait to share this one! 🚀",
|
||||
media_url: "https://picsum.photos/400/400?random=4",
|
||||
permalink: "https://www.instagram.com/p/sample4/",
|
||||
timestamp: "2025-01-03T14:20:00Z",
|
||||
media_type: "IMAGE"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
caption: "Late night render session - the magic happens when everyone else is sleeping 🌙",
|
||||
media_url: "https://picsum.photos/400/400?random=5",
|
||||
permalink: "https://www.instagram.com/p/sample5/",
|
||||
timestamp: "2025-01-01T22:30:00Z",
|
||||
media_type: "VIDEO",
|
||||
thumbnail_url: "https://picsum.photos/400/400?random=5"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
caption: "New year, new projects, same dedication to quality VFX 💪",
|
||||
media_url: "https://picsum.photos/400/400?random=6",
|
||||
permalink: "https://www.instagram.com/p/sample6/",
|
||||
timestamp: "2024-12-30T09:00:00Z",
|
||||
media_type: "IMAGE"
|
||||
}
|
||||
];
|
||||
Loading…
x
Reference in New Issue
Block a user