[{"data":1,"prerenderedAt":91},["ShallowReactive",2],{"storyblok:blog\u002Fgithub-gist-in-a-nuxt3-project-with-storyblok:version=published&resolve_relations=blog-entry.categories":3,"gist-b8c966658e78b3d4b5b48adaa6ba8d42-GithubGistEmbed.vue-i-552e99d8-cbf3-45cd-9cca-59db0c07d7d4":90},{"stories":4,"story":5},[5],{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":80,"full_slug":81,"sort_by_date":40,"position":82,"tag_list":83,"is_startpage":84,"parent_id":85,"meta_data":40,"group_id":86,"first_published_at":87,"release_id":40,"lang":88,"path":40,"alternates":89,"default_full_slug":40,"translated_slugs":40},"Github Gist in a Nuxt3 Project with storyblok","2022-07-23T17:09:42.500Z","2023-03-10T11:09:17.030Z","2023-03-10T11:09:17.070Z",167169114,"5c633f52-f15b-432d-9f79-7c4186456436",{"_uid":13,"date":14,"text":15,"content":20,"component":78,"categories":79},"285524a2-5fbe-4982-9916-090d5ba0f405","2022-07-21 16:19",{"type":16,"content":17},"doc",[18],{"type":19},"paragraph",[21,44,59],{"_uid":22,"text":23,"component":29},"154c1dac-2b1a-4216-84ec-4774b1716a53",{"type":16,"content":24},[25,30],{"type":19,"content":26},[27],{"text":28,"type":29},"So I had the brilliant idea to add support for Github Gists in my portfolio, but to do this I need to add a block in storyblok and also make it work for Nuxt3.","text",{"type":19,"content":31},[32,34,42],{"text":33,"type":29},"To render the Gist I went with ",{"text":35,"type":29,"marks":36},"https:\u002F\u002Fgithub.com\u002Fsudhanshu-15\u002Fvue-embed-gist",[37],{"type":38,"attrs":39},"link",{"href":35,"uuid":40,"anchor":40,"target":40,"linktype":41},null,"url",{"text":43,"type":29}," to render it, but since I use Nuxt3 I need to do some magic.",{"_uid":45,"text":46,"component":29},"e1aa5aea-1310-4edb-9f4f-03a7b4cd4b97",{"type":16,"content":47},[48,52],{"type":19,"content":49},[50],{"text":51,"type":29},"To add support to add a gist in my blog system, I added a new block called \"Github Gist\" that I add through the UI and then add the gist-id and the file name I want to show.",{"type":19,"content":53},[54],{"type":55,"attrs":56},"image",{"alt":57,"src":58,"title":57,"copyright":57},"","https:\u002F\u002Fa.storyblok.com\u002Ff\u002F151486\u002F389x405\u002Fc50ca39535\u002Fgithub-gist-in-storyblok.png",{"_uid":60,"text":61,"component":29},"9b75c682-73da-43e3-a923-57e5d590ff08",{"type":16,"content":62},[63,67,77],{"type":19,"content":64},[65],{"text":66,"type":29},"Since there is no Nuxt3 module or similar for a github gist embed, I made my own. Here is the full code:",{"type":68,"attrs":69},"blok",{"id":70,"body":71},"7027217f-c74c-4258-ac66-92944587abac",[72],{"_uid":73,"gist_id":74,"component":75,"file_name":76},"i-552e99d8-cbf3-45cd-9cca-59db0c07d7d4","b8c966658e78b3d4b5b48adaa6ba8d42","github-gist","GithubGistEmbed.vue",{"type":19},"blog-entry",[],"github-gist-in-a-nuxt3-project-with-storyblok","blog\u002Fgithub-gist-in-a-nuxt3-project-with-storyblok",-40,[],false,152811822,"ff64d978-0af1-4e01-8c84-f87b2cb12e46","2022-08-30T14:20:19.290Z","default",[],"\u003Cdiv id=\"gist118092290\" 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-githubgistembed-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=\"GithubGistEmbed.vue content, created by SebbeJohansson on 09:22PM on August 30, 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=\"GithubGistEmbed.vue\">\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-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-githubgistembed-vue-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC2\" 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>({\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  gistId: {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    type: \u003Cspan class=\"pl-c1\">String\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    required: \u003Cspan class=\"pl-c1\">true\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC6\" 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-githubgistembed-vue-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  file: {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    type: \u003Cspan class=\"pl-c1\">String\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    required: \u003Cspan class=\"pl-c1\">false\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    default: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC11\" 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-githubgistembed-vue-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC12\" 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-githubgistembed-vue-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-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-githubgistembed-vue-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC14\" 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> gistUrl\u003Cspan class=\"pl-k\">:\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">string\u003C\u002Fspan> \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>https:\u002F\u002Fgist.github.com\u002F\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC15\" 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> gistErr\u003Cspan class=\"pl-k\">:\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">boolean\u003C\u002Fspan> \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">false\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC16\" 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-githubgistembed-vue-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC17\" 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> { \u003Cspan class=\"pl-v\">data\u003C\u002Fspan>: result } \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-k\">await\u003C\u002Fspan> \u003Cspan class=\"pl-en\">useAsyncData\u003C\u002Fspan>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  \u003Cspan class=\"pl-s\">`\u003C\u002Fspan>\u003Cspan class=\"pl-s\">gist-${\u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">gistId\u003C\u002Fspan>}-${\u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">file\u003C\u002Fspan>}\u003C\u002Fspan>\u003Cspan class=\"pl-s\">`\u003C\u002Fspan>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">  () \u003Cspan class=\"pl-k\">=&gt;\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC20\" 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> params \u003Cspan class=\"pl-k\">=\u003C\u002Fspan> \u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">file\u003C\u002Fspan>.\u003Cspan class=\"pl-c1\">length\u003C\u002Fspan> \u003Cspan class=\"pl-k\">&gt;\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">0\u003C\u002Fspan> \u003Cspan class=\"pl-k\">?\u003C\u002Fspan> \u003Cspan class=\"pl-s\">`\u003C\u002Fspan>\u003Cspan class=\"pl-s\">?file=${\u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">file\u003C\u002Fspan>}\u003C\u002Fspan>\u003Cspan class=\"pl-s\">`\u003C\u002Fspan> \u003Cspan class=\"pl-k\">:\u003C\u002Fspan> \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003Cspan class=\"pl-pds\">&#39;\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC21\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">    \u003Cspan class=\"pl-k\">return\u003C\u002Fspan> \u003Cspan class=\"pl-en\">$fetch\u003C\u002Fspan>(\u003Cspan class=\"pl-s\">`\u003C\u002Fspan>\u003Cspan class=\"pl-s\">${\u003Cspan class=\"pl-smi\">gistUrl\u003C\u002Fspan>}${\u003Cspan class=\"pl-smi\">props\u003C\u002Fspan>.\u003Cspan class=\"pl-smi\">gistId\u003C\u002Fspan>}.json${\u003Cspan class=\"pl-smi\">params\u003C\u002Fspan>}\u003C\u002Fspan>\u003Cspan class=\"pl-s\">`\u003C\u002Fspan>);\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC22\" 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-githubgistembed-vue-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC23\" 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-githubgistembed-vue-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC24\" 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-githubgistembed-vue-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC25\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC26\" 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-githubgistembed-vue-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC27\" class=\"blob-code blob-code-inner js-file-line\">  &lt;\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC28\" class=\"blob-code blob-code-inner js-file-line\">    &lt;\u003Cspan class=\"pl-ent\">div\u003C\u002Fspan> \u003Cspan class=\"pl-e\">v-if\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>gistErr\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC29\" class=\"blob-code blob-code-inner js-file-line\">      &lt;\u003Cspan class=\"pl-ent\">img\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC30\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">id\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>notFound\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC31\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">height\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>100%\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC32\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">width\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>100%\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC33\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">src\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>https:\u002F\u002Fuser-images.githubusercontent.com\u002F883233\u002F102043641-d4817580-3d89-11eb-885d-2786373932d4.png\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC34\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-e\">alt\u003C\u002Fspan>=\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>404\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC35\" class=\"blob-code blob-code-inner js-file-line\">      &gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L36\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"36\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC36\" 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-githubgistembed-vue-L37\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"37\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC37\" 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>result.div\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan> \u002F&gt;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L38\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"38\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC38\" 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-githubgistembed-vue-L39\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"39\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC39\" 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-githubgistembed-vue-L40\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"40\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC40\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L41\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"41\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC41\" class=\"blob-code blob-code-inner js-file-line\">&lt;\u003Cspan class=\"pl-ent\">style\u003C\u002Fspan> scoped&gt;\u003Cspan class=\"pl-s1\">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L42\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"42\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC42\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">@import\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">url\u003C\u002Fspan>(\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>https:\u002F\u002Fgithub.githubassets.com\u002Fassets\u002Fgist-embed-4ac6018bcc05457cde2f66d2e7299d11.css\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>);\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L43\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"43\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC43\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-s1\">\u003Cspan class=\"pl-k\">@import\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">url\u003C\u002Fspan>(\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>https:\u002F\u002Ffonts.googleapis.com\u002Ficon?family=Material+Icons\u003Cspan class=\"pl-pds\">&quot;\u003C\u002Fspan>\u003C\u002Fspan>);\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-githubgistembed-vue-L44\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"44\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-githubgistembed-vue-LC44\" 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\u002Fb8c966658e78b3d4b5b48adaa6ba8d42\u002Fraw\u002F38f8700e00f923902c9f8374ebc53ea499540419\u002FGithubGistEmbed.vue\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FSebbeJohansson\u002Fb8c966658e78b3d4b5b48adaa6ba8d42#file-githubgistembed-vue\" class=\"Link--inTextBlock\">\n          GithubGistEmbed.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",1787062196134]