Feature/banner #376
Feature/banner #376
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a customizable banner header feature to the catalog pages by copying banner CSS and image assets from allencell.org. The banner displays a title, optional subtitle, and optional background image.
Key Changes:
- Created a new
Headercomponent with configurable title, subtitle, and background image - Added header configuration support in the CMS for catalog pages
- Modified layout structure to support optional header rendering
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
static/admin/config.yml |
Added header configuration fields (title, subtitle, background) to CMS |
src/utils/mediaUtils.ts |
Added utility function to extract image source from Gatsby file nodes |
src/templates/normal-catalog.tsx |
Integrated header component with frontmatter data and GraphQL query |
src/templates/disease-catalog.tsx |
Integrated header component with frontmatter data and GraphQL query |
src/style/layout.module.css |
Refactored CSS selectors from .container to .content for proper scoping |
src/style/banner.module.css |
Added banner styling with hardcoded background image fallback |
src/pages/index.md |
Added header configuration to normal catalog page |
src/pages/disease-catalog/index.md |
Added header configuration to disease catalog page |
src/components/Layout.tsx |
Modified to accept and render optional header prop |
src/components/Header.tsx |
Created new header component with banner styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…log-2.1 into feature/banner
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/components/Header.tsx
Outdated
| bannerContainer, | ||
| container, | ||
| titleContainer, | ||
| } = require("../style/banner.module.css"); |
There was a problem hiding this comment.
The imported CSS module includes titleContainer but this class is not defined in banner.module.css. Either remove this unused import or add the missing CSS class definition.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
| title: About the collection | ||
| header: | ||
| title: Disease Collection Cell Catalog | ||
| subtitle: "" |
There was a problem hiding this comment.
nit: without a subtitle in the banner feels a bit empty, but if that's the intended design, all good by me!
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const DiseaseCatalog = ({ data }: QueryResult) => { | ||
| const { markdownRemark: post } = data; | ||
| const imageFile = post.frontmatter.header?.background; | ||
| const backgroundImageUrl = getImageSrcFromFileNode(imageFile!); |
There was a problem hiding this comment.
The non-null assertion operator (!) could cause a runtime error if imageFile is undefined. This is likely since background is marked as optional in the header configuration. Use optional chaining instead: const backgroundImageUrl = imageFile ? getImageSrcFromFileNode(imageFile) : undefined; to match the pattern used in normal-catalog.tsx.
| const backgroundImageUrl = getImageSrcFromFileNode(imageFile!); | |
| const backgroundImageUrl = imageFile ? getImageSrcFromFileNode(imageFile) : undefined; |
Problem
The site isnt going to be iframed so it needs it own banner
Solution
I copied over the banner css and image from allencell.org
Type of change
Please delete options that are not relevant.
Steps to Verify:
Screenshots (optional):