feat(v1): Footer (Phase 1 - Foundation PR 6)#484
Merged
Conversation
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
PR ScreenshotsHomeLight
Dark
Instrumentation ListLight
Dark
Detail — Details tabLight
Dark
Detail — Telemetry tabLight
Dark
Detail — Configuration tabLight
Dark
Collector ListLight
Dark
Collector DetailLight
Dark
Captured from |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR advances the V1_REDESIGN chrome by replacing the legacy footer placeholder in <V1App /> with a Docsy-style v1 footer plus a CNCF callout band, along with the scoped CSS and inline SVG icon set needed to mirror opentelemetry.io’s footer patterns.
Changes:
- Swap
<Footer />inV1Appfor<CncfCallout />and<FooterV1 />. - Add v1-scoped CSS partials for the CNCF callout and footer, and wire them into
src/v1/styles/index.css. - Add footer/callout components, tests, and the required inline SVG icons; update the Phase 1 planning doc snapshot.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/84-ui-ux-design/NEXT-STEPS.md | Updates planning snapshots / PR checklist status for Phase 1 work. |
| ecosystem-explorer/src/v1/V1App.tsx | Mounts the new CNCF callout + v1 footer instead of the legacy footer placeholder. |
| ecosystem-explorer/src/v1/styles/index.css | Imports the new v1 chrome CSS partials (callout + footer). |
| ecosystem-explorer/src/v1/styles/footer.css | Adds Docsy-style footer styling (dark surface, grid layout, link/icon rules). |
| ecosystem-explorer/src/v1/styles/cncf-callout.css | Adds styling for the CNCF callout band above the footer. |
| ecosystem-explorer/src/v1/components/layout/footer.tsx | Implements <FooterV1 /> and link inventory with icon rendering. |
| ecosystem-explorer/src/v1/components/layout/footer.test.tsx | Verifies link inventory, external-link behavior, and copyright markup. |
| ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx | Implements the CNCF incubating-project statement + wordmark rendering. |
| ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx | Verifies CNCF copy, link target behavior, and accessible naming/region. |
| ecosystem-explorer/src/v1/components/icons/trademark-icon.tsx | Adds inline trademark SVG icon (Font Awesome). |
| ecosystem-explorer/src/v1/components/icons/stack-overflow-icon.tsx | Adds inline Stack Overflow SVG icon (Font Awesome). |
| ecosystem-explorer/src/v1/components/icons/slack-icon.tsx | Adds inline Slack SVG icon (Font Awesome). |
| ecosystem-explorer/src/v1/components/icons/mastodon-icon.tsx | Adds inline Mastodon SVG icon (Font Awesome). |
| ecosystem-explorer/src/v1/components/icons/github-icon.tsx | Adds inline GitHub SVG icon (Font Awesome). |
| ecosystem-explorer/src/v1/components/icons/cncf-logo.tsx | Adds inline CNCF wordmark SVG component for the callout. |
| ecosystem-explorer/src/v1/components/icons/bluesky-icon.tsx | Adds inline Bluesky SVG icon (Font Awesome). |
Comments suppressed due to low confidence (1)
ecosystem-explorer/src/v1/components/layout/footer.tsx:171
- The CC BY 4.0 link opens in a new tab but sets
rel="noopener"only. Elsewhere in the repo, external links withtarget="_blank"consistently userel="noopener noreferrer"; addingnoreferrerhere would align with that pattern and improve security/privacy protections.
<a
href="https://creativecommons.org/licenses/by/4.0"
target="_blank"
rel="noopener"
>
CC BY 4.0
</a>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
# Conflicts: # ecosystem-explorer/src/v1/styles/index.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Swaps the legacy
<Footer />placeholder in<V1App />for the v1 chrome. Lands the two-cluster Docsy-style footer plus the OTel-purple CNCF callout above it.Contributes to #84.
What's in this PR
<FooterV1 />atsrc/v1/components/layout/footer.tsxmirrors opentelemetry.io's.td-footer. Dark surface in both themes per upstream's.td-box--darkrule, with OTel-orange#f5a800hover instead of Docsy's auto-mixed blue.<CncfCallout />atsrc/v1/components/layout/cncf-callout.tsx. OTel-purpletd-box--secondaryband above the footer with the upstream CNCF wordmark inlined as<CncfLogo />(usesrole="img"plusaria-labelsince it's not inside a labeled link) and a Linux Foundation attribution linesrc/v1/styles/footer.cssandsrc/v1/styles/cncf-callout.css. Both use.td-footer__*/.td-cncf-callout__*BEM hierarchies that only match elements rendered by<V1App />, so they stay inert in the legacy bundle..td-footer__containerand.td-cncf-callout__containerboth cap atmax-width: 1320px(upstream Bootstrap.container-xxl)<V1App />drops the legacy<Footer />import + JSX and mounts<CncfCallout />+<FooterV1 />instead. JSDoc updated to drop the PR 6 placeholder notesrc/v1/styles/index.csspicks up the two new@importlines plus a comment block listing every v1 chrome partialWhat's not in this PR
<V1App />(HomeV1, list page, detail page, etc.) belong to their respective phase PRs. Only the footer swap is hereVerification
bun run typecheckcleanbun run lintcleanbun run test src/v1/components/layout/footer.test.tsx src/v1/components/layout/cncf-callout.test.tsxpasses 11/11bun run testpasses 848/848 across 87 filesbun run format -- src/v1 projectsno-op on in-scope paths