Skip to content

Commit 05e9e06

Browse files
vindipevindipe
committed
Update Pills of Blockchain captions and carousel cards
1 parent eb0f8c2 commit 05e9e06

2 files changed

Lines changed: 195 additions & 58 deletions

File tree

‎src/components/tutorials/PillsOfBlockchainInstagram.astro‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
---
2+
const reels = [
3+
{
4+
title: "Pills of Blockchain #01",
5+
desc: "Pill #1 - Who knows Blockchain? #blockchain #bitcoin #ethereum #nft #phd #blockchainnews",
6+
url: "https://www.instagram.com/reel/CnLx5cuOf91/",
7+
},
8+
{
9+
title: "Pills of Blockchain #02",
10+
desc: "Pill #2 - Intermediaries #blockchain #bitcoin #ethereum #nft #phd #blockchainnews #bank",
11+
url: "https://www.instagram.com/reel/CnM789prwGH/",
12+
},
13+
{
14+
title: "Pills of Blockchain #03",
15+
desc: "Pill n.3 - Decentralization #blockchain #decentralization #decentralized #bitcoin #bank #instagram #world #italy #phd #phdlife #university",
16+
url: "https://www.instagram.com/reel/CnWDiWuPuzt/",
17+
},
18+
{
19+
title: "Pills of Blockchain #04",
20+
desc: "Pill n.4 - The Bitcoin use case #blockchain #blockchainnews #world #instagram #italy #phd #phdlife #pricecap #bitcoin #bitcoins #bitcoinnews #usa #university #università #ethereum #money #crypto #cryptocurrency",
21+
url: "https://www.instagram.com/reel/CnXPB96pH62/",
22+
},
23+
{
24+
title: "Pills of Blockchain #05",
25+
desc: "Pill n.5 - Consensus #cryptomarket #cryptomoney #blockchaintechnology #phdvoice #world #blockchain #blockchainnews #italy #university #università",
26+
url: "https://www.instagram.com/reel/Cnd4ErJOtX2/",
27+
},
28+
{
29+
title: "Pills of Blockchain #06",
30+
desc: "Pill n.6 - Miners #phd #bitcoin #blockchain #ethereum #nft #blockchaintechnology #binance #blockchainnews #miners #hashrate #coinbase",
31+
url: "https://www.instagram.com/reel/CnoLQYgMI9D/",
32+
},
33+
{
34+
title: "Pills of Blockchain #07",
35+
desc: "Pill n.7 - Cryptocurrencies #blockchain #blockchaintechnology #crypto #cryptocurrency #cryptocurrencies #investment #digital #world #instagram #bitcoin #ethereum #italy",
36+
url: "https://www.instagram.com/reel/Cnw7W-NL4Pd/",
37+
},
38+
{
39+
title: "Pills of Blockchain #08",
40+
desc: "Pill n.8 - Security #blockchain #phd #nft #clean #security #attack #51attack #robustness #world #strenght #immutable #immutability",
41+
url: "https://www.instagram.com/reel/Cn6ILrJvnt-/",
42+
},
43+
{
44+
title: "Pills of Blockchain #09",
45+
desc: "Pill n.9 - Use Case Ethereum #blockchain #phd #bitcoin #ethereum #nft #token #world #smartcontracts #pos #proofofstake #instagram #italy #university",
46+
url: "https://www.instagram.com/reel/CoDTRTSLovQ/",
47+
},
48+
{
49+
title: "Pills of Blockchain #10",
50+
desc: "Pill n.10 - Smart Contract #blockchain #blockchaintechnology #smartcontract #reliability #versatile #automation #phd #bitcoin #ethereum #defi",
51+
url: "https://www.instagram.com/reel/CoMPZ2Gr6rL/",
52+
},
53+
{
54+
title: "Pills of Blockchain #11",
55+
desc: "Pill n.11 - NFT #blockchain #blockchaintechnology #smartcontract #nft #ethereum #crypto #asset #trading",
56+
url: "https://www.instagram.com/reel/CoT5aqeuPDQ/",
57+
},
58+
{
59+
title: "Pills of Blockchain #12",
60+
desc: "Pill n.12 - Recap #first #blockchaintechnology #blockchain #initiative #begin #phd #new #season",
61+
url: "https://www.instagram.com/reel/CoWty2jvVtA/",
62+
},
63+
{
64+
title: "Pills of Blockchain #13",
65+
desc: "Pill n.13 - Carpino use case @carpinonelmondo #newseason #blockchain #blockchaintechnology #phd #initiatives #carpino #new #world #gargano #italy #solutions #futuro #share",
66+
url: "https://www.instagram.com/reel/Ct85KZbvU_H/",
67+
},
68+
{
69+
title: "Pills of Blockchain #14",
70+
desc: "Pill n.14 - Supply Chain BuondiOli @buondioli @prolococarpino_official @carpinonelmondo #supplychain #olive #oliobiologico #agricoltura #carpino #blockchain #blockchaintechnology #phd #innovations #future",
71+
url: "https://www.instagram.com/reel/Ct-4zQEOTGG/",
72+
},
73+
{
74+
title: "Pills of Blockchain #15",
75+
desc: "Pills n.15 - Insurance Gelata 2018 #carpino #gargano #italy #blockchain #blockchaintechnology #blockchainnews #assicurazioni #fondi #sostegno #tempistiche #calamità #interventi #phd #innovation",
76+
url: "https://www.instagram.com/reel/CuGwe4JJtyg/",
77+
},
78+
{
79+
title: "Pills of Blockchain #16",
80+
desc: "Pill n.16 - Personalized Experience Palio @palio.di.san.rocco @carpinonelmondo @creodraws #palio #carpino #tradizione #innovation #gargano #italy #blockchain #custom #phd #horses #cavalli",
81+
url: "https://www.instagram.com/reel/CuOdhy3RvQj/",
82+
},
83+
{
84+
title: "Pills of Blockchain #17",
85+
desc: "Pill n.17 - DAO Festival Folk #festival #carpino #innovation #phd #blockchain #folk #community #collaboration #tradition #world",
86+
url: "https://www.instagram.com/reel/Cu3rPJgx0TW/",
87+
},
88+
{
89+
title: "Pills of Blockchain #18",
90+
desc: "Pill n.18 - Investment and NFT Terra #land #digitalization #blockchain #nft #investment #tokenization #innovations #carpino #gargano #world #phd",
91+
url: "https://www.instagram.com/reel/Cu_ck7AtAwV/",
92+
},
93+
{
94+
title: "Pills of Blockchain #19",
95+
desc: "Pill n.19 - Financing Banana Coin #blockchain #financing #startup #phd #research #innovation #opportunity",
96+
url: "https://www.instagram.com/reel/CwCtry5sVpD/",
97+
},
98+
];
99+
---
100+
101+
<section class="mb-12">
102+
<div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between mb-5">
103+
<div>
104+
<div class="flex flex-wrap gap-2 items-center mb-2">
105+
<h2 class="text-3xl font-bold">Pills of Blockchain</h2>
106+
<span class="badge badge-secondary">Video series</span>
107+
<span class="badge badge-outline">Instagram Reels</span>
108+
<span class="badge badge-outline">Italian audio</span>
109+
</div>
110+
111+
<p class="opacity-80 max-w-3xl">
112+
Short educational videos created to explain blockchain concepts in a
113+
simple and accessible way. The videos are embedded from the original
114+
public Instagram archive, keeping this website lightweight while still
115+
allowing in-page playback.
116+
</p>
117+
</div>
118+
119+
<a
120+
href="https://www.instagram.com/pillsofblockchain/"
121+
target="_blank"
122+
rel="noopener noreferrer"
123+
class="btn btn-primary btn-sm shrink-0"
124+
>
125+
Open @pillsofblockchain
126+
</a>
127+
</div>
128+
129+
<div class="relative">
130+
<div
131+
class="flex gap-5 overflow-x-auto pb-5 snap-x snap-mandatory scroll-smooth"
132+
aria-label="Scrollable Pills of Blockchain video carousel"
133+
>
134+
{
135+
reels.map((reel) => (
136+
<article class="network-protected card bg-base-100 shadow-md min-w-[340px] max-w-[340px] md:min-w-[420px] md:max-w-[420px] snap-start">
137+
<div class="card-body">
138+
<div class="flex flex-wrap gap-2 items-center">
139+
<h3 class="card-title">{reel.title}</h3>
140+
<span class="badge badge-outline">Reel</span>
141+
</div>
142+
143+
<p class="text-sm opacity-80 min-h-[4.5rem] max-h-[4.5rem] overflow-y-auto pr-1">
144+
{reel.desc}
145+
</p>
146+
147+
<div class="mt-3 overflow-hidden rounded-xl border border-base-300 bg-base-200 p-2">
148+
<blockquote
149+
class="instagram-media"
150+
data-instgrm-permalink={reel.url}
151+
data-instgrm-version="14"
152+
style="background:#FFF; border:0; margin:0 auto; max-width:540px; min-width:280px; padding:0; width:100%;"
153+
>
154+
<a href={reel.url} target="_blank" rel="noopener noreferrer">
155+
View this Reel on Instagram
156+
</a>
157+
</blockquote>
158+
</div>
159+
</div>
160+
</article>
161+
))
162+
}
163+
</div>
164+
165+
<p class="text-sm opacity-60 mt-1">
166+
Scroll horizontally to browse the full video archive.
167+
</p>
168+
</div>
169+
170+
<script is:inline>
171+
function loadInstagramEmbeds() {
172+
if (window.instgrm?.Embeds) {
173+
window.instgrm.Embeds.process();
174+
return;
175+
}
176+
177+
const existingScript = document.querySelector(
178+
'script[src="https://www.instagram.com/embed.js"]'
179+
);
180+
181+
if (!existingScript) {
182+
const script = document.createElement("script");
183+
script.async = true;
184+
script.src = "https://www.instagram.com/embed.js";
185+
script.onload = () => window.instgrm?.Embeds?.process();
186+
document.body.appendChild(script);
187+
}
188+
}
189+
190+
document.addEventListener("DOMContentLoaded", loadInstagramEmbeds);
191+
document.addEventListener("astro:page-load", loadInstagramEmbeds);
192+
</script>
193+
</section>

