> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopi.lk/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog

> Fetch published blog posts for your storefront

## `shop.blog.list(params?)`

Returns a paginated list of published blog posts, ordered by `published_at` descending.

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

### Parameters

| Param    | Type     | Default | Description                  |
| -------- | -------- | ------- | ---------------------------- |
| `limit`  | `number` | `20`    | Max posts to return (max 50) |
| `offset` | `number` | `0`     | Pagination offset            |

### Response

```typescript theme={null}
{
  posts: BlogPost[];
  total: number;
}
```

### BlogPost type (list)

```typescript theme={null}
{
  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;
}
```

### Example — Blog listing page

```typescript theme={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>
  `;
});
```

***

## `shop.blog.getBySlug(slug)`

Returns a single blog post by slug, including full content and rendered HTML.

```typescript theme={null}
const post = await shop.blog.getBySlug('my-first-post');
```

### Parameters

| Param  | Type     | Description         |
| ------ | -------- | ------------------- |
| `slug` | `string` | The post's URL slug |

### Additional fields (single post)

```typescript theme={null}
{
  content?: string;
  rendered_html?: string | null;
  rendered_css?: string | null;
}
```

### Example — Blog post page

```typescript theme={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);
});
```