Skip to content

chore: use rehype plugin for heading id generation #7701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 4, 2024
Merged

chore: use rehype plugin for heading id generation #7701

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
835975c
test rehype plugin
hbuchel Jun 3, 2024
d92b056
remove code replaced by rehype plugin
hbuchel Jun 3, 2024
d73fcc1
update tests
hbuchel Jun 3, 2024
961d547
RIP slug.js
hbuchel Jun 3, 2024
6baa256
Merge branch 'main' into H3UniqueId
hbuchel Jun 3, 2024
7d32a1c
fix cli-commands page
hbuchel Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@ 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 = () => {
const withMDX = createMDX({
extension: /\.mdx$/,
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [[rehypeImgSize, { dir: 'public' }], rehypeMdxCodeProps]
rehypePlugins: [
[rehypeImgSize, { dir: 'public' }],
rehypeMdxCodeProps,
rehypeSlug
]
}
});

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
31 changes: 3 additions & 28 deletions src/components/MDXComponents/MDXHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,14 @@
import Link from 'next/link';
import { Heading } from '@aws-amplify/ui-react';
import slug from './utils/slug';

export const MDXHeading = (props) => {
const { level, children } = 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)}`;
}
const { level, children, id } = props;

return (
<Heading level={level} id={href}>
<Heading level={level} id={id}>
{/* Only output heading links for h2 and h3 \ */}
{level == 2 || level == 3 ? (
<Link href={`#${href}`}>{children}</Link>
<Link href={`#${id}`}>{children}</Link>
) : (
children
)}
Expand Down
38 changes: 6 additions & 32 deletions src/components/MDXComponents/__tests__/MDXHeading.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<MDXHeading {...props} />);

Expand All @@ -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(<MDXHeading {...props} />);

Expand All @@ -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(<MDXHeading {...props} />);

Expand All @@ -50,33 +53,4 @@ describe('MDXHeading', () => {
expect(heading).toHaveTextContent(props.children);
expect(link).not.toBeInTheDocument();
});

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're not handling the ID generation anymore so I removed these tests.

it('should render H2 with HTML code element and anchor link', () => {
const props = {
level: 2,
children: <code>runtime</code>
};
render(<MDXHeading {...props} />);

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(
<MDXHeading level={2}>
<code>runtime</code> and <code>test</code>
</MDXHeading>
);

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/)
);
});
});
13 changes: 0 additions & 13 deletions src/components/MDXComponents/utils/slug.js
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're not using this anywhere else.

This file was deleted.

61 changes: 33 additions & 28 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand All @@ -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"
Expand Down
Loading