feat: split out dividers; proper block sorting

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "20.5.0",
+  "version": "20.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "20.5.0",
+      "version": "20.6.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "20.5.0",
+  "version": "20.6.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_data/pages.js

@@ -24,7 +24,7 @@ const fetchBlockData = async (collection, itemId) => {
 const fetchBlocksForPage = async (pageId) => {
   const { data, error } = await supabase
     .from('pages_blocks')
-    .select('collection, item')
+    .select('collection, item, sort')
     .eq('pages_id', pageId)
 
   if (error) {
@@ -37,11 +37,12 @@ const fetchBlocksForPage = async (pageId) => {
 
     return {
       type: block['collection'],
+      sort: block['sort'],
       ...blockData
     }
   }))
 
-  return blocks
+  return blocks.sort((a, b) => a.sort - b.sort)
 }
 
 const fetchAllPages = async () => {

src/_data/posts.js

@@ -38,7 +38,7 @@ const fetchTagsForPost = async (postId) => {
 const fetchBlocksForPost = async (postId) => {
   const { data, error } = await supabase
     .from('posts_blocks')
-    .select('collection, item')
+    .select('collection, item, sort')
     .eq('posts_id', postId)
 
   if (error) {
@@ -48,8 +48,10 @@ const fetchBlocksForPost = async (postId) => {
 
   const blocks = await Promise.all(data.map(async block => {
     const blockData = await fetchBlockData(block.collection, block.item)
+
     return {
-      type: block.collection,
+      type: block['collection'],
+      sort: block['sort'],
       ...blockData
     }
   }))

src/_includes/partials/blocks/index.liquid

@@ -11,7 +11,9 @@
     {% render "partials/blocks/hero.liquid", image:block.image.filename_disk, alt:block.alt_text %}
   {% elsif block.type == 'markdown' %}
     {{ block.text | markdown }}
+  {% elsif block.type == 'divider' %}
+    {{ block.markup | markdown }}
   {% elsif block.type == 'addon_links' %}
-    <hr />{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
+    {% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
   {% endif %}
 {% endfor %}