# Westgate live pages — theme integration spec

This covers the parts that live in the **theme repo** (`nodebb-theme-westgate`),
not in ACP widgets:

- **News** (`/category/1/...`) and **Dev Blog** (`/category/84/...`) — rendered as
  banner-led article lists + article pages, pulled live from the forum.
- **Gallery** — a player-upload screenshot category rendered as a masonry grid.
- **Top bar** — global header partial that replaces the left sidebar.

The two static pages (Home, Join the Team) are NOT here — they ship as
paste-ready HTML widgets in `westgate-pages/home.html` and
`westgate-pages/join-the-team.html`.

---

## 0. One SCSS partial for all live pages

Create `scss/westgate/_pages.scss` and add it to `theme.scss`:

```scss
// theme.scss (add after _widgets, before _responsive)
@import "./scss/westgate/pages";
```

All page styles use the existing `--wg-*` tokens — no new colours. Scope every
rule under a body/template class so forum chrome is untouched. Suggested top-level
hooks (added in the template overrides below):

- `body.wg-cat-news`, `body.wg-cat-blog` — the News / Dev Blog category index
- `body.wg-article-news`, `body.wg-article-blog` — an individual post
- `body.wg-gallery` — the Gallery category index

---

## 1. Category index re-skin (News / Dev Blog)

NodeBB renders a category at `categories/category.tpl` (we already override
`category.tpl`). Rather than fork the whole template, branch on the category id
and render a "cards" layout for cid 1 & 84, falling back to the normal list
otherwise.

### 1a. Tag the body (lib/theme.js → filterMiddlewareRenderHeader or a new hook)

Add a body class so SCSS can target these categories. In `lib/theme.js`, extend
the existing `filterMiddlewareRenderHeader` (or add `filter:category.build`):

```js
// lib/theme.js
const NEWS_CIDS = { 1: 'news', 84: 'blog' };

library.filterCategoryBuild = async function (hookData) {
    const cid = hookData.templateData && hookData.templateData.cid;
    if (NEWS_CIDS[cid]) {
        hookData.templateData.bodyClass =
            (hookData.templateData.bodyClass || '') + ' wg-cat-' + NEWS_CIDS[cid];
        hookData.templateData.wgArticleList = true; // template flag
    }
    return hookData;
};
```

Register it in `plugin.json` hooks:

```json
{ "hook": "filter:category.build", "method": "filterCategoryBuild" }
```

(If `filter:category.build` isn't available in your NodeBB version, set the flag
in the existing `filter:middleware.renderHeader` by inspecting `req.url`.)

### 1b. Template branch (templates/category.tpl)

At the top of the topic loop, wrap the Westgate card markup behind the flag.
Each topic already exposes `title`, `slug`, `timestamp`/`timestampISO`,
`teaser`, `user`, and `thumb` (topic thumbnail) — that's everything the card needs.

```html
{{{ if wgArticleList }}}
<ul class="wg-article-list list-unstyled">
  {{{ each topics }}}
  <li class="wg-article-card">
    <a class="wg-article-card__media" href="{config.relative_path}/topic/{./slug}">
      {{{ if ./thumb }}}<img src="{./thumb}" alt="" loading="lazy">{{{ end }}}
    </a>
    <div class="wg-article-card__body">
      <div class="wg-article-card__meta">
        <span class="wg-tag">{./category.name}</span>
        <time datetime="{./timestampISO}">{function.humanReadableDate, ./timestamp}</time>
      </div>
      <h2 class="wg-article-card__title">
        <a href="{config.relative_path}/topic/{./slug}">{./title}</a>
      </h2>
      <p class="wg-article-card__teaser">{./teaser.content}</p>
      <div class="wg-article-card__byline">
        by {./user.username}
      </div>
    </div>
  </li>
  {{{ end }}}
</ul>
{{{ else }}}
<!-- existing default category list markup -->
{{{ end }}}
```

