Fix content duplication, broken posts, and URL mismatches

- Remove {{ content }} from page-header.html include (caused every
  page to render its body twice — once in the header overlay, once
  in the main body)
- Remove collections_dir from _config.yml (silently broke post
  discovery with github-pages gem — zero posts, no error)
- Change blog permalink from /blog/ to /posts/ to match original
  WordPress URL, update nav.yml and homepage link
- Add all 4 partner logos to homepage (was showing only 2)
- Update wp-to-ghpages and wp-audit skills with lessons learned:
  page-by-page workflow, screenshot comparison loop, URL preservation,
  and documented the silent-failure traps

Author: mohammedkhalfan

.claude/skills/wp-audit.md

@@ -45,6 +45,8 @@ curl -sL "$SITE_URL" | grep -oP '<li[^>]*menu-item[^>]*>.*?</a>' | head -30
 
 **Gotcha: The nav menu structure is in the page HTML, not the API.** The default WordPress REST API doesn't expose menus (requires a plugin). Extract the full nav including dropdowns from the HTML.
 
+**CRITICAL: Extract exact URLs from navigation hrefs.** Use WebFetch or curl to read the homepage and extract every nav link's exact href. These URLs are what the Jekyll permalinks must match — never guess a URL like `/blog/` when the actual link is `/posts/`. Record the full URL map in the audit manifest so the port skill can set permalinks correctly.
+
 ### Step 3: Inventory all blog posts
 
 ```bash
@@ -197,7 +199,7 @@ done
 
 Compile all findings into a structured summary:
 1. **Sitemap** — all pages with hierarchy, URLs, and WP IDs
-2. **Nav menu structure** — with dropdowns
+2. **Nav menu structure** — with dropdowns and **exact href URLs** extracted from the HTML (these become the Jekyll permalinks)
 3. **Blog posts** — date, author, slug, featured image, comment count
 4. **Comments** — total count, distribution by post
 5. **Design tokens** — fonts, colors, gradients, spacing

.claude/skills/wp-to-ghpages.md

@@ -2,6 +2,23 @@
 
 Port a WordPress site to Jekyll on GitHub Pages, preserving all content, comments, images, and visual design.
 
+## Critical: Work one page at a time
+
+Do NOT attempt a bulk port of all pages at once. Port one page at a time using this loop:
+
+1. Screenshot the original WordPress page (headless Chrome)
+2. Build/fix the Jekyll version of that page
+3. Rebuild the site and screenshot the new version
+4. Compare the two screenshots side-by-side
+5. Fix discrepancies and repeat steps 3-4 until the page matches
+6. Move to the next page
+
+Keep the original screenshot on hand throughout — always compare against the real site, not your memory of it.
+
+## Critical: Preserve all original URLs
+
+Every page permalink must match the original WordPress URL path exactly. Extract URLs from the site's navigation links (never guess URLs). If the WordPress blog listing is at `/posts/`, the Jekyll page must use `permalink: /posts/`. If ordering is at `/home-page/ordering/`, match that too (or decide explicitly to change it — don't accidentally drift).
+
 ## Prerequisites
 
 - A completed WordPress audit (use the `wp-audit` skill first)
@@ -42,6 +59,8 @@ EOF
 
 ### Step 2: Create `_config.yml`
 
+**IMPORTANT: Do NOT include `collections_dir` in the config.** Setting `collections_dir: .` (or any value) breaks post discovery with the github-pages gem — Jekyll will silently find zero posts and render empty blog sections with no error message. Just omit the key entirely; the default behavior is correct.
+
 ```yaml
 title: "Site Title"
 description: "Site description"
@@ -139,7 +158,7 @@ Four layouts cover most WordPress sites:
 
 **`_includes/footer.html`** — footer links, credit line.
 
-**`_includes/page-header.html`** — background image + gradient overlay, page title, optional subtitle. Reads `page.header_image` for the background.
+**`_includes/page-header.html`** — background image + gradient overlay, page title, optional subtitle. Reads `page.header_image` for the background. **CRITICAL: Do NOT put `{{ content }}` in this include.** The include renders inside the layout, which already renders `{{ content }}`. If the include also renders `{{ content }}`, every page's body will appear twice — once inside the header overlay (broken) and once in the main body. The page-header include should ONLY render `page.title`, `page.subtitle`, and the background image.
 
 **`_includes/comments.html`** — renders comments from `site.data.comments[page.slug]`. Handles nested replies.
 
