var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),g=(n,a)=>{for(var s in a)t(n,s,{get:a[s],enumerable:!0})},o=(n,a,s,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of u(a))!k.call(n,l)&&l!==s&&t(n,l,{get:()=>a[l],enumerable:!(c=m(a,l))||c.enumerable});return n};var w=(n,a,s)=>(s=n!=null?h(N(n)):{},o(a||!n||!n.__esModule?t(s,"default",{value:n,enumerable:!0}):s,n)),f=n=>o(t({},"__esModule",{value:!0}),n);var i=x((j,r)=>{r.exports=_jsx_runtime});var v={};g(v,{default:()=>d,frontmatter:()=>y});var e=w(i()),y={title:"O Canada",date:"2017-07-15",tags:["holiday","canada","images"],draft:!1,layout:"PostBanner",images:["/static/images/canada/mountains.jpg"],summary:"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes."};function p(n){let a={a:"a",code:"code",h1:"h1",h3:"h3",hr:"hr",img:"img",p:"p",path:"path",pre:"pre",span:"span",svg:"svg",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.p,{children:"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes."}),(0,e.jsxs)(a.p,{children:["Features images served using ",(0,e.jsx)(a.code,{children:"next/image"})," component. The locally stored images are located in a folder with the following path: ",(0,e.jsx)(a.code,{children:"/static/images/canada/[filename].jpg"})]}),(0,e.jsx)(a.p,{children:"Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes."}),(0,e.jsx)(a.hr,{}),(0,e.jsxs)(a.h1,{className:"content-header",id:"gallery",children:[(0,e.jsx)(a.a,{href:"#gallery","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:"content-header-link",children:(0,e.jsxs)(a.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,e.jsx)(a.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,e.jsx)(a.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Gallery"]}),(0,e.jsxs)("div",{className:"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2",children:[(0,e.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:(0,e.jsx)(a.p,{children:(0,e.jsx)(a.img,{alt:"Maple",src:"/static/images/canada/maple.jpg"})})}),(0,e.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:(0,e.jsx)(a.p,{children:(0,e.jsx)(a.img,{alt:"Lake",src:"/static/images/canada/lake.jpg"})})}),(0,e.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:(0,e.jsx)(a.p,{children:(0,e.jsx)(a.img,{alt:"Mountains",src:"/static/images/canada/mountains.jpg"})})}),(0,e.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:(0,e.jsx)(a.p,{children:(0,e.jsx)(a.img,{alt:"Toronto",src:"/static/images/canada/toronto.jpg"})})})]}),(0,e.jsxs)(a.h1,{className:"content-header",id:"implementation",children:[(0,e.jsx)(a.a,{href:"#implementation","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:"content-header-link",children:(0,e.jsxs)(a.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,e.jsx)(a.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,e.jsx)(a.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Implementation"]}),(0,e.jsx)(a.pre,{className:"language-js",children:(0,e.jsxs)(a.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(a.span,{className:"token operator",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(a.span,{className:"token operator",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"!"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"["}),(0,e.jsx)(a.span,{className:"token maybe-class-name",children:"Maple"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),(0,e.jsx)(a.span,{className:"token keyword",children:"static"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"images",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"canada",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"maple",(0,e.jsx)(a.span,{className:"token punctuation",children:"."}),(0,e.jsx)(a.span,{className:"token property-access",children:"jpg"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(a.span,{className:"token operator",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"!"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"["}),(0,e.jsx)(a.span,{className:"token maybe-class-name",children:"Lake"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),(0,e.jsx)(a.span,{className:"token keyword",children:"static"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"images",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"canada",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"lake",(0,e.jsx)(a.span,{className:"token punctuation",children:"."}),(0,e.jsx)(a.span,{className:"token property-access",children:"jpg"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(a.span,{className:"token operator",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"!"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"["}),(0,e.jsx)(a.span,{className:"token maybe-class-name",children:"Mountains"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),(0,e.jsx)(a.span,{className:"token keyword",children:"static"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"images",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"canada",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"mountains",(0,e.jsx)(a.span,{className:"token punctuation",children:"."}),(0,e.jsx)(a.span,{className:"token property-access",children:"jpg"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(a.span,{className:"token operator",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"!"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"["}),(0,e.jsx)(a.span,{className:"token maybe-class-name",children:"Toronto"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),(0,e.jsx)(a.span,{className:"token keyword",children:"static"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"images",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"canada",(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"toronto",(0,e.jsx)(a.span,{className:"token punctuation",children:"."}),(0,e.jsx)(a.span,{className:"token property-access",children:"jpg"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]})]})}),(0,e.jsx)(a.p,{children:"With MDX v2, one can interleave markdown in jsx as shown in the example code."}),(0,e.jsxs)(a.h3,{className:"content-header",id:"photo-credits",children:[(0,e.jsx)(a.a,{href:"#photo-credits","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:"content-header-link",children:(0,e.jsxs)(a.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,e.jsx)(a.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,e.jsx)(a.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Photo Credits"]}),(0,e.jsx)("div",{children:(0,e.jsxs)(a.p,{children:["Maple photo by ",(0,e.jsx)(a.a,{href:"https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Guillaume Jaillet"})," on ",(0,e.jsx)(a.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),(0,e.jsx)("div",{children:(0,e.jsxs)(a.p,{children:["Mountains photo by ",(0,e.jsx)(a.a,{href:"https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"John Lee"})," on ",(0,e.jsx)(a.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),(0,e.jsx)("div",{children:(0,e.jsxs)(a.p,{children:["Lake photo by ",(0,e.jsx)(a.a,{href:"https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Tj Holowaychuk"})," on ",(0,e.jsx)(a.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),(0,e.jsx)("div",{children:(0,e.jsxs)(a.p,{children:["Toronto photo by ",(0,e.jsx)(a.a,{href:"https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Matthew Henry"})," on ",(0,e.jsx)(a.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})})]})}function d(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(p,{...n})}):p(n)}return f(v);})(); ;return Component;