Skip to content

Commit baeb96a

Browse files
kavaivalerikavaivaleri
authored
Merge pull request #58 from DataTalksClub/podcast-experiments-val
Podcast experiments
2 parents 3366c55 + 0b6d2b2 commit baeb96a

39 files changed

+1682
-539
lines changed

‎_includes/youtube.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="video-container my-3">
22
<iframe
3-
src="//www.youtube.com/embed/{{ include.video_id }}"
3+
id="podcast-video-player"
4+
src="https://www.youtube.com/embed/{{ include.video_id }}?enablejsapi=1"
45
frameborder="0"
56
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
67
allowfullscreen>

‎_layouts/podcast.html‎

Lines changed: 217 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -9,103 +9,249 @@
99
<div class="row">
1010
<div class="col-lg-8 mx-auto content">
1111

12-
<div class="content-head d-flex justify-content-between align-items-center">
13-
<div>
14-
<h1>{{ page.title }}</h1>
12+
<div class="podcast-head-section">
13+
<div class="podcast-header">
14+
<div class="podcast-meta-top">
15+
<span class="podcast-type-badge">Season {{ page.season }}, Episode {{ page.episode }}</span>
16+
</div>
17+
<h1>{{ page.title }}{% if page.guests %} | {% for a in page.guests %}{% assign author = site.people | where: "short", a | first %}{{ author.title }}{% unless forloop.last %}, {% endunless %}{% endfor %}{% endif %}</h1>
1518
{% if page.subtitle %}
16-
<h3>{{ page.subtitle }}</h3>
19+
<h3 class="podcast-subtitle">{{ page.subtitle }}</h3>
1720
{% endif %}
18-
19-
<p>Season {{ page.season }}, episode {{ page.episode }} of the DataTalks.Club podcast with
20-
{% for a in page.guests %}
21-
{% assign author = site.people | where: "short", a | first %}
22-
<a href="/people/{{a}}.html">{{ author.title }}</a>{% unless forloop.last %}, {% endunless %}
23-
{% endfor %}
24-
</p>
2521
</div>
26-
<div>
27-
<div class="social">
28-
</div>
22+
23+
<div class="podcast-video-container">
24+
{% include youtube.html video_id=page.ids.youtube %}
2925
</div>
30-
</div>
3126

32-
<div class="content-main mb-5">
33-
<div class="pod-badges">
27+
<div class="podcast-listen-links">
28+
<span class="listen-label">Listen or watch on your favorite platforms</span>
29+
<div class="listen-buttons">
30+
<a href="{{ page.links.youtube }}" target="_blank" class="listen-btn listen-btn-youtube">
31+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
32+
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
33+
</svg>
34+
YouTube
35+
</a>
3436
{% if page.links.apple and page.links.apple != 'TODO' %}
35-
<div class="pod-badge-container">
36-
<a href="{{ page.links.apple }}" target="_blank">
37-
<img class="pod-badge" src="/images/podcast/badges/apple-podcasts.svg" />
38-
</a>
39-
</div>
37+
<a href="{{ page.links.apple }}" target="_blank" class="listen-btn listen-btn-apple">
38+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
39+
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
40+
</svg>
41+
Apple Podcasts
42+
</a>
4043
{% endif %}
4144
{% if page.links.spotify and page.links.spotify != 'TODO' %}
42-
<div class="pod-badge-container">
43-
<a href="{{ page.links.spotify }}" target="_blank">
44-
<img class="pod-badge" src="/images/podcast/badges/spotify.svg" />
45-
</a>
46-
</div>
45+
<a href="{{ page.links.spotify }}" target="_blank" class="listen-btn listen-btn-spotify">
46+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
47+
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
48+
</svg>
49+
Spotify
50+
</a>
4751
{% endif %}
48-
<div class="pod-badge-container">
49-
<a href="{{ page.links.youtube }}" target="_blank">
50-
<img class="pod-badge" src="/images/podcast/badges/youtube.svg" />
51-
</a>
52-
</div>
53-
<div class="pod-badge-container">
54-
<a href="{{ page.links.anchor }}" target="_blank">
55-
<img class="pod-badge" src="/images/podcast/badges/anchor.svg" />
56-
</a>
57-
</div>
5852
</div>
53+
</div>
54+
</div>
5955

