From 8f99daf4f3073afe4091e755a754ab993f2c8048 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Fri, 27 Mar 2026 13:48:00 -0700 Subject: [PATCH 1/6] cli-reference --- src/components/Navigation.jsx | 4 +--- src/pages/docs/cli-reference/index.jsx | 21 +++++++++++++++++++ src/pages/docs/cli-reference/introduction.mdx | 7 +++++++ src/pages/docs/quickstart/index.mdx | 17 +-------------- 4 files changed, 30 insertions(+), 19 deletions(-) create mode 100644 src/pages/docs/cli-reference/index.jsx create mode 100644 src/pages/docs/cli-reference/introduction.mdx diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index 2466f0f..36a37c8 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -193,11 +193,9 @@ export const navigation = [ href: '/docs', links: [ { title: 'Install', href: '/docs/install' }, - { title: 'Basics', href: '/docs/quickstart' }, + { title: 'Quickstart', href: '/docs/quickstart' }, { title: 'Advanced', href: '/docs/advanced' }, { title: 'Ops ⛨', href: '/docs/ops' }, - { title: 'GitHub ★', href: 'https://github.com/dotenvx/dotenvx' }, - { title: 'Whitepaper ¶', href: '/dotenvx.pdf' }, ] }, { diff --git a/src/pages/docs/cli-reference/index.jsx b/src/pages/docs/cli-reference/index.jsx new file mode 100644 index 0000000..e4c121b --- /dev/null +++ b/src/pages/docs/cli-reference/index.jsx @@ -0,0 +1,21 @@ +import { HeadRedirect } from '@/components/HeadRedirect' + +export default function CliReferenceIndexPage() { + return ( + <> + + +

Redirecting

+ Click here if you are not redirected. + + ) +} + +export async function getStaticProps() { + return { + props: { + title: 'CLI Reference', + description: 'CLI Reference', + }, + } +} diff --git a/src/pages/docs/cli-reference/introduction.mdx b/src/pages/docs/cli-reference/introduction.mdx new file mode 100644 index 0000000..b04bcd1 --- /dev/null +++ b/src/pages/docs/cli-reference/introduction.mdx @@ -0,0 +1,7 @@ +export const description = + 'Introduction' + +##### [CLI Reference](/docs) +# Introduction + +TODO diff --git a/src/pages/docs/quickstart/index.mdx b/src/pages/docs/quickstart/index.mdx index ebadc3c..113e4fe 100644 --- a/src/pages/docs/quickstart/index.mdx +++ b/src/pages/docs/quickstart/index.mdx @@ -15,7 +15,7 @@ export const description = 'Manage secrets with dotenvx' ##### [Documentation](/docs) -# Basics +# Quickstart Learn the basics of `dotenvx` in just a few minutes. {{ className: 'lead' }} @@ -23,21 +23,6 @@ Learn the basics of `dotenvx` in just a few minutes. {{ className: 'lead' }} - multiple environments - encrypted envs -## Quickstart - -> Install and use it in code just like `dotenv`. - -```sh -npm install @dotenvx/dotenvx --save -``` -```js -// index.js -require('@dotenvx/dotenvx').config() -// or import '@dotenvx/dotenvx/config' // for esm - -console.log(`Hello ${process.env.HELLO}`) -``` - ## Run Anywhere > Run it with `dotenvx run -- yourcommand`. From d22279554e2a19c0c859f3fa022d4ab00bbab454 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Fri, 27 Mar 2026 13:54:14 -0700 Subject: [PATCH 2/6] add ref index --- src/pages/docs/cli-reference/index.jsx | 21 --------------------- src/pages/docs/cli-reference/index.mdx | 7 +++++++ 2 files changed, 7 insertions(+), 21 deletions(-) delete mode 100644 src/pages/docs/cli-reference/index.jsx create mode 100644 src/pages/docs/cli-reference/index.mdx diff --git a/src/pages/docs/cli-reference/index.jsx b/src/pages/docs/cli-reference/index.jsx deleted file mode 100644 index e4c121b..0000000 --- a/src/pages/docs/cli-reference/index.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import { HeadRedirect } from '@/components/HeadRedirect' - -export default function CliReferenceIndexPage() { - return ( - <> - - -

Redirecting

- Click here if you are not redirected. - - ) -} - -export async function getStaticProps() { - return { - props: { - title: 'CLI Reference', - description: 'CLI Reference', - }, - } -} diff --git a/src/pages/docs/cli-reference/index.mdx b/src/pages/docs/cli-reference/index.mdx new file mode 100644 index 0000000..8bb5f46 --- /dev/null +++ b/src/pages/docs/cli-reference/index.mdx @@ -0,0 +1,7 @@ +import { HeadRedirect } from '@/components/HeadRedirect' + + + +# Redirecting + +Click here if you are not redirected. From 71ab0c09a3036baf294802b530720b5500c66b3e Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Fri, 27 Mar 2026 14:06:57 -0700 Subject: [PATCH 3/6] nav --- src/components/Navigation.jsx | 121 ++++++++++++---------------------- 1 file changed, 42 insertions(+), 79 deletions(-) diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index 36a37c8..108fb47 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -2,13 +2,11 @@ import { useRef } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' import clsx from 'clsx' -import { AnimatePresence, motion, useIsPresent } from 'framer-motion' +import { AnimatePresence, motion } from 'framer-motion' import { Button } from '@/components/Button' import { useIsInsideMobileNavigation } from '@/components/MobileNavigation' -import { useSectionStore } from '@/components/SectionProvider' import { Tag } from '@/components/Tag' -import { remToPx } from '@/lib/remToPx' function useInitialValue(value, condition = true) { let initialValue = useRef(value).current @@ -51,58 +49,12 @@ function NavLink({ href, tag, active, isAnchorLink = false, children }) { ) } -function VisibleSectionHighlight({ group, pathname }) { - let [sections, visibleSections] = useInitialValue( - [ - useSectionStore((s) => s.sections), - useSectionStore((s) => s.visibleSections), - ], - useIsInsideMobileNavigation() - ) - - let isPresent = useIsPresent() - let firstVisibleSectionIndex = Math.max( - 0, - [{ id: '_top' }, ...sections].findIndex( - (section) => section.id === visibleSections[0] - ) - ) - let itemHeight = remToPx(2) - let height = isPresent - ? Math.max(1, visibleSections.length) * itemHeight - : itemHeight - let top = - group.links.findIndex((link) => link.href === pathname) * itemHeight + - firstVisibleSectionIndex * itemHeight - - return ( - - ) -} - -function ActivePageMarker({ group, pathname }) { - let itemHeight = remToPx(2) - let offset = remToPx(0.25) - let activePageIndex = group.links.findIndex((link) => link.href === pathname) - let top = offset + activePageIndex * itemHeight +function isLinkActive(link, pathname) { + if (link.href === pathname) { + return true + } - return ( - - ) + return (link.links ?? []).some((childLink) => childLink.href === pathname) } function NavigationGroup({ group, className }) { @@ -110,13 +62,7 @@ function NavigationGroup({ group, className }) { // state, so that the state does not change during the close animation. // The state will still update when we re-open (re-render) the navigation. let isInsideMobileNavigation = useIsInsideMobileNavigation() - let [router, sections] = useInitialValue( - [useRouter(), useSectionStore((s) => s.sections)], - isInsideMobileNavigation - ) - - let isActiveGroup = - group.links.findIndex((link) => link.href === router.pathname) !== -1 + let router = useInitialValue(useRouter(), isInsideMobileNavigation) return (
  • @@ -131,28 +77,18 @@ function NavigationGroup({ group, className }) { )}
    - - {isActiveGroup && ( - - )} - - - {isActiveGroup && ( - - )} -
      {group.links.map((link) => ( - + {link.title} - {link.href === router.pathname && sections.length > 0 && ( + {isLinkActive(link, router.pathname) && (link.links?.length ?? 0) > 0 && ( - {sections.map((section) => ( -
    • + {link.links.map((childLink) => ( +
    • - {section.title} + {childLink.title}
      • ))} @@ -193,11 +129,38 @@ export const navigation = [ href: '/docs', links: [ { title: 'Install', href: '/docs/install' }, - { title: 'Quickstart', href: '/docs/quickstart' }, + { + title: 'Quickstart', + href: '/docs/quickstart', + links: [ + { title: 'Node.js', href: '/docs/languages/nodejs' }, + { title: 'PHP', href: '/docs/languages/php' }, + { title: 'Ruby', href: '/docs/languages/ruby' }, + { title: 'Python', href: '/docs/languages/python' }, + { title: 'Go', href: '/docs/languages/go' }, + { title: 'Rust', href: '/docs/languages/rust' }, + { title: 'Java', href: '/docs/languages/java' }, + { title: '.NET', href: '/docs/languages/dotnet' }, + ], + }, { title: 'Advanced', href: '/docs/advanced' }, { title: 'Ops ⛨', href: '/docs/ops' }, ] }, + { + title: 'Quickstart', + href: '/docs/quickstart', + links: [ + { title: 'Node.js', href: '/docs/languages/nodejs' }, + { title: 'PHP', href: '/docs/languages/php' }, + { title: 'Ruby', href: '/docs/languages/ruby' }, + { title: 'Python', href: '/docs/languages/python' }, + { title: 'Go', href: '/docs/languages/go' }, + { title: 'Rust', href: '/docs/languages/rust' }, + { title: 'Java', href: '/docs/languages/java' }, + { title: '.NET', href: '/docs/languages/dotnet' }, + ] + }, { title: 'Ops ⛨', href: '/docs/ops', From 457840ed44c7eb2b7c9f24a92dda166f4f55ca12 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Fri, 27 Mar 2026 16:50:32 -0700 Subject: [PATCH 4/6] rearrange --- src/components/Navigation.jsx | 127 +++++++++--------- src/pages/docs/cli-reference/index.mdx | 7 - src/pages/docs/cli/index.mdx | 7 + .../{cli-reference => cli}/introduction.mdx | 0 src/pages/docs/introduction.mdx | 6 + src/pages/docs/secrets-for-express.mdx | 6 + src/pages/docs/secrets-for-nodejs.mdx | 6 + .../docs/secrets-for-nodejs/introduction.mdx | 6 + src/styles/tailwind.css | 11 ++ typography.js | 10 ++ 10 files changed, 116 insertions(+), 70 deletions(-) delete mode 100644 src/pages/docs/cli-reference/index.mdx create mode 100644 src/pages/docs/cli/index.mdx rename src/pages/docs/{cli-reference => cli}/introduction.mdx (100%) create mode 100644 src/pages/docs/introduction.mdx create mode 100644 src/pages/docs/secrets-for-express.mdx create mode 100644 src/pages/docs/secrets-for-nodejs.mdx create mode 100644 src/pages/docs/secrets-for-nodejs/introduction.mdx diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index 108fb47..f23f5e8 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -26,14 +26,20 @@ function TopLevelNavItem({ href, children }) { ) } -function NavLink({ href, tag, active, isAnchorLink = false, children }) { +function NavLink({ href, tag, active, level = 0, children }) { + let leftPaddingClass = { + 0: 'pl-0', + 1: 'pl-4', + 2: 'pl-4', + }[level] ?? 'pl-12' + return ( childLink.href === pathname) + return (link.links ?? []).some((childLink) => isLinkActive(childLink, pathname)) +} + +function NavigationLinkItem({ link, pathname, level = 0 }) { + let isActive = isLinkActive(link, pathname) + + return ( + + + {link.title} + + + {isActive && (link.links?.length ?? 0) > 0 && ( + + {level === 0 && ( + + )} + {link.links.map((childLink) => ( + + ))} + + )} + + + ) } function NavigationGroup({ group, className }) { @@ -76,46 +126,10 @@ function NavigationGroup({ group, className }) { {group.title} )} -
      - +
        {group.links.map((link) => ( - - - {link.title} - - - {isLinkActive(link, router.pathname) && (link.links?.length ?? 0) > 0 && ( - - {link.links.map((childLink) => ( -
      • - - {childLink.title} - -
        • - ))} -         - )} -         -         + ))}
      @@ -128,21 +142,8 @@ export const navigation = [ title: 'Documentation', href: '/docs', links: [ + { title: 'Introduction', href: '/docs/introduction' }, { title: 'Install', href: '/docs/install' }, - { - title: 'Quickstart', - href: '/docs/quickstart', - links: [ - { title: 'Node.js', href: '/docs/languages/nodejs' }, - { title: 'PHP', href: '/docs/languages/php' }, - { title: 'Ruby', href: '/docs/languages/ruby' }, - { title: 'Python', href: '/docs/languages/python' }, - { title: 'Go', href: '/docs/languages/go' }, - { title: 'Rust', href: '/docs/languages/rust' }, - { title: 'Java', href: '/docs/languages/java' }, - { title: '.NET', href: '/docs/languages/dotnet' }, - ], - }, { title: 'Advanced', href: '/docs/advanced' }, { title: 'Ops ⛨', href: '/docs/ops' }, ] @@ -151,14 +152,14 @@ export const navigation = [ title: 'Quickstart', href: '/docs/quickstart', links: [ - { title: 'Node.js', href: '/docs/languages/nodejs' }, - { title: 'PHP', href: '/docs/languages/php' }, - { title: 'Ruby', href: '/docs/languages/ruby' }, - { title: 'Python', href: '/docs/languages/python' }, - { title: 'Go', href: '/docs/languages/go' }, - { title: 'Rust', href: '/docs/languages/rust' }, - { title: 'Java', href: '/docs/languages/java' }, - { title: '.NET', href: '/docs/languages/dotnet' }, + { + title: 'Node.js', + href: '/docs/secrets-for-nodejs', + links: [ + { title: 'Introduction', href: '/docs/secrets-for-nodejs' }, + { title: 'Express', href: '/docs/secrets-for-express' }, + ], + }, ] }, { diff --git a/src/pages/docs/cli-reference/index.mdx b/src/pages/docs/cli-reference/index.mdx deleted file mode 100644 index 8bb5f46..0000000 --- a/src/pages/docs/cli-reference/index.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { HeadRedirect } from '@/components/HeadRedirect' - - - -# Redirecting - -Click here if you are not redirected. diff --git a/src/pages/docs/cli/index.mdx b/src/pages/docs/cli/index.mdx new file mode 100644 index 0000000..acb3cc9 --- /dev/null +++ b/src/pages/docs/cli/index.mdx @@ -0,0 +1,7 @@ +import { HeadRedirect } from '@/components/HeadRedirect' + + + +# Redirecting + +Click here if you are not redirected. diff --git a/src/pages/docs/cli-reference/introduction.mdx b/src/pages/docs/cli/introduction.mdx similarity index 100% rename from src/pages/docs/cli-reference/introduction.mdx rename to src/pages/docs/cli/introduction.mdx diff --git a/src/pages/docs/introduction.mdx b/src/pages/docs/introduction.mdx new file mode 100644 index 0000000..05977ff --- /dev/null +++ b/src/pages/docs/introduction.mdx @@ -0,0 +1,6 @@ +export const description = 'Introduction' + +##### [Documentation](/docs) +# Introduction + +coming soon diff --git a/src/pages/docs/secrets-for-express.mdx b/src/pages/docs/secrets-for-express.mdx new file mode 100644 index 0000000..e9d2fe9 --- /dev/null +++ b/src/pages/docs/secrets-for-express.mdx @@ -0,0 +1,6 @@ +export const description = 'Secrets for Express' + +##### [Documentation](/docs) +# Secrets for Express + +coming soon diff --git a/src/pages/docs/secrets-for-nodejs.mdx b/src/pages/docs/secrets-for-nodejs.mdx new file mode 100644 index 0000000..24b3bc5 --- /dev/null +++ b/src/pages/docs/secrets-for-nodejs.mdx @@ -0,0 +1,6 @@ +export const description = 'Secrets for Node.js' + +##### [Documentation](/docs) +# Secrets for Node.js + +coming soon diff --git a/src/pages/docs/secrets-for-nodejs/introduction.mdx b/src/pages/docs/secrets-for-nodejs/introduction.mdx new file mode 100644 index 0000000..3297424 --- /dev/null +++ b/src/pages/docs/secrets-for-nodejs/introduction.mdx @@ -0,0 +1,6 @@ +export const description = 'Secrets for Node.js Introduction' + +##### [Documentation](/docs) +# Secrets for Node.js: Introduction + +coming soon diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 4425af7..5752946 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -19,3 +19,14 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + .prose h5 a { + color: var(--tw-prose-captions); + text-decoration: none; + } + + .prose h5 a:hover { + color: var(--tw-prose-body); + } +} diff --git a/typography.js b/typography.js index c58a687..7227398 100644 --- a/typography.js +++ b/typography.js @@ -201,6 +201,16 @@ module.exports = ({ theme }) => ({ marginTop: theme('spacing.10'), marginBottom: theme('spacing.2'), }, + h5: { + color: 'var(--tw-prose-captions)', + }, + 'h5 a': { + color: 'var(--tw-prose-captions)', + textDecoration: 'none', + '&:hover': { + color: 'var(--tw-prose-body)', + }, + }, // Media 'img, video, figure': { From dde59cc5a03e8f5cec49c2fc925b6d72ba6338d6 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Sat, 28 Mar 2026 09:41:09 -0700 Subject: [PATCH 5/6] secrets in express and node --- src/components/Header.jsx | 2 +- src/components/Navigation.jsx | 47 ++++++++++------- src/pages/docs/secrets-for-express.mdx | 6 --- src/pages/docs/secrets-for-nodejs.mdx | 6 --- .../docs/secrets-for-nodejs/introduction.mdx | 6 --- src/pages/docs/secrets-in-express.mdx | 50 +++++++++++++++++++ src/pages/docs/secrets-in-nodejs.mdx | 37 ++++++++++++++ .../partials/installNodeSdkCodeGroup.mdx | 19 +++++++ 8 files changed, 136 insertions(+), 37 deletions(-) delete mode 100644 src/pages/docs/secrets-for-express.mdx delete mode 100644 src/pages/docs/secrets-for-nodejs.mdx delete mode 100644 src/pages/docs/secrets-for-nodejs/introduction.mdx create mode 100644 src/pages/docs/secrets-in-express.mdx create mode 100644 src/pages/docs/secrets-in-nodejs.mdx create mode 100644 src/pages/partials/installNodeSdkCodeGroup.mdx diff --git a/src/components/Header.jsx b/src/components/Header.jsx index b400e89..3a7b031 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -86,7 +86,7 @@ export const Header = forwardRef(function Header({ className }, ref) { Get Started diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index f23f5e8..ed88d58 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -18,7 +18,7 @@ function TopLevelNavItem({ href, children }) {
    • {children} @@ -26,23 +26,25 @@ function TopLevelNavItem({ href, children }) { ) } -function NavLink({ href, tag, active, level = 0, children }) { +function NavLink({ href, tag, active, current, level = 0, children }) { let leftPaddingClass = { - 0: 'pl-0', - 1: 'pl-4', - 2: 'pl-4', - }[level] ?? 'pl-12' + 0: 'pl-2', + 1: 'pl-3', + 2: 'pl-3', + }[level] ?? 'pl-10' return ( {children} @@ -63,19 +65,28 @@ function isLinkActive(link, pathname) { return (link.links ?? []).some((childLink) => isLinkActive(childLink, pathname)) } +function hasDescendantWithHref(link, href) { + return (link.links ?? []).some( + (childLink) => childLink.href === href || hasDescendantWithHref(childLink, href) + ) +} + function NavigationLinkItem({ link, pathname, level = 0 }) { let isActive = isLinkActive(link, pathname) + // Only one item should be "current" (gets the persistent bg). If a parent and + // child share the same href, prefer the deepest child. + let isCurrent = link.href === pathname && !hasDescendantWithHref(link, pathname) return ( - + {link.title} {isActive && (link.links?.length ?? 0) > 0 && ( {group.href ? ( {group.title} @@ -127,7 +138,7 @@ function NavigationGroup({ group, className }) { )}
      -
        +
          {group.links.map((link) => ( ))} @@ -154,10 +165,10 @@ export const navigation = [ links: [ { title: 'Node.js', - href: '/docs/secrets-for-nodejs', + href: '/docs/secrets-in-nodejs', links: [ - { title: 'Introduction', href: '/docs/secrets-for-nodejs' }, - { title: 'Express', href: '/docs/secrets-for-express' }, + { title: 'Introduction', href: '/docs/secrets-in-nodejs' }, + { title: 'Express', href: '/docs/secrets-in-express' }, ], }, ] diff --git a/src/pages/docs/secrets-for-express.mdx b/src/pages/docs/secrets-for-express.mdx deleted file mode 100644 index e9d2fe9..0000000 --- a/src/pages/docs/secrets-for-express.mdx +++ /dev/null @@ -1,6 +0,0 @@ -export const description = 'Secrets for Express' - -##### [Documentation](/docs) -# Secrets for Express - -coming soon diff --git a/src/pages/docs/secrets-for-nodejs.mdx b/src/pages/docs/secrets-for-nodejs.mdx deleted file mode 100644 index 24b3bc5..0000000 --- a/src/pages/docs/secrets-for-nodejs.mdx +++ /dev/null @@ -1,6 +0,0 @@ -export const description = 'Secrets for Node.js' - -##### [Documentation](/docs) -# Secrets for Node.js - -coming soon diff --git a/src/pages/docs/secrets-for-nodejs/introduction.mdx b/src/pages/docs/secrets-for-nodejs/introduction.mdx deleted file mode 100644 index 3297424..0000000 --- a/src/pages/docs/secrets-for-nodejs/introduction.mdx +++ /dev/null @@ -1,6 +0,0 @@ -export const description = 'Secrets for Node.js Introduction' - -##### [Documentation](/docs) -# Secrets for Node.js: Introduction - -coming soon diff --git a/src/pages/docs/secrets-in-express.mdx b/src/pages/docs/secrets-in-express.mdx new file mode 100644 index 0000000..afac9e9 --- /dev/null +++ b/src/pages/docs/secrets-in-express.mdx @@ -0,0 +1,50 @@ +import InstallNodeSdkCodeGroup from '@/pages/partials/installNodeSdkCodeGroup.mdx' + +##### [Documentation](/docs) +# Encrypt secrets in Express + +Learn how to encrypt your first .env file using Express and the Dotenvx Node.js SDK. + +## Prerequisites + +To get the most out of this guide, you'll need to: + +* Optional: Create your Dotenvx account + +## 1. Install + +Get the Dotenvx Node.js SDK. + + + +## 2. Encrypt + +Encrypt your .env file. + +```sh {{ title: '$ terminal' }} +npx dotenvx encrypt +``` + +## 3. Inject + +Then inject your encrypted secrets at runtime. + + +```js {{ title: 'index.js' }} +require('@dotenvx/dotenvx').config() +const express = require('express') + +const app = express() +app.use(express.json()) + +app.get('/', (req, res) => { + res.json({ + ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY + }) +}) + +const port = process.env.PORT || 3000 +app.listen(port, () => { + console.log(`Server running on http://localhost:${port}`) +}) +``` diff --git a/src/pages/docs/secrets-in-nodejs.mdx b/src/pages/docs/secrets-in-nodejs.mdx new file mode 100644 index 0000000..cbe2a94 --- /dev/null +++ b/src/pages/docs/secrets-in-nodejs.mdx @@ -0,0 +1,37 @@ +import InstallNodeSdkCodeGroup from '@/pages/partials/installNodeSdkCodeGroup.mdx' + +##### [Documentation](/docs) +# Encrypt secrets in Node.js + +Learn how to encrypt your first .env file using the Dotenvx Node.js SDK. + +## Prerequisites + +To get the most out of this guide, you'll need to: + +* Optional: Create your Dotenvx account + +## 1. Install + +Get the Dotenvx Node.js SDK. + + + +## 2. Encrypt + +Encrypt your .env file. + +```sh {{ title: '$ terminal' }} +npx dotenvx encrypt +``` + +## 3. Inject + +Then inject your encrypted secrets at runtime. + + +```js {{ title: 'index.js' }} +require('@dotenvx/dotenvx').config() + +console.log(`ANTHROPIC_API_KEY: ${process.env.ANTHROPIC_API_KEY}`) +``` diff --git a/src/pages/partials/installNodeSdkCodeGroup.mdx b/src/pages/partials/installNodeSdkCodeGroup.mdx new file mode 100644 index 0000000..e1c78e0 --- /dev/null +++ b/src/pages/partials/installNodeSdkCodeGroup.mdx @@ -0,0 +1,19 @@ + + +```bash {{ title: "npm" }} +npm install @dotenvx/dotenvx +``` + +```bash {{ title: "yarn" }} +yarn add @dotenvx/dotenvx +``` + +```bash {{ title: "pnpm" }} +pnpm add @dotenvx/dotenvx +``` + +```bash {{ title: "bun" }} +bun add @dotenvx/dotenvx +``` + + From 2c7b2a630e88b2b7a1b3293c11b3879aacbe24e0 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Sat, 28 Mar 2026 10:04:43 -0700 Subject: [PATCH 6/6] rearrange --- src/components/Navigation.jsx | 27 +++++----- src/pages/docs/introduction.mdx | 9 +++- src/pages/docs/secrets-in-express.mdx | 7 +-- src/pages/docs/secrets-in-nodejs.mdx | 3 +- typography.js | 74 ++++++++++++++++----------- 5 files changed, 71 insertions(+), 49 deletions(-) diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index ed88d58..f23eaed 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -86,7 +86,7 @@ function NavigationLinkItem({ link, pathname, level = 0 }) { {isActive && (link.links?.length ?? 0) > 0 && ( -## 2. Encrypt +## 2. Encrypt env file Encrypt your .env file. @@ -25,7 +26,7 @@ Encrypt your .env file. npx dotenvx encrypt ``` -## 3. Inject +## 3. Inject secrets Then inject your encrypted secrets at runtime. diff --git a/src/pages/docs/secrets-in-nodejs.mdx b/src/pages/docs/secrets-in-nodejs.mdx index cbe2a94..57efb3f 100644 --- a/src/pages/docs/secrets-in-nodejs.mdx +++ b/src/pages/docs/secrets-in-nodejs.mdx @@ -9,7 +9,8 @@ Learn how to encrypt your first .env file using the Dotenvx Node.js SDK. To get the most out of this guide, you'll need to: -* Optional: Create your Dotenvx account +* [Install dotenvx](/docs/install) +* [Create your account](https://dotenvx.com/signup) (optional) ## 1. Install diff --git a/typography.js b/typography.js index 7227398..515ef0d 100644 --- a/typography.js +++ b/typography.js @@ -3,9 +3,9 @@ module.exports = ({ theme }) => ({ css: { '--tw-prose-body': theme('colors.zinc.700'), '--tw-prose-headings': theme('colors.zinc.900'), - '--tw-prose-links': theme('colors.yellow.500'), - '--tw-prose-links-hover': theme('colors.yellow.600'), - '--tw-prose-links-underline': theme('colors.yellow.500 / 0.3'), + '--tw-prose-links': '#000000', + '--tw-prose-links-hover': '#000000', + '--tw-prose-links-underline': 'rgb(9 9 11 / 0.55)', '--tw-prose-bold': theme('colors.zinc.900'), '--tw-prose-counters': theme('colors.zinc.500'), '--tw-prose-bullets': theme('colors.zinc.300'), @@ -21,9 +21,9 @@ module.exports = ({ theme }) => ({ '--tw-prose-invert-body': theme('colors.zinc.400'), '--tw-prose-invert-headings': theme('colors.white'), - '--tw-prose-invert-links': theme('colors.yellow.400'), - '--tw-prose-invert-links-hover': theme('colors.yellow.500'), - '--tw-prose-invert-links-underline': theme('colors.yellow.500 / 0.3'), + '--tw-prose-invert-links': theme('colors.zinc.400'), + '--tw-prose-invert-links-hover': theme('colors.zinc.400'), + '--tw-prose-invert-links-underline': theme('colors.zinc.400 / 0.5'), '--tw-prose-invert-bold': theme('colors.white'), '--tw-prose-invert-counters': theme('colors.zinc.400'), '--tw-prose-invert-bullets': theme('colors.zinc.600'), @@ -39,7 +39,7 @@ module.exports = ({ theme }) => ({ // Base color: 'var(--tw-prose-body)', - fontSize: theme('fontSize.sm')[0], + fontSize: '0.9375rem', lineHeight: theme('lineHeight.7'), // Layout @@ -56,8 +56,8 @@ module.exports = ({ theme }) => ({ // Text p: { - marginTop: theme('spacing.6'), - marginBottom: theme('spacing.6'), + marginTop: theme('spacing.4'), + marginBottom: theme('spacing.4'), }, '[class~="lead"]': { fontSize: theme('fontSize.base')[0], @@ -67,8 +67,8 @@ module.exports = ({ theme }) => ({ // Lists ol: { listStyleType: 'decimal', - marginTop: theme('spacing.5'), - marginBottom: theme('spacing.5'), + marginTop: theme('spacing.3'), + marginBottom: theme('spacing.3'), paddingLeft: '1.625rem', }, 'ol[type="A"]': { @@ -100,39 +100,41 @@ module.exports = ({ theme }) => ({ }, ul: { listStyleType: 'disc', - marginTop: theme('spacing.5'), - marginBottom: theme('spacing.5'), - paddingLeft: '1.625rem', + marginTop: theme('spacing.3'), + marginBottom: theme('spacing.3'), + paddingLeft: '2rem', }, li: { - marginTop: theme('spacing.2'), - marginBottom: theme('spacing.2'), + marginTop: theme('spacing.1'), + marginBottom: theme('spacing.1'), }, ':is(ol, ul) > li': { - paddingLeft: theme('spacing[1.5]'), + paddingLeft: theme('spacing.2'), }, 'ol > li::marker': { fontWeight: '400', color: 'var(--tw-prose-counters)', }, 'ul > li::marker': { - color: 'var(--tw-prose-bullets)', + color: theme('colors.zinc.600'), + fontWeight: '700', + fontSize: '1.1em', }, '> ul > li p': { - marginTop: theme('spacing.3'), - marginBottom: theme('spacing.3'), + marginTop: theme('spacing.1'), + marginBottom: theme('spacing.1'), }, '> ul > li > *:first-child': { - marginTop: theme('spacing.5'), + marginTop: theme('spacing.2'), }, '> ul > li > *:last-child': { - marginBottom: theme('spacing.5'), + marginBottom: theme('spacing.2'), }, '> ol > li > *:first-child': { - marginTop: theme('spacing.5'), + marginTop: theme('spacing.2'), }, '> ol > li > *:last-child': { - marginBottom: theme('spacing.5'), + marginBottom: theme('spacing.2'), }, 'ul ul, ul ol, ol ul, ol ol': { marginTop: theme('spacing.3'), @@ -190,7 +192,7 @@ module.exports = ({ theme }) => ({ fontWeight: '600', fontSize: theme('fontSize.lg')[0], ...theme('fontSize.lg')[1], - marginTop: theme('spacing.16'), + marginTop: theme('spacing.8'), marginBottom: theme('spacing.2'), }, h3: { @@ -288,16 +290,26 @@ module.exports = ({ theme }) => ({ // Inline elements a: { color: 'var(--tw-prose-links)', - textDecoration: 'underline transparent', - fontWeight: '500', - transitionProperty: 'color, text-decoration-color', - transitionDuration: theme('transitionDuration.DEFAULT'), - transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'), + textDecoration: 'none', + borderBottom: '1px solid currentColor', + fontWeight: '400', '&:hover': { color: 'var(--tw-prose-links-hover)', - textDecorationColor: 'var(--tw-prose-links-underline)', + borderBottomWidth: '2px', }, }, + 'a.no-underline': { + borderBottom: 'none', + }, + 'a.no-underline:hover': { + borderBottom: 'none', + }, + 'h5 a, h5 a:hover': { + color: 'var(--tw-prose-captions)', + textDecoration: 'none', + borderBottom: 'none', + fontWeight: '400', + }, ':is(h1, h2, h3) a': { fontWeight: 'inherit', },