Skip to content

Add Pro sidebar link and split nav wordmarks into icon + word#103

Merged
kixelated merged 2 commits into
mainfrom
claude/lucid-jemison-b7b415
Jun 3, 2026
Merged

Add Pro sidebar link and split nav wordmarks into icon + word#103
kixelated merged 2 commits into
mainfrom
claude/lucid-jemison-b7b415

Conversation

@kixelated
Copy link
Copy Markdown
Collaborator

What

Adds a Pro link at the bottom of the sidebar and reworks the nav wordmarks so each icon can animate independently.

  • Pro link: a green rocket icon (reused from moq/doc) + a white "Pro" wordmark (derived from the moq-pro logo). Links to pro.moq.dev on live and pro.moq.wtf on staging, selected via import.meta.env.MODE.
  • Split wordmarks: each combined nav SVG (demo / blog / docs / github / discord) is split into separate -icon and -word files. Paths keep their original coordinates — only the viewBox is cropped — so the artwork is pixel-identical to before.
  • Hover effect: every nav icon now rotates -6deg on hover (group-hover:-rotate-6) while its word stays put.
  • Spacing fix: re-centered the Discord viewBox (its source art sat high in the canvas, leaving a gap before Pro) so the column spacing is even.

Why

The sidebar needed a Pro entry, and the existing wordmarks baked the icon and word into a single SVG — so an icon-only hover animation wasn't possible without splitting them.

Notes for reviewers

  • The old combined SVGs (demo.svg, etc.) are removed; git shows them as renames to the -word.svg files.
  • All icon/word splits were derived by measuring each path's getBBox() and cropping at the gap between the icon and the word, so no path data was hand-edited.
  • The rocket body was recolored from white to brand green (#00be2d) to match the sibling icons; the "Pro" wordmark was recolored crimson → white with the black stroke removed.
  • bun run check (Biome + tsc) passes.

🤖 Generated with Claude Code

Add a "Pro" link at the bottom of the sidebar: a green rocket icon
(reused from moq/doc) plus a white "Pro" wordmark (derived from the
moq-pro logo). It points to pro.moq.dev on live and pro.moq.wtf on
staging, switched via import.meta.env.MODE.

To support an icon-only hover effect, split each combined nav wordmark
(demo/blog/docs/github/discord) into separate `-icon` and `-word` SVGs.
Each path keeps its original coordinates; only the viewBox is cropped,
so the artwork is pixel-identical. Every nav icon now rotates -6deg on
hover (group-hover:-rotate-6) while its word stays put.

Also recenter the Discord viewBox (its source art sat high in the
canvas, leaving a gap before Pro) so the column has even spacing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 3, 2026

Review Change Stack

Warning

Review limit reached

@kixelated, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 57 minutes and 13 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 601f967d-cbb0-48b8-b5a5-4720cdff8d6d

📥 Commits

Reviewing files that changed from the base of the PR and between ae5706b and dc4e552.

📒 Files selected for processing (1)
  • src/layouts/global.astro

Walkthrough

The src/layouts/global.astro component now derives a proUrl constant from the deployment mode (import.meta.env.MODE) to route Pro navigation to the correct domain for staging versus production environments. The site header navigation markup is refactored to replace previous icon/button layouts with new grouped "word + icon" SVG elements for Demo, Blog, Docs, GitHub, and Discord, and the Pro link target is wired to the environment-aware proUrl variable instead of a fixed hardcoded URL.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the two main changes: adding a Pro sidebar link and splitting navigation wordmarks into separate icon and word components.
Description check ✅ Passed The description is comprehensive and directly related to the changeset, detailing the Pro link implementation, SVG splitting approach, hover effects, and spacing fixes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch claude/lucid-jemison-b7b415

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@src/layouts/global.astro`:
- Around line 98-99: Update the img element that references
"/layout/github-word.svg" so its alt attribute uses correct brand casing: change
alt="Github" to alt="GitHub" to fix the accessibility/user-facing text on the
<img> with src "/layout/github-word.svg".
🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d16892cb-c001-4b0d-a999-c5dae968186b

📥 Commits

Reviewing files that changed from the base of the PR and between dab5317 and ae5706b.

⛔ Files ignored due to path filters (12)
  • public/layout/blog-icon.svg is excluded by !**/*.svg
  • public/layout/blog-word.svg is excluded by !**/*.svg
  • public/layout/demo-icon.svg is excluded by !**/*.svg
  • public/layout/demo-word.svg is excluded by !**/*.svg
  • public/layout/discord-icon.svg is excluded by !**/*.svg
  • public/layout/discord-word.svg is excluded by !**/*.svg
  • public/layout/docs-icon.svg is excluded by !**/*.svg
  • public/layout/docs-word.svg is excluded by !**/*.svg
  • public/layout/github-icon.svg is excluded by !**/*.svg
  • public/layout/github-word.svg is excluded by !**/*.svg
  • public/layout/pro.svg is excluded by !**/*.svg
  • public/layout/rocket.svg is excluded by !**/*.svg
📒 Files selected for processing (1)
  • src/layouts/global.astro

Comment thread src/layouts/global.astro Outdated
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kixelated kixelated enabled auto-merge (squash) June 3, 2026 23:07
@kixelated kixelated merged commit 9006617 into main Jun 3, 2026
1 check passed
@kixelated kixelated deleted the claude/lucid-jemison-b7b415 branch June 3, 2026 23:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant