Blog

const { posts, total } = await shop.blog.list({ limit: 6, offset: 0 });

{
  posts: BlogPost[];
  total: number;
}

{
  id: string;
  title: string;
  slug: string;
  excerpt: string | null;
  featured_image: string | null;
  author_name: string | null;
  published_at: string | null;
  tags: string[] | null;
  meta_title: string | null;
  meta_description: string | null;
}

const { posts, total } = await shop.blog.list({ limit: 9 });

posts.forEach(post => {
  blogGrid.innerHTML += `
    <article>
      ${post.featured_image ? `<img src="${post.featured_image}" alt="${post.title}" />` : ''}
      <h2><a href="/blog/${post.slug}">${post.title}</a></h2>
      <p>${post.excerpt ?? ''}</p>
      <time>${new Date(post.published_at!).toLocaleDateString()}</time>
    </article>
  `;
});

const post = await shop.blog.getBySlug('my-first-post');

{
  content?: string;
  rendered_html?: string | null;
  rendered_css?: string | null;
}

const slug = window.location.pathname.split('/').pop()!;
const post = await shop.blog.getBySlug(slug);

document.title = post.meta_title ?? post.title;

if (post.rendered_html) {
  if (post.rendered_css) {
    const style = document.createElement('style');
    style.textContent = post.rendered_css;
    document.head.appendChild(style);
  }
  articleBody.innerHTML = post.rendered_html;
} else {
  articleBody.textContent = post.content ?? '';
}

// Tags
post.tags?.forEach(tag => {
  const chip = document.createElement('span');
  chip.className = 'tag';
  chip.textContent = tag;
  tagsContainer.appendChild(chip);
});