script and action to check for certain console errors

.github/CODEOWNERS

@@ -6,7 +6,7 @@
 /src/**/cli/ @josefaidt @aws-amplify/documentation-team 
 
 #Studio
-/src/pages/console/ @wrpeck @aws-amplify/documentation-team 
+/src/pages/console/  @dbanksdesign  @aws-amplify/documentation-team 
 
 #Analytics
 /src/**/**/analytics @abdallahshaban557 @aws-amplify/documentation-team 

.github/workflows/check_bundle_size.yml

@@ -0,0 +1,72 @@
+name: Check Bundle Size
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  checkBundleSizeChange:
+    permissions:
+      pull-requests: read
+    name: Check whether PR increases bundle size more than 5%
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main branch
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 https://github.com/actions/checkout/commit/f43a0e5ff2bd294095638e18286ca9a3d1956744
+        with:
+          ref: main
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 https://github.com/actions/setup-node/commit/5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        with:
+          node-version: 16.x
+      - name: Install dependencies
+        run: yarn
+      - name: Run build and analyze base bundle sizes
+        env:
+          CURRENT_BRANCH: ${{ github.base_ref }}
+          CURRENT_REPO: ${{ github.repository }}
+          NODE_OPTIONS: --max_old_space_size=4096
+        run: ANALYZE=true yarn next-build
+      - name: Check base bundle size of select pages
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        id: base-bundle-sizes
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { checkBundleSize } = require('./.github/workflows/scripts/check_bundle_size.js');
+            return checkBundleSize();
+      - name: Checkout PR branch
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 https://github.com/actions/checkout/commit/f43a0e5ff2bd294095638e18286ca9a3d1956744
+        with:
+          ref: ${{ github.head_ref }}
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v.3.8.1 https://github.com/actions/setup-node/commit/5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        with:
+          node-version: 16.x
+      - name: Install dependencies
+        run: yarn
+      - name: Run build and analyze head bundle sizes
+        env:
+          CURRENT_BRANCH: ${{ github.head_ref }}
+          CURRENT_REPO: ${{ github.repository }}
+          NODE_OPTIONS: --max_old_space_size=4096
+        run: ANALYZE=true yarn next-build
+      - name: Check head bundle size of select pages
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        id: head-bundle-sizes
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { checkBundleSize } = require('./.github/workflows/scripts/check_bundle_size.js');
+            return checkBundleSize();
+      - name: Compare bundle page bundle sizes
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        id: compare-bundles
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { compareBundles } = require('./.github/workflows/scripts/check_bundle_size.js');
+            const baseBundles = ${{ steps.base-bundle-sizes.outputs.result }}
+            const headBundles = ${{ steps.head-bundle-sizes.outputs.result }}
+            return await compareBundles(baseBundles, headBundles)
+      - name: Fail if bundle size growth exceeds 5% on any of the selected pages
+        if: ${{ steps.compare-bundles.outputs.result > 0 }}
+        run: exit 1

.github/workflows/check_for_broken_links.yml

@@ -24,8 +24,8 @@ jobs:
         with:
           result-encoding: string
           script: |
-            const { checkLinks } = require('./tasks/link-checker.js');
-            return await checkLinks();
+            const { checkProdLinks } = require('./tasks/link-checker.js');
+            return await checkProdLinks();
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@5fd3084fc36e372ff1fff382a39b10d03659f355 # v2.2.0
         with:

.github/workflows/check_for_console_errors.yml

@@ -0,0 +1,39 @@
+name: CheckConsoleErrors
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+permissions:
+  contents: read
+  id-token: write
+jobs:
+  CheckConsoleErrors:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 https://github.com/actions/checkout/commit/f43a0e5ff2bd294095638e18286ca9a3d1956744
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 https://github.com/actions/setup-node/commit/e33196f7422957bea03ed53f6fbb155025ffc7b8
+        with:
+          node-version: 16.x
+      - name: Install Dependencies
+        run: yarn
+      - name: Run Build
+        run: yarn build
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+      - name: Run Server
+        run: |
+          node ./node_modules/.bin/serve client/www/next-build --no-request-logging &
+          sleep 5
+      - name: Run Console Errors
+        id: consoleErrors
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        with:
+          result-encoding: string
+          script: |
+            const { consoleErrors } = require('./tasks/console-errors.js');
+            return await consoleErrors();
+      - name: Fail if console errors have been found
+        if: ${{ steps.consoleErrors.outputs.result }}
+        run: exit 1

