Refactor theme

- Separate theme components, layouts, and hooks into directories
- Pass in `shared` to mdx via provider
- Remove unused components and their dependencies
- Remove one-off deps in favor of inline solutions
- Remove edit links from index pages without any content

.reuse/dep5

@@ -3,10 +3,10 @@ Upstream-Name: documentation
 Upstream-Contact: Myles Borins <mylesborins@github.com>
 Source: https://github.com/npm/documentation
 
-Files: content/* static/*
+Files: content/* static/* src/*
 Copyright: 2020 GitHub
 License: CC-BY-4.0
 
-Files: scripts/* cli/* theme/* src/* .github/* *.md *.js *.json .npmrc .gitignore .nvmrc
+Files: scripts/* cli/* theme/* .github/* *.md *.js *.json .npmrc .gitignore .nvmrc
 Copyright: 2020 GitHub
 License: MIT

CONTENT-MODEL.md

@@ -95,7 +95,6 @@ You can use this template when starting a new article. For more information abou
 ---
 title:
 ---
-import shared form '../../../src/shared.js'
 
 // Conceptual content: What feature is the article about?
 // Prerequisites (if applicable): Who can use the feature?

CONTRIBUTING.md

@@ -74,7 +74,7 @@ referenced as:
 There are various places where we want to share content between
 pages, to prevent copy-pasta.  For example, we display a screenshot
 of the user login dialog repeatedly.  Therefore this shared content
-is defined in `src/shared.js`, and includes a literal MDX snippet.
+is defined in `src/theme/shared.js`, and includes a literal MDX snippet.
 
 For example, `user-login` is defined with `text` and `image`
 properties:
@@ -88,19 +88,15 @@ m login dialog" />)
 },
 ```
 
-Since MDX is reactive, you can import the shared data at the top of the
-file, just beneath your frontmatter:
+Everything exported from `shared.js` is available in all content files under the namespace `shared`. Text content should be wrapped like this: `<>{text}</>`.
 
-```
+For example, to render the `text` from `user-login` you would do the following:
+
+```mdx
 ---
 title: Using shared content
 ---
-import shared form '../../../src/shared.js'
-```
 
-And then reference the shared content within `<>`:
-
-```
 To login, <>{shared['user-login'].text}</>
 ```
 

content/about-npm/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: About npm
-redirect_from: [ /getting-started/what-is-npm ]
+redirect_from:
+  - /getting-started/what-is-npm
 ---
 
 npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

content/getting-started/configuring-your-local-environment/downloading-and-installing-node-js-and-npm.mdx

@@ -1,6 +1,7 @@
 ---
 title: Downloading and installing Node.js and npm
-redirect_from: [ /getting-started/installing-node ]
+redirect_from:
+  - /getting-started/installing-node
 ---
 
 To publish and install packages to and from the public npm registry or a private npm registry, you must install Node.js and the npm command line interface using either a Node version manager or a Node installer. **We strongly recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) to install Node.js and npm.** We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.

content/getting-started/configuring-your-local-environment/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Configuring your local environment
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/getting-started/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Getting started
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/getting-started/managing-your-npm-user-account/changing-your-npm-username.mdx

@@ -1,7 +1,6 @@
 ---
 title: Changing your npm username
 ---
-import shared from '../../../src/shared.js'
 
 It is not currently possible to change your npm username.  You'll need to
 create a new account and migrate the data to the new account manually.

content/getting-started/managing-your-npm-user-account/deleting-your-npm-user-account.mdx

@@ -1,7 +1,6 @@
 ---
 title: Deleting your npm user account
 ---
-import shared from '../../../src/shared.js'
 
 From the web, you can delete your npm user account.
 

content/getting-started/managing-your-npm-user-account/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Managing your npm user account
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/getting-started/managing-your-npm-user-account/managing-your-profile-settings.mdx

@@ -3,7 +3,6 @@ title: Managing your profile settings
 redirect_from:
   - /getting-started/modifying_your_profile_from_command_line
 ---
-import shared from '../../../src/shared.js'
 
 You can manage settings for your user account profile from the web or command line.
 

content/getting-started/paying-for-your-npm-user-account/downgrading-to-a-free-user-account-plan.mdx

@@ -1,7 +1,6 @@
 ---
 title: Downgrading to a free user account plan
 ---
-import shared from '../../../src/shared.js'
 
 <Note>
 

content/getting-started/paying-for-your-npm-user-account/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Paying for your npm user account
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/getting-started/paying-for-your-npm-user-account/updating-user-account-billing-settings.mdx

@@ -1,7 +1,6 @@
 ---
 title: Updating user account billing settings
 ---
-import shared from '../../../src/shared.js'
 
 <Note>
 

content/getting-started/paying-for-your-npm-user-account/upgrading-to-a-paid-user-account-plan.mdx

@@ -1,7 +1,6 @@
 ---
 title: Upgrading to a paid user account plan
 ---
-import shared from '../../../src/shared.js'
 
 <Note>
 

content/getting-started/paying-for-your-npm-user-account/viewing-downloading-and-emailing-receipts-for-your-user-account.mdx

@@ -1,7 +1,6 @@
 ---
 title: Viewing, downloading, and emailing receipts for your npm user account
 ---
-import shared from '../../../src/shared.js'
 
 <Note>
 

content/getting-started/setting-up-your-npm-user-account/about-two-factor-authentication.mdx

@@ -1,6 +1,7 @@
 ---
 title: About two-factor authentication
-redirect_from: [ /getting-started/using-two-factor-authentication ]
+redirect_from:
+  - /getting-started/using-two-factor-authentication
 ---
 
 [Two-factor authentication (2FA)][2fa] protects against unauthorized access to your account by confirming your identity using:

content/getting-started/setting-up-your-npm-user-account/accessing-npm-using-2fa.mdx

@@ -1,8 +1,8 @@
 ---
 title: Accessing npm using two-factor authentication
-redirect_from: [ /getting-started/using-two-factor-authentication ]
+redirect_from:
+   - /getting-started/using-two-factor-authentication
 ---
-import shared from '../../../src/shared.js'
 
 ## Sign in from the command line using security-key flow
 

content/getting-started/setting-up-your-npm-user-account/configuring-two-factor-authentication.mdx

@@ -1,7 +1,6 @@
 ---
 title: Configuring two-factor authentication
 ---
-import shared from '../../../src/shared.js'
 
 You can enable two-factor authentication (2FA) on your npm user account to protect against unauthorized access to your account and packages, either by using a [security-key][webauthn] or [time-based one-time password (TOTP)][totp] from a mobile app.
 

content/getting-started/setting-up-your-npm-user-account/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up your npm user account
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/getting-started/setting-up-your-npm-user-account/receiving-a-one-time-password-over-email.mdx

@@ -1,7 +1,6 @@
 ---
 title: Receiving a one-time password over email
 ---
-import shared from '../../../src/shared.js'
 
 For your security, npm may require additional verification to allow you to log in to your account.  If you do not have [two-factor authentication](configuring-two-factor-authentication) enabled, you may be asked to verify yourself with a one-time password sent to the email address configured for your account.
 

content/getting-started/setting-up-your-npm-user-account/recovering-your-2fa-enabled-account.mdx

@@ -1,7 +1,6 @@
 ---
 title: Recovering your 2FA-enabled account
 ---
-import shared from '../../../src/shared.js'
 
 When you have two-factor access enabled on your account, and you lose access to your 2FA device, you may be able to recover your account using the following methods.
 

content/getting-started/troubleshooting/generating-and-locating-npm-debug.log-files.mdx

@@ -3,7 +3,6 @@ title: Generating and locating npm-debug.log files
 redirect_from:
   - /generating-and-locating-npm-debug-log-files
 ---
-import shared from '../../../src/shared.js'
 
 When a package fails to install or publish, the npm CLI will generate an `npm-debug.log` file. This log file can help you figure out what went wrong.
 

content/getting-started/troubleshooting/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Troubleshooting
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/index.mdx

@@ -1,10 +1,10 @@
 ---
 title: npm Documentation
-github_path: src/nav-base.yml
+github_path: src/nav.yml
+edit_on_github: false
 ---
 
-import {HeroLayout, Index} from 'theme'
+import HeroLayout from 'theme/src/layout/hero'
 export default HeroLayout
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index depth='1' />

content/integrations/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Integrations
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/integrations/integrating-npm-with-external-services/creating-and-viewing-access-tokens.mdx

@@ -1,6 +1,7 @@
 ---
 title: Creating and viewing access tokens
-redirect_from: [ /creating-and-viewing-authentication-tokens ]
+redirect_from:
+   - /creating-and-viewing-authentication-tokens
 ---
 
 You can [create](#creating-access-tokens) and [view](#viewing-access-tokens) access tokens from the website and command line interface (CLI).

content/integrations/integrating-npm-with-external-services/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Integrating npm with external services
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/integrations/integrating-npm-with-external-services/revoking-access-tokens.mdx

@@ -1,6 +1,7 @@
 ---
 title: Revoking access tokens
-redirect_from: [ /revoking-authentication-tokens ]
+redirect_from:
+   - /revoking-authentication-tokens
 ---
 
 To keep your account and packages secure, we strongly recommend revoking (deleting) tokens you no longer need or that have been compromised. You can revoke any token you have created.

content/organizations/creating-and-managing-organizations/converting-your-user-account-to-an-organization.mdx

@@ -3,7 +3,6 @@ title: Converting your user account to an organization
 redirect_from:
   - /converting-your-user-account-to-an-org
 ---
-import shared from '../../../src/shared.js'
 
 If you have an npm user account, you can convert your user account to an organization. When you convert your user account to an organization, we will:
 

content/organizations/creating-and-managing-organizations/creating-an-organization.mdx

@@ -4,7 +4,6 @@ redirect_from:
   - /orgs/creating-an-org
   - /creating-an-org
 ---
-import shared from '../../../src/shared.js'
 
 Any npm user can create an organization to manage contributor access to packages governed by the organization.
 

content/organizations/creating-and-managing-organizations/deleting-an-organization.mdx

@@ -3,7 +3,6 @@ title: Deleting an organization
 redirect_from:
   - /deleting-an-org
 ---
-import shared from '../../../src/shared.js'
 
 An organization administrator can delete the organization; packages in
 the organization will also [be deleted](/unpublishing-packages-from-the-registry) if they fulfill the

content/organizations/creating-and-managing-organizations/index.mdx

@@ -2,7 +2,7 @@
 title: Creating and managing organizations
 redirect_from:
   - /orgs/creating-and-managing-orgs
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/organizations/creating-and-managing-organizations/requiring-two-factor-authentication-in-your-organization.mdx

@@ -1,7 +1,6 @@
 ---
 title: Requiring two-factor authentication in your organization
 ---
-import shared from '../../../src/shared.js'
 
 Organization owners can require organization members to enable two-factor authentication for their personal accounts, making it harder for malicious actors to access an organization's packages and settings
 

content/organizations/index.mdx

@@ -3,12 +3,9 @@ title: Organizations
 redirect_from:
   - /getting-started/working-with-orgs
   - /orgs
+edit_on_github: false
 ---
 
-import {Link} from '@primer/components'
-import shared from '../../src/shared.js'
-
 <>Organizations allow teams of contributors to read and write public and private packages.  Organizations are free when they publish public packages.  When organizations publish private packages, an npm Teams subscription is required. For more information on npm Teams pricing, see our <Link href="https://www.npmjs.com/pricing">products page</Link>.</>
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/organizations/managing-organization-members/adding-members-to-your-organization.mdx

@@ -3,7 +3,6 @@ title: Adding members to your organization
 redirect_from:
   - /adding-members-to-your-org
 ---
-import shared from '../../../src/shared.js'
 
 As an organization owner, you can add other npm users to your organization to give them read or read and write access to public and private packages within your organization's scope, as well as public unscoped packages governed by your organization.
 

content/organizations/managing-organization-members/index.mdx

@@ -2,7 +2,7 @@
 title: Managing organization members
 redirect_from:
   - /orgs/managing-org-members
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />

content/organizations/managing-organization-members/managing-organization-permissions.mdx

@@ -3,7 +3,6 @@ title: Managing organization permissions
 redirect_from:
   - /managing-org-permissions
 ---
-import shared from '../../../src/shared.js'
 
 As an organization owner, you can change the role of any member of your organization to add or remove permissions on the organization for that member.
 

content/organizations/managing-organization-members/organization-roles-and-permissions.mdx

@@ -3,7 +3,6 @@ title: Organization roles and permissions
 redirect_from:
   - /org-roles-and-permissions
 ---
-import shared from '../../../src/shared.js'
 
 There are three roles in an organization:
 

content/organizations/managing-organization-members/removing-members-from-your-organization.mdx

@@ -3,7 +3,6 @@ title: Removing members from your organization
 redirect_from:
   - /removing-members-from-your-org
 ---
-import shared from '../../../src/shared.js'
 
 As an organization owner, you can remove members from your organization if they are no longer collaborating on packages owned or governed by your organization.
 

content/organizations/managing-organization-packages/configuring-your-npm-client-with-your-organization-settings.mdx

@@ -3,7 +3,6 @@ title: Configuring your npm client with your organization settings
 redirect_from:
   - /configuring-your-npm-client-with-your-org-settings
 ---
-import shared from '../../../src/shared.js'
 
 As an organization member, you can configure your npm client to:
 

content/organizations/managing-organization-packages/creating-and-publishing-an-organization-scoped-package.mdx

@@ -3,7 +3,6 @@ title: Creating and publishing an organization scoped package
 redirect_from:
   - /creating-and-publishing-an-org-scoped-package
 ---
-import shared from '../../../src/shared.js'
 
 As an organization member, you can create and publish public and private packages within the organization's scope.
 

content/organizations/managing-organization-packages/index.mdx

@@ -2,7 +2,7 @@
 title: Managing organization packages
 redirect_from:
   - /orgs/managing-org-packages
+edit_on_github: false
 ---
 
-<!-- edit the output of Index in `src/nav-base.yml` -->
 <Index />