component---node-modules-pitayan-gatsby-theme-pitayan-src-templates-post-index-tsx-content-file-path-content-posts-2022-04-02-multiple-pictures-index-mdx-bb63c5bf2d19632dff0b.js

"use strict";(self.webpackChunkwww=self.webpackChunkwww||[]).push([[248],{9687:function(A,e,a){a.r(e),a.d(e,{default:function(){return w}});var t=a(1151),i=a(7294);function s(A){const e=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,t.ah)(),A.components);return i.createElement(i.Fragment,null,i.createElement(e.h1,{id:"first-heading",style:{position:"relative"}},i.createElement(e.a,{href:"#first-heading","aria-label":"first heading permalink",className:"heading-anchor before"},i.createElement(e.span,{dangerouslySetInnerHTML:{__html:"<span>#</span>"}})),"First Heading"),"\n",i.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1920px; "\n    >\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 66.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAACAP/aAAwDAQACEAMQAAABaiWNwjUM/wD/xAAbEAACAgMBAAAAAAAAAAAAAAABAgAhAxESE//aAAgBAQABBQJVG/NTCl47hbmMb//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/Aar/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8BR2y//8QAGxAAAwACAwAAAAAAAAAAAAAAAAERAhAhQXH/2gAIAQEABj8CjxTJHj4zspwtf//EABoQAAMAAwEAAAAAAAAAAAAAAAABERAhUUH/2gAIAQEAAT8hpI8u0JOKMEezkEarRyn/2gAMAwEAAgADAAAAEAPP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAwEBPxAActX/xAAXEQEBAQEAAAAAAAAAAAAAAAABABFB/9oACAECAQE/EHF5Zv/EABsQAQEAAgMBAAAAAAAAAAAAAAERADEhUWGR/9oACAEBAAE/EIwAgG/cRkhp5d6xhVXq+4xRVeC8TCHtDd4K2c//2Q==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="demo_1"\n        title=""\n        src="/gatsby-theme-pitayan/static/27fa292c65b0123bb284fcd71ffc303b/aaf92/demo_1.jpg"\n        srcset="/gatsby-theme-pitayan/static/27fa292c65b0123bb284fcd71ffc303b/aaf92/demo_1.jpg 1920w"\n        sizes="(max-width: 1920px) 100vw, 1920px"\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    </span>\n    <figcaption class="gatsby-resp-image-figcaption">demo_1</figcaption>\n  </figure>'}}),"\n",i.createElement(e.p,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra egestas odio id accumsan. In vel ipsum quam. Fusce scelerisque rutrum tempus. Mauris in velit sapien. In mi nibh, dignissim in ligula ut, faucibus lacinia libero. Etiam volutpat turpis est, a scelerisque sem commodo eu. Morbi lectus quam, molestie eget vestibulum in, porta ac tellus. Aliquam feugiat, orci non vehicula tristique, augue ex congue dui, non suscipit velit purus vitae diam. Phasellus dui augue, faucibus sed neque id, pellentesque porta magna. Cras nec lacinia dui. Pellentesque lacinia, nisi non porta condimentum, risus nisi semper erat, vel ullamcorper neque justo sit amet erat. Mauris lacinia dolor in arcu tempor pretium."),"\n",i.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1920px; "\n    >\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 72.03125%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAADBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAR6B6ISHH//EABkQAAMBAQEAAAAAAAAAAAAAAAECAwASEf/aAAgBAQABBQKQ7ChFLQHsqGeKCm6Yb//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABsQAAICAwEAAAAAAAAAAAAAAAABAhEhIjFR/9oACAEBAAY/Au0ShO+GjbRZhZ9Z0//EABsQAAICAwEAAAAAAAAAAAAAAAERACExQVGB/9oACAEBAAE/Iat05ucyk2j5CjQeqUMPUf1ZQFQHP//aAAwDAQACAAMAAAAQkM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEBAQADAAMAAAAAAAAAAAABEQAhMWFBcYH/2gAIAQEAAT8QsSX+kzBwJEWW8PoNQ4EHkpmU19F69PdYkja1XDyA+Df/2Q==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="demo_2"\n        title=""\n        src="/gatsby-theme-pitayan/static/d7f82421ce510232bd39970c36da2c8b/aaf92/demo_2.jpg"\n        srcset="/gatsby-theme-pitayan/static/d7f82421ce510232bd39970c36da2c8b/aaf92/demo_2.jpg 1920w"\n        sizes="(max-width: 1920px) 100vw, 1920px"\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    </span>\n    <figcaption class="gatsby-resp-image-figcaption">demo_2</figcaption>\n  </figure>'}}),"\n",i.createElement(e.p,null,"Donec venenatis blandit erat. In a sodales neque, sit amet dignissim eros. Donec sit amet semper ligula. Praesent vel ligula ultrices, efficitur nisi non, tincidunt dolor. Proin a dolor dolor. Fusce malesuada ornare felis eu auctor. Morbi vestibulum venenatis lectus scelerisque tempus."),"\n",i.createElement(e.h1,{id:"second-heading",style:{position:"relative"}},i.createElement(e.a,{href:"#second-heading","aria-label":"second heading permalink",className:"heading-anchor before"},i.createElement(e.span,{dangerouslySetInnerHTML:{__html:"<span>#</span>"}})),"Second Heading"),"\n",i.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 640px; "\n    >\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 66.71875%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQBA//EABUBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAGfpLdOhpP/xAAaEAACAwEBAAAAAAAAAAAAAAABAgADERIj/9oACAEBAAEFAls8jbFbVqIyvHjHk//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAwEBPwFmv//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwFqP//EABkQAQEBAQEBAAAAAAAAAAAAAAEAESExof/aAAgBAQAGPwLQvOwvGTPsmWBf/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARITFB/9oACAEBAAE/IVMxsItAaMFDZ4zaNPYTIaIC4J//2gAMAwEAAgADAAAAELg//8QAFxEBAAMAAAAAAAAAAAAAAAAAAQARIf/aAAgBAwEBPxBwtl2k/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIVH/2gAIAQIBAT8QWIgpn//EABsQAQEBAQEAAwAAAAAAAAAAAAERIQBBMWHB/9oACAEBAAE/EB5KxbGr1asG2cDgtUc1PzjoaMfDPqdIGRK33gSxur73/9k=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="demo_3"\n        title=""\n        src="/gatsby-theme-pitayan/static/2044bc6da3c496a3108f9dd3100ba7d4/56d4e/demo_3.jpg"\n        srcset="/gatsby-theme-pitayan/static/2044bc6da3c496a3108f9dd3100ba7d4/56d4e/demo_3.jpg 640w"\n        sizes="(max-width: 640px) 100vw, 640px"\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    </span>\n    <figcaption class="gatsby-resp-image-figcaption">demo_3</figcaption>\n  </figure>'}}),"\n",i.createElement(e.p,null,"Vivamus hendrerit eleifend nunc sed imperdiet. Ut sed sem at nisi rhoncus faucibus. Cras varius ex quis semper lacinia. Sed eu leo lectus. Quisque pellentesque condimentum metus, non dapibus justo lobortis mattis. Suspendisse sit amet eros justo. Cras iaculis elementum nisl, quis vehicula diam tincidunt quis. Aliquam id aliquam odio, bibendum tristique nibh. Suspendisse mattis pharetra turpis, et pharetra urna eleifend quis. Proin tempor molestie magna in egestas. Vivamus arcu ante, eleifend eget mattis ac, aliquam at lorem. Nulla vehicula consectetur pulvinar. Quisque sit amet ligula ac ipsum eleifend ultrices. Suspendisse potenti. Aenean a massa iaculis, posuere elit in, vehicula arcu. Aliquam erat volutpat."),"\n",i.createElement(e.p,null,"Sed tempus velit augue, fringilla mollis dui bibendum non. Vestibulum volutpat nisi ut dolor pretium, quis euismod tellus pulvinar. Vestibulum ut ligula vitae elit lobortis scelerisque eget a nisl. Nam libero nibh, euismod in pulvinar ut, venenatis id odio. Mauris varius vel lectus sed sagittis. Nulla facilisi. Fusce suscipit lectus eros, vel viverra eros posuere a. Vivamus gravida, tellus vitae varius consectetur, eros nisl malesuada mauris, eget malesuada mi est sit amet nisl. Ut vitae mauris sit amet justo congue iaculis. Nullam vestibulum dapibus velit. Sed mauris nunc, aliquam ac nisl eget, tincidunt sollicitudin orci. Nullam dictum efficitur tincidunt. Proin sollicitudin mi vitae purus iaculis, ut interdum libero fermentum."),"\n",i.createElement(e.h1,{id:"third-heading",style:{position:"relative"}},i.createElement(e.a,{href:"#third-heading","aria-label":"third heading permalink",className:"heading-anchor before"},i.createElement(e.span,{dangerouslySetInnerHTML:{__html:"<span>#</span>"}})),"Third Heading"),"\n",i.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1920px; "\n    >\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 66.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHJYqY8qB//xAAaEAACAwEBAAAAAAAAAAAAAAAAAgEREwMS/9oACAEBAAEFAl5PJ5zXNbguSz//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAABBQAAAAAAAAAAAAAAAAABABEgITH/2gAIAQEABj8CoIvsf//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExUXGR/9oACAEBAAE/IeK+kzdV4Dcb1mYmNW4rr9n/2gAMAwEAAgADAAAAEODP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHhABAAICAQUAAAAAAAAAAAAAAQARIVFBYZGxwfD/2gAIAQEAAT8QGG3bF5jVGLiAN4+x1is+GmlOJtPeIAugopln3J//2Q==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="demo_4"\n        title=""\n        src="/gatsby-theme-pitayan/static/4baf0f5e471c12bb261184c9deab22c3/aaf92/demo_4.jpg"\n        srcset="/gatsby-theme-pitayan/static/4baf0f5e471c12bb261184c9deab22c3/aaf92/demo_4.jpg 1920w"\n        sizes="(max-width: 1920px) 100vw, 1920px"\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    </span>\n    <figcaption class="gatsby-resp-image-figcaption">demo_4</figcaption>\n  </figure>'}}),"\n",i.createElement(e.p,null,"Donec at lorem commodo, facilisis nunc eu, facilisis magna. Praesent nec pharetra dolor, sit amet vehicula turpis. Cras eros turpis, commodo eu cursus sed, molestie et nibh. Fusce tempus orci orci, ac ultricies tortor venenatis nec. Maecenas eu interdum nulla, quis sodales diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sem ligula, aliquam in luctus ut, finibus eu lectus."))}var n=function(A){void 0===A&&(A={});const{wrapper:e}=Object.assign({},(0,t.ah)(),A.components);return e?i.createElement(e,A,i.createElement(s,A)):s(A)},l=a(4160),r=a(9352),m=a(8032),o=a(7896),c=a(5916),u=a(197),g=a(5911),d=a(8762),p=a(9586),E=a(9951),b=a(9286),f=a(2271),B=a(5437),h=a(5555),y=a(5648),j=a(7660),Q=a(8188);const x=A=>{let{image:e}=A;return e?i.createElement(m.G,{className:"gatsby-resp-image-image",image:e,alt:""}):null},N=A=>{let{data:{mdx:{body:e,tableOfContents:a,frontmatter:{author:s,title:n,date:N,categories:w,hero:v,description:k,keywords:Y},fields:{slug:C},timeToRead:D,relatedPosts:R}},pageContext:{tableOfContentsLevels:I,previous:P,next:M},children:G}=A;const S=(0,i.useRef)(null),q=(0,m.c)(null==v?void 0:v.medium),{siteUrl:T}=(0,y.$W)(),{href:F}=(0,o.useLocation)(),Z=s.map((A=>{let{id:e,yamlId:a,name:t,bio:i,sns:s}=A;return{id:e,yamlId:a,name:t,bio:i,socialUrls:s.filter((A=>"mailto"!=A[0]&&"url"!=A[0])).map((A=>j.$s[A[0]].url+"/"+A[1]))}}));return i.createElement(c.Z,{postDescription:k,pageImage:q.images.fallback.src,pageUrl:""+T+C,postTitle:n,pageTitle:n,keywords:Y,date:N,timeToRead:D,authors:Z},i.createElement(f.Z,{ref:S}),i.createElement("div",{className:"hidden md:block"},i.createElement(B.Z,{className:"fixed right-[6%] bottom-[6%] flex flex-col justify-center z-50"},i.createElement(E.Z,null))),i.createElement("div",{className:"max-w-lg md:max-w-2xl mx-auto mb-24"},i.createElement("h1",{className:"text-center"},n),i.createElement(u.Z,{className:"block mb-4 text-center",date:N,timeToRead:D}),i.createElement("div",{className:"block sm:flex flex-wrap items-center justify-center sm:justify-between"},i.createElement(b.Z,{data:s}),i.createElement(d.Z,{url:F,title:n,hashtags:w.join(","),description:k,className:"space-x-6 text-xl py-4 justify-center",twitter:!0,facebook:!0,linkedin:!0,pocket:!0,copy:!0}))),i.createElement("div",{className:"text-center mb-24"},i.createElement(x,{image:q})),i.createElement("div",{className:"lg:grid lg:grid-cols-9 lg:gaps-5"},i.createElement(d.Z,{url:F,title:n,hashtags:w.join(","),description:k,className:"hidden lg:flex text-xl mt-12 flex-col lg:col-start-1 lg:col-end-3 top-[2rem] sticky self-start max-h-full overflow-y-auto space-y-6",twitter:!0,facebook:!0,linkedin:!0,pocket:!0,copy:!0}),i.createElement("article",{className:"markdown lg:col-start-3 lg:col-end-8",ref:S},i.createElement(t.Zo,{components:{}},G)),i.createElement(h.Z,{className:"hidden lg:block lg:col-span-2 mt-12 top-[2rem] sticky self-start text-xs font-semibold ml-12 mr-auto mb-6 overflow-y-auto max-h-full",items:a.items,ref:S,levels:I})),i.createElement("div",{className:"my-8 max-w-lg md:max-w-2xl mx-auto"},i.createElement("div",{className:"block sm:flex flex-wrap items-center justify-center sm:justify-between"},i.createElement(p.Z,{className:"my-8 justify-center",categories:w}),i.createElement(d.Z,{url:F,title:n,hashtags:w.join(","),description:k,className:"space-x-6 text-xl my-8 justify-center",twitter:!0,facebook:!0,linkedin:!0,pocket:!0,copy:!0})),i.createElement("div",{className:"flex justify-around flex-wrap text-base mt-12 mb-24"},i.createElement("div",{className:"p-4 my-4 bg-gray-50 border border-solid border-gray-100 dark:bg-gray-800 dark:border-gray-800 rounded mr-auto w-full md:w-[49%]"},i.createElement(l.rU,{to:P.slug,className:"site-link my-2 block"},i.createElement("div",{className:"flex items-start space-x-2"},i.createElement(r.YG0,{className:"block h-6 w-6"}),i.createElement("span",null,P.title)))),i.createElement("div",{className:"p-4 my-4 bg-gray-50 border border-solid border-gray-100 dark:bg-gray-800 dark:border-gray-800 rounded ml-auto w-full md:w-[49%]"},i.createElement(l.rU,{to:M.slug,className:"site-link my-2 block text-right"},i.createElement("div",{className:"flex items-start space-x-2 justify-end"},i.createElement("span",null,M.title),i.createElement(r.nzV,{className:"block h-6 w-6"}))))),i.createElement("h5",{className:"text-center mb-12"},"Written by"),s.map((A=>{let{bio:e,name:a,initial:t,avatar:s,sns:n,yamlId:l}=A;return i.createElement(g.Z,{className:"p-8 mb-4 bg-gray-50 border border-solid border-gray-100 dark:bg-gray-800 dark:border-gray-800 rounded",key:l,bio:e,name:a,initial:t,avatar:s,sns:n,yamlId:l})}))),i.createElement("div",{className:"my-24 max-w-lg sm:max-w-full mx-auto"},i.createElement("h5",{className:"mb-12 text-center"},"Related Posts"),i.createElement(Q.Z,{posts:R,className:"grid sm:grid-cols-3 row-auto auto-cols-auto gap-8"})))};function w(A){return i.createElement(N,A,i.createElement(n,A))}}}]);
//# sourceMappingURL=component---node-modules-pitayan-gatsby-theme-pitayan-src-templates-post-index-tsx-content-file-path-content-posts-2022-04-02-multiple-pictures-index-mdx-bb63c5bf2d19632dff0b.js.map