# Blog Component Templates A reference for reusable HTML patterns used across the blog. CSS for all components lives in `style.css`. --- ## 1. Post Figure (photo + caption + copyright) ```html

Description — © Ken Reid. All rights reserved. Caption text goes here.

``` **CSS classes:** `figure-note`, `figure-copyright` **Notes:** Use `

` for semantic captioning. Copyright line renders grey and small above the caption. If a figure should show copyright only, omit the caption text and leave just the span inside `figure-note`. All bg-img photos are Ken's except `kwee.jpg`, `chaos.jpg`, `yoyo.JPG`, `nila.jpg` (cat photos). Book covers and third-party art are exempt. --- ## 2. FAQ / Expandable Q&A Section ```html

Common questions

Question goes here?

Answer goes here.

Another question?

Another answer.

``` **CSS classes:** `faq-section`, `faq-item` **Notes:** Uses native `

`/`

` — no JS needed. Renders with a warm tint background. Keep summary text plain (do not nest heading tags inside `

`). --- ## 3. Vertical Timeline ```html

2012–2014 Event description goes here.
2015 Another event.

``` **CSS classes:** `blog-timeline`, `tl-year`, `tl-dot`, `tl-body` **Notes:** Good for chronological narratives, author histories, project timelines. --- ## 4. Book / Media Cover Grid (2×2) ```html

Book Title

Year · Subtitle

Short description of the book.

``` **CSS class:** `book-cover-grid` **Notes:** 2×2 responsive grid. Images go in `blog/img/`. Works for any media (films, albums, etc.). --- ## 5. Glossary / Plain English Box ```html

A quick glossary

Term: Definition goes here.
Another term: Another definition.

``` **CSS class:** `plain-english-box` **Notes:** Used for jargon explanations, dialect glossaries, domain-specific terms. Renders with a light box background. Used in Scotland post (Scots dialect) and No Idea post (data science jargon). --- ## 6. Blockquote ```html

Quote text goes here.
— Attribution, Source

``` **Notes:** Standard HTML blockquote, styled in `style.css` with left border and italic text. --- ## 7. Section Heading with Top Border ```html

Section Title

``` **CSS class:** `section-heading` **Notes:** Adds a top border rule above the heading for visual separation between major sections. --- ## 8. Internal Link (prose-level) Link to another page naturally within paragraph text: ```html my data science work my post on audiobooks external source ``` **Notes:** No special class needed — blog post link underline styles are handled globally in `style.css`. For new-tab links, always include `rel="noopener noreferrer"`. --- ## 9. Audio Callout Card ```html

▶ Label text

Add a transcript or concise summary below the player.

``` **Notes:** This is the current post pattern. Keep card, accent color, and centered audio element consistent. Always include a transcript or concise summary for non-audio users. --- ## 10. YouTube Embed (Responsive 16:9) ```html

Caption and context.

``` **Notes:** Use embed URLs (`/embed/VIDEO_ID`), not watch URLs. Prefer figure+caption for context. --- ## 11. Instagram Embed (Captioned) ```html

View this post on Instagram

Context caption.

``` **Notes:** Requires this script near page bottom: ```html ``` --- ## 12. Jargon Term Tooltip For technical or domain-specific terms, definitions are now pulled dynamically from the page glossary/jargon box and applied across the article. ```html

Quick jargon guide

CVD (colour vision deficiency): Definition here.
Redundant coding: Definition here.

``` **CSS class:** glossary source uses `plain-english-box`; tooltip styling is automatic **Styling:** Matching jargon terms in `.blog-post` are wrapped with styled hover tooltips using definitions extracted from the glossary list. Dark theme compatible. **Example:** ```html

The redundant coding principle forces better design decisions.

``` **Notes:** - No additional CSS needed — tooltip styles are globally defined in `style.css`. - No manual `` wrapping needed in body copy. - Define terms in a glossary/jargon `plain-english-box`; matching terms in article text are handled automatically. - The first jargon/glossary box in a blog post is auto-collapsed by shared JS; readers can expand it on demand. - Existing manual `` tags still work and are not overwritten. - Tooltips automatically size themselves to fit content and respect viewport boundaries. - Works in both light and dark themes. ## 12. Styled Quote Block ```html

Quote text.

— Attribution

``` **Notes:** Use this when quote styling should match existing post examples. --- ## 13. Code / Path Snippet in Prose ```html

You filed it under Music\Rock\Symphony X\Paradise Lost\.

``` **Notes:** For short snippets, prefer inline `

`. Avoid custom inline code styling per post.

---

## 14. Ordered and Unordered Lists

```html

  First point
  Second point



  Step one
  Step two

```

**Notes:** Use plain semantic lists by default; rely on global typography in `style.css`.

---

## 15. Third-Party Media Credit / Copyright Line

```html

  Caption text. © Original rights holders, YEAR. Used here for commentary.

```

**Notes:** For non-Ken assets, include source and rights context in the caption. For Ken photos, use the Section 1 copyright span pattern.

---

## Posts Data Entry (`js/posts-data.js`)

Every published post needs an entry at the top of `BLOG_POSTS`:

```js
{
  title: "Post Title Here",
  date: "2026-04-23",
  excerpt: "One or two sentence summary. Should be compelling and complete.",
  url: "blog/filename-here.html",
  image: "img/bg-img/XXX.png",
  tags: ["data science"]
},
```

**Notes:**
- `image` is the thumbnail shown on the blog listing page
- `tags` drive the filter buttons and must come from this set only: `data science`, `personal`, `photography`, `books`, `ai`, `finance`
- Use as few tags as necessary for the post; most posts should only need one, and only genuinely cross-category posts should use two
- Do NOT add unpublished posts here until Ken confirms push