Replace AudioPlayer screenshot with Vue Component

ServiceStack · Oct 2, 2024 · 32a914a · 32a914a
1 parent 417c2a7
commit 32a914a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/MyApp/_posts/2024-10-02_razor-ssg-podcasts.md b/MyApp/_posts/2024-10-02_razor-ssg-podcasts.md
@@ -77,15 +77,19 @@ Vue Component that's enabled on each podcast page which will appear at the botto
 [![](/img/posts/razor-ssg-podcasts/razor-ssg-podcast-audioplayer.webp)](https://razor-ssg.web-templates.io/podcasts)
 
 The `AudioPlayer` component is also independently usable as a standard Vue Component in
-markdown content:
+markdown content like [this .md page](https://github.com/NetCoreTemplates/razor-ssg/blob/main/MyApp/_posts/2024-10-02_razor-ssg-podcasts.md#audio-player):
 
 ```html
 <audio-player id="scalable-sqlite" title="Scalable SQLite" variant="compact"
     src="https://media.servicestack.com/podcasts/scalable-sqlite.mp3">
 </audio-player>
 ```
 
-[![](/img/posts/razor-ssg-podcasts/razor-ssg-podcast-audioplayer-compact.webp)](https://razor-ssg.web-templates.io/podcasts)
+:::{.py-8 .mx-auto .w-2/3 .not-prose}
+<audio-player id="scalable-sqlite" title="Scalable SQLite" variant="compact"
+src="https://media.servicestack.com/podcasts/scalable-sqlite.mp3">
+</audio-player>
+:::
 
 It can also be embeddable inside Razor `.cshtml` pages using 
 [Declarative Vue Components](https://servicestack.net/posts/net8-best-blazor#declarative-vue-components), e.g:

diff --git a/MyApp/wwwroot/img/posts/razor-ssg-podcasts/razor-ssg-podcast-audioplayer-compact.webp b/MyApp/wwwroot/img/posts/razor-ssg-podcasts/razor-ssg-podcast-audioplayer-compact.webp
diff --git a/MyApp/wwwroot/posts/razor-ssg-podcasts.mjs b/MyApp/wwwroot/posts/razor-ssg-podcasts.mjs
@@ -0,0 +1,5 @@
+import AudioPlayer from '../pages/podcasts/AudioPlayer.mjs'
+
+export default {
+    components: { AudioPlayer }
+}