fix(ui): improve logo by vladh · Pull Request #1770 · npmx-dev/npmx.dev

vladh · 2026-02-28T22:50:24Z

🔗 Linked issue

It was easier to just create the PR to demonstrate the fix — hope that's okay.

🧭 Context

The logo, on the homepage, and in the navigation, had various issues. Most significantly, the kerning and spacing seemed wrong to me.

📚 Description

I've create a new logo SVG and applied it throughout the website. Here are the benefits, which are visible in the below screenshots. Please look at the screenshots in full size to be able to see the differences properly.

The logo is now an SVG made up of <path>s, ensuring the logo is rendered identically across all browsers.
The kerning is now consistent between the letter pairs of “npmx”. Previously, the kerning for the {np} pair was too wide, and the kerning for the other pairs was too tight.
The slash is now less tall, leaving more space for the “npmx” text to stand out, especially as small sizes.
The environment text (“dev”, “canary” etc) is now a little bit more spaced out from the “npmx”, avoiding visual clashing.
The space between the “./” and “npmx” is now smaller, tying the “./” mark into the text more, and also making the logo more consistent with the OpenGraph image (see below).
On mobile, the left edge of the “./” logo is now correctly aligned with the content underneath.
On non-homepage pages, the “npmx” text and the environment text are now larger and more readable.
On non-heomapge pages, the logo is now properly spaced away from the search box.
There is now both an AppLogo and an AppMark component, making it easier to use either the full logo, or just the “./” mark.
AppLogo now contains the full logo, allowing it to be more easily used across the website.
AppLogo previously incorrectly had a background colour and rounded corners, which has been fixed.
The logo.svg file has been renamed to logo-icon.svg, creating space for the new logo.svg which contains the full logo, and logo-mark.svg which contains just the “./” mark on a transparent background. This should be handy for future use, in eg marketing materials.

vercel · 2026-02-28T22:50:28Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 1, 2026 8:03pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 1, 2026 8:03pm
npmx-lunaria	Ignored		Mar 1, 2026 8:03pm

codecov · 2026-02-28T22:52:23Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-02-28T22:53:12Z

📝 Walkthrough

Walkthrough

Adds a new AppMark component and updates header and index layouts to use AppMark on mobile while showing a larger AppLogo on desktop; removes the textual “npmx” label from header. Replaces AppLogo SVG geometry (paths and viewBox) and removes background rect/text. Swaps pwa-assets config entries to reference logo-icon.svg. Tests updated to include AppMark accessibility checks and to reflect the renamed asset in the file-tree fixture.

Possibly related PRs

feat: polish ui #971: Modifies AppHeader.vue and AppLogo.vue, touching logo markup, SVG styling and header layout.
fix: make the / in the logo not selectable #1343: Changes how the logo’s slash (“/”) is rendered in AppLogo (text vs path), directly related to the SVG/logo geometry updates.
feat: put env string next to 'npmx' #657: Updates header/logo area and badge placement, overlapping header/layout concerns addressed by this PR.

Suggested labels

front, a11y

Suggested reviewers

danielroe
alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description comprehensively describes the logo improvements and design changes made, directly relating to the changeset which updates AppHeader.vue, AppLogo.vue, adds AppMark.vue, modifies app/pages/index.vue, updates configuration files, and adds corresponding tests.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.}

danielroe · 2026-03-01T18:26:57Z

would you mind resolving the conflict? 🙏

vladh · 2026-03-01T18:36:54Z

@danielroe Fixed!

7a0fc21 updated public/logo.svg but not public-staging/logo.svg or public-dev/logo.svg. I'm assuming the intent was to also update the latter two, so I updated those to be the same as the public/logo.svg that was created in 7a0fc21.

Then, as before, I renamed public{-dev,-staging}/logo.svg to public{-dev,-staging}/logo-icon.svg. Now, public/logo.svg is the new full logo that I created.

vladh · 2026-03-01T18:42:12Z

The test failures seem unrelated?

