Skip to content

Commit 2b36b12

Browse files
jakeboxjakebox
committed
Add Instagram widget
1 parent 6748421 commit 2b36b12

2 files changed

Lines changed: 133 additions & 5 deletions

File tree

‎src/components/InstagramWidget.astro‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
interface Props {
3+
username?: string;
4+
title?: string;
5+
}
6+
7+
const {
8+
username = "astromikemassimino",
9+
title = "Follow Mike",
10+
} = Astro.props;
11+
---
12+
13+
<div class="instagram-sidebar-card overflow-hidden rounded-xl bg-white p-3 shadow-2xl border border-gray-100">
14+
<div class="mb-2 flex items-center justify-between border-b border-gray-50 pb-2">
15+
<h3 class="font-exo text-sm font-bold text-red uppercase tracking-widest">
16+
{title}
17+
</h3>
18+
<a href={`https://instagram.com/${username}`} target="_blank" class="text-[12px] font-roboto text-blue-600 hover:underline font-bold">
19+
INSTAGRAM
20+
</a>
21+
</div>
22+
23+
<div class="instagram-scaler-container">
24+
<blockquote
25+
class="instagram-media"
26+
data-instgrm-permalink={`https://www.instagram.com/${username}/?utm_source=ig_embed&utm_campaign=loading`}
27+
data-instgrm-version="14"
28+
>
29+
<div class="p-4 text-center text-xs text-gray-400">Loading Feed...</div>
30+
</blockquote>
31+
</div>
32+
33+
<a
34+
href={`https://www.instagram.com/${username}/`}
35+
target="_blank"
36+
class="mt-3 block w-full rounded-lg bg-gradient-to-r from-[#DA5F6B] via-[#E38A4C] to-[#F0CB78] py-2 text-center font-jost text-xs font-bold text-white shadow-md hover:brightness-110 transition-all"
37+
>
38+
FOLLOW @{username.toUpperCase()}
39+
</a>
40+
</div>
41+
42+
<style>
43+
/* Overall Sidebar Width */
44+
.instagram-sidebar-card {
45+
width: 300px;
46+
}
47+
48+
/* Shrink the embed by 25% (0.75 scale) */
49+
.instagram-scaler-container {
50+
width: 100%;
51+
height: 350px; /* Limits vertical space */
52+
overflow-y: auto;
53+
overflow-x: hidden;
54+
scrollbar-width: none;
55+
}
56+
57+
/* Targets the iframe generated by Instagram's script */
58+
.instagram-scaler-container :global(iframe) {
59+
transform: scale(0.79) !important;
60+
transform-origin: top left !important;
61+
width: 190% !important; /* Math: (1 / 0.72) * 100 to fill width */
62+
min-width: 326px !important;
63+
}
64+
65+
.instagram-media {
66+
margin: 0 !important;
67+
border: none !important;
68+
}
69+
</style>
70+
71+
<script is:inline>
72+
if (!window.instgrm) {
73+
const script = document.createElement("script");
74+
script.src = "https://www.instagram.com/embed.js";
75+
script.async = true;
76+
document.body.appendChild(script);
77+
} else {
78+
window.instgrm.Embeds.process();
79+
}
80+
</script>

‎src/pages/index.astro‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
66
import GradientButton from "../components/GradientButton.astro";
77
import OutlinedButton from "../components/OutlinedButton.astro";
88
import RocketAnimated from "../components/RocketAnimated.astro";
9+
import InstagramWidget from "../components/InstagramWidget.astro";
910
1011
import { Content as MeetMike } from "../meet_astro_mike.md";
1112
@@ -52,7 +53,7 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
5253
<GradientButton link="/speaking" text="SPEAKING INFORMATION" />
5354
</div>
5455

55-
<div class="z-10 col-span-4 col-start-4 sm:col-start-5 row-span-1 row-start-4 lg:absolute lg:left-20 lg:col-start-1 lg:row-start-2 lg:mb-40 2xl:ml-40">
56+
<div class="z-10 col-span-4 col-start-4 row-span-1 row-start-4 sm:col-start-5 lg:absolute lg:left-20 lg:col-start-1 lg:row-start-2 lg:mb-40 2xl:ml-40">
5657
<h3 class="flex flex-wrap font-jost text-[36px] leading-[2.8rem] text-white sm:text-[32px] md:text-[48px] lg:text-6xl">Mike Massimino</h3>
5758
</div>
5859

@@ -79,6 +80,8 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
7980
<MeetMike />
8081
</div>
8182

83+
<div id="insta-trigger" class="h-1"></div>
84+
8285
<div class="col-span-4 col-start-1 row-span-2 row-start-7 md:col-span-5 md:col-start-8 md:row-start-2 md:h-auto md:max-w-md lg:row-start-1">
8386
<Picture src={meetMikeImage} alt="Mike Massimino speaking on stage." loading="eager" />
8487
</div>
@@ -107,8 +110,8 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
107110
</div>
108111