.github/workflows/check_pr_for_broken_links.yml

@@ -0,0 +1,36 @@
+name: CheckPRLinks
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+jobs:
+  CheckPRLinks:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 https://github.com/actions/checkout/commit/f43a0e5ff2bd294095638e18286ca9a3d1956744
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 https://github.com/actions/setup-node/commit/e33196f7422957bea03ed53f6fbb155025ffc7b8
+        with:
+          node-version: 16.x
+      - name: Install Dependencies
+        run: yarn
+      - name: Run Build
+        run: yarn build
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+      - name: Run Server
+        run: |
+          node ./node_modules/.bin/serve client/www/next-build --no-request-logging &
+          sleep 5
+      - name: Run Link Checker
+        id: checkLinks
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        with:
+          result-encoding: string
+          script: |
+            const { checkDevLinks } = require('./tasks/link-checker.js');
+            return await checkDevLinks();
+      - name: Fail if broken links have been found
+        if: ${{ steps.checkLinks.outputs.result }}
+        run: exit 1

.github/workflows/scripts/check_bundle_size.js

@@ -0,0 +1,47 @@
+module.exports = {
+  checkBundleSize: () => {
+    const fs = require('fs');
+    const jsonString = fs.readFileSync('.github/analyze/bundles.json');
+    const data = JSON.parse(jsonString);
+    const pagesToCheck = [
+      '/',
+      '/cli/start/install',
+      '/lib/auth/getting-started/q/platform/[platform]',
+      '/start',
+      '/cli'
+    ];
+    const bundleSizes = [];
+    data.pages.filter((page) => {
+      if (pagesToCheck.includes(page.label)) {
+        bundleSizes.push({
+          page: page.label,
+          gzipSize: page.gzipSize,
+          parsedSize: page.parsedSize,
+          statSize: page.statSize,
+          totalGzipSize: page.totalGzipSize,
+          totalParsedSize: page.totalParsedSize,
+          totalStatSize: page.totalStatSize
+        });
+      }
+    });
+    return bundleSizes;
+  },
+
+  compareBundles: (baseBundles, headBundles) => {
+    const fails = [];
+    baseBundles.forEach((basePage) => {
+      headBundles.forEach((headPage) => {
+        if (
+          basePage.page == headPage.page &&
+          basePage.parsedSize * 1.05 < headPage.parsedSize
+        ) {
+          fails.push(basePage.page);
+        }
+      });
+    });
+    console.log(
+      `The bundle size of ${fails} increased by more than 5% with this PR`
+    );
+    return fails.length;
+  }
+};

Readme.md

@@ -13,18 +13,20 @@
 
 1. [Fork this repo](/fork) and `git clone` it.
 2. In your terminal, navigate to the repo from where it was just cloned. This should be located at the `/docs` directory.
