Skip to content

Better logo#469

Merged
yamcodes merged 12 commits intomainfrom
324-better-logo
Nov 29, 2025
Merged

Better logo#469
yamcodes merged 12 commits intomainfrom
324-better-logo

Conversation

@yamcodes
Copy link
Owner

@yamcodes yamcodes commented Nov 29, 2025

Closes #324

Summary by CodeRabbit

  • New Features

    • Added an "Updated" badge status
    • Integrated a clickable/app-visible ArkEnv icon into the logo
  • Style

    • Switched the primary UI font to Geist and updated monospace usage
    • Redesigned logo layout with icon and refined visual hierarchy
  • Documentation

    • Added a doc section describing the ArkEnv icon symbolism
    • Simplified project README header visuals
  • Tests

    • Updated logo tests to cover icon rendering and adjusted class expectations

✏️ Tip: You can customize this high-level summary in your review settings.

@yamcodes yamcodes linked an issue Nov 29, 2025 that may be closed by this pull request
@changeset-bot
Copy link

changeset-bot bot commented Nov 29, 2025

⚠️ No Changeset found

Latest commit: 1cbd664

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 29, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

The PR replaces the text-based Logo with an image-based Logo using a static /assets/icon.svg, swaps the Inter font for Geist and renames mono font variables, updates code font-family fallbacks, adds an "Updated" icon badge, and inserts a docs section describing the ArkEnv icon.

Changes

Cohort / File(s) Change Summary
Layout & Font
apps/www/app/layout.config.tsx, apps/www/app/layout.tsx, apps/www/app/styles/base.css
Removed text-xl from logo styling; replaced Google Inter with Geist, renamed internal font constants (intergeist, jetbrainsMonomono) and added --font-mono variable; updated HTML className composition and code/pre font-family to use --font-mono.
Logo Component & Tests
apps/www/components/page/logo.tsx, apps/www/components/page/logo.test.tsx
Replaced <code>-based logo with a div containing Next.js Image (/assets/icon.svg) and a span for "ArkEnv"; updated tests to assert presence and src of the img, container classes, and adjusted class expectations (e.g., size-6, container receives custom class).
Docs & Icon Library
apps/www/content/docs/arkenv/index.mdx, apps/www/lib/source.tsx, packages/arkenv/README.md
Added "The ArkEnv icon" docs section with the icon image and symbolic descriptions; introduced IconName union member "Updated" and a runtime branch that renders a Badge labeled "updated"; simplified README hero to show logo.svg and H1.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Pay attention to Next.js Image usage in logo.tsx (sizing, aria-hidden, and interaction with CSS/next/image classNames).
  • Verify tests in logo.test.tsx correctly reflect DOM structure produced by next/image (hydration/SSR differences).
  • Confirm font variable renames (--font-mono) are consistently applied and do not conflict with other styles.

Possibly related PRs

  • Integration docs #154 — Introduces Badge usage and icon handling in apps/www/lib/source.tsx, directly related to adding the "Updated" badge branch.
  • Better logo #469 — Overlaps with logo, asset, font, and docs changes; appears to contain similar edits to component/tests/assets.
  • Docs improvements #155 — Modifies packages/arkenv/README.md hero content, related to the README simplification in this PR.

Suggested labels

arkenv

Poem

🐇 I hopped in with pixels, a nibble and grin,

swapped text for an icon and tuned fonts within.
A gear, a wheel, a lighthouse — a beacon so bright,
ArkEnv now shimmers in true header light. ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)
Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The PR includes an out-of-scope change: adding an 'Updated' badge support in lib/source.tsx appears unrelated to the logo redesign objectives specified in issue #324. Remove the 'Updated' badge logic from lib/source.tsx or clarify its necessity for the logo objective. If needed, move it to a separate PR focused on badge/icon improvements.
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check ❓ Inconclusive The title 'Better logo' is vague and generic. While it relates to changes in the PR, it doesn't clearly convey what specifically makes the logo 'better' or the main scope of changes (font switching, logo redesign, icon asset). Use a more descriptive title that specifies the main change, such as 'Replace Inter font with Geist and redesign logo component with icon' or 'Update logo component and fonts for improved branding'.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The PR addresses the core objective of creating a better logo by redesigning the Logo component with a new icon asset, updating typography fonts, and adding documentation. The logo is now usable as an icon across multiple contexts as requested in issue #324.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64a04ed and 1cbd664.

📒 Files selected for processing (2)
  • apps/www/lib/source.tsx (2 hunks)
  • packages/arkenv/README.md (1 hunks)

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.

@vercel
Copy link

vercel bot commented Nov 29, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
arkenv Ready Ready Preview Comment Nov 29, 2025 10:13pm

@yamcodes yamcodes changed the title feat: Integrate an SVG icon into the Logo component, refactor its imp… Better logo Nov 29, 2025
@github-actions github-actions bot added www Improvements or additions to arkenv.js.org tests This issue or PR is about adding, removing or changing tests labels Nov 29, 2025
@github-actions github-actions bot added the docs Improvements or additions to documentation label Nov 29, 2025
@yamcodes yamcodes marked this pull request as ready for review November 29, 2025 22:05
Copy link
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: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
apps/www/lib/source.tsx (1)