malloc_consolidate(): invalid chunk size

danielroe · 2026-03-01T19:03:12Z

seems a takumi/og image flakiness (cc: @harlan-zw)

danielroe · 2026-03-01T19:47:00Z

I'm sorry! reverted the og image change due to the flakiness (was also apparent per-route and on other PRs ...)

vladh · 2026-03-01T19:57:11Z

seems a takumi/og image flakiness (cc: @harlan-zw)

Assuming it is an issue with takumi as @danielroe said, I investigated the aforementioned message: malloc_consolidate(): invalid chunk size.

Here's what the dependency chain looks like:

npmx.dev (JS)
- @takumi-rs/core (JS) 0.69.5 (source)
  - takumi (Rust) 0.69.5
    - mimalloc_rust (Rust) 0.1.48 (source)
      - libmimalloc-sys (Rust) 0.1.44 (source)
        
        mimalloc (C) v3 (dfa50c3, source)

We use takumi to generate images, and takumi uses mimalloc_rust as its memory allocator. But there's a recent issue on mimalloc_rust purpleprotocol/mimalloc_rust#153 where people are reporting:

Since we upgrade mimalloc crate from 0.1.47 to 0.1.48, we started seeing Unhandled signal SIGSEGV error from our error logs.
…
… in malloc_consolidate (av=0x7e3a6c000030) at ./malloc/malloc.c:4876

