Skip to content

Commit 6be3a3f

Browse files
paripskyparipsky
committed
feat: add Podcasts component and integrate it into the homepage with a new navigation link.
1 parent 989a336 commit 6be3a3f

2 files changed

Lines changed: 148 additions & 3 deletions

File tree

‎src/components/Podcasts.astro‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
import { Icon } from "astro-icon/components";
3+
4+
const podcasts = [
5+
{
6+
title: "Frontalk",
7+
description:
8+
"My own podcast, where Itay Ben Ami and I talk about web development, frontend, and a wide range of general engineering topics.",
9+
role: "Host",
10+
siteUrl: "https://www.frontalk.com/",
11+
links: [
12+
{
13+
label: "Spotify",
14+
url: "https://open.spotify.com/show/1LzfIgDxPKVfhyKxLyfkXy",
15+
icon: "mdi:spotify",
16+
color: "text-green-400 hover:text-green-300",
17+
},
18+
{
19+
label: "Apple Podcasts",
20+
url: "https://podcasts.apple.com/us/podcast/frontalk/id1829256349",
21+
icon: "mdi:podcast",
22+
color: "text-purple-400 hover:text-purple-300",
23+
},
24+
{
25+
label: "YouTube",
26+
url: "https://www.youtube.com/playlist?list=PL_qp7zj7X25kQy4dcxN_DpKNZenQgbEEz",
27+
icon: "mdi:youtube",
28+
color: "text-red-400 hover:text-red-300",
29+
},
30+
],
31+
episodes: [],
32+
},
33+
{
34+
title: "FrontCast",
35+
description:
36+
"Participated in episode 37 (2 parts) talking about shadcn/ui and modern frontend architecture.",
37+
role: "Guest",
38+
episodes: [
39+
{
40+
title: "Part I: What is shadcn?",
41+
url: "https://open.spotify.com/episode/2axTjQdVjM64HMKd96chN2",
42+
},
43+
{
44+
title: "Part II: Pros & Cons of shadcn",
45+
url: "https://open.spotify.com/episode/4Akrsnn0iaS1sTPquRl0MK",
46+
},
47+
],
48+
},
49+
{
50+
title: "Osim Tochna",
51+
description:
52+
"Episode 167: Talking about state management in web applications (starts at 21:00).",
53+
role: "Guest",
54+
episodes: [
55+
{
56+
title: "Ep 167: להפסיק לכתוב קוד מאפס (starts at 21:00)",
57+
url: "https://www.osimhistoria.com/software/ep167-maps",
58+
},
59+
],
60+
},
61+
];
62+
---
63+
64+
<ul class="flex flex-col gap-8">
65+
{
66+
podcasts.map((podcast) => (
67+
<li class="group flex flex-col gap-2 border-l-2 border-transparent hover:border-zinc-500 pl-4 transition-all py-1">
68+
<div class="flex flex-col gap-1">
69+
<div class="flex items-center gap-2">
70+
<h2 class="text-base font-medium tracking-tight text-neutral-100 group-hover:text-white transition-colors">
71+
{podcast.title}
72+
</h2>
73+
<span class="text-xs font-mono text-sky-300 border border-sky-900/50 bg-sky-950/30 px-1.5 py-0.5 rounded">
74+
{podcast.role}
75+
</span>
76+
</div>
77+
<p class="text-sm font-light text-pretty leading-relaxed text-neutral-400 max-w-xl group-hover:text-neutral-300 transition-colors">
78+
{podcast.description}
79+
</p>
80+
</div>
81+
82+
<div class="flex flex-wrap justify-between items-center gap-4 mt-2">
83+
<div class="flex gap-4 text-xs font-medium">
84+
{podcast.siteUrl && (
85+
<a
86+
href={podcast.siteUrl}
87+
class="text-sky-300 hover:text-sky-200 flex items-center gap-1 transition-colors"
88+
target="_blank"
89+
>
90+
Website <Icon name="mdi:web" class="size-3.5" />
91+
</a>
92+
)}
93+
94+
{podcast.links && (
95+
<div class="flex gap-3 border-l border-zinc-700 pl-3">
96+
{podcast.links.map((link) => (
97+
<a
98+
href={link.url}
99+
target="_blank"
100+
class={`${link.color || "text-neutral-400 hover:text-white"} flex items-center gap-1 transition-colors`}
101+
>
102+
<Icon
103+
name={link.icon}
104+
class="size-3.5"
105+
/>
106+
<span class="hidden sm:inline">
107+
{link.label}
108+
</span>
109+
</a>
110+
))}
111+
</div>
112+
)}
113+
114+
{podcast.episodes.length > 0 && (
115+
<div class="flex gap-3">
116+
{podcast.episodes.map((ep, i) => (
117+
<a
118+
href={ep.url}
119+
target="_blank"
120+
class="text-neutral-400 hover:text-white flex items-center gap-1 transition-colors"
121+
>
122+
<Icon
123+
name="mdi:headphones"
124+
class="size-3.5"
125+
/>
126+
{podcast.episodes.length > 1
127+
? ep.title
128+
: "Listen"}
129+
</a>
130+
))}
131+
</div>
132+
)}
133+
</div>
134+
</div>
135+
</li>
136+
))
137+
}
138+
</ul>

‎src/pages/index.astro‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Pill from "../components/Pill.astro";
99
import { Icon } from "astro-icon/components";
1010
import Post from "../components/Post.astro";
1111
import Presentations from "../components/Presentations.astro";
12+
import Podcasts from "../components/Podcasts.astro";
1213
1314
type Mention = {
1415
title: string;
@@ -92,6 +93,9 @@ const posts = Object.values(postsGlob)
9293
<a href="#posts" class="hover:text-white transition-colors w-fit"
9394
>Posts</a
9495
>
96+
<a href="#podcasts" class="hover:text-white transition-colors w-fit"
97+
>Podcasts</a
98+
>
9599
<a
96100
href="#presentations"
97101
class="hover:text-white transition-colors w-fit">Presentations</a
@@ -106,16 +110,19 @@ const posts = Object.values(postsGlob)
106110
</section>
107111
</div>
108112

109-
<div
110-
class="flex flex-col gap-20 py-12"
111-
>
113+
<div class="flex flex-col gap-20 py-12">
112114
<section id="posts" class="flex flex-col gap-6">
113115
<Pill><Icon name="mdi:post" class="size-4" /> Posts</Pill>
114116
<ul class="flex flex-col gap-4">
115117
{posts.map((post) => <Post post={post} />)}
116118
</ul>
117119
</section>
118120

121+
<section id="podcasts" class="flex flex-col gap-6">
122+
<Pill><Icon name="mdi:microphone" class="size-4" /> Podcasts</Pill>
123+
<Podcasts />
124+
</section>
125+
119126
<section id="presentations" class="flex flex-col gap-6">
120127
<Pill
121128
><Icon name="mdi:presentation" class="size-4" /> Presentations</Pill

0 commit comments

Comments
 (0)