9-26: Perfect. I've verified all the concerns. Let me summarize the findings:

Verification Results:

  1. IconName type issue confirmed: IconName (line 9) only includes "New" but the icon handler also accepts "Updated" (line 23-26). This creates a type-safety gap—call sites using autocomplete<IconName> won't see "Updated" as a valid option even though the runtime handles it.
  2. "New" is actively used: Found in apps/www/content/docs/arkenv/how-to/reuse-schemas.mdx (line 4)
  3. "Updated" is not used in docs: No MDX files reference the "Updated" icon, despite the handler existing
  4. Badge markup duplication confirmed: Lines 21-22 and 23-26 are identical except for the label text

The original review comment's assessment is correct. Here's the rewritten version:


Add "Updated" to IconName type union to match runtime implementation

The IconName type (line 9) only includes "New", but the icon handler accepts and renders "Updated" (lines 23–26). This type-implementation mismatch prevents call sites typed with autocomplete<IconName> from safely using the "Updated" value, even though it's fully supported at runtime.

Update the type:

export type IconName = keyof typeof icons | "New" | "Updated";

The duplicate Badge markup (lines 21–22 and 23–26) could also be refactored, but that's optional.

🧹 Nitpick comments (2)
apps/www/components/page/logo.tsx (1)

1-23: Logo component matches branding goals and stays accessible

The new Logo keeps a stable API while rendering a decorative icon plus text: alt="" with aria-hidden="true" and adjacent “ArkEnv” text is a good accessibility pattern, and className is correctly merged with cn. Reusing /assets/icon.svg here to match layout metadata and docs keeps branding consistent.

If you find yourself touching the icon path often, a small shared constant for /assets/icon.svg could be handy, but that’s optional.

apps/www/components/page/logo.test.tsx (1)

10-50: Tests track the new Logo behavior; consider small robustness & a11y-focused tweaks

The tests line up well with the new Logo structure (container + decorative img + text) and validate both the text and icon path. Using document.querySelector("img") is reasonable here since the icon is explicitly aria-hidden, so a11y queries won’t see it.

Two optional improvements:

  • Guard against nulls when using parentElement / querySelector("img") (e.g., assert they’re not null first, or use closest("div")) to keep the tests resilient if the markup changes and to satisfy stricter type-checking.
  • Add an assertion that the img remains decorative (e.g., expect(img).toHaveAttribute("aria-hidden", "true") and/or expect(img).toHaveAttribute("alt", "")), which aligns with the “a11y-first” testing guidance and locks in the intended behavior more than some of the styling checks.

Based on learnings, this keeps the tests focused on meaningful behavior while still catching regressions.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 900dc8b and 64a04ed.

⛔ Files ignored due to path filters (2)
  • apps/www/public/assets/icon.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • apps/www/app/layout.config.tsx (1 hunks)
  • apps/www/app/layout.tsx (2 hunks)
  • apps/www/app/styles/base.css (1 hunks)
  • apps/www/components/page/logo.test.tsx (1 hunks)
  • apps/www/components/page/logo.tsx (2 hunks)
  • apps/www/content/docs/arkenv/index.mdx (1 hunks)
  • apps/www/lib/source.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

**/*.{ts,tsx}: Prefer type over interface for type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverage const type parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypes error)
Use as const where appropriate for immutable values (useAsConstAssertion error)
Don't reassign function parameters (noParameterAssign error)
Place default parameters last in function signatures (useDefaultParameterLast error)
Always initialize enum values (useEnumInitializers error)
Declare one variable per statement (useSingleVarDeclarator error)
Avoid unnecessary template literals (noUnusedTemplateLiteral error)
Prefer Number.parseInt over global parseInt (useNumberNamespace error)
Use kebab-case for TypeScript filenames (e.g., create-env.ts)
Use camelCase for function names (e.g., createEnv)
Use PascalCase for type names (e.g., ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
Use ArkEnvError for environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type

Files:

  • apps/www/components/page/logo.test.tsx
  • apps/www/components/page/logo.tsx
  • apps/www/app/layout.config.tsx
  • apps/www/lib/source.tsx
  • apps/www/app/layout.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

Use self-closing JSX elements (useSelfClosingElements error)

Files:

  • apps/www/components/page/logo.test.tsx
  • apps/www/components/page/logo.tsx
  • apps/www/app/layout.config.tsx
  • apps/www/lib/source.tsx
  • apps/www/app/layout.tsx
**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

Co-locate tests with components: Component.tsx next to Component.test.tsx

**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies in unit tests
Keep unit tests fast with execution under 100ms per test
Co-locate unit tests with source files using naming convention: source.tssource.test.ts
Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Query component tests by role, name, label, and text using accessibility-first selectors
Use Vitest as the test framework for unit and integration tests
Use Testing Library with user-event for real user simulation in component tests

Unit tests should be fast (< 100ms per test) and located alongside source files with .test.ts suffix, with mocked external dependencies

Files:

  • apps/www/components/page/logo.test.tsx
apps/www/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)

apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.

Files:

  • apps/www/components/page/logo.test.tsx
  • apps/www/components/page/logo.tsx
  • apps/www/app/layout.config.tsx
  • apps/www/lib/source.tsx
  • apps/www/app/layout.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Use the main function createEnv(schema) or default import arkenv to create validated environment objects with TypeScript type inference from ArkType schemas
Use built-in validators (host, port, url, email) from src/types.ts when available instead of writing custom validation logic
Provide descriptive variable names that indicate purpose and format in environment schema definitions
Group related environment variables in logical schemas for better organization and maintainability
Provide default values for optional environment variables using ArkType's default value syntax (e.g., "boolean = false")

Files:

  • apps/www/components/page/logo.test.tsx
  • apps/www/components/page/logo.tsx
  • apps/www/app/layout.config.tsx
  • apps/www/lib/source.tsx
  • apps/www/app/layout.tsx
**/*.{test,integration.test}.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use Vitest's describe/it structure with both success and failure test cases in all test files

