1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[2227],{6816:function(e,t,n){n.r(t),n.d(t,{default:function(){return y}});var a=n(8453),s=n(6540);function l(e){const t=Object.assign({p:"p",a:"a",h2:"h2",span:"span"},(0,a.RP)(),e.components);return s.createElement(s.Fragment,null,s.createElement("div",{"data-excerpt":!0},s.createElement(t.p,null,"When it comes to the large web applications, we often operate with complex components. Such components are not just CSS\nstyles for the pieces of an interface but also their JavaScript interactions and templates. As documentation, the style\nguide should reflect them all. In other words, the components on the style guide's pages should be the same living as in\nproduction.")),"\n",s.createElement(t.p,null,"At my recent project, we have been using ",s.createElement(t.a,{href:"http://styleguide.sc5.io/"},"SC5 Style Guide")," in its simplest way - documenting\nthe view of the components. For that, we provided the needed HTML in the KSS code and so has received the rendered\ncomponent library."),"\n",s.createElement(t.p,null,"However, in the production code, these components appeared at the pages as a result of some templating transformations.\nAlso, the project is massive and fast-developed, and the changes to the templates happened all the time. As a result,\nthe style guide was always out of date."),"\n",s.createElement(t.p,null,"Moreover, much functionality could not be illustrated with plain HTML.\nTo be rendered correctly and interact with a user, it also needs its JavaScript code."),"\n",s.createElement(t.p,null,"At this project, I have solved the problem using advanced configuration of SC5 Style Guide. Below you can find the\ntricks and explanation."),"\n",s.createElement(t.h2,{id:"living-javascript-components",style:{position:"relative"}},s.createElement(t.a,{href:"#living-javascript-components","aria-label":"living javascript components permalink",className:"anchor before"},s.createElement(t.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>'}})),"Living JavaScript components"),"\n",s.createElement(t.p,null,"Usually, a piece of an interface (often called 'a component') is a combination of HTML, CSS, and JavaScript. With the\nbasic features if SC5 Style Guide you can easily document HTML and CSS. However, applying JavaScript to the components\nrequires an additional configuration."),"\n",s.createElement(t.p,null,"In SC5 Styleguide, you can provide additional tags into the ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text"><head></code>'}})," section of the generated style guide's page. They\ncan be ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text"><script></code>'}})," tags linking the JavaScript you need."),"\n",s.createElement(t.p,null,"Assuming this, you can bundle the necessary JavaScript into one file, and link it to the style guide's pages, like this:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">gulp.task("styleguide:generate", function() {\n\n return gulp.src(["path/to/css/**/*.sass"])\n .pipe(styleguide.generate({\n title: "My Styleguide",\n ...\n extraHead: [\n \'<script src="/js/all-components.js"></script>\',\n ...\n ]\n ...</code></pre></div>'}}),"\n",s.createElement(t.p,null,"Another option for you to use in the configuration is ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">disableEncapsulation: true</code>'}}),". By default, the tool wraps every\ncomponent into a Shadow DOM container. It makes the components encapsulated and protects from unwanted impact of global CSS.\nAlso, the Shadow DOM wrapper prevents global JavaScript to access the components. Disabling this function, you can give\nthe JavaScript all the access, the same way as it works on a usual page."),"\n",s.createElement(t.p,null,"In most cases, JavaScript for the components requires initialization. On the style guide's pages a ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">styleguide:onRendered</code>'}}),"\nevent emits when a component is rendered. You can listen for this event and initialize the components in the event's\nhandler function."),"\n",s.createElement(t.p,null,"For example, if using jQuery:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">$(window).on(\'styleguide:onRendered\', function(e) {\n // e.originalEvent.detail.elements[0] - component\'s container\n initComponent(e.originalEvent.detail.elements[0])\n});</code></pre></div>'}}),"\n",s.createElement(t.h2,{id:"additional-processors",style:{position:"relative"}}
1,s.createElement(t.a,{href:"#additional-processors","aria-label":"additional processors permalink",className:"anchor before"},s.createElement(t.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>'}})),"Additional processors"),"\n",s.createElement(t.p,null,"The SC5 Style Guide parses the KSS documentation in your CSS (SASS, LESS) code, collects information about all the\ncomponents and produces a JSON file with it. The documentation pages you can see are the Angular pages built\non the information in this JSON."),"\n",s.createElement(t.p,null,"Generating the style guide, you can inject additional processors into transforming data for this JSON file. The\ncustom processing functions can re-organize and modify this data. You can use this trick to provide a more clever\ngenerator, run templates and parametrized JavaScript components."),"\n",s.createElement(t.p,null,"Examine the generated ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">styleguide.json</code>'}})," file to see how the data is organized by default. You are going to find out that\nevery component is represented by an object similar to the following:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">{\n header: "Sub navigation tabs",\n description: "<p class="sg">Navigation item</p> ",\n modifiers: [ ],\n deprecated: false,\n experimental: false,\n reference: "4.15.1",\n markup: "<ul class="sub-navigation-tabs">...<ul>",\n css: ".sub-navigation-tabs { /* some css */ }",\n syntax: "less",\n file: "tabs.less",\n parentReference: "4.15",\n wrapper: "<sg-wrapper-content/>",\n renderMarkup: "<ul class="sub-navigation-tabs">...<ul>",\n variables: [\n "colorMain",\n "bgColorSecond",\n "textColor",\n "textColorHover"\n ],\n fileHash: "d00311f793d66a9e9dee9939dedd9fd9"\n}</code></pre></div>'}}),"\n",s.createElement(t.p,null,"To modify this data, provide additional processing function as ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">styleguideProcessors</code>'}})," option. For example,"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">gulp.task("styleguide:generate", function() {\n\n return gulp.src(["path/to/css/**/*.sass"])\n .pipe(styleguide.generate({\n title: "My Styleguide",\n ...\n styleguideProcessors: {\n 30: processTemplates\n }\n ...</code></pre></div>'}}),"\n",s.createElement(t.p,null,"As a value of this option, you can list the processing functions. The given indexes matter for the order in which these\nfunctions are applied to the data."),"\n",s.createElement(t.p,null,"Check out ",s.createElement(t.a,{href:"https://github.com/SC5/sc5-styleguide#build-options"},"the documentation for options"),"."),"\n",s.createElement(t.p,null,"In my projects, I used additional processors to operate custom KSS parameters and modify data."),"\n",s.createElement(t.h2,{id:"custom-kss-data",style:{position:"relative"}},s.createElement(t.a,{href:"#custom-kss-data","aria-label":"custom kss data permalink",className:"anchor before"},s.createElement(t.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>'}})),"Custom KSS data"),"\n",s.createElement(t.p,null,"In the section descriptions, you can provide additional KSS parameters with the names prefixed with ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">sg-</code>'}}),". For example,\nyou can provide a path to a template which produces the markup for the component:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">// Button\n//\n// markup:\n// { title: "Move on", type="submit" }\n//\n// sg-template:\n// src/components/button/button.ejs\n//\n// Styleguide 1.2.3</code></pre></div>'}}
1),"\n",s.createElement(t.p,null,"In here the markup works as an input value for the given template. You can teach Style Guide to apply the template to\nthe declared object and put the result as a markup to render. To do it you need a custom processing function mentioned\nabove."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">var processTemplates = (styleguide) => {\n\n styleguide.sections.forEach((section) => {\n\n if (section['sg-template']) {\n var templatePath = section['sg-template'].trim()\n templatePath = path.join(process.cwd(), templatePath)\n\n var templateStr = fs.readFileSync(templatePath, 'utf8')\n var inputData = eval('(' + section.markup + ')')\n\n section.renderMarkup = ejs.render(templateStr, insertData)\n }\n\n }\n\n}</code></pre></div>"}}),"\n",s.createElement(t.h2,{id:"templates-on-fly",style:{position:"relative"}},s.createElement(t.a,{href:"#templates-on-fly","aria-label":"templates on fly permalink",className:"anchor before"},s.createElement(t.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>'}})),"Templates on fly"),"\n",s.createElement(t.p,null,"In the single-page applications, templates work on the client side. In this case, it is better to process them\nin the style guide too. In other words, you should include the templates into the JavaScript bundle and initialize\nthe components on containers."),"\n",s.createElement(t.p,null,"Combining this approach to the custom processors, you can store the code example for every compoentn in the ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">markup</code>'}}),"\nKSS field."),"\n",s.createElement(t.p,null,"For example,"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">// Tabs\n//\n// markup:\n// var Tabs = require(\'src/components/tab.js\')\n// Tabs.init($container, { items: [...] })\n//\n// sg-js-component:\n// <div class="sg-tabs-container"></div>\n//\n// Styleguide 1.2.3</code></pre></div>'}}),"\n",s.createElement(t.p,null,"With a custom processor, you can put the container's code as a markup to render:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">var processorForJsComponents = function(styleguide) {\n\n styleguide.sections.forEach((section) => {\n if (section[\'sg-js-component\']) {\n section.renderMarkup = section.wrapper.replace(\n \'<sg-wrapper-content/>\', section[\'sg-js-component\']\n );\n }\n }\n\n}</code></pre></div>'}}),"\n",s.createElement(t.h2,{id:"adjustable-initialization-for-javascript",style:{position:"relative"}},s.createElement(t.a,{href:"#adjustable-initialization-for-javascript","aria-label":"adjustable initialization for javascript permalink",className:"anchor before"},s.createElement(t.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>'}})),"Adjustable initialization for JavaScript"),"\n",s.createElement(t.p,null,"Usually, different c
1omponents need to be initialized in differently. Also, they may require some fake data. You can\nrun various Javascript functions on separate component containers to get this result."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">var TabsInit = require(\'src/components/tabs/tabs.init.js\')\n\nvar knownComponents = {\n \'.sg-tabs-container\': TabsInit\n}\n\n$(window).on(\'styleguide:onRendered\', function(e) {\n\n knownComponents.forEach((componentInit, componentSelector) => {\n var containingComponents = $(e.originalEvent.detail.elements[0]).find(componentSelector)\n if (containingComponents.length > 0) {\n componentInit(containingComponents)\n }\n })\n\n})</code></pre></div>'}}),"\n",s.createElement(t.p,null,"This code runs a corresponding function for every selector in the ",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">knownComponents</code>'}})," object. The matching DOM element(s)\npassed into the initializing function as a parameter."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">// src/components/tabs/tabs.sg-init.js\n\nvar Tabs = require('./tabs.js')\n\nvar fakeData = [\n { title: 'Tab1', url: '/index.html' },\n { title: 'Tab2', url: '/contacts' }\n]\n\nmodule.exports = function($container) {\n // Real calling for initing function depends on\n // you component system interface\n Tabs.init($container, { items: fakeData })\n}\n</code></pre></div>"}}),"\n",s.createElement(t.p,null,"In this system, you can have several containers with the same CSS class but parametrized with any other information, e.g.\ndata attributes:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">// Tabs, another version\n//\n// markup:\n// var Tabs = require(\'src/components/tab.js\')\n// Tabs.init($container, { another: true, items: [...] })\n//\n// sg-js-component:\n// <div class="sg-tabs-container" data-type="another"></div>\n//\n// Styleguide 1.2.4</code></pre></div>'}}),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">...\nmodule.exports = function($container) {\n var type = $container.data(\'type\')\n\n if (type == \'another\') {\n Tabs.init($container, { another: true, items: fakeData })\n } else {\n Tabs.init($container, { items: fakeData })\n }\n}</code></pre></div>'}}),"\n",s.createElement(t.h2,{id:"file-structure",style:{position:"relative"}},s.createElement(t.a,{href:"#file-structure","aria-label":"file structure permalink",className:"anchor before"},s.createElement(t.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>'}})),"File structure"),"\n",s.createElement(t.p,null,"You may have noticed that I suggest storing everything related to the component under the same folder. This is also\nrelevant to the style-guide-related files."),"\n",s.createElement(t.p,null,"For a user, a component is a consistent entity. They get it as a whole thing, no matter how many technologies\nare behind. For a developer, it is not that straightforward. We use CSS for styling, JavaScript for interactions and HTML\nfor the view. The corresponding code is usually placed in a separate file for each technology. I find it quite\ndistracting."),"\n",s.createElement(t.p,null,"However, the 'component folder' approach smoothes this
1situation. Storing everything (including the documentation) in\nthe same place improves developer's experience very much."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">src/\n components/\n login/\n login.ejs\n login.js\n login.sg-init.js\n tabs/\n tabs.ejs\n tabs.js\n tabs.sass\n tabs.sg-init.js</code></pre></div>'}}),"\n",s.createElement(t.h2,{id:"enjoy",style:{position:"relative"}},s.createElement(t.a,{href:"#enjoy","aria-label":"enjoy permalink",className:"anchor before"},s.createElement(t.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>'}})),"Enjoy"),"\n",s.createElement(t.p,null,"After ajusting the SC5 Style Guide, as shown above, you will get the double living documentation. Remember about the\nwatching mode to re-generate the style guide on the file changes. It works as a nice development playground."),"\n",s.createElement(t.p,null,"Also, last but not least, I would like to thank the community which made these things possible. I used the SC5 Style Guide\nfeatures by other developers and so feel very grateful. You may see their names ",s.createElement(t.a,{href:"https://github.com/SC5/sc5-styleguide/releases"},"at the releases'\npage"),". If you want yours to appear here, please\n",s.createElement(t.a,{href:"https://github.com/SC5/sc5-styleguide"},"contribute"),"."))}var o=function(e={}){const{wrapper:t}=Object.assign({},(0,a.RP)(),e.components);return t?s.createElement(t,e,s.createElement(l,e)):l(e)},i=n(5556),r=n.n(i),c=n(3433),d=n(9868),u=n(7037),p=n(3928),h=n(4449);const m={Box:c.a,Button:d.$,Text:u.E,Heading:p.DZ,Paragraph:p.fz,PatternJourney:p.Rl,PureHtml:p.Qi,Section:p.wn,Hero:p.lq,Widget:p.x0,PatternJourney:p.Rl,WidgetContainer:p.uM,Workshop:p.cR,ProjectRoles:p.JV,DsAspects:p.nD,Link:p.N_,Image:p._V,ImageBlock:p.Dq,Map:p.T5,YandexImage:p.zX,Instagram:p.pd},g=e=>({children:t})=>s.createElement(p.DZ,{level:e},t),v={h1:g(1),h2:g(2),h3:g(3),h4:g(4),h5:g(5),h6:g(6),p:({children:e})=>s.createElement(p.fz,{standout:!0},e),a:p.N_,ul:p.Ul,ol:p.Ol,div:({"data-excerpt":e,children:t,...n})=>e?s.createElement(p.fz,{as:"div",lead:!0},t):s.createElement("div",n,t)};v.h1.propTypes={children:r().node};const f=({data:{mdx:e,site:{siteMetadata:{siteUrl:t}}},children:n,pageContext:{next:l,prev:o,fileSourceUrl:i}})=>{const{readingTime:r,slug:d,disqusIdentifier:u}=e.fields,{date:g,title:f,subTitle:y,cover:S,tumblr:b}=e.frontmatter,E=e.frontmatter.tags&&e.frontmatter.tags.split(","),x=d.startsWith("blog/");return e?s.createElement(p.PE,null,s.createElement(p.I0,{imageUrl:S&&S.childImageSharp.gatsbyImageData.images.fallback.src,tags:E,date:g,readingTime:x&&parseInt(r.minutes)>0?`${Math.round(r.minutes).toFixed(1)} min read`:null,title:f,subTitle:y}),s.createElement(p.G$,{data:e}),s.createElement(c.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},s.createElement(a.xA,{components:{...v,...m}},n),s.createElement(c.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},E&&E.length>0&&E.map(e=>s.createElement(p.vw,{key:e,name:e.trim(),slug:(0,h.fX)(e),margin:"xsmall"}))),x&&s.createElement(s.Fragment,null,s.createElement(p.WB,{flex:!1,prevSlug:o&&`/${o.fields.slug}`,nextSlug:l&&`/${l.fields.slug}`,prevTitle:o&&o.frontmatter.title,nextTitle:l&&l.frontmatter.title,pad:{vertical:"medium"}}),s.createElement(p.Sn,{link:i}),s.createElement(p.Hw,{slug:d,title:f,disqusIdentifier:u,tumblr:b,siteUrl:t})))):null};function y(e){return s.createElement(f,e,s.createElement(o,e))}},8453:function(e,t,n){n.d(t,{RP:function(){return l},xA:function(){return i}});var a=n(6540);const s=a.createContext({});function l(e){const t=a.useContext(s);return a.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const o={};function i({components:e,children:t,disableParentContext:n}){let i;return i=n?"function"==typeof e?e({}):e||o:l(e),a.createElement(s.Provider,{value:i},t)}}}]); 2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-sc-5-style-guide-next-level-index-en-md-0a197ed9d132f08b803d.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.