# Blog Individual Page — Integration Notes

Open items and TODO list for the Drupal team.

## Open items table

| # | Item | Status in static | Resolved in Drupal by |
|---|---|---|---|
| 1 | Hero image | Placeholder copy of `blog-cataracts.png` → `assets/images/blog-individual/blog-hero-antibiotic-eye-drops.png` | `field_hero_image` on `node--blog` |
| 2 | Types section right-side photo | Placeholder copy of `blog-cataracts.png` | Per-paragraph `field_photo` on `paragraph--tab_swap` |
| 3 | Uses section left-side photo | Placeholder copy of `blog-cataracts.png` | Same as above |
| 4 | Sidebar widget thumbnails (×4) | All 4 are placeholder copies of `blog-cataracts.png` | `field_thumbnail` on each referenced `node--blog` |
| 5 | Author + date + read-time | Hard-coded "By Dr. Ritika · 9 Minutes · April 6, 2026" | `node.field_author` + `node.created` + `node.field_read_time_minutes` |
| 6 | Blog Summary content | Hard-coded 5 bullets | `node.field_blog_summary` (multivalue) |
| 7 | Article body (all sections) | Hard-coded antibiotic-eye-drops content | `node.field_body` (multivalue paragraph reference) |
| 8 | TOC links | Static markup matching the article's section IDs | Drupal Twig generates from `node.field_body` paragraphs (custom block `block--blog-toc.html.twig`) |
| 9 | FAQ items (×6) | Hard-coded antibiotic-eye-drops Q&A | `node.field_faq_items` (paragraph reference) |
| 10 | Readers Favorite items (×4) | Hard-coded titles, dates, read-times | Views block `view-blog-readers-favorite` |
| 11 | Related Blogs items (×4) | Hard-coded | Views block `view-blog-related` filtered by categories |
| 12 | Tab-swap chip bodies | Hard-coded paragraphs per chip (Types ×4, Uses ×3, Side Effects ×2) | Per `paragraph--tab_swap`, multivalue `field_chips` paragraph reference |
| 13 | Stepper steps | Hard-coded "Wash your hands thoroughly..." for step 1 (active) | `paragraph--stepper.field_steps` (multivalue paragraph reference) |
| 14 | Do's and Don'ts content | Hard-coded 3 do's + 2 don'ts | `paragraph--dos_donts.field_dos` and `field_donts` (multivalue) |
| 15 | Active nav | "Our Blogs" — set via `aria-current="page"` | Per-route active nav; Drupal's active-trail handles |

## Hooking up the blogs cluster

The blog cards on `blogs.html` currently have `href="#"` on each card and "Read More" CTA. In Drupal, each should point to `/blog/<slug>` (or `/blog/<slug>#some-anchor` if the cluster is providing teaser-link affordances).

## Drupal templates summary

Listed in `blog-individual-drupal-mapping.md`. Brief recap:

- `node--blog--full.html.twig` (whole-page)
- `paragraph--section-text.html.twig`
- `paragraph--comparison.html.twig`
- `paragraph--tab-swap.html.twig`
- `paragraph--stepper.html.twig`
- `paragraph--dos-donts.html.twig`
- `paragraph--faq_item.html.twig`
- `views-view-row--blog-readers-favorite.html.twig`
- `views-view-row--blog-related.html.twig`
- `block--blog-toc.html.twig`

## Schema / SEO

This page is a high-value SERP target for medical search queries. Add `schema.org/Article` (or `MedicalWebPage`) structured data via Drupal Metatag's Schema.org submodule:

```json
{
  "@context": "https://schema.org",
  "@type": "MedicalWebPage",
  "headline": "{node.title}",
  "image": "{absolute URL of field_hero_image}",
  "datePublished": "{node.created|date('Y-m-d')}",
  "author": {
    "@type": "Person",
    "name": "{field_author.name}"
  },
  "publisher": {
    "@type": "MedicalOrganization",
    "name": "Centre for Sight"
  },
  "about": {
    "@type": "MedicalCondition",
    "name": "Bacterial Eye Infection"
  }
}
```

## Accessibility / a11y notes

- All 3 tab strips use `<button type="button">` with `role="tab"` and `data-active`. Drupal could supplement with `aria-selected` for ARIA conformance.
- Tab/panel relationship: optional `aria-controls` linking each chip to its matching panel would strengthen the contract.
- FAQ uses native `<details>`/`<summary>` — full keyboard support, screen-reader semantics out of the box.
- TOC uses native anchor links — keyboard accessible by default.
- Hero overlay: dark gradient ensures sufficient contrast for white title and meta text. Verify WCAG AA (4.5:1) at the title's pixel position once real hero image is in place.
- Floating actions: `<button>` elements with descriptive `aria-label`. Hidden on mobile to avoid overlap with sticky bar.
- Decorative SVGs use `aria-hidden="true"`. Functional SVGs (none on this page) would need `<title>` children.
- Author info as a link would benefit from `rel="author"`.

## JS dependency on tab-swap rename

The `[data-tab-swap]` JS handler in `js/main.js` is shared with centre-individual (it was renamed from `[data-centre-tabs]` when this page was built). Any future changes to that handler affect both pages — verify both centre-individual specialities tabs and blog-individual's three tab groups still swap correctly after edits.

## Testing checklist for Drupal handoff

- [ ] Render `/blog/<slug>` for at least 3 different blog posts; verify all 12+ sections render
- [ ] Click each of the 4 chips in Types section; verify panel swap
- [ ] Click each of the 3 chips in Uses section; verify panel swap
- [ ] Click each of the 2 chips in Side Effects section; verify panel swap
- [ ] Click each TOC item; verify smooth scroll to matching section
- [ ] Verify TOC stays sticky on scroll (lg+)
- [ ] Click each FAQ item; verify expand/collapse
- [ ] Click scroll-up button; verify scroll to top
- [ ] Click share button; verify Web Share dialog (mobile) or clipboard copy (desktop)
- [ ] Render a blog with fewer FAQ items (1-3); verify layout still correct
- [ ] Render a blog with no Side Effects section; verify TOC and body skip it
- [ ] Verify mobile layout (sidebar widgets stack below article, floating actions hidden)