56+
<!-- Tabs Navigation -->
57+
<div class="podcast-tabs">
58+
<button class="podcast-tab-button active" data-tab="shownotes">Show Notes</button>
59+
<button class="podcast-tab-button" data-tab="timestamps">Timestamps</button>
60+
{% if page.transcript %}
61+
<button class="podcast-tab-button" data-tab="transcript">Transcript</button>
62+
{% endif %}
6063
</div>
6164

62-
<div class="content-main mb-5">
63-
{% include youtube.html video_id=page.ids.youtube %}
64-
{% include anchor.html id=page.ids.anchor %}
65+
<!-- Tab Contents -->
66+
<div class="podcast-tab-content active" id="shownotes-tab">
67+
{% if page.intro %}
68+
<!-- Intro Text Section -->
69+
<div class="podcast-intro-section">
70+
<p>{{ page.intro }}</p>
71+
</div>
72+
{% endif %}
73+
74+
<!-- Show Notes Content -->
75+
<div class="content-main mb-5">
76+
{{ content }}
77+
</div>
78+
79+
<!-- Guest Bio Cards -->
80+
{% if page.guests %}
81+
<div class="guest-bio-section mb-4">
82+
{% for guest_short in page.guests %}
83+
{% assign guest = site.people | where: "short", guest_short | first %}
84+
{% if guest %}
85+
<div class="guest-bio-card">
86+
<img src="/{{ guest.picture }}" alt="{{ guest.title }}" class="guest-bio-img">
87+
<div class="guest-bio-content">
88+
<div class="guest-bio-header">
89+
<span class="guest-bio-label">About this Guest</span>
90+
<h3 class="guest-bio-name">{{ guest.title }}</h3>
91+
</div>
92+
<div class="guest-bio-description">
93+
{% if guest.bio_short %}
94+
{{ guest.bio_short }}
95+
{% else %}
96+
{{ guest.content }}
97+
{% endif %}
98+
</div>
99+
<div class="guest-bio-links">
100+
{% if guest.linkedin %}
101+
<a href="https://www.linkedin.com/in/{{ guest.linkedin }}" target="_blank">LinkedIn</a>
102+
{% endif %}
103+
{% if guest.twitter %}
104+
<a href="https://twitter.com/{{ guest.twitter }}" target="_blank">X</a>
105+
{% endif %}
106+
<a href="{{ guest.url }}">{{ guest.title }} on DataTalks.Club</a>
107+
</div>
108+
</div>
109+
</div>
110+
{% endif %}
111+
{% endfor %}
112+
</div>
113+
{% endif %}
114+
115+
116+
<!-- Newsletter Section -->
117+
<div class="podcast-newsletter-section">
118+
<div class="podcast-newsletter-content">
119+
<h2 class="podcast-newsletter-title">Join 130,000+ data professionals and get weekly updates on new podcast episodes, upcoming events, free courses, and more.</h2>
120+
<p class="podcast-newsletter-description">
121+
You'll also receive an invite to our Slack community with instant access to discussions, networking, and peer support.
122+
</p>
123+
{% include subscribe.html subscribe="true" %}
124+
</div>
65125
</div>
66126

67-
<div class="content-main mb-5">
68-
{{ content }}
127+
<!-- Related Episodes Section -->
128+
<div class="related-episodes-section">
129+
<h2 class="related-episodes-title">Related episodes</h2>
130+
<div class="related-episodes-grid">
131+
{% assign related_count = 0 %}
132+
{% assign related_episodes = site.podcast | where: "season", page.season | sort: "episode" | reverse %}
133+
{% for episode in related_episodes %}
134+
{% if episode.url != page.url and related_count < 3 %}
135+
<a href="{{ episode.url }}" class="related-episode-card">
136+
<div class="related-episode-image">
137+
<img src="/{{ episode.image }}" alt="{{ episode.title }}">
138+
</div>
139+
<div class="related-episode-content">
140+
{% if episode.season and episode.episode %}
141+
<span class="related-episode-badge">Season {{ episode.season }}, Episode {{ episode.episode }}</span>
142+
{% endif %}
143+
<h3 class="related-episode-title">{{ episode.title }}</h3>
144+
{% if episode.guests %}
145+
<p class="related-episode-guest">
146+
{% for guest_short in episode.guests limit:1 %}
147+
{% assign guest = site.people | where: "short", guest_short | first %}
148+
{{ guest.title }}
149+
{% endfor %}
150+
</p>
151+
{% endif %}
152+
</div>
153+
</a>
154+
{% assign related_count = related_count | plus: 1 %}
155+
{% endif %}
156+
{% endfor %}
157+
</div>
158+
</div>
69159
</div>
70160

