var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var t in e)r(l,t,{get:e[t],enumerable:!0})},i=(l,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of B(e))!g.call(l,a)&&a!==t&&r(l,a,{get:()=>e[a],enumerable:!(o=y(e,a))||o.enumerable});return l};var v=(l,e,t)=>(t=l!=null?p(u(l)):{},i(e||!l||!l.__esModule?r(t,"default",{value:l,enumerable:!0}):t,l)),w=l=>i(r({},"__esModule",{value:!0}),l);var c=m((C,s)=>{s.exports=_jsx_runtime});var A={};f(A,{default:()=>h,frontmatter:()=>F});var n=v(c()),F={title:"An introduction to start using Eleventy",description:"Eleventy, or 11ty, is a powerful yet straightforward static site generator. It does not require any config to get started.",published:"2021-02-07",featured:!1,tags:"eleventy, static-site-generator, jamstack"};function d(l){let e={a:"a",code:"code",figure:"figure",h2:"h2",hr:"hr",li:"li",p:"p",path:"path",pre:"pre",span:"span",strong:"strong",svg:"svg",ul:"ul",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Update:"})," I released a Course on 11ty and the jamstack. ",(0,n.jsx)(e.a,{href:"https://realworldjamstack.dev/",title:"realworldjamstack",children:"You can get it now by clicking here"}),"."]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.p,{children:`Eleventy, or 11ty, is a powerful yet straightforward static site generator. It does not require any config to get started. This what it will take you to get an 11ty project running:`}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"sh","data-theme":"one-dark-pro",children:(0,n.jsxs)(e.code,{"data-language":"sh","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#61AFEF"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#D19A66"},children:" -g"}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:" @11ty/eleventy"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#56B6C2"},children:"echo"}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:" '# Page header'"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" > "}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:"README.md"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#61AFEF"},children:"eleventy"})})]})})}),` `,(0,n.jsxs)(e.h2,{id:"bootstrap-an-eleventy-project",className:"flex items-center relative group",children:[(0,n.jsx)(e.a,{className:"absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200",href:"#bootstrap-an-eleventy-project",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",className:"w-4 h-4",children:(0,n.jsx)(e.path,{fillRule:"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"})})}),"Bootstrap an eleventy project"]}),` `,(0,n.jsx)("div",{style:{position:"relative"},children:(0,n.jsx)("div",{style:{height:"0px",paddingBottom:"56.25%"},children:(0,n.jsx)("iframe",{src:"https://app.egghead.io/lessons/11ty-bootstrap-an-eleventy-project/embed?preload=false&af=eq272d",allowfullscreen:!0,style:{position:"absolute",width:"100%",height:"100%",top:"0px",left:"0px",border:"none",borderRadius:"4px"}})})}),` `,(0,n.jsxs)(e.p,{children:["We'll start from an empty directory, initialize it as an npm package by calling ",(0,n.jsx)(e.code,{children:"npm init -y"}),". Install @11ty/eleventy, ",(0,n.jsx)(e.code,{children:"npm i -D @11ty/eleventy"}),`, package and create the website entry point. Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.`]}),` `,(0,n.jsxs)(e.h2,{id:"eleventy-layouts",className:"flex items-center relative group",children:[(0,n.jsx)(e.a,{className:"absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200",href:"#eleventy-layouts",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",className:"w-4 h-4",children:(0,n.jsx)(e.path,{fillRule:"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"})})}),"Eleventy Layouts"]}),` `,(0,n.jsx)("div",{style:{position:"relative"},children:(0,n.jsx)("div",{style:{height:"0px",paddingBottom:"56.25%"},children:(0,n.jsx)("iframe",{src:"https://app.egghead.io/lessons/11ty-use-eleventy-layouts/embed?preload=false&af=eq272d",allowfullscreen:!0,style:{position:"absolute",width:"100%",height:"100%",top:"0px",left:"0px",border:"none",borderRadius:"4px"}})})}),` `,(0,n.jsx)(e.p,{children:"Eleventy Layouts are special templates that you can use to wrap other content. For more information, check the layouts docs."}),` `,(0,n.jsxs)(e.p,{children:["Layouts will live in an _includes folder at the root of your project. For example, if you want to share a standard structure through all your blog posts page first, you need to create a file inside the _includes folder and give it a name; let's call it ",(0,n.jsx)(e.code,{children:"mylayout.njk"}),"."]}),` `,(0,n.jsx)(e.p,{children:"Add the wrapping HTML code."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"html","data-theme":"one-dark-pro",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"title: My Website"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"html"}),(0,n.jsx)(e.span,{style:{color:"#D19A66"},children:" lang"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"en"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"head"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"#D19A66"},children:" charset"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"utf-8"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"#D19A66"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"viewport"'}),(0,n.jsx)(e.span,{style:{color:"#D19A66"},children:" content"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"width=device-width, initial-scale=1.0"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">{{ title }}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"body"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" {{ content | safe}}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,n.jsxs)(e.p,{children:["To use a layout, you need to specify the frontmatter ",(0,n.jsx)(e.code,{children:"layout"})," property inside the desired file. In this case, it will ",(0,n.jsx)(e.code,{children:"post.md"})," at the root level of the project."]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"md","data-theme":"one-dark-pro",children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"layout: mainlayout.njk"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"title: My First Post"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"tags: post"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"## My First Post"})})]})})}),` `,(0,n.jsx)(e.p,{children:"Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This feature is convenient if we want to wrap some pages with extra markup but not all the pages."}),` `,(0,n.jsx)("div",{style:{position:"relative"},children:(0,n.jsx)("div",{style:{height:"0px",paddingBottom:"56.25%"},children:(0,n.jsx)("iframe",{src:"https://app.egghead.io/lessons/11ty-use-layout-chaining-in-eleventy/embed?preload=false&af=eq272d",allowfullscreen:!0,style:{position:"absolute",width:"100%",height:"100%",top:"0px",left:"0px",border:"none",borderRadius:"4px"}})})}),` `,(0,n.jsxs)(e.h2,{id:"create-pages-from-data-in-eleventy",className:"flex items-center relative group",children:[(0,n.jsx)(e.a,{className:"absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200",href:"#create-pages-from-data-in-eleventy",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",className:"w-4 h-4",children:(0,n.jsx)(e.path,{fillRule:"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"})})}),"Create pages from data in Eleventy"]}),` `,(0,n.jsx)("div",{style:{position:"relative"},children:(0,n.jsx)("div",{style:{height:"0px",paddingBottom:"56.25%"},children:(0,n.jsx)("iframe",{src:"https://app.egghead.io/lessons/11ty-create-pages-from-data-in-eleventy/embed?preload=false&af=eq272d",allowfullscreen:!0,style:{position:"absolute",width:"100%",height:"100%",top:"0px",left:"0px",border:"none",borderRadius:"4px"}})})}),` `,(0,n.jsx)(e.p,{children:`Eleventy supports a few data sources, JSON, and js files. Let's take the example of creating pages from a list of pokemon in a JSON file.`}),` `,(0,n.jsxs)(e.p,{children:["First, create a ",(0,n.jsx)(e.code,{children:"_data"})," folder at the root of your project, then create a ",(0,n.jsx)(e.code,{children:"pokemons.json"})," file inside the newly created folder."]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"json","data-theme":"one-dark-pro",children:(0,n.jsxs)(e.code,{"data-language":"json","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"["})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:' "name"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"Pikachu"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:' "power"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"Static"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:' "name"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"Charizard"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:' "power"'}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#98C379"},children:'"fire"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"]"})})]})})}),` `,(0,n.jsxs)(e.p,{children:["Now create a file ",(0,n.jsx)(e.code,{children:"pokemon-page.njk"}),` at the root of your project. To make use of the data, you can use the frontmatter property `,(0,n.jsx)(e.code,{children:"pagination"}),". Pagination has some sub-props:"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["data this can the name of the file inside the _data directory; in your case, it should be ",(0,n.jsx)(e.code,{children:"pokemons"})]}),` `,(0,n.jsx)(e.li,{children:"size where you can specify the size of the page it is usually 1"}),` `,(0,n.jsx)(e.li,{children:"alias, which will be the name of a current item in the list."}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Every page will need a unique slug to construct the final URL. You can achieve that by using the permalink property. You can use the pokemon.name and pass it through the ",(0,n.jsx)(e.code,{children:"slug"})," eleventy filter."]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"html","data-theme":"one-dark-pro",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"pagination:"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" data: pokemons"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" size: 1"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:" alias: pokemon"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:'permalink: "pokemons/{{ pokemon.name | slug}}/"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"tags: pokemonPage"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"title: { { pokemon.name } }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"---"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">Name: {{ pokemon.name }}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#ABB2BF"},children:">Power: {{ pokemon.power }}"})]})]})})}),` `,(0,n.jsxs)(e.h2,{id:"where-to-go-from-here",className:"flex items-center relative group",children:[(0,n.jsx)(e.a,{className:"absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200",href:"#where-to-go-from-here",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",className:"w-4 h-4",children:(0,n.jsx)(e.path,{fillRule:"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"})})}),"Where to go from here"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Make sure to check the ",(0,n.jsx)(e.a,{href:"https://www.11ty.dev/",children:"11ty documentation"})]}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://app.egghead.io/playlists/getting-started-with-eleventy-53c2?af=eq272d",children:"Eghead.io 11ty playlist"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://realworldjamstack.dev/",title:"realworldjamstack",children:"realworldjamstack course"})}),` `]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return w(A);})(); ;return Component;