feat(ag-p04): footer component — always-dark, four columns, halo, links#860
Conversation
📝 WalkthroughSummary by CodeRabbitBug Fixes
WalkthroughThe PR simplifies the footer's "Catalogues" column from a grid layout with icons to plain text links, removing icon-based rendering and corresponding grid CSS whilst updating link display styling. The changelog documents this Phase 04 footer refinement. ChangesFooter Component & Documentation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Template check passed after update. Thanks for fixing the PR description. |
🔍 Reviewer Summary for PR #860CI Status: ✅ Recommendations
|
There was a problem hiding this comment.
Code Review
This pull request simplifies the footer component by removing the icon grid layout and rendering the catalogue categories as plain block-level links. This includes removing the Icon component import and associated CSS styles. The reviewer noted that while the PR description specifies a three-column layout, the current implementation still renders four columns, and suggested consolidating the "Catalogues" and "More" columns into a single "Categories" column.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| {catalogueCats.map((cat) => ( | ||
| <a href={`${base}c/${cat.id}/`}>{cat.label}</a> | ||
| ))} |
There was a problem hiding this comment.
The PR title and description specify a three-column link layout (e.g., "three columns, halo, links" and "Three columns visible on desktop"). However, the current implementation renders four columns of links: "Catalogues", "More", "Learn", and "Reference".
If the intention is to have three columns, you can consolidate "Catalogues" and "More" into a single "Categories" column using the full CATEGORIES array directly, and remove the "More" column.
{CATEGORIES.map((cat) => (
<a href={`${base}c/${cat.id}/`}>{cat.label}</a>
))}
|
The footer is intentionally kept at four columns to match |
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
CHANGELOG.md (1)
1-17:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winPlease add the missing required
versionfrontmatter field.Tiny metadata gremlin here: this changelog frontmatter is missing
version, which is required for Markdown files in this repo.Quick patch
title: "Changelog" description: "All notable changes to this project, formatted per Keep a Changelog 1.1.0 and Semantic Versioning" file_type: "documentation" +version: "1.0.0" created_date: "2025-09-20" last_updated: "2026-06-06"As per coding guidelines, “All
.mdfiles in this repository should include YAML frontmatter with required fields: file_type, title, description, version, last_updated, owners, tags, status, stability, domain”.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@CHANGELOG.md` around lines 1 - 17, The YAML frontmatter in CHANGELOG.md is missing the required version field; update the frontmatter block at the top of the file (the triple-dashed header containing title, description, file_type, last_updated, owners, tags, status, stability, domain) to add a version: "<semantic-version-or-appropriate-tag>" entry (e.g., 1.0.0 or a repo-appropriate value) so the file includes all required fields per the repository guideline.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/src/components/AwesomeGithub/AwesomeGithubFooter.astro`:
- Around line 6-7: Footer currently splits CATEGORIES into catalogueCats and
moreCats (const catalogueCats = CATEGORIES.slice(0, 4); const moreCats =
CATEGORIES.slice(4);) which renders four columns and a "More" column; change the
slicing and render logic to produce exactly three columns instead: create three
groups from CATEGORIES (e.g. first two/next two/last items as appropriate) or
redistribute items so only three column arrays are produced, remove the separate
"More" column rendering, and update the label for the Learn column from "Learn"
to "Learn & Cook" in AwesomeGithubFooter.astro so the component renders three
columns with the corrected heading.
---
Outside diff comments:
In `@CHANGELOG.md`:
- Around line 1-17: The YAML frontmatter in CHANGELOG.md is missing the required
version field; update the frontmatter block at the top of the file (the
triple-dashed header containing title, description, file_type, last_updated,
owners, tags, status, stability, domain) to add a version:
"<semantic-version-or-appropriate-tag>" entry (e.g., 1.0.0 or a repo-appropriate
value) so the file includes all required fields per the repository guideline.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 7de6f915-a4e5-4201-a7ee-4c6432cd713c
📒 Files selected for processing (2)
CHANGELOG.mdwebsite/src/components/AwesomeGithub/AwesomeGithubFooter.astro
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Unified Labeling, Status, and Type Assignment
- GitHub Check: validate
- GitHub Check: readme-regen
- GitHub Check: Testing
- GitHub Check: coderabbit-gate
- GitHub Check: check
🧰 Additional context used
📓 Path-based instructions (2)
**/*.md
📄 CodeRabbit inference engine (.github/instructions/markdown.instructions.md)
**/*.md: Use one H1 (#) per file; keep heading levels sequential (never skip from H2 to H4)
Use fenced code blocks with explicit language tags (bash,yaml,markdown, etc.)
Keep links relative for in-repo files; verify they resolve before merging
Use1.for ordered lists and-for unordered lists
Keep all wording in UK English (optimise, organisation, colour, behaviour, analyse)
Do not add areferences:frontmatter field — use inline links or a footer section instead
Blank lines before and after headings, code blocks, and block-level elements
Maximum line length: 120 characters (soft limit; prefer wrapping at natural sentence boundaries)
All.mdfiles in this repository should include YAML frontmatter with required fields: file_type, title, description, version, last_updated, owners, tags, status, stability, domain
Every image (![]()) must have descriptive alt text explaining the image's purpose, not its appearance. Empty alt (![ ]()) is valid only for purely decorative images
Link text must describe the destination — never use 'click here', 'read more', or bare URLs as visible text
Every table must have a header row (| Header |). Avoid merged cells
Use headings to communicate document structure, not for visual styling
Do not rely on colour alone to convey information in diagrams or callout blocks
Mermaid diagrams must includeaccTitleandaccDescrattributes for accessibility
Specify language in frontmatter; use plain language, avoid jargon where possible
Files:
CHANGELOG.md
CHANGELOG.md
⚙️ CodeRabbit configuration file
CHANGELOG.md: Review CHANGELOG.md:
- Confirm entries follow Keep a Changelog 1.1.0 format.
- Each entry under [Unreleased] must include a PR link and issue link.
- Verify entries use the correct section headings (Added, Changed, Fixed, Deprecated, Removed, Security, Documentation, Performance).
- Check UK English spelling throughout.
Files:
CHANGELOG.md
| const catalogueCats = CATEGORIES.slice(0, 4); | ||
| const moreCats = CATEGORIES.slice(4); |
There was a problem hiding this comment.
Footer still renders four columns instead of the required three.
Fun polish, but we’re still one column over spec: More remains, and Learn isn’t titled Learn & Cook.
That misses the agreed Phase 04 acceptance criteria.
Suggested tidy fix
-const catalogueCats = CATEGORIES.slice(0, 4);
-const moreCats = CATEGORIES.slice(4);
+const catalogueCats = CATEGORIES;- <!-- Column 1: Catalogues (Browse categories, first 4) -->
+ <!-- Column 1: Catalogues -->
<div class="foot-col">
<h5>Catalogues</h5>
{catalogueCats.map((cat) => (
<a href={`${base}c/${cat.id}/`}>{cat.label}</a>
))}
</div>
- <!-- Column 2: More (remaining categories) -->
- <div class="foot-col">
- <h5>More</h5>
- {moreCats.map((cat) => (
- <a href={`${base}c/${cat.id}/`}>{cat.label}</a>
- ))}
- </div>
-
- <!-- Column 3: Learn -->
+ <!-- Column 2: Learn & Cook -->
<div class="foot-col">
- <h5>Learn</h5>
+ <h5>Learn & Cook</h5>
<a href={`${base}learn/`}>Learning Centre</a>
<a href={`${base}cookbook/`}>Cookbook</a>
<a href={`${base}onboarding/`}>Onboarding journey</a>
<a href={`${base}getting-started/`}>Getting started</a>
</div>
- <!-- Column 4: Reference -->
+ <!-- Column 3: Reference -->Also applies to: 27-41, 43-49
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/src/components/AwesomeGithub/AwesomeGithubFooter.astro` around lines
6 - 7, Footer currently splits CATEGORIES into catalogueCats and moreCats (const
catalogueCats = CATEGORIES.slice(0, 4); const moreCats = CATEGORIES.slice(4);)
which renders four columns and a "More" column; change the slicing and render
logic to produce exactly three columns instead: create three groups from
CATEGORIES (e.g. first two/next two/last items as appropriate) or redistribute
items so only three column arrays are produced, remove the separate "More"
column rendering, and update the label for the Learn column from "Learn" to
"Learn & Cook" in AwesomeGithubFooter.astro so the component renders three
columns with the corrected heading.
Feature Pull Request
Linked issues
Closes #859
Changelog
Added
Changed
Fixed
Removed
Risk Assessment
Risk Level: Low
Potential Impact:
This change only affects the site footer in the Awesome GitHub layout. A regression would be visual or navigational, with limited blast radius.
Mitigation Steps:
How to Test
Prerequisites
website/node_modulesinstalled vianpm ci.Test Steps
npm --prefix website run buildand confirm the Astro build completes.Expected Results
The footer stays
#090909in both themes, the cyan halo is visible, and the link columns render as plain lists with the expected hover colour.Edge Cases to Verify
Checklist (Global DoD / PR)
last_updatedandversion)