@@ -271,12 +290,14 @@ Create `_data/comments/<post-slug>.yml` for each post that has comments:
 
 ### Step 12: Create the blog listing page
 
-Create `blog.html` in the root:
+**First, find the original blog listing URL.** Fetch the homepage HTML and extract the Blog nav link href — do NOT guess `/blog/` or `/posts/`. Use whatever URL the original site uses.
+
+Create `blog.html` in the root with `permalink` matching the original URL:
 ```html
 ---
 layout: default
 title: Blog
-permalink: /blog/
+permalink: /posts/   # <-- MUST match the original WP blog listing URL
 header_image: /assets/images/header-blog.jpg
 ---
 {% include page-header.html %}
@@ -296,20 +317,48 @@ header_image: /assets/images/header-blog.jpg
 </div>
 ```
 
-### Step 13: Test locally
+### Step 13: Test locally — page-by-page screenshot comparison
+
+This is the most important step. Do not skip or rush it. Build the site, serve it, and compare every page against the original using headless Chrome screenshots.
 
 ```bash
-bundle install
-bundle exec jekyll serve
-# Visit http://localhost:4000 and verify:
-# - Homepage loads with hero, nav, blog previews, location maps
-# - All nav links work (including dropdown sub-pages)
-# - Blog listing shows all posts with featured images
-# - Individual posts render correctly with code blocks, images, comments
-# - Mobile nav toggle works
-# - Page headers show correct background images with gradient overlay
+# Build and serve (use Docker if Ruby/Jekyll not installed locally)
+docker run --rm -d --network=host -v "$PWD:/srv/jekyll" \
+  --name jekyll-serve jekyll/jekyll:4 \
+  bash -c "bundle install --quiet && bundle exec jekyll serve --host 0.0.0.0 --port 4000"
 ```
 