Mirror the visual target from the mockup (Westgate.dc.html → News view):
featured first card larger, the rest in a grid. The SCSS below handles that with
`:first-child`.

### 1c. SCSS (in _pages.scss)

```scss
body.wg-cat-news,
body.wg-cat-blog {
  .wg-article-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .wg-article-card {
    background: var(--wg-velvet-panel);
    border: 1px solid var(--wg-border);
    border-radius: 8px;
    box-shadow: var(--wg-velvet-shadow);
    overflow: hidden;
    transition: border-color .25s;
    &:hover { border-color: rgba(194, 163, 90, .4); }
    // featured first post spans the row
    &:first-child {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
    }
  }
  .wg-article-card__media img {
    width: 100%; height: 160px; object-fit: cover; display: block;
    border-bottom: 1px solid rgba(194, 163, 90, .12);
  }
  .wg-article-card:first-child .wg-article-card__media img {
    height: 100%; min-height: 300px; border-bottom: 0;
  }
  .wg-article-card__body { padding: 22px 24px; }
  .wg-article-card__meta {
    font-family: var(--wg-font-code);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--wg-text-muted);
    display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
  }
  .wg-tag {
    color: #150f08; background: var(--wg-gold);
    padding: 3px 9px; border-radius: 2px; font-weight: 600;
  }
  .wg-article-card__title {
    font-family: var(--wg-font-display); font-size: 19px; line-height: 1.35;
    color: var(--wg-text); margin: 0 0 10px;
    a { color: inherit; }
  }
  .wg-article-card:first-child .wg-article-card__title { font-size: 28px; }
  .wg-article-card__teaser {
    font-family: var(--wg-font-text); font-size: 14px; line-height: 1.7;
    color: var(--wg-text-muted); margin: 0;
  }
  .wg-article-card__byline {
    font-family: var(--wg-font-text); font-size: 12.5px;
    color: var(--wg-text-muted); margin-top: 14px;
  }
}
@media (max-width: 900px) {
  body.wg-cat-news .wg-article-list,
  body.wg-cat-blog .wg-article-list { grid-template-columns: 1fr; }
  body.wg-cat-news .wg-article-card:first-child,
  body.wg-cat-blog .wg-article-card:first-child { grid-template-columns: 1fr; }
}
```

---

## 2. Article page re-skin (an individual News / Dev Blog topic)

Override `topic.tpl` (or just its main-post partial) conditionally for cid 1 & 84.
Tag the body the same way (`filter:topic.build` → `wg-article-news/blog`), then:

1. **Banner hero** — use `topic.thumb`, or the first image in the opening post,
   as a full-width bordered banner; overlay the category tag + date + Cinzel
   title + author byline. (Visual target: Westgate.dc.html → article view.)
2. **Prose body** — add the wiki's prose class to the first post's content
   container so it inherits the magazine typography you already ship:
   `class="... wiki-article-prose"`. That single class gives gold H2 rules,
   blockquotes, drop-in image framing, etc. — no new CSS.
3. **Replies** — leave the normal topic reply list below the article untouched.

```html
{{{ if wgArticle }}}
<header class="wg-article-hero" {{{ if topic.thumb }}}style="--wg-hero-img:url('{topic.thumb}')"{{{ end }}}>
  <div class="wg-article-hero__veil"></div>
  <div class="wg-article-hero__in">
    <div class="wg-article-hero__meta">
      <span class="wg-tag">{topic.category.name}</span>
      <time datetime="{topic.timestampISO}">{function.humanReadableDate, topic.timestamp}</time>
    </div>
    <h1 class="wg-article-hero__title">{topic.titleRaw}</h1>
    <div class="wg-article-hero__byline">by {topic.author.username}</div>
  </div>
</header>
{{{ end }}}
```

