diff --git a/.env.example b/.env.example index 7e58e7b37..76aba4fa8 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,2 @@ -#secure password, can use openssl rand --hex 32 +#secure password, can use openssl rand -hex 32 NUXT_SESSION_PASSWORD="" \ No newline at end of file diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 4abc4840f..4d78f60d6 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -14,7 +14,8 @@ permissions: jobs: code: - runs-on: ubuntu-latest + name: 🤖 Autofix code + runs-on: ubuntu-24.04-arm steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 @@ -23,17 +24,14 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true - name: 📦 Install dependencies run: pnpm install - - name: 📦 Install browsers - run: pnpm playwright install - - name: 🌐 Compare translations run: pnpm i18n:check @@ -43,14 +41,4 @@ jobs: - name: 🔠 Fix lint errors run: pnpm lint:fix - - name: 🧪 Update unit test snapshots - run: pnpm test:unit -u - - - name: 🏃 Update component test snapshots - run: pnpm test:nuxt -u - - # TODO: re-enable when we have snapshots in browser tests - # - name: 🖥️ Update browser test snapshots - # run: pnpm test:browser --update-snapshots - - - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 + - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # 635ffb0c9798bd160680f18fd73371e355b85f27 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c77557dae..8320ecf6c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -21,7 +21,8 @@ permissions: jobs: lint: - runs-on: ubuntu-latest + name: 🔠 Lint project + runs-on: ubuntu-24.04-arm steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 @@ -30,19 +31,70 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true - - name: 📦 Install dependencies - run: pnpm install + - name: 📦 Install dependencies (root only, no scripts) + run: pnpm install --filter . --ignore-scripts - name: 🔠 Lint project run: pnpm lint + types: + name: 💪 Type check + runs-on: ubuntu-24.04-arm + + steps: + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + + - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0 + with: + node-version: lts/* + + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm + with: + cache: true + + - name: 📦 Install dependencies + run: pnpm install + + - name: 💪 Type check + run: pnpm test:types + + unit: + name: 🧪 Unit tests + runs-on: ubuntu-24.04-arm + + steps: + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 + + - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0 + with: + node-version: lts/* + + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm + with: + cache: true + + - name: 📦 Install dependencies + run: pnpm install + + - name: 🧪 Unit tests + run: pnpm test:unit run --coverage --reporter=junit --outputFile=test-report.junit.xml + + - name: ⬆︎ Upload test results to Codecov + if: ${{ !cancelled() }} + uses: codecov/test-results-action@0fa95f0e1eeaafde2c782583b36b28ad0d8c77d3 # v1 + with: + token: ${{ secrets.CODECOV_TOKEN }} + test: - runs-on: ubuntu-latest + name: 🧪 Component tests + runs-on: ubuntu-24.04-arm steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 @@ -51,8 +103,8 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true @@ -60,19 +112,25 @@ jobs: run: pnpm install - name: 🌐 Install browser - run: pnpm playwright install + run: pnpm playwright install chromium-headless-shell - - name: 💪 Type check - run: pnpm test:types + - name: 🧪 Component tests + run: pnpm test:nuxt run --coverage --reporter=junit --outputFile=test-report.junit.xml - - name: 🧪 Unit test - run: pnpm test:unit + - name: ⬆︎ Upload test results to Codecov + if: ${{ !cancelled() }} + uses: codecov/test-results-action@0fa95f0e1eeaafde2c782583b36b28ad0d8c77d3 # v1 + with: + token: ${{ secrets.CODECOV_TOKEN }} - - name: 🏃 Component tests - run: pnpm test:nuxt + - name: ⬆︎ Upload coverage reports to Codecov + uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5 + env: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} browser: - runs-on: ubuntu-latest + name: 🖥️ Browser tests + runs-on: ubuntu-24.04-arm container: image: mcr.microsoft.com/playwright:v1.58.0-noble @@ -83,19 +141,26 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true - name: 📦 Install dependencies run: pnpm install + - name: 🏗️ Build project + run: pnpm build:playwright + - name: 🖥️ Test project (browser) - run: pnpm test:browser + run: pnpm test:browser:prebuilt a11y: - runs-on: ubuntu-latest + name: ♿ Accessibility audit + runs-on: ubuntu-latest # See https://github.com/GoogleChrome/lighthouse/discussions/16834 + strategy: + matrix: + mode: [dark, light] steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 @@ -104,8 +169,8 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true @@ -113,15 +178,17 @@ jobs: run: pnpm install - name: 🏗️ Build project - run: pnpm build + run: NODE_ENV=test pnpm build - - name: ♿ Accessibility audit (Lighthouse - dark & light mode) + - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode) run: ./scripts/lighthouse-a11y.sh env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} + LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }} knip: - runs-on: ubuntu-latest + name: 🧹 Unused code check + runs-on: ubuntu-24.04-arm steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 @@ -130,13 +197,16 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true - name: 📦 Install dependencies run: pnpm install - - name: 🔍 Check for unused code + - name: 🧹 Check for unused code run: pnpm knip + + - name: 🧹 Check for unused production code + run: pnpm knip --production diff --git a/.github/workflows/lunaria.yml b/.github/workflows/lunaria.yml index d9c6c44e8..5a920f435 100644 --- a/.github/workflows/lunaria.yml +++ b/.github/workflows/lunaria.yml @@ -17,8 +17,8 @@ permissions: jobs: lunaria-overview: - name: Generate Lunaria Overview - runs-on: ubuntu-latest + name: 🌝 Generate Lunaria Overview + runs-on: ubuntu-24.04-arm steps: - name: Checkout @@ -32,8 +32,8 @@ jobs: with: node-version: lts/* - - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c - name: Install pnpm + - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c + name: 🟧 Install pnpm with: cache: true @@ -41,4 +41,4 @@ jobs: run: pnpm install - name: Generate Lunaria Overview - uses: lunariajs/action@v1-prerelease + uses: lunariajs/action@4911ad0736d1e3b20af4cb70f5079aea2327ed8e # v1-prerelease diff --git a/.github/workflows/provenance.yml b/.github/workflows/provenance.yml index 25c02d504..14fd9b758 100644 --- a/.github/workflows/provenance.yml +++ b/.github/workflows/provenance.yml @@ -4,21 +4,29 @@ on: push: branches: - main + paths: + - pnpm-lock.yaml pull_request: branches: - main + paths: + - pnpm-lock.yaml merge_group: branches: - main + permissions: contents: read + jobs: check-provenance: - runs-on: ubuntu-latest + name: 🔒 Check provenance downgrades + runs-on: ubuntu-slim steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: fetch-depth: 0 + - name: Check provenance downgrades uses: danielroe/provenance-action@41bcc969e579d9e29af08ba44fcbfdf95cee6e6c # v0.1.1 with: diff --git a/.github/workflows/semantic-pull-requests.yml b/.github/workflows/semantic-pull-requests.yml index 98938b166..baeb4b45f 100644 --- a/.github/workflows/semantic-pull-requests.yml +++ b/.github/workflows/semantic-pull-requests.yml @@ -16,8 +16,8 @@ jobs: pull-requests: read # for amannn/action-semantic-pull-request to analyze PRs statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR if: github.repository == 'npmx-dev/npmx.dev' - runs-on: ubuntu-latest - name: semantic-pr + runs-on: ubuntu-slim + name: 🏷️ Validate PR title steps: - name: Validate PR title uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1 @@ -26,6 +26,7 @@ jobs: a11y deps docs + cli i18n ui subjectPattern: ^(?![A-Z]).+$ diff --git a/.lighthouserc.cjs b/.lighthouserc.cjs index 5c4ba5589..5a6957e27 100644 --- a/.lighthouserc.cjs +++ b/.lighthouserc.cjs @@ -29,7 +29,7 @@ module.exports = { url: [ 'http://localhost:3000/', 'http://localhost:3000/search?q=nuxt', - 'http://localhost:3000/nuxt', + 'http://localhost:3000/package/nuxt', ], numberOfRuns: 1, chromePath: findChrome(), diff --git a/.oxlintrc.json b/.oxlintrc.json index 7cb23eb90..b0bc5d6ff 100644 --- a/.oxlintrc.json +++ b/.oxlintrc.json @@ -1,6 +1,7 @@ { "$schema": "https://unpkg.com/oxlint/configuration_schema.json", "plugins": ["unicorn", "typescript", "oxc", "vue", "vitest"], + "jsPlugins": ["@e18e/eslint-plugin"], "categories": { "correctness": "error", "suspicious": "warn", @@ -11,8 +12,27 @@ "no-await-in-loop": "off", "unicorn/no-array-sort": "off", "no-restricted-globals": "error", - "typescript/consistent-type-imports": "error" + "typescript/consistent-type-imports": "error", + "e18e/prefer-array-from-map": "error", + "e18e/prefer-timer-args": "error", + "e18e/prefer-date-now": "error", + "e18e/prefer-regex-test": "error", + "e18e/prefer-array-some": "error" }, + "overrides": [ + { + "files": [ + "server/**/*", + "cli/**/*", + "scripts/**/*", + "modules/**/*", + "app/components/OgImage/*" + ], + "rules": { + "no-console": "off" + } + } + ], "ignorePatterns": [ ".output/**", ".data/**", diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 1cc1c3b33..5df11f314 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,45 +1,83 @@ -# Contributor Covenant Code of Conduct +# Contributor Covenant 3.0 Code of Conduct -## Our pledge +## Our Pledge -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. +We pledge to make our community welcoming, safe, and equitable for all. -## Our standards +We are committed to fostering an environment that respects and promotes the dignity, rights, and contributions of all individuals, regardless of characteristics including race, ethnicity, caste, color, age, physical characteristics, neurodiversity, disability, sex or gender, gender identity or expression, sexual orientation, language, philosophy or religion, national or social origin, socio-economic position, level of education, or other status. The same privileges of participation are extended to everyone who participates in good faith and in accordance with this Covenant. -Examples of behavior that contributes to creating a positive environment include: +## Encouraged Behaviors -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +While acknowledging differences in social norms, we all strive to meet our community's expectations for positive behavior. We also understand that our words and actions may be interpreted differently than we intend based on culture, background, or native language. -Examples of unacceptable behavior by participants include: +With these considerations in mind, we agree to behave mindfully toward each other and act in ways that center our shared values, including: -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting +1. Respecting the **purpose of our community**, our activities, and our ways of gathering. +2. Engaging **kindly and honestly** with others. +3. Respecting **different viewpoints** and experiences. +4. **Taking responsibility** for our actions and contributions. +5. Gracefully giving and accepting **constructive feedback**. +6. Committing to **repairing harm** when it occurs. +7. Behaving in other ways that promote and sustain the **well-being of our community**. -## Our responsibilities +## Restricted Behaviors -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. +We agree to restrict the following behaviors in our community. Instances, threats, and promotion of these behaviors are violations of this Code of Conduct. -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. +1. **Harassment.** Violating explicitly expressed boundaries or engaging in unnecessary personal attention after any clear request to stop. +2. **Character attacks.** Making insulting, demeaning, or pejorative comments directed at a community member or group of people. +3. **Stereotyping or discrimination.** Characterizing anyone’s personality or behavior on the basis of immutable identities or traits. +4. **Sexualization.** Behaving in a way that would generally be considered inappropriately intimate in the context or purpose of the community. +5. **Violating confidentiality**. Sharing or acting on someone's personal or private information without their permission. +6. **Endangerment.** Causing, encouraging, or threatening violence or other harm toward any person or group. +7. Behaving in other ways that **threaten the well-being** of our community. -## Scope +### Other Restrictions + +1. **Misleading identity.** Impersonating someone else for any reason, or pretending to be someone else to evade enforcement actions. +2. **Failing to credit sources.** Not properly crediting the sources of content you contribute. +3. **Promotional materials**. Sharing marketing or other commercial content in a way that is outside the norms of the community. +4. **Irresponsible communication.** Failing to responsibly present content which includes, links or describes any other restricted behaviors. + +## Reporting an Issue + +Tensions can occur between community members even when they are trying their best to collaborate. Not every conflict represents a code of conduct violation, and this Code of Conduct reinforces encouraged behaviors and norms that can help avoid conflicts and minimize harm. + +When an incident does occur, it is important to report it promptly. To report a possible violation, contact the project stewards (@danielroe and @patak.dev) by DM in our community chat. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project stewards are obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. -This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. +Community Moderators take reports of violations seriously and will make every effort to respond in a timely manner. They will investigate all reports of code of conduct violations, reviewing messages, logs, and recordings, or interviewing witnesses and other participants. Community Moderators will keep investigation and enforcement actions as transparent as possible while prioritizing safety and confidentiality. In order to honor these values, enforcement actions are carried out in private with the involved parties, but communicating to the whole community may be part of a mutually agreed upon resolution. -## Enforcement +## Addressing and Repairing Harm + +If an investigation by the Community Moderators finds that this Code of Conduct has been violated, the following enforcement ladder may be used to determine how best to repair harm, based on the incident's impact on the individuals involved and the community as a whole. Depending on the severity of a violation, lower rungs on the ladder may be skipped. + +1. Warning + 1. Event: A violation involving a single incident or series of incidents. + 2. Consequence: A private, written warning from the Community Moderators. + 3. Repair: Examples of repair include a private written apology, acknowledgement of responsibility, and seeking clarification on expectations. +2. Temporarily Limited Activities + 1. Event: A repeated incidence of a violation that previously resulted in a warning, or the first incidence of a more serious violation. + 2. Consequence: A private, written warning with a time-limited cooldown period designed to underscore the seriousness of the situation and give the community members involved time to process the incident. The cooldown period may be limited to particular communication channels or interactions with particular community members. + 3. Repair: Examples of repair may include making an apology, using the cooldown period to reflect on actions and impact, and being thoughtful about re-entering community spaces after the period is over. +3. Temporary Suspension + 1. Event: A pattern of repeated violation which the Community Moderators have tried to address with warnings, or a single serious violation. + 2. Consequence: A private written warning with conditions for return from suspension. In general, temporary suspensions give the person being suspended time to reflect upon their behavior and possible corrective actions. + 3. Repair: Examples of repair include respecting the spirit of the suspension, meeting the specified conditions for return, and being thoughtful about how to reintegrate with the community when the suspension is lifted. +4. Permanent Ban + 1. Event: A pattern of repeated code of conduct violations that other steps on the ladder have failed to resolve, or a violation so serious that the Community Moderators determine there is no way to keep the community safe with this person as a member. + 2. Consequence: Access to all community spaces, tools, and communication channels is removed. In general, permanent bans should be rarely used, should have strong reasoning behind them, and should only be resorted to if working through other remedies has failed to change the behavior. + 3. Repair: There is no possible repair in cases of this severity. + +This enforcement ladder is intended as a guideline. It does not limit the ability of Community Managers to use their discretion and judgment, in keeping with the best interests of our community. + +## Scope -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project stewards (`@danielroe` and `@patak.dev`) by DM in our [community chat](https://chat.npmx.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The stewards are obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public or other spaces. Examples of representing our community include using an official email address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +This Code of Conduct is adapted from the Contributor Covenant, version 3.0, permanently available at [https://www.contributor-covenant.org/version/3/0/](https://www.contributor-covenant.org/version/3/0/). -[homepage]: https://www.contributor-covenant.org +Contributor Covenant is stewarded by the Organization for Ethical Source and licensed under CC BY-SA 4.0. To view a copy of this license, visit [https://creativecommons.org/licenses/by-sa/4.0/](https://creativecommons.org/licenses/by-sa/4.0/) -For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq +For answers to common questions about Contributor Covenant, see the FAQ at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are provided at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations). Additional enforcement and community guideline resources can be found at [https://www.contributor-covenant.org/resources](https://www.contributor-covenant.org/resources). The enforcement ladder was inspired by the work of [Mozilla’s code of conduct team](https://github.com/mozilla/inclusion). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7096cbf4d..a1790b620 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,11 +8,59 @@ Thank you for your interest in contributing! ❤️ This document provides guide ## Goals -We want to create 'a fast, modern browser for the npm registry.' This means, among other things: - -- We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI and DX. -- Layout shift, flakiness, slowness is The Worst. We need to continually iterate to create the most performant, best DX possible. -- We want to provide information in the best way. We don't want noise, cluttered display, or confusing UI. If in doubt: choose simplicity. +The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern and open-source browser for the npm registry, prioritizing speed, simplicity and a community-driven developer experience. + +### Core values + +- Speed +- Simplicity +- Community-first + +### Target audience + +npmx is built for open-source developers, by open-source developers. + +Our goal is to create tools and capabilities that solve real problems for package maintainers and power users, while also providing a great developer experience for everyone who works in the JavaScript ecosystem. + +This focus helps guide our project decisions as a community and what we choose to build. + +## Table of Contents + +- [Getting started](#getting-started) + - [Prerequisites](#prerequisites) + - [Setup](#setup) +- [Development workflow](#development-workflow) + - [Available commands](#available-commands) + - [Project structure](#project-structure) + - [Local connector CLI](#local-connector-cli) +- [Code style](#code-style) + - [TypeScript](#typescript) + - [Server API patterns](#server-api-patterns) + - [Import order](#import-order) + - [Naming conventions](#naming-conventions) + - [Vue components](#vue-components) +- [RTL Support](#rtl-support) +- [Localization (i18n)](#localization-i18n) + - [Approach](#approach) + - [Adding a new locale](#adding-a-new-locale) + - [Update translation](#update-translation) + - [Adding translations](#adding-translations) + - [Translation key conventions](#translation-key-conventions) + - [Using i18n-ally (recommended)](#using-i18n-ally-recommended) + - [Formatting numbers and dates](#formatting-numbers-and-dates) +- [Testing](#testing) + - [Unit tests](#unit-tests) + - [Component accessibility tests](#component-accessibility-tests) + - [End to end tests](#end-to-end-tests) + - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis) +- [Submitting changes](#submitting-changes) + - [Before submitting](#before-submitting) + - [Pull request process](#pull-request-process) + - [Commit messages and PR titles](#commit-messages-and-pr-titles) +- [Pre-commit hooks](#pre-commit-hooks) +- [Using AI](#using-ai) +- [Questions](#questions) +- [License](#license) ## Getting started @@ -111,7 +159,11 @@ To help with this, the project uses `oxfmt` to handle formatting via a pre-commi If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project. -### Typescript +### npmx name + +When displaying the project name anywhere in the UI, use `npmx` in all lowercase letters. + +### TypeScript - We care about good types – never cast things to `any` 💪 - Validate rather than just assert @@ -187,7 +239,7 @@ import { hasProtocol } from 'ufo' | Type | Convention | Example | | ---------------- | ------------------------ | ------------------------------ | -| Vue components | PascalCase | `MarkdownText.vue` | +| Vue components | PascalCase | `DateTime.vue` | | Pages | kebab-case | `search.vue`, `[...name].vue` | | Composables | camelCase + `use` prefix | `useNpmRegistry.ts` | | Server routes | kebab-case + method | `search.get.ts` | @@ -288,12 +340,12 @@ To add a new locale: 5. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example) 6. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples) -Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info. +Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization#custom-pluralization) and [Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Determining-Plural-Categories) for more info. ### Update translation We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/ -If you see any outdated translations in your language, feel free to update the keys to match then English version. +If you see any outdated translations in your language, feel free to update the keys to match the English version. In order to make sure you have everything up-to-date, you can run: @@ -356,6 +408,43 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/