71-
<div class="content-main mb-5">
72-
Did you like this episode? Check <a href="/podcast.html" target="_blank">other episodes of the podcast</a>,
73-
and <a href="/events.html" target="_blank">register for new events</a>.
161+
<div class="podcast-tab-content" id="timestamps-tab">
162+
{% if page.transcript %}
163+
<p class="timestamps-prompt">Click any timestamp to jump to that moment in the video</p>
164+
<div class="timestamps-list">
165+
<ul>
166+
{% assign found_header = false %}
167+
{% assign header_text = "" %}
168+
{% for line in page.transcript %}
169+
{% if line.header %}
170+
{% assign found_header = true %}
171+
{% assign header_text = line.header %}
172+
{% elsif found_header and line.sec %}
173+
<li>
174+
<a href="#" class="timestamp-link" data-time="{{ line.sec }}">
175+
<span class="timestamp-time">{{ line.time }}</span>
176+
<span class="timestamp-text">{{ header_text }}</span>
177+
</a>
178+
</li>
179+
{% assign found_header = false %}
180+
{% endif %}
181+
{% endfor %}
182+
</ul>
183+
</div>
184+
{% else %}
185+
<p>Timestamps coming soon...</p>
186+
{% endif %}
74187
</div>
75188

76189
{% if page.transcript %}
77-
<div class="content-main mb-5">
78-
<h2 id="transcript">Transcript</h2>
79-
<p>
80-
The transcripts are edited for clarity, sometimes with AI.
81-
If you notice any incorrect information,
82-
<a href="https://github.com/DataTalksClub/datatalksclub.github.io/issues/new/choose" target="_blank">let us know</a>.
83-
</p>
84-
85-
{% assign toc = page.transcript | where_exp: "line", "line.header" %}
86-
<ul>
87-
{% for line in toc %}
88-
<li><a href="#{{ line.header | slugify }}">{{ line.header }}</a></li>
89-
{% endfor %}
90-
</ul>
91-
{% for line in page.transcript %}
92-
{% if line.header %}
93-
<h3 id="{{ line.header | slugify }}">{{ line.header }}</h3>
94-
{% else %}
95-
<p><b>{{ line.who }}</b>: {{ line.line }}{% if line.sec %} (<a href="{{ page.links.youtube }}&t={{ line.sec }}s" target="youtube">{{ line.time }}</a>){% endif %}</p>
96-
{% endif %}
97-
{% endfor %}
190+
<div class="podcast-tab-content" id="transcript-tab">
191+
<div class="content-main mb-5">
192+
<p class="transcript-disclaimer">
193+
The transcripts are edited for clarity, sometimes with AI.
194+
If you notice any incorrect information,
195+
<a href="https://github.com/DataTalksClub/datatalksclub.github.io/issues/new/choose" target="_blank">let us know</a>.
196+
</p>
197+
198+
{% for line in page.transcript %}
199+
{% if line.header %}
200+
<h3 id="{{ line.header | slugify }}" class="transcript-header">{{ line.header }}</h3>
201+
{% else %}
202+
<p class="transcript-line"><b>{{ line.who }}</b>: {{ line.line }}{% if line.sec %} (<a href="{{ page.links.youtube }}&t={{ line.sec }}s" target="youtube">{{ line.time }}</a>){% endif %}</p>
203+
{% endif %}
204+
{% endfor %}
205+
</div>
98206
</div>
99207
{% endif %}
100208

101-
<div class="article-divider"></div>
102-
103-
<div class="article-end">
104-
{% include subscribe.html subscribe="true" %}
105-
</div>
106209
</div>
107210
</div>
108211
</div>
109212

