From 460a50f88c8535380d11bb4531e67cabfce182e0 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 1 Jun 2024 09:32:13 -0700
Subject: [PATCH] chore: add yt block support

---
 src/_data/posts.js                            | 38 +++++++++++++++++++
 src/_includes/partials/posts/blocks.liquid    |  5 +++
 .../styles/components/youtube-video.css       |  3 ++
 src/assets/styles/index.css                   |  3 +-
 src/pages/main/posts/post.html                |  1 +
 5 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/_includes/partials/posts/blocks.liquid
 create mode 100644 src/assets/styles/components/youtube-video.css

diff --git a/src/_data/posts.js b/src/_data/posts.js
index aa3f09c7..204565ea 100644
--- a/src/_data/posts.js
+++ b/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,
diff --git a/src/_includes/partials/posts/blocks.liquid b/src/_includes/partials/posts/blocks.liquid
new file mode 100644
index 00000000..9f08451a
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/assets/styles/components/youtube-video.css b/src/assets/styles/components/youtube-video.css
new file mode 100644
index 00000000..a574ae8a
--- /dev/null
+++ b/src/assets/styles/components/youtube-video.css
@@ -0,0 +1,3 @@
+youtube-video {
+  margin-block: var(--sizing-base);
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 3c4afc19..4a1f3808 100644
--- a/src/assets/styles/index.css
+++ b/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);
\ No newline at end of file
+@import url('./components/youtube-video.css') layer(components);
\ No newline at end of file
diff --git a/src/pages/main/posts/post.html b/src/pages/main/posts/post.html
index b82e1da8..596df379 100644
--- a/src/pages/main/posts/post.html
+++ b/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>