+**Verification loop for EACH page:**
+
+1. Screenshot the original WordPress page:
+   ```bash
+   google-chrome --headless --disable-gpu --no-sandbox \
+     --screenshot="reference-screenshots/original-<page>.png" \
+     --window-size=1400,3000 "https://original-site.com/<page>/"
+   ```
+
+2. Screenshot the Jekyll version:
+   ```bash
+   google-chrome --headless --disable-gpu --no-sandbox \
+     --screenshot="reference-screenshots/current-<page>.png" \
+     --window-size=1400,3000 "http://localhost:4000/<page>/"
+   ```
+
+3. View both screenshots and compare. Check for:
+   - **Content duplication** — anything appearing twice means a layout/include bug
+   - **Missing content** — empty sections (especially blog post lists) mean posts aren't being found
+   - **Wrong content** — content from another page appearing means layout contamination
+   - **Missing images** — broken image paths
+   - **Layout differences** — wrong spacing, missing sections, wrong order
+
+4. Fix issues, rebuild, re-screenshot, and compare again. Repeat until the page matches.
+
+**Common traps that cause silent failures:**
+- `collections_dir` in `_config.yml` → zero posts found, no error
+- `{{ content }}` in `page-header.html` include → content renders twice on every page
+- Blog listing permalink doesn't match nav link → 404 on blog page
+- Missing `featured_image` in post front matter → empty blog cards on homepage
+
 ### Step 14: Deploy
 
 ```bash
@@ -323,9 +372,11 @@ No GitHub Actions configuration needed. GitHub Pages detects the Jekyll project
 
 ## Common issues
 
-1. **GitHub Pages gem version conflicts** — `github-pages` pins specific gem versions. Don't add gems that conflict.
-2. **Sass deprecation warnings** — GitHub Pages uses an older Sass version. Avoid newer Sass features (`@use`, `@forward`). Stick with `@import`.
-3. **Large files** — GitHub has a 100MB file limit. Compress images before committing.
-4. **Permalink mismatches** — WordPress URLs must match Jekyll permalinks exactly for SEO. Set `permalink:` in front matter to match the original URL path.
-5. **Missing images** — After porting, grep for any remaining `wp-content/uploads` references and replace them.
-6. **Comment slugs** — The comment YAML filename must match the post's `page.slug` (derived from the filename by default). If you set a custom `slug` in front matter, use `comment_slug` to override.
+1. **`collections_dir` breaks post discovery** — Do NOT set `collections_dir: .` (or any value) in `_config.yml`. With the github-pages gem, this silently prevents Jekyll from finding `_posts/`. You'll get zero posts with no error message — blog sections render empty, homepage blog previews show nothing. Just omit the key entirely.
+2. **`{{ content }}` in page-header include causes duplication** — If `_includes/page-header.html` contains `{{ content }}`, every page's body renders twice: once inside the header overlay (mangled, overlapping the hero image) and once in the normal position. The include should only render title and subtitle — never `{{ content }}`.
+3. **Permalink mismatches break navigation** — Extract every URL from the original site's nav links. Set each Jekyll page's `permalink:` to match exactly. Don't guess — fetch the page and read the hrefs. If the WP blog is at `/posts/`, use `permalink: /posts/`, not `/blog/`.
+4. **GitHub Pages gem version conflicts** — `github-pages` pins specific gem versions. Don't add gems that conflict.
+5. **Sass deprecation warnings** — GitHub Pages uses an older Sass version. Avoid newer Sass features (`@use`, `@forward`). Stick with `@import`.
+6. **Large files** — GitHub has a 100MB file limit. Compress images before committing.
+7. **Missing images** — After porting, grep for any remaining `wp-content/uploads` references and replace them.
+8. **Comment slugs** — The comment YAML filename must match the post's `page.slug` (derived from the filename by default). If you set a custom `slug` in front matter, use `comment_slug` to override.

.gitignore

@@ -4,5 +4,6 @@ _site/
 .jekyll-metadata
 Gemfile.lock
 vendor/
+reference-screenshots/
 .bundle/
 audit-screenshots/

_config.yml

@@ -5,7 +5,6 @@ baseurl: ""
 
 permalink: /:categories/:title/
 
-collections_dir: .
 markdown: kramdown
 highlighter: rouge
 

_data/nav.yml

@@ -40,4 +40,4 @@
   url: /ordering/
 
 - title: Blog
-  url: /blog/
+  url: /posts/

_includes/page-header.html

@@ -5,6 +5,5 @@ <h1>{{ page.header_title | default: page.title }}</h1>
     {% if page.subtitle %}
     <p class="page-subtitle">{{ page.subtitle }}</p>
     {% endif %}
-    {{ content }}
   </div>
 </div>

blog.html

@@ -3,7 +3,7 @@
 title: Blog
 header_title: Blog
 header_image: /assets/images/header-blog.jpg
-permalink: /blog/
+permalink: /posts/
 ---
 
 {% include page-header.html %}

index.html

@@ -49,7 +49,7 @@ <h4><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h4>
       </div>
       {% endfor %}
     </div>
-    <a href="{{ '/blog/' | relative_url }}" class="btn">Read More</a>
+    <a href="{{ '/posts/' | relative_url }}" class="btn">Read More</a>
   </div>
 
   <!-- Location Section -->
@@ -75,8 +75,10 @@ <h3>Abu Dhabi</h3>
   <!-- Partner Logos -->
   <div class="container text-center">
     <div class="partner-logos">
-      <a href="https://cgsb.as.nyu.edu"><img src="{{ '/assets/images/logos/cgsb_logo-1.png' | relative_url }}" alt="CGSB"></a>
+      <a href="/"><img src="{{ '/assets/images/logos/gencore-logo-new.png' | relative_url }}" alt="Genomics Core"></a>
+      <a href="http://as.nyu.edu/content/nyu-as/as/departments/biology/research/gsb.html"><img src="{{ '/assets/images/logos/cgsb_logo-1.png' | relative_url }}" alt="CGSB"></a>
       <a href="https://www.nyu.edu"><img src="{{ '/assets/images/logos/nyu.png' | relative_url }}" alt="NYU"></a>
+      <a href="https://cgsb.abudhabi.nyu.edu/"><img src="{{ '/assets/images/logos/ad_cgsb_logo.jpg' | relative_url }}" alt="NYU Abu Dhabi CGSB"></a>
     </div>
   </div>