213+
<script>
214+
// Tab switching functionality
215+
document.addEventListener('DOMContentLoaded', function() {
216+
const tabButtons = document.querySelectorAll('.podcast-tab-button');
217+
const tabContents = document.querySelectorAll('.podcast-tab-content');
218+
219+
tabButtons.forEach(button => {
220+
button.addEventListener('click', function() {
221+
const targetTab = this.getAttribute('data-tab');
222+
223+
// Remove active class from all buttons and contents
224+
tabButtons.forEach(btn => btn.classList.remove('active'));
225+
tabContents.forEach(content => content.classList.remove('active'));
226+
227+
// Add active class to clicked button and corresponding content
228+
this.classList.add('active');
229+
document.getElementById(targetTab + '-tab').classList.add('active');
230+
});
231+
});
232+
233+
// Timestamp click functionality
234+
const timestampLinks = document.querySelectorAll('.timestamp-link');
235+
timestampLinks.forEach(link => {
236+
link.addEventListener('click', function(e) {
237+
e.preventDefault();
238+
const timeInSeconds = parseInt(this.getAttribute('data-time'));
239+
240+
// Get the YouTube iframe
241+
const iframe = document.getElementById('podcast-video-player');
242+
if (iframe) {
243+
// Get the video ID from the src
244+
const videoId = iframe.src.match(/embed\/([^?]+)/)[1];
245+
// Reload iframe with new timestamp
246+
iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&start=${timeInSeconds}&autoplay=1`;
247+
248+
// Scroll to video
249+
document.querySelector('.podcast-video-container').scrollIntoView({ behavior: 'smooth', block: 'center' });
250+
}
251+
});
252+
});
253+
});
254+
</script>
255+
110256
{% include footer.html %}
111257
</body>

‎_people/christopherbergh.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
short: christopherbergh
33
title: "Christopher Bergh"
44
picture: "images/authors/christopherbergh.jpg"
5-
65
twitter: ChrisBergh
76
linkedin: chrisbergh
8-
7+
bio_short: "Christopher Bergh is the CEO and Head Chef at DataKitchen, the pioneering company behind DataOps and open source data observability solutions. With over 25 years of experience in software engineering, data analytics, and executive leadership, Chris is recognized as one of the original thought leaders in DataOps. He co-authored the DataOps Cookbook and DataOps Manifesto, and is a frequent keynote speaker at global data and AI conferences."
98
---
109

11-
Christopher Bergh is the CEO and Head Chef at DataKitchen. Chris has more than 25 years of research, software engineering, data analytics, and executive management experience. At various points in his career, he has been a COO, CTO, VP, and Director of engineering. Chris has an M.S. from Columbia University and a B.S. from the University of Wisconsin-Madison.
10+
Christopher Bergh is a veteran data and technology leader with more than 25 years of experience spanning research, software engineering, analytics, and executive management. As CEO and Head Chef at DataKitchen, Chris has helped define and popularize the field of DataOps—a methodology that streamlines data engineering, analytics, and AI delivery through automation and agile principles. Under his leadership, DataKitchen has become a trusted name in data observability, data quality, and continuous data operations, empowering enterprises to accelerate insight delivery while reducing risk and cost.
11+
12+
Chris is the co-author of the DataOps Cookbook and the DataOps Manifesto, foundational works that have shaped how organizations approach data pipelines and analytics governance. A recognized industry thought leader, he frequently speaks at major conferences and contributes to advancing best practices in data management, observability, and DevOps-inspired analytics workflows.
13+
14+
Earlier in his career, Chris held senior technology and leadership roles including COO, CTO, and VP of Engineering. He began his career at MIT Lincoln Laboratory and NASA Ames Research Center, where he developed algorithms that optimized aircraft arrivals at major U.S. airports. He also served as a Peace Corps volunteer math teacher in Botswana—an experience that continues to inform his people-first leadership philosophy. Chris holds an M.S. from Columbia University and a B.S. from the University of Wisconsin–Madison.
1215

13-
Chris is a recognized expert on DataOps. He is the co-author of the ‘DataOps Cookbook” and the “DataOps Manifesto,” and a speaker on DataOps at many industry conferences. Chris began his career at the Massachusetts Institute of Technology's Lincoln Laboratory and NASA Ames Research Center. There he created software and algorithms that provided aircraft arrival optimization at several major airports in the United States. Chris served as a Peace Corps Volunteer Math Teacher in Botswana, Africa.
16+
Through DataKitchen and his advocacy, Chris continues to inspire data professionals worldwide to embrace DataOps as the foundation for fast, reliable, and collaborative analytics.

0 commit comments

Comments
 (0)