-2. From your command line, run `yarn && yarn dev`.
-3. <http://localhost:3000/> should open automatically.
+3. From your command line, run `yarn && yarn dev`.
+4. <http://localhost:3000/> should open automatically.
 
 ## How to contribute
 
 We welcome contributions to the documentation site! Here's how to do it:
 
 1. Follow our [styleguide](https://github.com/aws-amplify/docs/blob/main/STYLEGUIDE.md), especially if writing longer pieces.
-2. Verify your changes locally. 
+2. Verify your changes locally.
 3. Make a PR to our `main` branch.
-    1. Please include any [issues](https://github.com/aws-amplify/docs/issues) your PR addresses.
-    2. If any files have been deleted with your PR, please indicate that `redirects are needed` in your PR description and/or add the `redirects-needed` label.
+   1. Please include any [issues](https://github.com/aws-amplify/docs/issues) your PR addresses.
+   2. If any files have been deleted with your PR, please add the redirects required to [`redirects.json`](https://github.com/aws-amplify/docs/blob/main/redirects.json) and ensure that the `redirects-needed` label has been added.
+      - Please see the [Amplify Hosting user guide](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html) for guidance on values and ordering.
+      - Please note that there is a manual step for the Docs Engineering team to complete before the redirects are live.
 
 **What's next?** After your PR is reviewed and all tests pass, it will be merged and the branch will be deleted.
 
@@ -48,50 +50,51 @@ IMPORTANT: Every page has to have a `title` and `description` meta field.
 The markdown body is parsed as [MDX](https://mdxjs.com/) and can include any valid HTML or JSX.
 
 ### Fragments
+
 To incorporate new platform-specific content within a page, please use [Inline Filters](https://github.com/aws-amplify/docs/blob/main/Readme.md#inline-filters).
 
 When editing content that hasn't been migrated, you may see the following pattern:
 
 ```jsx
-import js from "/src/fragments/lib/datastore/js/conflict.mdx";
+import js from '/src/fragments/lib/datastore/js/conflict.mdx';
 
-<Fragments fragments={{js: js}} />;
+<Fragments fragments={{ js: js }} />;
 ```
 
 This pattern incorporates fragment files into a page and conditionally renders content based off selected platform added as a condition to the `Fragments` tag.
 
 This fragment would exist in: `pages/src/fragments/lib/datastore/js/conflict.mdx`
 
-### Inline Filters 
+### Inline Filters
 
 We are incorporating the use of `<InlineFilters>` to add platform-specific content within the context of one page rather than in fragments. These filters allow you to still specify content by platform and they reference platforms using the same naming convention as our fragments. You can enclose your platform-specific content by updating the opening tag:
 
-````md
+```md
 <InlineFilter filters={["js", "react-native", "android", "ios", "flutter"]}>
 
 </InlineFilter>
-````
- 
+```
+
 If you are updating content on a page, please note any inline filter tags which may be indicating a specific platform as you make your edits.
 
-### Accordion 
+### Accordion
 
 `Accordion` This single-use accordion hides peripheral content until the reader selects to expand the section. This helps you keep your pages focused on the need-to-know information upfront, while also providing readers an option to dive deeper when they choose. These accordions can provide peripheral content such as additional context for beginners, advanced deep dives for those who want to off-road, and troubleshooting guidance for errors users may encounter.
 
 Here is an example of its usage:
 
-````md
+```md
 <Accordion title='Review recommended accordion usage' headingLevel='4' eyebrow='Learn more'>
 
 - Title – Make your title descriptive to help readers know what the accordion contains before they click.
 - Heading Level – Keep the heading level consistent with your page hierarchy.
 - Eyebrow – Update this text to reflect the purpose of the accordion. We recommend:
-    - Learn more – used to add additional context that is not needed upfront but is useful for users to review when they choose.
-    - Troubleshooting – used when adding details to troubleshoot specific errors within context.
-    - Walkthrough – used when adding a step-by-step example for those who need more direct guidance.
+  - Learn more – used to add additional context that is not needed upfront but is useful for users to review when they choose.
+  - Troubleshooting – used when adding details to troubleshoot specific errors within context.
+  - Walkthrough – used when adding a step-by-step example for those who need more direct guidance.
 
 </Accordion>
-````
+```
 
 ### Tab-switchable Blocks
 
@@ -103,15 +106,15 @@ Here is an example of its usage:
 <Block name="JavaScript">
 
 ```js
-const a = "a";
+const a = 'a';
 ```
 
 </Block>
 
 <Block name="TypeScript">
 
 ```ts
-const a: "a" = "a";
+const a: 'a' = 'a';
 ```
 
 </Block>
@@ -130,23 +133,26 @@ let mut a = String::from("a");
 ## Debug client-side code with browser developer tools
 
 ### Prerequisites
-- [React Dev Tools](https://reactjs.org/tutorial/tutorial.html#developer-tools) 
-    - [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-    - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+
+- [React Dev Tools](https://reactjs.org/tutorial/tutorial.html#developer-tools)
+  - [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+  - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
 
 ### To debug
+
 1. Set up the repo and run it with the `dev` script mentioned above in the "Getting Started" section.
 2. On your localhost page, go to the page with the React component you want to debug and open up the developer tools.
 3. To know which source file to breakpoint on, we need to find the name of the component first.
-    - Open up the dev tools and use the react dev tools to find the component. Do this by using the "Select an element on the page to inspect it" tool under the "Components" tab.
 
-    - Search for the variable/component name inside the source code to find the file you want to debug.
+   - Open up the dev tools and use the react dev tools to find the component. Do this by using the "Select an element on the page to inspect it" tool under the "Components" tab.
+
+   - Search for the variable/component name inside the source code to find the file you want to debug.
+
+   - Place the breakpoint inside the file under the "Sources" tab in the browser's dev tools.
+     - Note that since the Amplify Docs site is built with nextjs, file paths will start with "`webpack://_N_E/./`"
 
-    - Place the breakpoint inside the file under the "Sources" tab in the browser's dev tools.
-        - Note that since the Amplify Docs site is built with nextjs, file paths will start with "`webpack://_N_E/./`"
 4. Refresh your localhost site and the breakpoint should hit in the browser's dev tools. You should be able to debug the code.
 
 Another way to find which file you want to debug is to search for strings/paragraphs seen in Amplify docs site. Search for the strings in your code editor and you'll find that they will be in a `.mdx` file. You should see the components that are being rendered and be able to find the file name you want to debug.
 
-
 More info on debugging can be found here: https://nextjs.org/docs/advanced-features/debugging

amplify.yml

@@ -8,6 +8,7 @@ frontend:
     build:
       commands:
         - echo "BUILD_ENV=$BUILD_ENV" >> .env.custom
+        - node -e 'console.log(`node heap limit = ${require("v8").getHeapStatistics().heap_size_limit / (1024 * 1024)} Mb`)'
         - NODE_ENV=production yarn build:release
         - if [ "${AWS_BRANCH}" = "main" ]; then node tasks/build-algolia-search.mjs; fi
   artifacts:

cspell.json

@@ -1522,7 +1522,9 @@
     "cloudwatchlogs",
     "userids",
     "xmark",
-    "refreshable"
+    "refreshable",
+    "querytransfers",
+    "generatemodelsforlazyloadandcustomselectionset"
   ],
   "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
   "patterns": [

customHttp.yml

@@ -13,5 +13,5 @@ customHeaders:
       - key: 'X-Content-Type-Options'
         value: 'nosniff'
       - key: 'Content-Security-Policy'
-        value: "upgrade-insecure-requests; default-src 'none'; prefetch-src 'self'; style-src 'self' 'unsafe-inline' *.shortbread.aws.dev; font-src 'self'; frame-src 'self' https://www.youtube-nocookie.com https://aws.demdex.net https://dpm.demdex.net; connect-src 'self' *.shortbread.aws.dev https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net https://a0.awsstatic.com/ https://d2c.aws.amazon.com https://vs.aws.amazon.com https://*.algolia.net https://*.algolianet.com *.amazonaws.com https://aws.amazon.com/ https://d2c-alpha.dse.marketing.aws.a2z.com https://aws-mktg-csds-alpha.integ.amazon.com/ https://alpha.d2c.marketing.aws.dev/ https://aa0.awsstatic.com/; img-src 'self' https://img.shields.io https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net https://a0.awsstatic.com/ https://alpha.d2c.marketing.aws.dev/ https://aa0.awsstatic.com/; media-src 'self'; script-src 'self' *.shortbread.aws.dev https://a0.awsstatic.com/ https://aa0.awsstatic.com/ https://alpha.d2c.marketing.aws.dev/ https://d2c.aws.amazon.com/;"
+        value: "upgrade-insecure-requests; default-src 'none'; style-src 'self' 'unsafe-inline' *.shortbread.aws.dev; font-src 'self'; frame-src 'self' https://www.youtube-nocookie.com https://aws.demdex.net https://dpm.demdex.net; connect-src 'self' *.shortbread.aws.dev https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net https://a0.awsstatic.com/ https://d2c.aws.amazon.com https://vs.aws.amazon.com https://*.algolia.net https://*.algolianet.com *.amazonaws.com https://aws.amazon.com/ https://d2c-alpha.dse.marketing.aws.a2z.com https://aws-mktg-csds-alpha.integ.amazon.com/ https://alpha.d2c.marketing.aws.dev/ https://aa0.awsstatic.com/; img-src 'self' https://img.shields.io https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net https://a0.awsstatic.com/ https://alpha.d2c.marketing.aws.dev/ https://aa0.awsstatic.com/; media-src 'self'; script-src 'self' *.shortbread.aws.dev https://a0.awsstatic.com/ https://aa0.awsstatic.com/ https://alpha.d2c.marketing.aws.dev/ https://d2c.aws.amazon.com/;"
       # CSP also set in _document.tsx meta tag