chore: add yt block support

src/_data/posts.js

@@ -8,6 +8,43 @@ const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
 
 const PAGE_SIZE = 50
 
+const fetchBlockData = async (collection, itemId) => {
+  const { data, error } = await supabase
+    .from(collection)
+    .select('*')
+    .eq('id', itemId)
+    .single()
+
+  if (error) {
+    console.error(`Error fetching data from ${collection} for item ${itemId}:`, error)
+    return null
+  }
+
+  return data
+}
+
+const fetchBlocksForPost = async (postId) => {
+  const { data, error } = await supabase
+    .from('posts_blocks')
+    .select('collection, item')
+    .eq('posts_id', postId)
+
+  if (error) {
+    console.error(`Error fetching blocks for post ${postId}:`, error)
+    return []
+  }
+
+  const blocks = await Promise.all(data.map(async block => {
+    const blockData = await fetchBlockData(block.collection, block.item)
+    return {
+      type: block.collection,
+      ...blockData
+    }
+  }))
+
+  return blocks
+}
+
 const fetchTagsForPost = async (postId) => {
   const { data, error } = await supabase
     .from('posts_tags')
@@ -43,6 +80,7 @@ const fetchAllPosts = async () => {
 
     for (const post of data) {
       post.tags = await fetchTagsForPost(post.id)
+      post.blocks = await fetchBlocksForPost(post.id)
       post.url = `/posts/${DateTime.fromISO(post.date).year}/${slugify(post.title, {
         replacement: '-',
         remove: /[#,&,+()$~%.'":*?<>{}\[\]\/\\|`!@\^\—]/g,

src/_includes/partials/posts/blocks.liquid

@@ -0,0 +1,5 @@
+{% for block in blocks %}
+  {% if block.type == 'youtube_player' %}
+    {% render "partials/widgets/youtube-player.liquid", url:block.url %}
+  {% endif %}
+{% endfor %}

src/assets/styles/components/youtube-video.css

@@ -0,0 +1,3 @@
+youtube-video {
+  margin-block: var(--sizing-base);
+}

src/assets/styles/index.css

@@ -34,9 +34,10 @@
 @import url('./components/mastodon-post.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
 @import url('./components/menu.css') layer(components);
+@import url('./components/music-chart.css') layer(components);
 @import url('./components/paginator.css') layer(components);
 @import url('./components/progress-bar.css') layer(components);
 @import url('./components/share-button.css') layer(components);
 @import url('./components/text-toggle.css') layer(components);
 @import url('./components/theme-toggle.css') layer(components);
-@import url('./components/music-chart.css') layer(components);
+@import url('./components/youtube-video.css') layer(components);

src/pages/main/posts/post.html

@@ -22,6 +22,7 @@ schema: blog
     <div class="e-content">
       {% render "partials/banners/old-post.liquid", date:post.date %}
       {{ post.content | markdown }}
+      {% render "partials/posts/blocks.liquid", blocks:post.blocks %}
     </div>
   </article>
 </div>