From 835975c6eae1dae55910431897f3a8fbfb28beef Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 3 Jun 2024 14:14:41 -0400 Subject: [PATCH 1/5] test rehype plugin --- next.config.mjs | 8 ++- package.json | 1 + src/components/MDXComponents/MDXHeading.tsx | 53 +++++++++--------- yarn.lock | 61 +++++++++++---------- 4 files changed, 68 insertions(+), 55 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index e52dcd20331..2e79da6e61c 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -6,6 +6,8 @@ import rehypeMdxCodeProps from 'rehype-mdx-code-props'; const require = createRequire(import.meta.url); import rehypeImgSize from 'rehype-img-size'; import remarkGfm from 'remark-gfm'; +import rehypeSlug from 'rehype-slug'; + dotenv.config({ path: './.env.custom' }); const nextJSConfig = () => { @@ -13,7 +15,11 @@ const nextJSConfig = () => { extension: /\.mdx$/, options: { remarkPlugins: [remarkGfm], - rehypePlugins: [[rehypeImgSize, { dir: 'public' }], rehypeMdxCodeProps] + rehypePlugins: [ + [rehypeImgSize, { dir: 'public' }], + rehypeMdxCodeProps, + rehypeSlug + ] } }); diff --git a/package.json b/package.json index c087eacae3c..728e7af9aa6 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "rehype": "^11.0.0", "rehype-img-size": "^1.0.1", "rehype-mdx-code-props": "^2.0.0", + "rehype-slug": "^6.0.0", "remark": "^14.0.2", "remark-gfm": "^3.0.0", "remark-mdx": "^2.3.0", diff --git a/src/components/MDXComponents/MDXHeading.tsx b/src/components/MDXComponents/MDXHeading.tsx index a6f131f2607..79b88ba9b54 100644 --- a/src/components/MDXComponents/MDXHeading.tsx +++ b/src/components/MDXComponents/MDXHeading.tsx @@ -1,39 +1,40 @@ import Link from 'next/link'; import { Heading } from '@aws-amplify/ui-react'; -import slug from './utils/slug'; +// import slug from './utils/slug'; export const MDXHeading = (props) => { - const { level, children } = props; - let href = ''; + console.log('props: ', props); + const { level, children, id } = props; + // let href = ''; /* Test if children element is not a string before creating the url slug */ - if (children && typeof children != 'string') { - let newChildren = ''; - /* Test if child element is a single object */ - if (typeof children == 'object' && children.props?.children) { - newChildren = children.props.children; - } else { - /* If not a single object, we expect an array of - elements and loop through them */ - for (let i = 0; i < children.length; i++) { - if (typeof children[i] == 'string') { - newChildren = newChildren + children[i]; - } else { - newChildren = newChildren + children[i].props.children; - } - } - } - href = `${slug(newChildren)}`; - } else { - /* If children element is a string, use that to create the url slug */ - href = `${slug(children)}`; - } + // if (children && typeof children != 'string') { + // let newChildren = ''; + // /* Test if child element is a single object */ + // if (typeof children == 'object' && children.props?.children) { + // newChildren = children.props.children; + // } else { + // /* If not a single object, we expect an array of + // elements and loop through them */ + // for (let i = 0; i < children.length; i++) { + // if (typeof children[i] == 'string') { + // newChildren = newChildren + children[i]; + // } else { + // newChildren = newChildren + children[i].props.children; + // } + // } + // } + // href = `${slug(newChildren)}`; + // } else { + // /* If children element is a string, use that to create the url slug */ + // href = `${slug(children)}`; + // } return ( - + {/* Only output heading links for h2 and h3 \ */} {level == 2 || level == 3 ? ( - {children} + {children} ) : ( children )} diff --git a/yarn.lock b/yarn.lock index 47f54f3143f..39f3fb946ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6073,6 +6073,11 @@ github-from-package@0.0.0: resolved "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz" integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== +github-slugger@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a" + integrity sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw== + glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" @@ -6250,6 +6255,13 @@ hast-util-from-parse5@^6.0.0: vfile-location "^3.2.0" web-namespaces "^1.0.0" +hast-util-heading-rank@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz#2d5c6f2807a7af5c45f74e623498dd6054d2aba8" + integrity sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA== + dependencies: + "@types/hast" "^3.0.0" + hast-util-is-element@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz" @@ -6319,6 +6331,13 @@ hast-util-to-html@^7.1.1: unist-util-is "^4.0.0" xtend "^4.0.0" +hast-util-to-string@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz#2a131948b4b1b26461a2c8ac876e2c88d02946bd" + integrity sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA== + dependencies: + "@types/hast" "^3.0.0" + hast-util-whitespace@^1.0.0: version "1.0.4" resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz" @@ -9685,6 +9704,17 @@ rehype-parse@^7.0.0: hast-util-from-parse5 "^6.0.0" parse5 "^6.0.0" +rehype-slug@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-6.0.0.tgz#1d21cf7fc8a83ef874d873c15e6adaee6344eaf1" + integrity sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A== + dependencies: + "@types/hast" "^3.0.0" + github-slugger "^2.0.0" + hast-util-heading-rank "^3.0.0" + hast-util-to-string "^3.0.0" + unist-util-visit "^5.0.0" + rehype-stringify@^8.0.0: version "8.0.0" resolved "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-8.0.0.tgz" @@ -10318,16 +10348,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10411,14 +10432,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11499,7 +11513,7 @@ winston@^3.3.3: triple-beam "^1.3.0" winston-transport "^4.5.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11517,15 +11531,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz" From d92b056110b428bfc992a6df4fa64e98992ad9f2 Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 3 Jun 2024 14:25:04 -0400 Subject: [PATCH 2/5] remove code replaced by rehype plugin --- src/components/MDXComponents/MDXHeading.tsx | 26 --------------------- 1 file changed, 26 deletions(-) diff --git a/src/components/MDXComponents/MDXHeading.tsx b/src/components/MDXComponents/MDXHeading.tsx index 79b88ba9b54..b90b6a627a6 100644 --- a/src/components/MDXComponents/MDXHeading.tsx +++ b/src/components/MDXComponents/MDXHeading.tsx @@ -1,34 +1,8 @@ import Link from 'next/link'; import { Heading } from '@aws-amplify/ui-react'; -// import slug from './utils/slug'; export const MDXHeading = (props) => { - console.log('props: ', props); const { level, children, id } = props; - // let href = ''; - - /* Test if children element is not a string before creating the url slug */ - // if (children && typeof children != 'string') { - // let newChildren = ''; - // /* Test if child element is a single object */ - // if (typeof children == 'object' && children.props?.children) { - // newChildren = children.props.children; - // } else { - // /* If not a single object, we expect an array of - // elements and loop through them */ - // for (let i = 0; i < children.length; i++) { - // if (typeof children[i] == 'string') { - // newChildren = newChildren + children[i]; - // } else { - // newChildren = newChildren + children[i].props.children; - // } - // } - // } - // href = `${slug(newChildren)}`; - // } else { - // /* If children element is a string, use that to create the url slug */ - // href = `${slug(children)}`; - // } return ( From d73fcc1462634ba77a88ca166ef790cf8efa90a8 Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 3 Jun 2024 14:42:33 -0400 Subject: [PATCH 3/5] update tests --- .../__tests__/MDXHeading.test.tsx | 38 +++---------------- 1 file changed, 6 insertions(+), 32 deletions(-) diff --git a/src/components/MDXComponents/__tests__/MDXHeading.test.tsx b/src/components/MDXComponents/__tests__/MDXHeading.test.tsx index 2eee65aad7b..dbbf05fdae5 100644 --- a/src/components/MDXComponents/__tests__/MDXHeading.test.tsx +++ b/src/components/MDXComponents/__tests__/MDXHeading.test.tsx @@ -5,7 +5,8 @@ describe('MDXHeading', () => { it('should render H2 with string and anchor link', () => { const props = { level: 2, - children: 'Test heading' + children: 'Test heading', + id: 'test-heading' }; render(); @@ -22,7 +23,8 @@ describe('MDXHeading', () => { it('should render H3 with string and anchor link', () => { const props = { level: 3, - children: 'Test heading' + children: 'Test heading', + id: 'test-heading' }; render(); @@ -40,7 +42,8 @@ describe('MDXHeading', () => { it('should render H4 with string and no anchor link', () => { const props = { level: 4, - children: 'Test heading' + children: 'Test heading', + id: 'test-heading' }; render(); @@ -50,33 +53,4 @@ describe('MDXHeading', () => { expect(heading).toHaveTextContent(props.children); expect(link).not.toBeInTheDocument(); }); - - it('should render H2 with HTML code element and anchor link', () => { - const props = { - level: 2, - children: runtime - }; - render(); - - const heading = screen.queryByRole('heading', { level: 2 }); - const link = screen.queryByRole('link', { name: 'runtime' }); - expect(heading).toBeInTheDocument(); - expect(link).toHaveAttribute('href', expect.stringMatching(/#runtime/)); - }); - - it('should render H2 with mixed elements and anchor link', () => { - render( - - runtime and test - - ); - - const heading = screen.queryByRole('heading', { level: 2 }); - const link = screen.queryByRole('link', { name: 'runtime and test' }); - expect(heading).toBeInTheDocument(); - expect(link).toHaveAttribute( - 'href', - expect.stringMatching(/#runtime-and-test/) - ); - }); }); From 961d5478745d2ee28b3fb8af189a76e9564f8ab1 Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 3 Jun 2024 15:07:22 -0400 Subject: [PATCH 4/5] RIP slug.js --- src/components/MDXComponents/utils/slug.js | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/components/MDXComponents/utils/slug.js diff --git a/src/components/MDXComponents/utils/slug.js b/src/components/MDXComponents/utils/slug.js deleted file mode 100644 index 466056f9d9f..00000000000 --- a/src/components/MDXComponents/utils/slug.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = function slug(str) { - let slugged = ''; - for (const c of str) { - if ((c >= 'A' && c <= 'Z') || (c >= 'a' && c <= 'z')) { - slugged += c.toLowerCase(); - } else if (c >= '0' && c <= '9') { - slugged += c; - } else if (c === ' ' || c === '-') { - slugged += '-'; - } - } - return slugged; -}; From 7d32a1c3c51b2515cae44f22e2ba5c0c6566efff Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 3 Jun 2024 15:35:47 -0400 Subject: [PATCH 5/5] fix cli-commands page --- .../reference/cli-commands/index.mdx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/pages/[platform]/reference/cli-commands/index.mdx b/src/pages/[platform]/reference/cli-commands/index.mdx index 9b614bfa576..039ee8d6a99 100644 --- a/src/pages/[platform]/reference/cli-commands/index.mdx +++ b/src/pages/[platform]/reference/cli-commands/index.mdx @@ -1,5 +1,4 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; -import { SubCommandHeading } from '@/components/CliCommands/CommandHeading'; export const meta = { title: 'CLI commands', @@ -48,7 +47,7 @@ All commands can be prefixed with [AWS CLI environment variables](https://docs.a Sandbox enables you to develop your backend alongside your frontend's development server. Run `npx ampx sandbox` to deploy to your personal cloud sandbox, this command will automatically watch for changes in the `amplify/` folder, and redeploy each time you save a file. -Options +### Options - `--dir-to-watch` (_string_) - Directory to watch for file changes. All subdirectories and files will be included. Defaults to the amplify directory. - `--exclude` (_string[]_) - An array of paths or glob patterns to ignore. Paths can be relative or absolute and can either be files or directories. @@ -58,7 +57,7 @@ Sandbox enables you to develop your backend alongside your frontend's developmen - `--outputs-version` (_string_) - Version of the configuration. Version 0 represents classic amplify-cli config file amplify-configuration and 1 represents newer config file amplify_outputs (choices: `0`, `1`). - `--profile` (_string_) - An AWS profile name. -Usage +### Usage ```bash title="Terminal" showLineNumbers={false} npx ampx sandbox @@ -109,13 +108,13 @@ npx ampx sandbox --outputs-format dart --outputs-out-dir lib --outputs-version 0 Delete your personal cloud sandbox. This should only be used if you have an active cloud sandbox that you opted to _not_ delete when exiting `npx ampx sandbox`. -Options +### Options - `--name` (_string_) - An optional name to distinguish between different sandbox environments. Default is the name in your package.json. - `--profile` (_string_) - An AWS profile name. - `-y, --yes` (_boolean_) - Do not ask for confirmation before deleting the sandbox environment. -Usage +### Usage ```bash title="Terminal" showLineNumbers={false} npx ampx sandbox delete @@ -125,11 +124,11 @@ npx ampx sandbox delete Manage backend secrets used with your personal cloud sandbox. -Options +### Options - `--profile` (_string_) - An AWS profile name. -Usage +### Usage ```bash title="Terminal" showLineNumbers={false} npx ampx sandbox secret @@ -207,7 +206,7 @@ npx ampx generate --app-id --branch Generate the backend outputs file (e.g. `amplify_outputs.json`) for your frontend application to consume. This is intended to be used to manually generate a configuration file for an environment other than your personal cloud sandbox. For example, you might use it if you would like to verify something your coworker is seeing in their cloud sandbox, or to demonstrate frontend changes locally using a pre-existing "staging" branch. -Options +### Options In addition to the required options noted in [`ampx generate`](#npx-ampx-generate): @@ -216,7 +215,7 @@ In addition to the required options noted in [`ampx generate`](#npx-ampx-generat - `--out-dir` (_string_) - A path to the directory where config is written. If not provided, it defaults to the working directory of the current process. - `--outputs-version` (_string_) - Version of the configuration. Version 0 represents classic amplify-cli config file amplify-configuration and 1 represents newer config file amplify_outputs (choices: `0`, `1`). -Usage +### Usage As mentioned above, you can specify a team member's cloud sandbox CloudFormation stack: @@ -236,7 +235,7 @@ npx ampx generate outputs --stack amplify-nextamplifygen2-josef-sandbox-ca85e108 Generate GraphQL statements and types for your frontend application to consume. -Options +### Options The available parameters for `npx ampx generate graphql-client-code` are: @@ -257,16 +256,16 @@ Optional parameters: - `--profile`(_string_) - Specifies an AWS profile name. - `--debug` (_boolean_) - Print debug logs to the console. - `--help`(_boolean_) - Displays help information about the command. -Usage +### Usage -### Generate GraphQL client code using the Amplify App ID and branch. +#### Generate GraphQL client code using the Amplify App ID and branch. ```bash title="Terminal" showLineNumbers={false} npx ampx generate graphql-client-code --app-id --branch staging ``` -### Generate GraphQL client code for a branch that is connected to Amplify +#### Generate GraphQL client code for a branch that is connected to Amplify Sometimes you want to test your latest local changes with the backend of another deployed branch. If you want to generate the GraphQL client code file(s) for the latest deployment of another branch, you can run the following command: @@ -274,7 +273,7 @@ Sometimes you want to test your latest local changes with the backend of another npx ampx generate graphql-client-code --branch staging ``` -### Generate codegen for CDK app using a joint "AmplifyBackendStack" construct +#### Generate codegen for CDK app using a joint "AmplifyBackendStack" construct Assume you have deployed your Amplify project with the CDK construct. You will need to remember your app's project name (designated as the second parameter in your CDK construct) and stack name (designated as part of your `npx cdk deploy` context) @@ -291,7 +290,7 @@ export class MyAmplifyStack extends cdk.Stack { } ``` -### Deployment command for CDK project +#### Deployment command for CDK project ```bash title="Terminal" showLineNumbers={false} npx cdk deploy @@ -303,13 +302,13 @@ Run Amplify codegen command to generate GraphQL codegen: npx ampx generate graphql-client-code --stack Backend --platform ts --out ./src ``` -### Generate codegen in specific language and format +#### Generate codegen in specific language and format ```bash title="Terminal" showLineNumbers={false} npx ampx generate graphql-client-code --format modelgen --type-target angular ``` -### Supported GraphQL client code combinations: +#### Supported GraphQL client code combinations: | Format | Platform | Codegen command in Amplify CLI | Command in Amplify Gen2 | Default generated file/path | | -------| -------- | ------------------------------ | ----------------------- | --------------------------- | @@ -325,7 +324,8 @@ npx ampx generate graphql-client-code --format modelgen --type-target angular Generate React form components derived from your backend data models for your frontend application to consume. -Options +### Options + - `--stack`(_string_) - A stack name that contains an Amplify backend. - `--branch` (_string_) - Name of the git branch being deployed. - `--app-id` (_string_) - The app id of the target Amplify app. @@ -333,7 +333,7 @@ Generate React form components derived from your backend data models for your fr - `--models` (_array_) - Model name to generate. - `--profile` (_string_) - An AWS profile name. -Usage +### Usage ```bash title="Terminal" showLineNumbers={false} npx ampx generate forms --branch $BRANCH_NAME --app-id $AMPLIFY_APP_ID --out-dir ./src @@ -379,14 +379,14 @@ No CDK environment variables Deploys the Amplify project in a CI/CD pipeline for a specified Amplify app and branch. -Options +### Options - `--branch` (_string_) - Name of the git branch being deployed. - `--app-id` (_string_) - The app id of the target Amplify app. - `--outputs-out-dir` (_string_) - A path to a directory where the client config file is written. If not provided, defaults to the working directory of the current process. - `--outputs-version` (_string_) - Version of the configuration. Version 0 represents classic amplify-cli config file amplify-configuration and 1 represents newer config file amplify_outputs (choices: `0`, `1`). -Usage +### Usage ```bash title="Terminal" showLineNumbers={false} npx ampx pipeline-deploy --branch $BRANCH_NAME --app-id $AMPLIFY_APP_ID