feat: responsive yt video embeds

README.md

@@ -1,4 +1,24 @@
-# Nuxt Content Starter
+# Pumpkin Blog
+
+## Blog Post Format & YouTube Embeds
+
+- Posts are regular Markdown files in the `content/` folder and require frontmatter. Example frontmatter:
+
+```yaml
+---
+date: yyyy-mm-dd
+author:
+	name: Me
+	url: https://github.com/Me
+title: Update - Day Month Year
+---
+```
+
+- To embed YouTube videos use the `Youtube` content component (with 11-character video ID):
+
+```md
+<Youtube videoId="Zz6YbXRX7d8"></Youtube>
+```
 
 Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more.
 

app/assets/css/main.css

@@ -66,4 +66,22 @@ body {
     .prose code {
         @apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm;
     }
+}
+
+/* responsive container for youtube/video embeds generated by markdown */
+.embed-responsive {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+}
+
+.embed-responsive iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
 }

app/components/content/Youtube.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ videoId: string }>();
+</script>
+
+<template>
+    <div class="not-prose mx-auto max-w-3xl w-full aspect-video overflow-hidden rounded-lg">
+        <iframe
+            :src="`https://www.youtube.com/embed/${videoId}`"
+            class="h-full w-full"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+    </div>
+</template>

content/Update 20th February.md

@@ -60,7 +60,8 @@ Pumpkin isn't just about the core server anymore. We've got two new exciting rel
 To top it all off, PumpkinMC officially has a new YouTube channel! We'll be posting updates, showcases, and development logs there. Make sure to subscribe at [@PumpkinServer](https://www.youtube.com/@PumpkinServer). 
 
 Check out our latest video below to see some of the new features in action:
-https://youtu.be/Zz6YbXRX7d8
+
+<Youtube videoId="Zz6YbXRX7d8"></Youtube>
 
 This video covers several updates to the Pumpkin server over the last two weeks.