feat: put env string next to 'npmx'

[shuuji3]

How about adding the env name ('dev', 'preview', 'canary', or 'alphe' (for 'release' env)) next to the "npmx" like Elk (https://main.elk.zone vs https://elk.zone) in addition to the footer?

The logo color is already different but sometimes not enough to distinguish (ref. https://discord.com/channels/1464542801676206113/1464544843740217455/1467534525218295889 😄)

We could drop "alpha" for production if it's preferable.

Closes #1135

---

(manually changed string to 'alpha' here, color is not for 'release')

---

(same)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 12, 2026 8:59pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 12, 2026 8:59pm
npmx-lunaria	Ignored		Feb 12, 2026 8:59pm

[serhalp]

I like it. I wouldn't put anything for prod builds. and I wonder if it would be better in the header somewhere? next to the logo? otherwise this env flag only shows on the landing page and not on the search, compare, setting, etc. pages.

[danielroe]

this is a nice idea. I think it needs a design tweak as italic monospace isn't the most attractive font - I'll take a look

[ghostdevv]

rebased! updated ss (with blue enabled of course):

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR reads env from useAppConfig().buildInfo in both AppHeader.vue and pages/index.vue and adds a UI badge near the "npmx" logo/title that displays "alpha" when env equals "release", otherwise displays the env value. Styling and layout around the logo/title are adjusted to accommodate the absolutely positioned badge. No control-flow or public API changes were introduced.

Possibly related issues

• Better design for env styling #1135 — Targets the same environment label next to the "npmx" title/logo; this PR implements an env badge for that header element.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (9 files): ⚔️ app/components/AppHeader.vue (content) ⚔️ app/pages/index.vue (content) ⚔️ i18n/locales/en.json (content) ⚔️ i18n/schema.json (content) ⚔️ lunaria/files/en-GB.json (content) ⚔️ lunaria/files/en-US.json (content) ⚔️ nuxt.config.ts (content) ⚔️ server/middleware/canonical-redirects.global.ts (content) ⚔️ test/nuxt/a11y.spec.ts (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly explains the feature: adding environment labels ('dev', 'preview', 'canary', 'alpha') next to the 'npmx' logo, with rationale and supporting screenshots.

_{✏️ 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

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch feat/env-string
• Post resolved changes as copyable diffs in a comment

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/pages/index.vue (2)

25-25: No guard against missing env value.

If buildInfo or env is undefined (e.g. during local dev or a misconfigured build), destructuring will silently yield undefined, and the <sup> on line 57 will render an empty but still-visible element. Consider a fallback or a v-if guard on the <sup>.

Also, this ternary (env === 'release' ? 'alpha' : env) is duplicated verbatim in AppHeader.vue. Extract a small computed or utility (e.g. useEnvLabel()) to keep the mapping in one place.

Proposed: extract shared helper and guard rendering

For example, create a composable like composables/useEnvLabel.ts:

export function useEnvLabel() {
  const { env } = useAppConfig().buildInfo
  const envLabel = computed(() => {
    if (!env || env === 'production') return undefined
    return env === 'release' ? 'alpha' : env
  })
  return { envLabel }
}

Then in both templates, use it with a v-if:

-          <sup class="text-3xl italic text-fg-muted">{{ env === 'release' ? 'alpha' : env }}</sup>
+          <sup v-if="envLabel" class="text-3xl italic text-fg-muted">{{ envLabel }}</sup>

---

57-57: The text-3xl size feels oversized for a superscript badge.

On the index page this renders at text-3xl whereas AppHeader.vue uses text-sm. The visual weight difference is intentional (hero vs header), but text-3xl for a <sup> is quite large — danielroe's review comment also flagged the styling. Worth a second look at sizing/font choice here.

[codecov]

Codecov Report

❌ Patch coverage is 66.66667% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/index.vue	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[essenmitsosse]

Yeah this is a great idea! Definitely solves a real issue! ❤️

[shuuji3]

Maybe we could show only 'dev' and 'preview' for now until we come up with better design so that we can reduce development friction?

[shuuji3]

I removed 'alpha' and created the issue for better desgin #1135.

[coderabbitai]

Actionable comments posted: 1

[danielroe]

perfect!

[alexdln]

@shuuji3 Thanks for the implementation and the idea ❤️

I adjusted the styles a bit to improve a bit general view on different devices, if you have any other UI ideas, feel free to ping me, I'll be happy to discuss and help

[shuuji3]

@alexdln Thanks, it looks good to me! I like colorizing it with accent colors 🎨