And in fact, the transition from mimalloc_rust 0.1.47 to 0.1.48 seems significant, because mimalloc_rust commit 747b5b bumps the version of the underlying C library (Microsoft's mimalloc) from v2 to v3.

Could this be the cause of our problem? Maybe, but it doesn't look like a recent dependency change would have caused it.

The version of mimalloc we depend on is based on the version that takumi depends on, and takumi bumped to mimalloc 0.1.48 in commit be28f9f, made on 31 Aug 2025. (cc @andrew, this was a great use of git-pkgs, thanks)

So it might be that the above mimalloc change is causing our issue, but if so, it's either happening intermittently, or only with certain inputs.

@danielroe Should I just create a new issue for this, so we can keep track of it?

vladh · 2026-03-01T20:01:26Z

@danielroe No problem, rebased!

coderabbitai

🧹 Nitpick comments (1)

app/components/AppLogo.vue (1)

7-43: LGTM!

The updated SVG implementation looks good:

Uses viewBox with explicit dimensions for consistent scaling

fill="currentColor" enables flexible colour theming

The accent slash uses var(--accent) CSS variable appropriately

aria-hidden="true" with <title> is a valid pattern for decorative logos

Minor note (optional): The stroke-width=".26458" attributes on all paths have no effect since no stroke colour is defined. These appear to be leftover from SVG export tooling and could be removed for cleaner output, but they cause no functional issues.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 86e26af and 0edd124.

⛔ Files ignored due to path filters (9)

public-dev/logo-icon.svg is excluded by !**/*.svg
public-dev/logo-mark.svg is excluded by !**/*.svg
public-dev/logo.svg is excluded by !**/*.svg
public-staging/logo-icon.svg is excluded by !**/*.svg
public-staging/logo-mark.svg is excluded by !**/*.svg
public-staging/logo.svg is excluded by !**/*.svg
public/logo-icon.svg is excluded by !**/*.svg
public/logo-mark.svg is excluded by !**/*.svg
public/logo.svg is excluded by !**/*.svg

📒 Files selected for processing (7)

app/components/AppHeader.vue
app/components/AppLogo.vue
app/components/AppMark.vue
app/pages/index.vue
pwa-assets.config.ts
test/nuxt/a11y.spec.ts
test/unit/server/utils/file-tree.spec.ts

🚧 Files skipped from review as they are similar to previous changes (5)

app/pages/index.vue
test/unit/server/utils/file-tree.spec.ts
app/components/AppMark.vue
test/nuxt/a11y.spec.ts
app/components/AppHeader.vue

vladh · 2026-03-01T20:07:33Z

Minor note (optional): The stroke-width=".26458" attributes on all paths have no effect since no stroke colour is defined. These appear to be leftover from SVG export tooling and could be removed for cleaner output, but they cause no functional issues.

This originates from the original logo.svg (the one with just the “./”). Let's leave it, it's just a few extra bytes, won't do any harm, and it saves me some testing.

alexdln · 2026-03-01T22:23:38Z

@vladh Wow, excellent work, thank you for all the changes and unifications

A bit about details:

I'm aware that the slash is too low at the top. All the fonts create a different experience and habit, and I felt the difference here - you get *that* feeling that something is wrong, but you can't explain what

The stage text looks too far away when it's in the header. It's like it's at a different distance on the home page where it looks comfortable, and in the header - where it's a bit too far away

vladh · 2026-03-01T22:29:30Z

Hey @alexdln, thanks for the feedback!

I'm very aware that the slash is too low at the top. All the fonts create a different experience and habit, and I felt the difference here - you get that feeling that something is wrong, but you can't explain what

Am I correct in understanding that you would like the slash to be a little bit taller? Initially, I thought it was too tall and a bit distracting — of course, the font designer will have chosen an appropriate height for normal text, but it felt a bit tall in a “display” scenario like this logo. But, I may have overdone the change, making it too short. Maybe I can find a middle ground — does that sound good?

The stage text looks too far away when it's in the header. It's like it's at a different distance on the home page where it looks comfortable, and in the header - where it's a bit too far away

No problem, I'll make the spacing of the environment text a bit tighter in the header.

alexdln · 2026-03-01T22:34:16Z

Maybe I can find a middle ground — does that sound good?

Yes, I think a good option would probably be somewhere in between. Maybe make the distance between the top and bottom of the lowercase roughly equal. Maybe just a liiittle bit more at the top

vladh · 2026-03-01T22:35:37Z

Yes, I think a good option would probably be somewhere in between. Maybe make the distance between the top and bottom of the lowercase roughly equal. Maybe just a liiittle bit more at the top

On it! 🫡

alexdln · 2026-03-01T22:38:54Z

public-staging/logo-mark.svg

Can you please make the same distance at the top and bottom, otherwise it will always be sth like mt-0.125

vercel bot deployed to Preview – npmx.dev February 28, 2026 22:52 View deployment

vladh force-pushed the main branch from 88a0736 to 86e26af Compare March 1, 2026 18:36

vercel bot deployed to Preview – npmx.dev March 1, 2026 18:38 View deployment

fix(ui): improve logo

0edd124

vladh force-pushed the main branch from 86e26af to 0edd124 Compare March 1, 2026 20:01

vercel bot deployed to Preview – npmx.dev March 1, 2026 20:03 View deployment

coderabbitai bot reviewed Mar 1, 2026

View reviewed changes

danielroe requested a review from alexdln March 1, 2026 22:07

alexdln reviewed Mar 1, 2026

View reviewed changes

Uh oh!

Conversation

vladh commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 28, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

danielroe commented Mar 1, 2026

Uh oh!

vladh commented Mar 1, 2026

Uh oh!

vladh commented Mar 1, 2026

Uh oh!

danielroe commented Mar 1, 2026

Uh oh!

danielroe commented Mar 1, 2026

Uh oh!

vladh commented Mar 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vladh commented Mar 1, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

vladh commented Mar 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexdln commented Mar 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vladh commented Mar 1, 2026

Uh oh!

alexdln commented Mar 1, 2026

Uh oh!

vladh commented Mar 1, 2026

Uh oh!

alexdln Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vladh commented Feb 28, 2026 •

edited

Loading

vercel bot commented Feb 28, 2026 •

edited

Loading

coderabbitai bot commented Feb 28, 2026 •

edited

Loading

vladh commented Mar 1, 2026 •

edited

Loading

vladh commented Mar 1, 2026 •

edited

Loading

alexdln commented Mar 1, 2026 •

edited

Loading