‎src/pages/tutorials.astro‎

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import BaseLayout from "../layouts/BaseLayout.astro";
33
import BlockchainInteractiveLabs from "../components/tutorials/BlockchainInteractiveLabs.astro";
4+
import PillsOfBlockchainInstagram from "../components/tutorials/PillsOfBlockchainInstagram.astro";
45
---
56

67
<BaseLayout
@@ -28,64 +29,7 @@ import BlockchainInteractiveLabs from "../components/tutorials/BlockchainInterac
2829

2930
<BlockchainInteractiveLabs />
3031

31-
<section class="mb-12">
32-
<div class="flex flex-wrap gap-2 items-center mb-2">
33-
<h2 class="text-3xl font-bold">Pills of Blockchain</h2>
34-
<span class="badge badge-secondary">Video series</span>
35-
<span class="badge badge-outline">Italian audio</span>
36-
<span class="badge badge-outline">English subtitles</span>
37-
</div>
38-
39-
<p class="mb-5 opacity-80">
40-
Pills of Blockchain is a short-form educational video series originally
41-
created in Italian to explain blockchain concepts in a simple and
42-
accessible way. The videos are intended for Italian-speaking audiences and
43-
can be presented with English subtitles where available.
44-
</p>
45-
46-
<div class="grid grid-cols-1 lg:grid-cols-[1fr_0.8fr] gap-4">
47-
<div class="card bg-base-100 shadow-md">
48-
<div class="card-body">
49-
<h3 class="card-title">Watch the series on YouTube</h3>
50-
51-
<p>
52-
The recommended setup is to embed selected videos or playlists from
53-
YouTube instead of uploading the video files directly into this
54-
GitHub Pages repository.
55-
</p>
56-
57-
<div class="card-actions justify-end mt-4">
58-
<a
59-
class="btn btn-primary"
60-
href="https://www.youtube.com/@pillsofblockchain/featured"
61-
target="_blank"
62-
rel="noopener noreferrer"
63-
>
64-
Open Pills of Blockchain
65-
</a>
66-
</div>
67-
</div>
68-
</div>
69-
70-
<div class="card bg-base-100 shadow-md">
71-
<div class="card-body">
72-
<h3 class="card-title">Direct embed plan</h3>
73-
74-
<p>
75-
Once the final video IDs or playlist ID are selected, this section
76-
can show embedded videos directly on the page, with English
77-
subtitles enabled by default when subtitles are available.
78-
</p>
79-
80-
<div class="card-actions justify-end mt-4">
81-
<span class="badge badge-outline">YouTube embed</span>
82-
<span class="badge badge-outline">Subtitles</span>
83-
<span class="badge badge-outline">Educational content</span>
84-
</div>
85-
</div>
86-
</div>
87-
</div>
88-
</section>
32+
<PillsOfBlockchainInstagram />
8933

9034
<section class="mb-12">
9135
<h2 class="text-3xl font-bold mb-2">Suggest a topic</h2>

0 commit comments

Comments
 (0)