109112
<!-- Content Cards -->
110-
<section class="bg-gradient-to-r from-[#7DCFFF] via-[#2E8FE7] to-[#091E3A] px-3 py-8 lg:pt-40">
111-
<div class="mx-auto flex max-w-96 flex-col space-y-8 lg:max-w-none lg:flex-row lg:items-center lg:justify-center lg:space-y-0">
113+
<section class="bg-gradient-to-r from-[#7DCFFF] via-[#2E8FE7] to-[#091E3A] py-8 lg:pt-40">
114+
<div class="mx-auto flex max-w-96 flex-col space-y-8 px-5 lg:max-w-none lg:flex-row lg:items-center lg:justify-center lg:space-y-0">
112115
<!-- Card 1 -->
113116
<div class="lg:order-2 lg:ml-8">
114117
<div class="lg:flex lg:flex-col lg:items-center">
@@ -144,7 +147,7 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
144147
<Image
145148
src={tvMoviesImg}
146149
loading="lazy"
147-
class="flex aspect-[4/3] lg:h-60 h-full rounded-l-3xl object-cover shadow-lg lg:max-w-[20em]"
150+
class="flex aspect-[4/3] h-full rounded-l-3xl object-cover shadow-lg lg:h-60 lg:max-w-[20em]"
148151
alt="Mike's cameo on the Big Bang Theory."
149152
/>
150153
</div>
@@ -170,7 +173,7 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
170173
<Image
171174
src={frequentGuestImg}
172175
loading="lazy"
173-
class="flex lg:h-60 h-full object-cover rounded-l-3xl shadow-lg lg:max-w-[20em]"
176+
class="flex h-full rounded-l-3xl object-cover shadow-lg lg:h-60 lg:max-w-[20em]"
174177
alt="Mike on the television."
175178
/>
176179
</div>
@@ -194,6 +197,17 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
194197
</div>
195198
</section>
196199

200+
<!-- Floating Instagram Widget (Desktop)
201+
<div class="relative hidden lg:mx-auto lg:max-w-7xl 2xl:block">
202+
<div class="absolute left-4 w-72">
203+
<div class="border-gray-200 sticky z-20 overflow-hidden rounded-2xl border bg-white shadow-xl">
204+
<div class="max-h-[calc(100vh-120px)] overflow-y-auto p-1">
205+
<InstagramWidget username="astromikemassimino" postCount={3} />
206+
</div>
207+
</div>
208+
</div>
209+
</div> -->
210+
197211
<!-- Inspiring Talks Section -->
198212
<section class="bg-gradient-to-r from-[#EDF5FF] to-[#D7E6FF]">
199213
<div class="space-y-5 px-6 pb-14 pt-5 lg:mx-auto lg:max-w-5xl lg:gap-12 lg:px-16 xl:max-w-6xl xl:pt-8">
@@ -264,9 +278,43 @@ import teamworkHighlightedSpeakingImg from "../assets/highlighted_speaking/teamw
264278
</div>
265279
</div>
266280
</section>
281+
282+
<div class="lg:mx-auto lg:max-w-7xl">
283+
<!-- Mobile Instagram Widget (inline) -->
284+
<div class="mt-16 px-5 2xl:hidden">
285+
<InstagramWidget />
286+
</div>
287+
</div>
288+
289+
<div id="floating-insta" class="pointer-events-none fixed bottom-4 left-4 z-50 hidden opacity-0 transition-opacity duration-500 2xl:block -translate-y-[240px]">
290+
<div class="border-gray-200 rounded-2xl border bg-white shadow-xl">
291+
<InstagramWidget username="astromikemassimino" postCount={3} />
292+
</div>
293+
</div>
267294
</BaseLayout>
268295

269296
<script>
270297
// @ts-ignore
271298
import fsLightbox from "fslightbox";
299+
const trigger = document.getElementById("insta-trigger");
300+
const widget = document.getElementById("floating-insta");
301+
302+
const observer = new IntersectionObserver(
303+
(entries) => {
304+
entries.forEach((entry) => {
305+
if (!entry.isIntersecting && entry.boundingClientRect.top < 0) {
306+
// User has scrolled PAST the trigger point
307+
widget.classList.remove("opacity-0", "pointer-events-none");
308+
widget.classList.add("opacity-100");
309+
} else {
310+
// User is above the trigger point
311+
widget.classList.add("opacity-0", "pointer-events-none");
312+
widget.classList.remove("opacity-100");
313+
}
314+
});
315+
},
316+
{ threshold: 0 },
317+
);
318+
319+
observer.observe(trigger);
272320
</script>

0 commit comments

Comments
 (0)