{{ $t('greeting', { name: userName }) }}

``` +4. Don't concatenate string messages in the Vue templates, some languages can have different word order. Use placeholders instead. + + **Bad:** + + ```vue +

{{ $t('hello') }} {{ userName }}

+ ``` + + **Good:** + + ```vue +

{{ $t('greeting', { name: userName }) }}

+ ``` + + **Complex content:** + + If you need to include HTML or components inside the translation, use [`i18n-t`](https://vue-i18n.intlify.dev/guide/advanced/component.html) component. This is especially useful when the order of elements might change between languages. + + ```json + { + "agreement": "I accept the {terms} and {privacy}.", + "terms_link": "Terms of Service", + "privacy_policy": "Privacy Policy" + } + ``` + + ```vue + + + + + ``` + ### Translation key conventions - Use dot notation for hierarchy: `section.subsection.key` @@ -363,6 +452,7 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/ - Group related keys together - Use `common.*` for shared strings (loading, retry, close, etc.) - Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*` +- Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy` ### Using i18n-ally (recommended) @@ -445,6 +535,69 @@ pnpm test:browser:ui # Run with Playwright UI Make sure to read about [Playwright best practices](https://playwright.dev/docs/best-practices) and don't rely on classes/IDs but try to follow user-replicable behaviour (like selecting an element based on text content instead). +### Test fixtures (mocking external APIs) + +E2E tests use a fixture system to mock external API requests, ensuring tests are deterministic and don't hit real APIs. This is handled at two levels: + +**Server-side mocking** (`modules/fixtures.ts` + `modules/runtime/server/cache.ts`): + +- Intercepts all `$fetch` calls during SSR +- Serves pre-recorded fixture data from `test/fixtures/` +- Enabled via `NUXT_TEST_FIXTURES=true` or Nuxt test mode + +**Client-side mocking** (`test/e2e/test-utils.ts`): + +- Uses Playwright's route interception to mock browser requests +- All test files import from `./test-utils` instead of `@nuxt/test-utils/playwright` +- Throws a clear error if an unmocked external request is detected + +#### Fixture files + +Fixtures are stored in `test/fixtures/` with this structure: + +``` +test/fixtures/ +├── npm-registry/ +│ ├── packuments/ # Package metadata (vue.json, @nuxt/kit.json) +│ ├── search/ # Search results (vue.json, nuxt.json) +│ └── orgs/ # Org package lists (nuxt.json) +├── npm-api/ +│ └── downloads/ # Download stats +└── users/ # User package lists +``` + +#### Adding new fixtures + +1. **Generate fixtures** using the script: + + ```bash + pnpm generate:fixtures vue lodash @nuxt/kit + ``` + +2. **Or manually create** a JSON file in the appropriate directory + +#### Environment variables + +| Variable | Purpose | +| --------------------------------- | ---------------------------------- | +| `NUXT_TEST_FIXTURES=true` | Enable server-side fixture mocking | +| `NUXT_TEST_FIXTURES_VERBOSE=true` | Enable detailed fixture logging | + +#### When tests fail due to missing fixtures + +If a test fails with an error like: + +``` +UNMOCKED EXTERNAL API REQUEST DETECTED +API: npm registry +URL: https://registry.npmjs.org/some-package +``` + +You need to either: + +1. Add a fixture file for that package/endpoint +2. Update the mock handlers in `test/e2e/test-utils.ts` (client) or `modules/runtime/server/cache.ts` (server) + ## Submitting changes ### Before submitting @@ -485,6 +638,31 @@ Format: `type(scope): description` > [!NOTE] > The subject must start with a lowercase letter. Individual commit messages within your PR don't need to follow this format since they'll be squashed. +### PR descriptions + +If your pull request directly addresses an open issue, use the following inside your PR description. + +```text +Resolves | Fixes | Closes: #xxx +``` + +Replace `#xxx` with either a URL to the issue, or the number of the issue. For example: + +```text +Fixes #123 +``` + +or + +```text +Closes https://github.com/npmx-dev/npmx.dev/issues/123 +``` + +This provides the following benefits: + +- it links the pull request to the issue (the merge icon will appear in the issue), so everybody can see there is an open PR +- when the pull request is merged, the linked issue is automatically closed + ## Pre-commit hooks The project uses `lint-staged` with `simple-git-hooks` to automatically lint files on commit. diff --git a/README.md b/README.md index 7aaf5429d..627e0afbb 100644 --- a/README.md +++ b/README.md @@ -13,12 +13,16 @@ ## Vision -The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the npm registry – fast, modern, and accessible. We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI, DX, and admin experience. +The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern browser for the npm registry. -- **Speed first** – Layout shift, flakiness, slowness is The Worst. Fast searching, filtering, and navigation. -- **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works. -- **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity. -- **Admin UI** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI. +We're not replacing the [npm](https://www.npmjs.com/) registry, but instead providing an elevated developer experience through a fast, modern UI. + +What npmx offers: + +- **Speed** – Fast searching, filtering, and navigation. +- **Simplicity** – Get the information you need when you need it in an intuitive UI. +- **URL Compatibility** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works. +- **Enhanced admin experience** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI. ## Shortcuts @@ -36,11 +40,11 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n ### Package browsing -- **Dark mode by default** – easier on the eyes +- **Dark mode and light mode** – plus customize the color palette to your preferences - **Fast search** – quick package search with instant results - **Package details** – READMEs, versions, dependencies, and metadata - **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines -- **Provenance indicators** – verified build badges for packages with npm provenance +- **Provenance indicators** – verified build badges and provenance section below the README - **Multi-provider repository support** – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, Sourcehut, Forgejo, Gitea, Radicle, and Tangled - **JSR availability** – see if scoped packages are also available on JSR - **Package badges** – module format (ESM/CJS/dual), TypeScript types (with `@types/*` links), and engine constraints @@ -100,7 +104,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n ### npm compatibility -npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` and it works: +npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` to get the npmx experience: | npm URL | npmx.dev equivalent | | ------------------------------- | ---------------------------------------------------------------------- | @@ -142,7 +146,7 @@ npmx.dev also supports shorter, cleaner URLs: ## Contributing -We welcome contributions – please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running! +We welcome contributions – please do feel free to explore the project and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running! ## Related projects @@ -151,6 +155,9 @@ We welcome contributions – please do feel free to poke around and improve - [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible +- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx +- [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages. +- [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours. If you're building something cool, let us know! 🙏 diff --git a/TODOs.md b/TODOs.md deleted file mode 100644 index 12bb37676..000000000 --- a/TODOs.md +++ /dev/null @@ -1,44 +0,0 @@ -# TODOs - - - - ---- - -## In Flight - -- Blog list/post UI - (Started - needs more polish) -- OAuth -- Standard site push - Mock PDS push for now -- constellation - bsky API -- Docs - Run them locally with `pnpm dev:docs`. - ---- - -## On Deck - -- automatic pulls or pushes from an action runner -- records walkers -- bsky posts stuff - Bluesky comments -- How does i18n deal with dynamic values? $t('blog.post.title'), -- blog publishing for https://bsky.app/profile/npmx.dev - cli/actions pipeline -- site.standard.publication lexicon - declares it's a blog on atproto can be manual setup -- site.standard.document - publishes everytime there's a new blog entry. - - Proposed: the pipeline takes login pds, handle, and app_password as secrets. Checks to see if one has already been published for that blog post. If so does not push it. If it hasn't then it creates the atproto record when deploying/building by logging in. check if an article has been created by parsing the createdate of the blog post to a TID, do a getRecord. if it's there dont publish the new one. If it isnt send it up. I wrote about tid concept here - https://marvins-guide.leaflet.pub/3mckm76mfws2h - - Proposed: nuxt module with a build hook. e.g. in standard-site-sync.ts we use a hook that triggers after the file is parsed and create the site.standard.document or not if it already exists. -- Update styling for blog posts. -- BlogWrapper Component or should it be a Blog Layout? -- Organize markdown files in blog post folder? -- I18n of blog posts. -- TBD - ---- - -## Landed - -- [x] Lexicons -- [x] Prose-styling using unocss typography -- [x] anthony's alternative markdown solution for now and Nuxt content integration for later - ---- diff --git a/app/app.vue b/app/app.vue index e1c314e7b..bc69bd9f0 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,6 +1,6 @@ diff --git a/app/assets/main.css b/app/assets/main.css index 31a9a7188..04f69be22 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -7,17 +7,18 @@ :root[data-theme='dark'] { /* background colors */ - --bg: oklch(0.145 0 0); - --bg-subtle: oklch(0.178 0 0); - --bg-muted: oklch(0.218 0 0); - --bg-elevated: oklch(0.252 0 0); + --bg: var(--bg-color, oklch(0.145 0 0)); + --bg-subtle: var(--bg-subtle-color, oklch(0.178 0 0)); + --bg-blog: oklch(0.195 0 0); + --bg-muted: var(--bg-muted-color, oklch(0.218 0 0)); + --bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0)); /* text colors */ --fg: oklch(0.985 0 0); --fg-muted: oklch(0.709 0 0); --fg-subtle: oklch(0.633 0 0); - /* border, seperator colors */ + /* border, separator colors */ --border: oklch(0.269 0 0); --border-subtle: oklch(0.239 0 0); --border-hover: oklch(0.371 0 0); @@ -43,11 +44,39 @@ --badge-pink: oklch(0.584 0.189 343); } +:root[data-theme='dark'][data-bg-theme='slate'] { + --bg: oklch(0.129 0.012 264.695); + --bg-subtle: oklch(0.159 0.022 262.421); + --bg-muted: oklch(0.204 0.033 261.234); + --bg-elevated: oklch(0.259 0.041 260.031); +} + +:root[data-theme='dark'][data-bg-theme='zinc'] { + --bg: oklch(0.141 0.005 285.823); + --bg-subtle: oklch(0.168 0.005 285.894); + --bg-muted: oklch(0.209 0.005 285.929); + --bg-elevated: oklch(0.256 0.006 286.033); +} + +:root[data-theme='dark'][data-bg-theme='stone'] { + --bg: oklch(0.147 0.004 49.25); + --bg-subtle: oklch(0.178 0.004 49.321); + --bg-muted: oklch(0.218 0.004 49.386); + --bg-elevated: oklch(0.252 0.007 34.298); +} + +:root[data-theme='dark'][data-bg-theme='black'] { + --bg: oklch(0 0 0); + --bg-subtle: oklch(0.148 0 0); + --bg-muted: oklch(0.204 0 0); + --bg-elevated: oklch(0.264 0 0); +} + :root[data-theme='light'] { - --bg: oklch(1 0 0); - --bg-subtle: oklch(0.979 0.001 286.375); - --bg-muted: oklch(0.955 0 0); - --bg-elevated: oklch(0.94 0 0); + --bg: var(--bg-color, oklch(1 0 0)); + --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375)); + --bg-muted: var(--bg-muted-color, oklch(0.955 0 0)); + --bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0)); --fg: oklch(0.145 0 0); --fg-muted: oklch(0.439 0 0); @@ -75,19 +104,59 @@ --badge-cyan: oklch(0.571 0.181 210); } +:root[data-theme='light'][data-bg-theme='slate'] { + --bg: oklch(1 0 0); + --bg-subtle: oklch(0.982 0.006 264.62); + --bg-muted: oklch(0.96 0.041 261.234); + --bg-elevated: oklch(0.943 0.013 255.52); +} + +:root[data-theme='light'][data-bg-theme='zinc'] { + --bg: oklch(1 0 0); + --bg-subtle: oklch(0.979 0.004 286.53); + --bg-muted: oklch(0.958 0.004 286.39); + --bg-elevated: oklch(0.939 0.004 286.32); +} + +:root[data-theme='light'][data-bg-theme='stone'] { + --bg: oklch(1 0 0); + --bg-subtle: oklch(0.979 0.005 48.762); + --bg-muted: oklch(0.958 0.005 48.743); + --bg-elevated: oklch(0.943 0.005 48.731); +} + +@media (prefers-contrast: more) { + :root[data-theme='dark'] { + /* text colors */ + --fg: oklch(1 0 0); + --fg-muted: oklch(0.769 0 0); + --fg-subtle: oklch(0.693 0 0); + + /* border, separator colors */ + --border: oklch(0.769 0 0); + --border-subtle: oklch(0.739 0 0); + --border-hover: oklch(0.771 0 0); + } + + :root[data-theme='light'] { + /* text colors */ + --fg: oklch(0 0 0); + --fg-muted: oklch(0.329 0 0); + --fg-subtle: oklch(0.4 0 0); + + /* border, separator colors */ + --border: oklch(0.3514 0 0); + --border-subtle: oklch(0.422 0 0); + --border-hover: oklch(0.315 0 0); + } +} + html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; - scroll-behavior: smooth; scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */ -} - -/* Disable smooth scrolling if user prefers reduced motion */ -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } + scrollbar-gutter: stable; } /* @@ -129,9 +198,9 @@ a:hover { } a:focus-visible { - outline: 2px solid var(--border); + outline: 2px solid var(--accent); outline-offset: 2px; - border-radius: 2px; + border-radius: 4px; } /* Reset dd margin (browser default is margin-left: 40px) */ @@ -148,6 +217,13 @@ button { padding: 0; } +button:focus-visible, +select:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + border-radius: 4px; +} + /* Selection */ ::selection { background-color: var(--fg-muted); @@ -155,6 +231,10 @@ button { } /* Scrollbar styling */ +* { + scrollbar-color: var(--border) var(--bg); +} + ::-webkit-scrollbar { width: 8px; height: 8px; @@ -170,7 +250,14 @@ button { } ::-webkit-scrollbar-thumb:hover { - background: #404040; + background: var(--border-hover); +} + +/* Scrollbar styling for Firefox */ +@supports not selector(::-webkit-scrollbar) { + * { + scrollbar-width: thin; + } } /* Shiki theme colors */ diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue index 465121f1b..201e5ef66 100644 --- a/app/components/AppFooter.vue +++ b/app/components/AppFooter.vue @@ -7,7 +7,7 @@ const isHome = computed(() => route.name === 'index')