Issue with serializers in 11TY + Sanity integration
17 replies
Last updated: Sep 21, 2021
B
Hello everyone,
I'm still battling with 11TY + Sanity and serializers.
I have an 11ty filter that is working with my serializers.
However, I can't make the serializer for my custom block type "infoText" work:
The node.bodyInfo.children does not work, nor any of the combinations I've tried. My post's data structure is as follows:
Any tips? There's not much info on this.
I'm still battling with 11TY + Sanity and serializers.
I have an 11ty filter that is working with my serializers.
However, I can't make the serializer for my custom block type "infoText" work:
//from utils/serializers.js
const { h } = require("@sanity/block-content-to-html");// Learn more on <https://www.sanity.io/docs/guides/introduction-to-portable-text>
module.exports = { types: { cta: ({ node }) => {_return_ h(
'a',
{ className:
'bg-yellow-500 text-white',
href: node.ctaUrl,
},
node.ctaText,
)
},
infoText: ({ node }) => {_return_ h(
'p',
{ className:
'bg-blue-500 text-white',
},
node.bodyInfo.children,
)
},
},
}
The node.bodyInfo.children does not work, nor any of the combinations I've tried. My post's data structure is as follows:
{
"_createdAt": "2021-09-14T11:25:05Z",
"_id": "89ff5403-326b-4db1-8752-04ea1c85f114",
"_rev": "7dkOKJtWoyCn0kHUhHzZu7",
"_type": "post",
"_updatedAt": "2021-09-20T06:38:14Z",
"body": [
{
"_key": "f84e932860bf",
"_type": "block",
"children": [
{
"_key": "bd29bce1dda1",
"_type": "span",
"marks": [],
"text": ""
}
],
"markDefs": [
{
"_key": "38aa715c6214",
"_type": "link",
"href": "<https://www.fundacionrcoms.com/anti-edad/metodos-eliminar-arrugas/>"
}
],
"style": "normal"
},
{
"_key": "bf5d17f3da91",
"_type": "cta",
"ctaText": "test",
"ctaUrl": "<https://www.fundacionrcoms.com/>"
},
{
"_key": "595873ddfc54",
"_type": "block",
"children": [
{
"_key": "ba794ddbef68",
"_type": "span",
"marks": [],
"text": ""
}
],
"markDefs": [
{
"_key": "38aa715c6214",
"_type": "link",
"href": "<https://www.fundacionrcoms.com/anti-edad/metodos-eliminar-arrugas/>"
}
],
"style": "normal"
},
{
"_key": "8acb94638c0c",
"_type": "infoText",
"bodyInfo": [
{
"_key": "6b6e533e67fd",
"_type": "block",
"children": [
{
"_key": "3593ad3abdf9",
"_type": "span",
"marks": [],
"text": "test test info"
}
],
"markDefs": [],
"style": "normal"
}
]
},
.....etcSep 20, 2021, 8:19 AM
Hey Batz! Just to double check, in the example you shared above, does your cta serializer work or are they both broken?
Sep 20, 2021, 4:36 PM
B
Hi
At this point I've tried refactoring to this (to see if the problem was that not all Posts have that block), but it also doesn't work (it builds but I don't know if it makes any sense):
To be more clear, I either get no errors, or "undefined". It builds and the source code displays the
...but no content
user M
, the "cta" serializer works as intended, no problem!At this point I've tried refactoring to this (to see if the problem was that not all Posts have that block), but it also doesn't work (it builds but I don't know if it makes any sense):
infoText: ({ node }) => {const { content = '' } = node.bodyInfo _if_ (content !== undefined) {_return_ h(
'p',
{ className:
'bg-blue-500 text-white',
},
node.bodyInfo
)
}
_return_ blocksToHtml.defaultSerializers.types.infoText(node)
},
To be more clear, I either get no errors, or "undefined". It builds and the source code displays the
<p class="bg-blue-500 text-white"></p>
...but no content
Sep 20, 2021, 4:38 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
B
Let me make a public repo of it to save you some time, just a sec
Sep 20, 2021, 4:54 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
B
Here it is
user M
https://github.com/debatz/sanity11tytest Sep 20, 2021, 4:58 PM
Thanks!
Sep 20, 2021, 4:59 PM
B
Thank you for your help, this bit has me anxious! 😅
Sep 20, 2021, 5:00 PM
No problem, serializers can be a beast sometimes!
Sep 20, 2021, 5:01 PM
B
Hello, the issue has been solved!
It was a problem of me not getting the structured content "architecture".
Once you use
It works without a hitch
It was a problem of me not getting the structured content "architecture".
Once you use
node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),It works without a hitch
Sep 21, 2021, 5:23 AM
B
Hello, the issue has been solved!
It was a problem of me not getting the structured content "architecture".
Once you use
It was a problem of me not getting the structured content "architecture".
Once you use
node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),Sep 21, 2021, 5:23 AM
B
However, is there any info on how to make nested HTML elements inside a serializer? I can't find any examples.
user M
Sep 21, 2021, 9:42 AM
B
To be clear, this is my serializer now:
It outputs:
<li>value1</li><li>value2</li>
And I'm not capable of making it render those <li> tags.
The approach seen here also does not work:
https://katiekodes.com/sanity-11ty-datatable-serializer/
prosAndCons: ({ node }) =>{_return_ h(
'ul',
{ className: 'bg-blue-500 text-white',
},
node.cons.map( children => '<li>' + children + '</li>'),
)
},
It outputs:
<li>value1</li><li>value2</li>
And I'm not capable of making it render those <li> tags.
The approach seen here also does not work:
https://katiekodes.com/sanity-11ty-datatable-serializer/
Sep 21, 2021, 11:21 AM
Regarding nested elements, I think reading through the documentation for the Hyperscript repo here could show you some useful examples.
Sep 21, 2021, 2:34 PM
B
Thanks! I hadn't found that, I'll take a look!
Sep 21, 2021, 6:30 PM
We should probably link to it in our documentation! I'll add it in.
Sep 21, 2021, 6:49 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.