You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: exampleSite/content/_index.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,19 +6,19 @@ title: "Wavecast Demo"
6
6
<h1>Wavecast</h1>
7
7
<p>A persistent <strong><podcast-player></strong> Web Component for Hugo - drop it into any post with a single shortcode. Supports local audio, AzuraCast radio streams, and iVoox episodes. Works as a <strong>Hugo module</strong> or as a <strong>Hugo theme</strong>.</p>
8
8
<divclass="nav-buttons"style="margin-top:1rem">
9
-
<a href="{{< relref "posts/test-episode.md" >}}" class="nav-button nav-button-primary">📻 Test Episode</a>
10
-
<a href="{{< relref "posts/second-episode.md" >}}" class="nav-button">▶️ Second Episode</a>
<pstyle="margin-bottom:0.4rem"><strong>🔊 Notice the persistent audio footer at the bottom of the page?</strong> That's the Wavecast sticky footer player - it follows you across all pages, stays in sync with every inline player, and remembers your position, volume, and speed. Try navigating between pages while audio is playing.</p>
16
+
<pstyle="margin-bottom:0.4rem"><strong>Notice the persistent audio footer at the bottom of the page?</strong> That's the Wavecast sticky footer player - it follows you across all pages, stays in sync with every inline player, and remembers your position, volume, and speed. Try navigating between pages while audio is playing.</p>
17
17
<pstyle="margin:0;color:var(--text-muted)">Wavecast works as both a <ahref="https://github.com/adurrr/wavecast#option-a-install-as-a-hugo-theme-recommended-for-most-sites">Hugo theme</a> (<code>theme = "wavecast"</code>) and a <ahref="https://github.com/adurrr/wavecast#option-b-install-as-a-hugo-module-for-multi-module-sites">Hugo module</a> (<code>hugo mod get</code>). See the <ahref="https://github.com/adurrr/wavecast#installation">README</a> for both installation paths.</p>
18
18
</div>
19
19
20
20
<sectionclass="demo-section">
21
-
<h2>📻 Basic Player</h2>
21
+
<h2>Basic Player</h2>
22
22
<pclass="desc">Minimal usage - just a <code>src</code> and <code>title</code>. This uses a local <code>.wav</code> asset from <code>assets/demo/</code>.</p>
23
23
<divclass="demo-player">
24
24
<div class="player-wrapper">
@@ -37,7 +37,7 @@ title: "Wavecast Demo"
37
37
</section>
38
38
39
39
<sectionclass="demo-section">
40
-
<h2>🎵 Player with Poster</h2>
40
+
<h2>Player with Poster</h2>
41
41
<pclass="desc">Show an album-art poster alongside the controls.</p>
42
42
<divclass="demo-player">
43
43
<div class="player-wrapper">
@@ -58,7 +58,7 @@ title: "Wavecast Demo"
58
58
</section>
59
59
60
60
<sectionclass="demo-section">
61
-
<h2>📖 Player with Chapters</h2>
61
+
<h2>Player with Chapters</h2>
62
62
<pclass="desc">Add timestamp-labelled chapters for easy navigation.</p>
63
63
<divclass="demo-player">
64
64
<div class="player-wrapper">
@@ -83,11 +83,11 @@ title: "Wavecast Demo"
83
83
</section>
84
84
85
85
<sectionclass="demo-section">
86
-
<h2>💾 Persistence Demo</h2>
86
+
<h2>Persistence Demo</h2>
87
87
<pclass="desc">Toggle <code>persistent="true"</code> - the player saves your position, volume, mute, and playback speed to <code>sessionStorage</code>. Navigate between pages and resume where you left off. Try it on these two instances of the same audio:</p>
88
88
89
89
<divclass="demo-player">
90
-
<h3 style="font-size:1rem;margin-bottom:0.5rem">🔁 Player A (with persistence)</h3>
90
+
<h3 style="font-size:1rem;margin-bottom:0.5rem">Player A (with persistence)</h3>
<pclass="desc"style="margin-top:0.75rem;font-size:0.85rem">💡 Play some of Player A, then <ahref="{{< relref "posts/second-episode.md" >}}">navigate to the second page</a> and come back - your position, volume, mute, and speed are remembered. Player B always starts fresh. You can also try navigating between <ahref="{{< relref "posts/test-episode.md" >}}">Test Episode</a> and <ahref="{{< relref "posts/second-episode.md" >}}">Second Episode</a>.</p>
116
+
<pclass="desc"style="margin-top:0.75rem;font-size:0.85rem">Play some of Player A, then <ahref="{{< relref "posts/second-episode.md" >}}">navigate to the second page</a> and come back - your position, volume, mute, and speed are remembered. Player B always starts fresh. You can also try navigating between <ahref="{{< relref "posts/test-episode.md" >}}">Test Episode</a> and <ahref="{{< relref "posts/second-episode.md" >}}">Second Episode</a>.</p>
117
117
</section>
118
118
119
119
<sectionclass="demo-section">
120
-
<h2>🎨 Theming</h2>
121
-
<pclass="desc">Click the <strong>🌙 Dark / ☀️ Light</strong> toggle in the header to switch between built-in themes. The player responds to <code>data-theme</code> on <code><html></code>. You can also customise every visual aspect with <ahref="https://github.com/adurrr/wavecast#css-custom-properties"target="_blank"rel="noopener">CSS custom properties</a> - primary colour, background, radius, progress height, and more.</p>
120
+
<h2>Theming</h2>
121
+
<pclass="desc">Click the <strong>Dark / Light</strong> toggle in the header to switch between built-in themes. The player responds to <code>data-theme</code> on <code><html></code>. You can also customise every visual aspect with <ahref="https://github.com/adurrr/wavecast#css-custom-properties"target="_blank"rel="noopener">CSS custom properties</a> - primary colour, background, radius, progress height, and more.</p>
122
122
<divclass="demo-player">
123
123
<div class="player-wrapper">
124
124
{{< podcast-player
@@ -130,7 +130,7 @@ title: "Wavecast Demo"
130
130
</section>
131
131
132
132
<sectionclass="demo-section">
133
-
<h2>📋 Shortcode Reference</h2>
133
+
<h2>Shortcode Reference</h2>
134
134
<pclass="desc">All parameters can be passed per-invocation or set globally in <code>hugo.toml</code> under <code>[params.podcastPlayer]</code>:</p>
0 commit comments