Add headerImage frontmatter

docs/blog.md

@@ -14,7 +14,7 @@ import BlogAuthor from './components/BlogAuthor.vue';
 <template v-for="(post, i) in data">
 	<a :href="post.url" class="flex flex-col sm:flex-row items-start sm:gap-8 !text-inherit !no-underline ![font-weight:inherit] group">
 		<div>
-			<img src="./assets/on-air.png" class="shrink-0 sm:w-40 rounded" />
+			<img :src="post.frontmatter.headerImage" class="shrink-0 sm:w-40 rounded" />
 			<div v-if="false" class="p-1">
 				<BlogAuthor :frontmatter="post.frontmatter" small />
 			</div>

docs/blog/mediabunny-now-supports-hls.md

@@ -7,6 +7,7 @@ author: Vanilagy
 authorImage: /vani.png
 authorLink: https://github.com/Vanilagy
 authorSubtitle: Creator of Mediabunny
+headerImage: /on-air.png
 excerpt: Mediabunny v1.42.0 adds read/write support for HTTP Live Streaming (HLS). This has been in the making for the last ~4 months and is, by far, the biggest addition to Mediabunny since its original release.
 ---
 
@@ -14,7 +15,7 @@ excerpt: Mediabunny v1.42.0 adds read/write support for HTTP Live Streaming (HLS
 import BlogAuthor from '../components/BlogAuthor.vue';
 </script>
 
-<img src="../assets/on-air.png" class="rounded-2xl mb-2">
+<img :src="$frontmatter.headerImage" class="rounded-2xl mb-2" />
 
 <p class="!m-0 opacity-70">{{ $frontmatter.publishedOn }}</p>