# Blog Individual Page — Drupal Mapping

**Page route:** `/blog/<slug>` — driven by `node--blog` content type with full view mode.

## Content type & fields

### `node--blog`

| Field | Type | Required | Notes |
|---|---|---|---|
| `name` (node title) | string | yes | "Antibiotic Eye Drops: Types, Uses, and Side Effects" |
| `field_slug` | string (or pathauto) | yes | URL alias |
| `field_hero_image` | image | yes | Full-bleed hero, ~1440×576 |
| `field_author` | term reference (`taxonomy_term--author`) | yes | "Dr. Ritika" |
| `field_read_time_minutes` | integer | yes | "9" → renders "9 Minutes" |
| `node.created` | datetime | yes | Published date |
| `field_blog_summary` | text (long, multivalue) or list | yes | Key takeaways bullets |
| `field_body` | paragraph reference (multivalue) | yes | The article sections — see paragraph types below |
| `field_faq_items` | paragraph reference (`paragraph--faq_item`, multivalue) | optional | FAQ accordion items |
| `field_categories` | term reference (multivalue) | optional | Drives Related Blogs filtering |
| `field_thumbnail` | image | yes | Used by other blog pages' Readers Favorite + Related widgets |

### Paragraph types (article body)

The article body is a list of paragraph references — each paragraph renders one of:

| Bundle | Twig template | Renders | Fields |
|---|---|---|---|
| `paragraph--section_text` | `paragraph--section-text.html.twig` | Heading + body (used for Introduction, What Are, How Do They Work, Why Antibiotics Don't Work, How to Use, Dosage, Other Uses, Precautions, When to See, Conclusion) | `field_section_id` (string), `field_heading` (string), `field_body` (text long) |
| `paragraph--comparison` | `paragraph--comparison.html.twig` | 2 cards + VS | `field_left_title`, `field_left_body`, `field_right_title`, `field_right_body` |
| `paragraph--tab_swap` | `paragraph--tab-swap.html.twig` | Heading + chips + panels (used for Types, Uses, Side Effects) | `field_section_id`, `field_heading`, `field_chips` (paragraph reference, multivalue with `field_chip_label` + `field_chip_body`), `field_photo_side` (left/right/none), `field_photo` (image, optional), `field_purple_variant` (boolean) |
| `paragraph--stepper` | `paragraph--stepper.html.twig` | 5-step horizontal stepper | `field_steps` (paragraph reference, multivalue with `field_step_text`) |
| `paragraph--dos_donts` | `paragraph--dos-donts.html.twig` | Do's + Don'ts cards | `field_dos` (text long, multivalue), `field_donts` (text long, multivalue) |

### `paragraph--faq_item`

| Field | Type | Notes |
|---|---|---|
| `field_question` | text | Summary text |
| `field_answer` | text (long, formatted) | Body text |

## Twig templates introduced

| Template | Replaces partial |
|---|---|
| `node--blog--full.html.twig` | Whole-page render |
| `paragraph--section-text.html.twig` | `05-section-text.html` |
| `paragraph--comparison.html.twig` | `06-comparison-cards.html` |
| `paragraph--tab-swap.html.twig` | `07-tab-swap-section.html` |
| `paragraph--stepper.html.twig` | `08-stepper.html` |
| `paragraph--dos-donts.html.twig` | `09-dos-donts.html` |
| `paragraph--faq_item.html.twig` | One `<details>` block in `11-faq.html` |
| `views-view-row--blog-readers-favorite.html.twig` | One mini blog card in `12-readers-favorite.html` |
| `views-view-row--blog-related.html.twig` | One blog card in `13-related-blogs.html` |
| `block--blog-toc.html.twig` | `04-toc-sidebar.html` (custom block — TOC generated from `field_body` paragraphs by reading their `field_section_id` + `field_heading`) |

## Field-by-section mapping

### Section 3 — Hero banner

| HTML element | Field |
|---|---|
| Hero `<img>` | `node.field_hero_image` rendered with image style `blog_hero` (~1440×576) |
| Breadcrumb middle crumb "Blog" | Static; links to `/blogs` cluster |
| `<h1>` | `node.title` |
| Author meta | `node.field_author` → term name |
| Read-time meta | `node.field_read_time_minutes` rendered with `{{ value }} Minutes` template |
| Date meta | `node.created|date('F j, Y')` |

### Section 4 — Blog Summary

`node.field_blog_summary` rendered as a `<ul>` of bold-led key takeaways.

### Section 5 — Body (left column)

`node.field_body` (paragraph reference, multivalue) — each paragraph renders via its bundle-specific Twig template (see paragraph types above). Drupal renders the paragraphs in-order, producing the section sequence.

### Section 5 — TOC sidebar (right column, top)

Custom block `block--blog-toc.html.twig`. Loops over `node.field_body` paragraphs that have a `field_section_id` and `field_heading`, emits one `<a href="#{section_id}">{heading}</a>` per item.

### Section 5 — Readers Favorite (right column, below TOC)

Views block `view-blog-readers-favorite`:
- Filter: high-traffic blogs (e.g. by `field_views_count` desc), or editor-curated via `field_is_readers_favorite` boolean
- Limit: 4
- Row template: `views-view-row--blog-readers-favorite.html.twig`

### Section 7 — Related Blogs

Views block `view-blog-related`:
- Filter: blogs sharing one or more `field_categories` terms with current node, exclude self
- Limit: 4
- Row template: `views-view-row--blog-related.html.twig`

### Section 8 — FAQ

`node.field_faq_items` rendered directly. Each `paragraph--faq_item.html.twig` outputs one `<details>` block.

### Section 9 — Callback form

Webform `homepage-callback` (existing — same as on blogs, specialities, doctor-individual, etc.).

## URL alias pattern

`/blog/[node:title]` — generated by Pathauto (or use `field_slug` for editor control).

The breadcrumb's middle crumb links to `/blogs` (the blogs cluster page).