[{"data":1,"prerenderedAt":100},["ShallowReactive",2],{"storyblok:blog\u002Fstoryblok-richtext-in-line-block-support-for-nuxt3-with-ssr-and-prerender:version=published&resolve_relations=blog-entry.categories":3,"gist-31b64c5c4f914abfec2660210ec7795a-Text.vue-6e2a710a-7267-41d7-a32d-55eb02fc76d6":99},{"stories":4,"story":5},[5],{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":89,"full_slug":90,"sort_by_date":32,"position":91,"tag_list":92,"is_startpage":93,"parent_id":94,"meta_data":32,"group_id":95,"first_published_at":96,"release_id":32,"lang":97,"path":32,"alternates":98,"default_full_slug":32,"translated_slugs":32},"Storyblok RichText in-line block support for nuxt3 with ssr and prerender.","2022-09-29T21:11:51.823Z","2023-03-10T11:09:16.684Z","2023-03-10T11:09:16.716Z",196809334,"1f4b2a6f-bd0d-47e0-bdfe-3bbe093feb1a",{"_uid":13,"date":14,"content":15,"component":86,"categories":87},"640bd997-f2f6-449e-ad02-f3927d12e0db","2022-09-29 23:20",[16,81],{"_uid":17,"text":18,"component":26},"1c1d3f8c-cd5d-4b39-8185-280435de90df",{"type":19,"content":20},"doc",[21,45,49,62,76,80],{"type":22,"content":23},"paragraph",[24,35,37,43],{"text":25,"type":26,"marks":27},"cetchells","text",[28],{"type":29,"attrs":30},"link",{"href":31,"uuid":32,"anchor":32,"target":33,"linktype":34},"https:\u002F\u002Fgithub.com\u002Fcetchells",null,"_blank","url",{"text":36,"type":26}," on github raised ",{"text":38,"type":26,"marks":39},"an issue",[40],{"type":29,"attrs":41},{"href":42,"uuid":32,"anchor":32,"target":33,"linktype":34},"https:\u002F\u002Fgithub.com\u002FSebbeJohansson\u002Fsebbejohansson-front\u002Fissues\u002F22",{"text":44,"type":26}," on my github repo for this website to discuss in-line blocks in richtext from contentful. This is not something that I have tried or looked into, but felt like a challenge and something that I will probably want in the future.",{"type":22,"content":46},[47],{"text":48,"type":26},"Since I use SSR with prerender in nuxt3, there is no built-in way of doing the rendering of blocks inside of richtext, so I had to figure out a custom way of doing it. I settled with looping through the richtext nodes and adding the blocks and HTML to an array. This way I can render the richtext in the correct way and still have support for in-line blocks.",{"type":22,"content":50},[51,53,55,60],{"text":52,"type":26},"To add a block in richtext you use:",{"type":54},"hard_break",{"type":56,"attrs":57},"image",{"alt":58,"src":59,"title":58,"copyright":58},"","https:\u002F\u002Fa.storyblok.com\u002Ff\u002F151486\u002F381x148\u002F79faf7ad64\u002Fchrome_venxclh993.png",{"text":61,"type":26},"which places a block list inside of the richtext.",{"type":22,"content":63},[64,66,67,70,72,73],{"text":65,"type":26},"After placing a block it looks like this:",{"type":54},{"type":56,"attrs":68},{"alt":58,"src":69,"title":58,"copyright":58},"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F151486\u002F402x615\u002F8d402b3eb2\u002Fchrome_qbjayh4skj.png",{"text":71,"type":26},"which renders like this:",{"type":54},{"type":56,"attrs":74},{"alt":58,"src":75,"title":58,"copyright":58},"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F151486\u002F899x1123\u002F39b7a3328f\u002Fchrome_vwg7lccu1q.png",{"type":22,"content":77},[78],{"text":79,"type":26},"Here is the code for how to do this:",{"type":22},{"_uid":82,"gist_id":83,"component":84,"file_name":85},"6e2a710a-7267-41d7-a32d-55eb02fc76d6","31b64c5c4f914abfec2660210ec7795a","github-gist","Text.vue","blog-entry",[88],"36c5f0a3-3461-4b49-9758-537bdda01a2c","storyblok-richtext-in-line-block-support-for-nuxt3-with-ssr-and-prerender","blog\u002Fstoryblok-richtext-in-line-block-support-for-nuxt3-with-ssr-and-prerender",-60,[],false,152811822,"901beb6b-2672-4e87-9204-40f4e80973cf","2022-09-29T21:20:14.967Z","default",[],"\u003Cdiv id=\"gist118631514\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-text-vue\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-vue  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"Text.vue content, created by SebbeJohansson on 09:19PM on September 29, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"Text.vue\">\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC1\" class=\"blob-code blob-code-inner js-file-line\">&lt;\u003Cspan class=\"pl-ent\">script\u003C\u002Fspan> setup lang=&quot;ts&quot;&gt;\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">import\u003C\u002Fspan> { \u003Cspan class=\"pl-smi\">Richtext\u003C\u002Fspan> } \u003Cspan class=\"pl-k\">from\u003C\u002Fspan> \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>storyblok-js-client\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">\u003Cspan class=\"pl-k\">const\u003C\u002Fspan>\u003C\u002Fspan> props \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-en\">defineProps\u003C\u002Fspan>({ blok: \u003Cspan class=\"pl-c1\">Object\u003C\u002Fspan> });\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">\u003Cspan class=\"pl-k\">const\u003C\u002Fspan>\u003C\u002Fspan> nuxtApp \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-en\">useNuxtApp\u003C\u002Fspan>();\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">\u003Cspan class=\"pl-k\">const\u003C\u002Fspan>\u003C\u002Fspan> textObject \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> { \u003Cspan class=\"pl-k\">...\u003C\u002Fspan>\u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">blok\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">text\u003C\u002Fspan> };\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">\u003Cspan class=\"pl-k\">const\u003C\u002Fspan>\u003C\u002Fspan> nodes \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> [];\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-c\">\u003Cspan class=\"pl-c\">\u002F\u002F\u003C\u002Fspan> Proof of concept for custom handling of inline blok nodes.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-c1\">Object\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">entries\u003C\u002Fspan>(\u003Cspan class=\"pl-smi\">textObject\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">content\u003C\u002Fspan>).\u003Cspan class=\"pl-c1\">forEach\u003C\u002Fspan>(([\u003Cspan class=\"pl-v\">key\u003C\u002Fspan>, \u003Cspan class=\"pl-v\">node\u003C\u002Fspan>]) \u003Cspan class=\"pl-k\">=&gt;\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  \u003Cspan class=\"pl-k\">if\u003C\u002Fspan> (\u003Cspan class=\"pl-smi\">node\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">type\u003C\u002Fspan> \u003Cspan class=\"pl-k\">===\u003C\u002Fspan> \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>blok\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>) {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    \u003Cspan class=\"pl-k\">\u003Cspan class=\"pl-k\">const\u003C\u002Fspan>\u003C\u002Fspan> blok \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC12\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      content: \u003Cspan class=\"pl-smi\">node\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">attrs\u003C\u002Fspan>?.\u003Cspan class=\"pl-c1\">body\u003C\u002Fspan>?.[\u003Cspan class=\"pl-c1\">0\u003C\u002Fspan>],\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    };\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    \u003Cspan class=\"pl-smi\">nodes\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">push\u003C\u002Fspan>({\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      \u003Cspan class=\"pl-smi\">key\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC16\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      type: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>blok\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      content: {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">        \u003Cspan class=\"pl-smi\">blok\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      },\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC20\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    });\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC21\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  } \u003Cspan class=\"pl-k\">else\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC22\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    \u003Cspan class=\"pl-smi\">nodes\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">push\u003C\u002Fspan>({\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC23\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      \u003Cspan class=\"pl-smi\">key\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC24\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      type: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>html\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC25\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      content: \u003Cspan class=\"pl-smi\">nuxtApp\u003C\u002Fspan>.\u003Cspan class=\"pl-en\">$formatRichText\u003C\u002Fspan>(\u003Cspan class=\"pl-en\">useStoryblokApi\u003C\u002Fspan>().\u003Cspan class=\"pl-smi\">richTextResolver\u003C\u002Fspan>.\u003Cspan class=\"pl-en\">render\u003C\u002Fspan>({\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC26\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">        type: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>doc\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC27\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">        content: [\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC28\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">          \u003Cspan class=\"pl-smi\">node\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC29\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">        ],\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC30\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">      } \u003Cspan class=\"pl-k\">as\u003C\u002Fspan> \u003Cspan class=\"pl-en\">Richtext\u003C\u002Fspan>)),\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC31\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    });\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC32\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  }\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC33\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">});\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC34\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>&lt;\u002F\u003Cspan class=\"pl-ent\">script\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC35\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L36\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"36\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC36\" class=\"blob-code blob-code-inner js-file-line\">&lt;\u003Cspan class=\"pl-ent\">template\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L37\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"37\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC37\" class=\"blob-code blob-code-inner js-file-line\">  &lt;\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan> \u003Cspan class=\"pl-e\">v-editable\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>blok\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan> \u003Cspan class=\"pl-e\">class\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>text\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L38\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"38\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC38\" class=\"blob-code blob-code-inner js-file-line\">    &lt;\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan> \u003Cspan class=\"pl-e\">v-for\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>node in nodes\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan> \u003Cspan class=\"pl-e\">:key\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>node.key\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L39\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"39\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC39\" class=\"blob-code blob-code-inner js-file-line\">      &lt;\u003Cspan class=\"pl-ent\">component\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L40\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"40\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC40\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">:is\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>$resolveStoryBlokComponent(node.content.blok)\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L41\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"41\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC41\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">v-if\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>node.type === &#39;blok&#39;\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L42\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"42\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC42\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">:blok\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>node.content.blok.content\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L43\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"43\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC43\" class=\"blob-code blob-code-inner js-file-line\">      \u002F&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L44\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"44\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC44\" class=\"blob-code blob-code-inner js-file-line\">      &lt;\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan> \u003Cspan class=\"pl-e\">v-else\u003C\u002Fspan> \u003Cspan class=\"pl-e\">v-html\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>node.content\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan> \u002F&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L45\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"45\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC45\" class=\"blob-code blob-code-inner js-file-line\">    &lt;\u002F\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L46\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"46\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC46\" class=\"blob-code blob-code-inner js-file-line\">  &lt;\u002F\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L47\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"47\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC47\" class=\"blob-code blob-code-inner js-file-line\">&lt;\u002F\u003Cspan class=\"pl-ent\">template\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L48\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"48\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC48\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L49\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"49\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC49\" class=\"blob-code blob-code-inner js-file-line\">&lt;\u003Cspan class=\"pl-ent\">style\u003C\u002Fspan>&gt;\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L50\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"50\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC50\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-e\">.text\u003C\u002Fspan> \u003Cspan class=\"pl-ent\">img\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L51\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"51\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC51\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">max-width\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">100\u003Cspan class=\"pl-k\">%\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L52\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"52\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC52\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-text-vue-L53\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"53\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-text-vue-LC53\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>&lt;\u002F\u003Cspan class=\"pl-ent\">style\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FSebbeJohansson\u002F31b64c5c4f914abfec2660210ec7795a\u002Fraw\u002Ff6a72cb18b399a79cb211640ff4dd48179972825\u002FText.vue\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FSebbeJohansson\u002F31b64c5c4f914abfec2660210ec7795a#file-text-vue\" class=\"Link--inTextBlock\">\n          Text.vue\n        \u003C\u002Fa>\n        hosted with &#10084; by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",1787062199145]