```scss
body.wg-article-news, body.wg-article-blog {
  .wg-article-hero {
    position: relative; min-height: 420px; border-radius: 10px;
    border: 1px solid rgba(194, 163, 90, .22);
    display: flex; align-items: flex-end; overflow: hidden;
    background: var(--wg-hero-img) center/cover no-repeat, var(--wg-panel-2);
  }
  .wg-article-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,8,11,.2), rgba(9,8,11,.55) 55%, rgba(9,8,11,.94));
  }
  .wg-article-hero__in { position: relative; padding: 46px 50px; }
  .wg-article-hero__meta {
    font-family: var(--wg-font-code); font-size: 12px; color: var(--wg-text-soft);
    display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
  }
  .wg-article-hero__title {
    font-family: var(--wg-font-display); font-weight: 700;
    font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08;
    color: #f3ede4; margin: 0; max-width: 18em;
    text-shadow: 0 4px 30px rgba(0,0,0,.7);
  }
  // article body inherits .wiki-article-prose — no extra rules needed
  // constrain measure:
  [component="post/content"].wiki-article-prose { max-width: 760px; margin-inline: auto; }
}
```

---

## 3. Gallery (player-upload category → masonry)

Make a new forum category "Gallery" (note its cid). Players post a topic with a
screenshot; the topic thumbnail / first image is the tile. Re-skin its category
view as masonry (CSS columns), same pattern as §1:

```scss
body.wg-gallery {
  .wg-gallery-grid { column-count: 3; column-gap: 18px; }
  .wg-gallery-tile {
    break-inside: avoid; margin-bottom: 18px; position: relative;
    border: 1px solid var(--wg-border); border-radius: 5px; overflow: hidden;
    img { width: 100%; display: block; }
  }
  .wg-gallery-tile__cap {
    position: absolute; inset: auto 0 0 0; padding: 16px;
    background: linear-gradient(180deg, transparent, rgba(8,7,10,.9));
    .t { font-family: var(--wg-font-display); font-size: 15px; color: #ece2d2; }
    .u { font-family: var(--wg-font-text); font-size: 11px; color: var(--wg-text-muted); }
  }
}
@media (max-width: 900px) { body.wg-gallery .wg-gallery-grid { column-count: 2; } }
@media (max-width: 560px) { body.wg-gallery .wg-gallery-grid { column-count: 1; } }
```

Template: in `category.tpl`, add a `wgGallery` branch that loops topics into
`.wg-gallery-tile` using each topic's image + title + poster.

---

## 4. Top bar (global header partial — replaces the sidebar)

Visual spec: `Westgate Top Bar.dc.html` (member / guest / Forums menu / user menu /
mobile). Implementation outline:

1. **New partial** `templates/partials/header/topbar.tpl` containing brand +
   primary nav + the right cluster (search toggle, notifications, chat, user menu).
   Reuse Harmony's existing live components so they keep working — pull the
   notification/chat/user dropdown includes from `nodebb-theme-harmony`'s
   `partials/header/` rather than rebuilding them.
2. **Mount it** in `templates/header.tpl`: replace the
   `<!-- IMPORT partials/sidebar-left.tpl -->` line with
   `<!-- IMPORT partials/header/topbar.tpl -->`, and drop the `layout-container`
   left-column so `#panel` is full-width.
3. **Nav items** come from ACP → Navigation: News, Gallery, Wiki, Forums, Dev Blog.
   The "Forums" item is a dropdown whose panel lists categories + Recent/Unread/
   Tags/All-categories (sample markup in the mockup; wire to your real category
   list later).
4. **Turn off sidebars**: set `openSidebars` off (already the default) and, since
   the left column is removed, the forum content goes full width. Keep the
   per-template `sidebar` widget areas empty.
5. SCSS for the bar goes in `_pages.scss` (or a dedicated `_topbar.scss`), all
   `--wg-*` based — lift the literals from the mockup.

---

## Build / preview

After adding `_pages.scss` and the template branches:

```
./nodebb build       # or: ./nodebb dev  for live rebuilds
```

Visual targets to match pixel-for-pixel live in this project:
- `Westgate.dc.html` — News index, article view, Gallery, Home, Join the Team
- `Westgate Top Bar.dc.html` — the global bar and all its states