import{u as d,j as e,L as m}from"./components-tSF29mDa.js";import{l as c}from"./index-Bn9V8cCg.js";import{I as g}from"./Image-BWANSFFu.js";const p=({data:n})=>[{title:`Hydrogen | ${(n==null?void 0:n.blog.title)??""} blog`}];function b(){const{blog:n}=d(),{articles:s}=n;return e.jsxs("div",{className:"blog",children:[e.jsx("h1",{children:n.title}),e.jsx("div",{className:"blog-grid",children:e.jsx(c,{connection:s,children:({nodes:i,isLoading:l,PreviousLink:t,NextLink:r})=>e.jsxs(e.Fragment,{children:[e.jsx(t,{children:l?"Loading...":e.jsx("span",{children:"↑ Load previous"})}),i.map((o,a)=>e.jsx(h,{article:o,loading:a<2?"eager":"lazy"},o.id)),e.jsx(r,{children:l?"Loading...":e.jsx("span",{children:"Load more ↓"})})]})})})]})}function h({article:n,loading:s}){const i=new Intl.DateTimeFormat("en-US",{year:"numeric",month:"long",day:"numeric"}).format(new Date(n.publishedAt));return e.jsx("div",{className:"blog-article",children:e.jsxs(m,{to:`/blogs/${n.blog.handle}/${n.handle}`,children:[n.image&&e.jsx("div",{className:"blog-article-image",children:e.jsx(g,{alt:n.image.altText||n.title,aspectRatio:"3/2",data:n.image,loading:s,sizes:"(min-width: 768px) 50vw, 100vw"})}),e.jsx("h3",{children:n.title}),e.jsx("small",{children:i})]})},n.id)}export{b as default,p as meta};
