1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[1077],{2912:function(e,n,t){t.r(n),t.d(n,{default:function(){return f}});var s=t(8453),a=t(6540);function o(e){const n=Object.assign({p:"p",a:"a",span:"span",h2:"h2",ul:"ul",li:"li"},(0,s.RP)(),e.components);return a.createElement(a.Fragment,null,a.createElement("div",{"data-excerpt":!0},a.createElement(n.p,null,"Making the components responsive is usually one of the key requirements for any design system or a pattern library.\nThis means that the documentation system has to follow and show how the components are rendered on small to large screens.\nIn this post, I show how I managed to do it with Storybook and get unique URLs for such responsive stories for later\nembedding them as examples into other (documentation) pages.")),"\n",a.createElement(n.p,null,"Storybook provides essential add-ons, and one of them is for working with different screen sizes. It gives\nyou a viewport toolbar where you can select how to render your stories."),"\n",a.createElement(n.p,null,"The ",a.createElement(n.a,{href:"https://storybook.js.org/docs/react/essentials/viewport"},"documentation page")," explains how to get it working\nand how to configure for your specific case."),"\n",a.createElement(n.p,null,"You may enjoy the default set up and manually change the viewport settings when developing or checking documentation\nof the components."),"\n",a.createElement(n.p,null,"However, sometimes there is a need to demonstrate how the same code is rendered on different screens. For example,\nif you are writing documentation for responsive components such as a grid system. In this situation, changing the default\nviewport and making generic stories can save a lot of your time."),"\n",a.createElement(n.p,null,"You can write the stories once, but show them with different settings. This is how I demonstrate the grid system behavior on large and small screens:"),"\n",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1600px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/7e107c228e1942bb245a7cd3877f3ae7/ac25d/stories-size-l.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 64.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRUlEQVR42pWSS1PCMBSF+/PdunLlSnYqIq+BNgygC1D2OjoKtElpaWhpmzavvgyg45aeOZPJPTPf5N4kWkgo9iMucwdH70sbItu0kAUPm5WJPpZwvYamaSkhFaGNjWwlaEEIkRZTvjJhSkW712/cNlr9+1b/rjN8UGvXeBxMBuBZb49HTQA6k2n36eDOdNqajPX5TMECOdswTgdD3XE+Y4IYdzn3hDhaelxgn/iYBJFII5HwMpNVfnBZaIRK28H7kOjGKE3TqqrK8t9FUSqfirLIlVX0VxZaluV4t2OUjcAvfKYUrn3t5Bvcf3u02QOM1oQvZ+J6kVwt5MWNkQtaD5Yyw35ASAIAqN12ynPbxRGhQwNQWhvOXBwoWN12bZgeT1bvbAAF15w5YZnr+XHCVNu1Z1a/erPFQRjPX14ZY6f0HBVF+QM08uDCUiddpwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="stories size l"\n title=""\n src="/static/7e107c228e1942bb245a7cd3877f3ae7/29007/stories-size-l.png"\n srcset="/static/7e107c228e1942bb245a7cd3877f3ae7/e17e5/stories-size-l.png 400w,\n/static/7e107c228e1942bb245a7cd3877f3ae7/5a190/stories-size-l.png 800w,\n/static/7e107c228e1942bb245a7cd3877f3ae7/29007/stories-size-l.png 1600w,\n/static/7e107c228e1942bb245a7cd3877f3ae7/ac25d/stories-size-l.png 2342w"\n sizes="(max-width: 1600px) 100vw, 1600px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1600px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/70593b54ec063a5327cfb2e97c5ae5e5/b0bb3/stories-size-s.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.74999999999999%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB20lEQVR42pWSbWvaUBTH/cSiLyRPliapD8gg0Zi44F4pg77b2EzcBmNjn6CU2W4aOmtuHo1tTIyamMTsiivty3k4cP7ce/78zr2cnLsKp6pm2Y7uLBXV1A1dNwzDNAHQ7lVNmYKZClQVzGABmmma9nxu2TZsgE25YBs7D8ttlAzkzwiGX1zQFEWdk+fNdovhmq9YhmmyTIvlOnynK0KN43ilUiFJstFo5NZhrOrW0t98HEgIgsBTHMN5kb9Wrm5noztjPLUVRf99Z00MH1xPrgqFAklSBEHUarUDeb5wIVmShiiKUDRF4MTrbmesjqbmBCymMJ2Vvgh0N7TH9zfFYhGOdnZWrtfrBzIwLM9fDyQZRVGapjEM6/V6WbZP
1kyiJwySO0mSXprssyzQwKxSLsOef+ZksH8hHc7/fh637/T57iqPWNA2O/Ww+vtnzNy/J/2tebWLLedyEyUA6nZymsWNbu+3601BGkBPJ8jj68sv/+icRL+UyhlLUKeZ3N9GHn8v3txH3VirjJ5rDIIg2AbwYDqVSqQSXBH6bKIqu6zqOs3gKqD3PG41G+Xz+sEg4Xq1Wc44bPHpBkmXfvv9gGEYQBJ7nGYZtt2EVXqYgdFotjmVZqDiO63bf/AUG8EZpa4KcaAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="stories size s"\n title=""\n src="/static/70593b54ec063a5327cfb2e97c5ae5e5/29007/stories-size-s.png"\n srcset="/static/70593b54ec063a5327cfb2e97c5ae5e5/e17e5/stories-size-s.png 400w,\n/static/70593b54ec063a5327cfb2e97c5ae5e5/5a190/stories-size-s.png 800w,\n/static/70593b54ec063a5327cfb2e97c5ae5e5/29007/stories-size-s.png 1600w,\n/static/70593b54ec063a5327cfb2e97c5ae5e5/b0bb3/stories-size-s.png 2344w"\n sizes="(max-width: 1600px) 100vw, 1600px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",a.createElement(n.p,null,"As you can see in the sidebar, there is sub-navigation for the Grid stories. It shows the same three examples of different screen sizes. Someone who is checking the documentation on Storybook does not need to use the viewport toolbar because\neach of the subfolders already shows all its stories with the defined setting."),"\n",a.createElement(n.h2,{id:"set-up-thew-viewports",style:{position:"relative"}},a.createElement(n.a,{href:"#set-up-thew-viewports","aria-label":"set up thew viewports permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Set up thew viewports"),"\n",a.createElement(n.p,null,"If you want to do the same, first you should set up the viewports you are goint to use. This is a piece of code from\nmy ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.storybook/preview.js</code>'}})," file:"),"\n",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> customViewports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"XS"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">"480px"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"600px"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">s</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"S"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">{</span>
1\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">"640px"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"801px"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">m</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"M"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">"960px"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"700px"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">l</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"L"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">"1200px"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"800px"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">xl</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"XL"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">"1400px"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">"900px"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token function">addParameters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">viewport</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">viewports</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>customViewports<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",a.createElement(n.h2,{id:"write-the-stories",style:{position:"relative"}}
1,a.createElement(n.a,{href:"#write-the-stories","aria-label":"write the stories permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Write the stories"),"\n",a.createElement(n.p,null,"Then, you will need a file with repetitive stories. It should be written similarly to a usual ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.stories.js</code>'}}),". But you\ndo not need ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">export default</code>'}})," part because these stories should not be shown. We will use them for later re-exporting. This is my ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">components/Grid/Grid.generic.stories.js</code>'}})," (I changed the content to make it shorter)."),"\n",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">import React from \'react\';\n\nexport const story1 = () => <Grid>Example 1</Grid>\n\nexport const story2 = () => <Grid>Example 2</Grid>\n\nexport const story3 = () => <Grid>Example 3</Grid></code></pre></div>'}}),"\n",a.createElement(n.h2,{id:"re-export-the-stories",style:{position:"relative"}},a.createElement(n.a,{href:"#re-export-the-stories","aria-label":"re export the stories permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Re-export the stories"),"\n",a.createElement(n.p,null,"The generic stories can be re-used with different viewport settings. I have a separate ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.stories.js</code>'}})," file for each of them:"),"\n",a.createElement(n.ul,null,"\n",a.createElement(n.li,null,a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Grid.viewport-xs.stories.js</code>'}})),"\n",a.createElement(n.li,null,a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Grid.viewport-s.stories.js</code>'}})),"\n",a.createElement(n.li,null,a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Grid.viewport-m.stories.js</code>'}})),"\n",a.createElement(n.li,null,a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Grid.viewport-l.stories.js</code>'}})),"\n",a.createElement(n.li,null,a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Grid.viewport-xl.stories.js</code>'}})),"\n"),"\n",a.createElement(n.p,null,"The content of these files is similar but the viewport settings are different:"),"\n",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">\nimport React from \'react\';\n\nexport default {\n title: \'Components/Grid/XS\',\n decorators: [\n storyFn => (\n <div className="ds-storybook-grid">\n {storyFn()}\n </div>\n ),\n ],\n parameters: {\n viewport: {\n defaultViewport: \'xs\'\n },\n loki: { skip: true },\n },\n};
1\n\nexport * from \'./Grid.generic.stories\'</code></pre></div>'}}),"\n",a.createElement(n.p,null,"Note the last line! ",a.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<code class=\"language-text\">export * from './Grid.generic.stories'</code>"}})," re-exports all the stories. So, you need only support this\nvery file and you get the stories for all the viewports generated automatically."),"\n",a.createElement(n.h2,{id:"why",style:{position:"relative"}},a.createElement(n.a,{href:"#why","aria-label":"why permalink",className:"anchor before"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Why?"),"\n",a.createElement(n.p,null,"There are not that many situations you would need this solution. But it provides each story with a unique URL and predefined viewport size (something that the toolbar is missing). Using this URL and having your storybook publically hosted, you can\nembed your stories and iframes into some other pages and be sure that they illustrate the behavior on the component\non a specific viewport."))}var r=function(e={}){const{wrapper:n}=Object.assign({},(0,s.RP)(),e.components);return n?a.createElement(n,e,a.createElement(o,e)):o(e)},p=t(5556),l=t.n(p),i=t(3433),c=t(9868),u=t(7037),d=t(3928),m=t(4449);const h={Box:i.a,Button:c.$,Text:u.E,Heading:d.DZ,Paragraph:d.fz,PatternJourney:d.Rl,PureHtml:d.Qi,Section:d.wn,Hero:d.lq,Widget:d.x0,PatternJourney:d.Rl,WidgetContainer:d.uM,Workshop:d.cR,ProjectRoles:d.JV,DsAspects:d.nD,Link:d.N_,Image:d._V,ImageBlock:d.Dq,Map:d.T5,YandexImage:d.zX,Instagram:d.pd},g=e=>({children:n})=>a.createElement(d.DZ,{level:e},n),k={h1:g(1),h2:g(2),h3:g(3),h4:g(4),h5:g(5),h6:g(6),p:({children:e})=>a.createElement(d.fz,{standout:!0},e),a:d.N_,ul:d.Ul,ol:d.Ol,div:({"data-excerpt":e,children:n,...t})=>e?a.createElement(d.fz,{as:"div",lead:!0},n):a.createElement("div",t,n)};k.h1.propTypes={children:l().node};const y=({data:{mdx:e,site:{siteMetadata:{siteUrl:n}}},children:t,pageContext:{next:o,prev:r,fileSourceUrl:p}})=>{const{readingTime:l,slug:c,disqusIdentifier:u}=e.fields,{date:g,title:y,subTitle:f,cover:w,tumblr:b}=e.frontmatter,v=e.frontmatter.tags&&e.frontmatter.tags.split(","),E=c.startsWith("blog/");return e?a.createElement(d.PE,null,a.createElement(d.I0,{imageUrl:w&&w.childImageSharp.gatsbyImageData.images.fallback.src,tags:v,date:g,readingTime:E&&parseInt(l.minutes)>0?`${Math.round(l.minutes).toFixed(1)} min read`:null,title:y,subTitle:f}),a.createElement(d.G$,{data:e}),a.createElement(i.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},a.createElement(s.xA,{components:{...k,...h}},t),a.createElement(i.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},v&&v.length>0&&v.map(e=>a.createElement(d.vw,{key:e,name:e.trim(),slug:(0,m.fX)(e),margin:"xsmall"}))),E&&a.createElement(a.Fragment,null,a.createElement(d.WB,{flex:!1,prevSlug:r&&`/${r.fields.slug}`,nextSlug:o&&`/${o.fields.slug}`,prevTitle:r&&r.frontmatter.title,nextTitle:o&&o.frontmatter.title,pad:{vertical:"medium"}}),a.createElement(d.Sn,{link:p}),a.createElement(d.Hw,{slug:c,title:y,disqusIdentifier:u,tumblr:b,siteUrl:n})))):null};function f(e){return a.createElement(y,e,a.createElement(r,e))}},8453:function(e,n,t){t.d(n,{RP:function(){return o},xA:function(){return p}});var s=t(6540);const a=s.createContext({});function o(e){const n=s.useContext(a);return s.useMemo(()=>"function"==typeof e?e(n):{...n,...e},[n,e])}const r={};function p({components:e,children:n,disableParentContext:t}){let p;return p=t?"function"==typeof e?e({}):e||r:o(e),s.createElement(a.Provider,{value:p},n)}}}]); 2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-stories-with-different-viewports-index-md-31a4eada2da7b430c8a3.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.