chore: merge main into redesign (#5385)

* feat: introduce built-in next.js exports and updated scripts and configs (#5384)

* chore: updated gitignore and rmeoved robots.txt

* chore: updated next-sitemap config

* chore: next-config refactored options and export support

* chore: updated imports to node: prefix

* chore: updated contributing guidelines

* chore: updated scripts

* chore: updated next-sitemap

* chore: added missing props

* fix: github-pages

* chore: remove unused package

* fix(storybook): update packages (#5386)

---------

Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com>

.github/workflows/github-pages.yml

@@ -50,7 +50,7 @@ jobs:
           enableCrossOsArchive: true
 
       - name: Build Next.js
-        run: npx turbo build
+        run: npx turbo deploy
         env:
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
           TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
@@ -66,9 +66,6 @@ jobs:
           key: build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('node_modules/.cache') }}
           enableCrossOsArchive: true
 
-      - name: Export Next.js static files
-        run: npx turbo export
-
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v1
         with:

.gitignore

@@ -1,16 +1,19 @@
 # Commonly ignored Node.js files
-node_modules/
+node_modules
 npm-debug.log
-.npm/
+.npm
 
 # OSX system files, the bane of our existence
 .DS_Store
 .AppleDouble
 .LSOverride
 
-# Next.js files
+# Next.js Build Output
 .next
 build
+
+# Next.js Generated Files
+public/robots.txt
 public/sitemap.xml
 public/en/feed/*.xml
 pages/en/blog/year-[0-9][0-9][0-9][0-9].md
@@ -26,8 +29,6 @@ coverage
 # Storybook
 storybook-static
 
-# Vercel Config
+# Vercel Files
 .vercel
-
-# TurboRepo
 .turbo

CONTRIBUTING.md

@@ -87,8 +87,9 @@ npx turbo format
 
 - `npx turbo serve` runs Next.js's Local Development Server, listening by default on `http://localhost:3000/`.
 - `npx turbo build` builds the Application on Production mode. The output is by default within `.next` folder.
-- `npx turbo export` exports the website from the `.next` into a fully static website. The output is by default within `build` folder.
-  - This is what it's used to deploy the website on our current Node.js servers.
+  - This is used for the Node.js Vercel Deployments (Preview & Production)
+- `npx turbo deploy` builds the Application on Export Production Mode. The output is by default within `build` folder.
+  - This is used for the Node.js Legacy Website Server (DigitalOcean)
 - `npx turbo start` starts a web server running serving the built content from `npx turbo build`
 
 #### Other CLI options

hooks/__tests__/useCopyToClipboard.test.tsx

@@ -1,13 +1,20 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
 import { IntlProvider } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
 
 const mockWriteText = jest.fn();
 const originalNavigator = { ...window.navigator };
 
+const testMessages = {
+  'components.common.shellBox.copy':
+    '{copied, select, true {copied}other {copy}}',
+};
+
 describe('useCopyToClipboard', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
+
     Object.defineProperty(window, 'navigator', {
       value: {
         clipboard: {
@@ -23,22 +30,7 @@ describe('useCopyToClipboard', () => {
     });
   });
 
-  const TestComponent = ({ textToCopy }: { textToCopy: string }) => {
-    const [copied, copyText] = useCopyToClipboard();
-
-    return (
-      <IntlProvider locale="en" onError={() => {}}>
-        <button onClick={() => copyText(textToCopy)} type="button">
-          <FormattedMessage
-            id="components.common.shellBox.copy"
-            values={{ copied }}
-          />
-        </button>
-      </IntlProvider>
-    );
-  };
-
-  it('should call clipboard API with `test` once', () => {
+  it('should call clipboard API with `test` once', async () => {
     const navigatorClipboardWriteTextSpy = jest
       .fn()
       .mockImplementation(() => Promise.resolve());
@@ -50,9 +42,33 @@ describe('useCopyToClipboard', () => {
       },
     });
 
+    const TestComponent = ({ textToCopy }: { textToCopy: string }) => {
+      const [copied, copyText] = useCopyToClipboard();
+
+      return (
+        <IntlProvider locale="en" messages={testMessages} onError={() => {}}>
+          <button onClick={() => copyText(textToCopy)} type="button">
+            <FormattedMessage
+              id="components.common.shellBox.copy"
+              values={{ copied }}
+            />
+          </button>
+        </IntlProvider>
+      );
+    };
+
     render(<TestComponent textToCopy="test" />);
+
     const button = screen.getByRole('button');
-    fireEvent.click(button);
+
+    await fireEvent.click(button);
+
+    expect(await screen.findByText(/copied/i)).toBeInTheDocument();
+
+    act(() => jest.advanceTimersByTime(3000));
+
+    expect(await screen.findByText(/copy/i)).toBeInTheDocument();
+
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test');
   });

next-sitemap.config.mjs

@@ -0,0 +1,26 @@
+// This is used for telling Next.js to to a Static Export Build of the Website
+// We use this within this config file to determine the output directory of this generated sitemap files
+const enableStaticExport = process.env.NEXT_STATIC_EXPORT === 'true';
+
+/** @type {import('next-sitemap').IConfig} */
+const sitemapConfig = {
+  siteUrl: 'https://nodejs.org',
+  changefreq: 'always',
+  trailingSlash: false,
+  generateRobotsTxt: true,
+  generateIndexSitemap: false,
+  outDir: enableStaticExport ? 'build' : 'public',
+  sourceDir: enableStaticExport ? 'build' : '.next',
+  output: enableStaticExport ? 'export' : undefined,
+  robotsTxtOptions: {
+    policies: [
+      {
+        userAgent: '*',
+        disallow: ['/dist/', '/docs/'],
+        allow: ['/dist/latest/', '/dist/latest/docs/api/', '/api/'],
+      },
+    ],
+  },
+};
+
+export default sitemapConfig;

next.config.mjs

@@ -18,12 +18,22 @@ const withNextra = nextra({
   },
 });
 
-const enableImageOptimization =
-  process.env.NEXT_ENABLE_IMAGE_OPTIMIZATION === 'true';
+// This is used for telling Next.js to to a Static Export Build of the Website
+// This is used for static/without a Node.js server hosting, such as on our
+// legacy Website Build Environment on Node.js's DigitalOcean Droplet.
+// Note.: Image optimization is also disabled through this process
+const enableStaticExport = process.env.NEXT_STATIC_EXPORT === 'true';
+
+// Supports a manuall override of the base path of the website
+// This is useful when running the deployment on a subdirectory
+// of a domain, such as when hosted on GitHub Pages.
+const basePath = String(process.env.NEXT_BASE_PATH || '');
 
 export default withNextra({
+  basePath,
   trailingSlash: false,
-  images: { unoptimized: !enableImageOptimization },
   outputFileTracing: false,
-  basePath: String(process.env.NEXT_BASE_PATH || ''),
+  distDir: enableStaticExport ? 'build' : '.next',
+  output: enableStaticExport ? 'export' : undefined,
+  images: { unoptimized: enableStaticExport },
 });