Files:

  • apps/www/components/page/logo.test.tsx
🧠 Learnings (6)
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.test.{ts,tsx} : Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details

Applied to files:

  • apps/www/components/page/logo.test.tsx
📚 Learning: 2025-11-24T16:04:00.957Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-11-24T16:04:00.957Z
Learning: Applies to **/*.test.{ts,tsx} : Co-locate tests with components: `Component.tsx` next to `Component.test.tsx`

Applied to files:

  • apps/www/components/page/logo.test.tsx
📚 Learning: 2025-11-29T07:59:59.399Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-29T07:59:59.399Z
Learning: Applies to **/packages/arkenv/**/*.{test,integration.test}.{ts,tsx} : Save and restore original `process.env` in `beforeEach`/`afterEach` hooks to avoid test pollution

Applied to files:

  • apps/www/components/page/logo.test.tsx
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.test.{ts,tsx} : Query component tests by role, name, label, and text using accessibility-first selectors

Applied to files:

  • apps/www/components/page/logo.test.tsx
📚 Learning: 2025-11-29T08:57:24.044Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: examples/with-bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-29T08:57:24.044Z
Learning: Applies to examples/with-bun-react/**/*.test.{ts,tsx,js,jsx} : Use test syntax from `bun:test` with `test` and `expect` functions

Applied to files:

  • apps/www/components/page/logo.test.tsx
📚 Learning: 2025-11-24T16:04:36.939Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.939Z
Learning: Applies to **/*.integration.test.{ts,tsx} : Test how multiple units (components, hooks, functions) work together without mocking their interactions in integration tests

Applied to files:

  • apps/www/components/page/logo.test.tsx
🧬 Code graph analysis (4)
apps/www/components/page/logo.test.tsx (1)
apps/www/components/page/logo.tsx (1)
  • Logo (10-24)
apps/www/components/page/logo.tsx (1)
apps/www/lib/utils/cn.ts (1)
  • cn (4-6)
apps/www/app/layout.config.tsx (1)
apps/www/components/page/logo.tsx (1)
  • Logo (10-24)
apps/www/lib/source.tsx (1)
apps/www/components/ui/badge.tsx (1)
  • Badge (29-31)
⏰ 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). (2)
  • GitHub Check: test-e2e (e2e)
  • GitHub Check: test-e2e (a11y)
🔇 Additional comments (4)
apps/www/app/styles/base.css (1)

12-17: Code font stack correctly wired to --font-mono

Using var(--font-mono) here lines up with the JetBrains Mono font variable defined in layout.tsx, while keeping the existing fallbacks intact. Looks good.

apps/www/app/layout.config.tsx (1)

11-16: Nav title usage matches new Logo API

Using <Logo className="mb-1" /> keeps the layout-only spacing here and leaves typography/layout details inside Logo, which is a good separation of concerns.

apps/www/content/docs/arkenv/index.mdx (1)

12-23: Icon docs and asset usage look consistent and accessible

The new section clearly explains the icon and uses the same /assets/icon.svg path as the layout metadata and Logo component, with a descriptive alt and fixed dimensions. No issues here.

apps/www/app/layout.tsx (1)

7-29: Font variables and icon metadata are wired coherently

Defining JetBrains Mono with variable: "--font-mono" and applying mono.variable on <html> lines up cleanly with the code, pre font stack in base.css. Updating metadata.icons to /assets/icon.svg keeps the favicon/logo asset consistent across layout, logo, and docs.

Also applies to: 31-36

@github-actions github-actions bot added the arkenv Changes to the `arkenv` npm package. label Nov 29, 2025
@yamcodes yamcodes merged commit 37e69cd into main Nov 29, 2025
13 of 15 checks passed
@yamcodes yamcodes deleted the 324-better-logo branch November 29, 2025 22:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

arkenv Changes to the `arkenv` npm package. docs Improvements or additions to documentation tests This issue or PR is about adding, removing or changing tests www Improvements or additions to arkenv.js.org

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Better logo

1 participant