# Blog slots (https://docs.salla.dev/twilight/react/slots/blog)



Use blog slots when you want to add a promo, a newsletter signup or extra content to the blog without replacing its pages. For how `useHook`, priority, fallback and cleanup work, see [Slots](https://docs.salla.dev/twilight/react/slots) and [Page frame slots](https://docs.salla.dev/twilight/react/slots/page-frame).

<Callout title="Framework: TanStack Start">
  These slots are rendered by the engine's TanStack Start routes.
</Callout>

## Context [#context]

No blog slot passes its own context. Every handler receives only `twilight` (store, theme and more). To show article data, read it from your own hook or loader.

## Blog index [#blog-index]

Route: [Blog](https://docs.salla.dev/twilight/react/routes/blog).

<PageLayout
  title="Blog index"
  url="/blog"
  nodes="[
  { cols: [
    { w: 1, nodes: [{ block: 'Categories sidebar', size: 'xl' }] },
    { w: 3, nodes: [
      { slot: 'blog:start' },
      { block: 'Slider', size: 'md' },
      { slot: 'blog:items.start', note: 'only with articles' },
      { block: 'Article grid', grid: 4 },
      { slot: 'blog:items.end', note: 'only with articles' },
      { slot: 'blog:end' },
    ] },
  ] },
]"
/>

| Slot               | Position                                  | Context    | Notes                                   |
| ------------------ | ----------------------------------------- | ---------- | --------------------------------------- |
| `blog:start`       | Top of the main column, above the slider. | `twilight` | Always rendered.                        |
| `blog:items.start` | Directly above the article grid.          | `twilight` | Only when there are articles to list.   |
| `blog:items.end`   | Directly below the article grid.          | `twilight` | Only when there are articles to list.   |
| `blog:end`         | Bottom of the main column.                | `twilight` | Always rendered, even with no articles. |

## Article [#article]

Route: [Article](https://docs.salla.dev/twilight/react/routes/blog-article).

<PageLayout
  title="Blog article"
  url="/blog/article-title/a-123"
  nodes="[
  { cols: [
    { w: 3, nodes: [
      { slot: 'blog:single.start' },
      { block: 'Title, meta, body and tags', size: 'xl' },
      { block: 'Comments', size: 'md', note: 'if the store allows them' },
      { slot: 'blog:single.end' },
    ] },
    { w: 1, nodes: [
      { slot: 'blog:single.related.start', note: 'only with related articles' },
      { block: 'Related article cards', size: 'lg' },
      { slot: 'blog:single.related.end', note: 'only with related articles' },
    ] },
  ] },
]"
/>

| Slot                        | Position                                                                         | Context    | Notes                                                                           |
| --------------------------- | -------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------- |
| `blog:single.start`         | Top of the article column, above the title.                                      | `twilight` | Always rendered.                                                                |
| `blog:single.end`           | Bottom of the article column, below the comments.                                | `twilight` | Always rendered. Comments appear only when the store allows likes and comments. |
| `blog:single.related.start` | In the sidebar, below the "Related" heading and above the first related article. | `twilight` | Only when the article has related articles.                                     |
| `blog:single.related.end`   | In the sidebar, below the last related article.                                  | `twilight` | Only when the article has related articles.                                     |

## Category, tag and author pages [#category-tag-and-author-pages]

Routes: [Category](https://docs.salla.dev/twilight/react/routes/blog-category), [Tag](https://docs.salla.dev/twilight/react/routes/blog-tag), [Author](https://docs.salla.dev/twilight/react/routes/blog-author).

These three pages share one layout: breadcrumb, categories sidebar, then the main column.

With articles:

<PageLayout
  title="Blog category, tag or author page"
  url="/blog/category-name/c-12"
  nodes="[
  { slot: 'blog:<page>.start' },
  { block: 'Page title', size: 'xs' },
  { block: 'Article grid', grid: 4 },
  { slot: 'blog:<page>.end' },
]"
/>

With no articles:

<PageLayout
  title="Same page, no articles"
  url="/blog/category-name/c-12"
  nodes="[
  { slot: 'blog:<page>.start' },
  { block: 'Empty state', size: 'md' },
  { slot: 'blog:<page>.end' },
]"
/>

Replace `<page>` with `category`, `tag` or `author`.

| Slot                  | Position                                         | Context    | Notes            |
| --------------------- | ------------------------------------------------ | ---------- | ---------------- |
| `blog:category.start` | Top of the main column, above the category name. | `twilight` | Always rendered. |
| `blog:category.end`   | Below the article grid.                          | `twilight` | Always rendered. |
| `blog:tag.start`      | Top of the main column, above the tag name.      | `twilight` | Always rendered. |
| `blog:tag.end`        | Below the article grid.                          | `twilight` | Always rendered. |
| `blog:author.start`   | Top of the main column, above the author name.   | `twilight` | Always rendered. |
| `blog:author.end`     | Below the article grid.                          | `twilight` | Always rendered. |

<Callout>
  Each of these slots appears twice in the page source because each page has two branches: one when the category, tag or author has no articles (an empty state sits between the slots, with no title), and one when it has articles (title and grid sit between them). Only one branch renders, so a handler shows once. Because the empty branch has no title, do not assume a heading is present in either slot.
</Callout>

## Example [#example]

Add a newsletter prompt below every article, using the article slot. Render the component once under your layout, as described in [`useHook`](https://docs.salla.dev/twilight/react/hooks/use-hook).

```tsx title="app/components/blog/ArticleNewsletter.tsx"
import { useHook } from '@salla.sa/twilight-theme-engine/hooks/useHook';

export function ArticleNewsletter() {
  useHook('blog:single.end', () => (
    <aside className="mt-8 rounded border p-4">
      <h2 className="font-bold">Enjoyed this article?</h2>
      <p className="text-sm">Subscribe to get new posts in your inbox.</p>
    </aside>
  ));
  return null;
}
```

## Next [#next]

* [Slots](https://docs.salla.dev/twilight/react/slots) explains how registration, priority and fallback work.
* [`useHook`](https://docs.salla.dev/twilight/react/hooks/use-hook) is the API used above.
* [Account slots](https://docs.salla.dev/twilight/react/slots/account) covers the customer pages.