Skip to content
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.

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

chore: merging next-release/main into next-release/dev #7211

Merged
merged 21 commits into from
Apr 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f74fdf3
Gen2 storage docs web (#7163)
hdworld11 Apr 4, 2024
ce5adcb
Storage docs update (#7171)
hdworld11 Apr 5, 2024
ef4df85
chore: merge `main` into `next-release/main` (#7173)
katiegoines Apr 5, 2024
c80a21d
chore: weekly merge of `next-release/dev` into `next-release/main` (#…
katiegoines Apr 6, 2024
88c8f90
adds analytics docs gen 2 (#7138)
ykethan Apr 8, 2024
43d4c33
edit nextjs-server-runtime (#7107)
aspittel Apr 9, 2024
a55f849
minor update on analytics android example (#7187)
ykethan Apr 9, 2024
37a41cd
GEN2 | Web | Predictions (#7178)
offlineprogrammer Apr 9, 2024
b5c5c68
add function access docs, custom cdk (#7180)
josefaidt Apr 10, 2024
9b8afe2
Merge main into next-release (#7192)
jacoblogan Apr 10, 2024
b7e15e8
rename function set up page, improve intro (#7172)
josefaidt Apr 10, 2024
45908b3
Fix authorization mode for custom JS resolver (#7196)
arundna Apr 11, 2024
88ee0b0
Feature: Highlighted Code Copy Blocks (#7200)
renebrandel Apr 11, 2024
5ec3537
Update index.mdx (#7201)
renebrandel Apr 12, 2024
0b031ef
Update How Amplify Works for Gen 2 (#7190)
aspittel Apr 12, 2024
d2a4bf2
Analytics edits (#7189)
aspittel Apr 12, 2024
4451eaf
in-app messaging docs Gen 2 (#7169)
ykethan Apr 12, 2024
2367ffe
add event source on Lambda examples Gen 2 (#7184)
ykethan Apr 12, 2024
67c6dd5
chore: merge `main` into `next-release/main` (#7203)
katiegoines Apr 12, 2024
dabd267
Fix typo (#7198)
swaminator Apr 12, 2024
826d75b
Merge branch 'next-release/main' into next-release-main-into-dev
Apr 15, 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
15 changes: 13 additions & 2 deletions cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,7 @@
"region",
"myapp.xcodeproj",
"myapp",
"myapplication",
"mybucket",
"mycognitoresource",
"mycoolpassword",
Expand Down Expand Up @@ -1018,6 +1019,7 @@
"posts.graphql",
"PostsTable",
"posttitle",
"powertools",
"pre-annotated",
"pre-built",
"pre-created",
Expand Down Expand Up @@ -1046,6 +1048,7 @@
"pubsub",
"Pubsub",
"PubSub",
"Powertools",
"PUSHINFOPROVIDER",
"PushListenerService",
"pushnotification",
Expand Down Expand Up @@ -1576,12 +1579,20 @@
"multirepo",
"startbuild"
],
"flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
"flagWords": [
"hte",
"full-stack",
"Full-stack",
"Full-Stack",
"sudo"
],
"patterns": [
{
"name": "youtube-embed-ids",
"pattern": "/embedId=\".*\" /"
}
],
"ignoreRegExpList": ["youtube-embed-ids"]
"ignoreRegExpList": [
"youtube-embed-ids"
]
}
14 changes: 13 additions & 1 deletion src/components/MDXComponents/MDXCode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,18 @@ const addVersions = (code: string) => {
return code;
};

const hasHighlights = (code: string): boolean => {
const highlightableStrings = [
'// highlight-start',
'// highlight-end',
'// highlight-next-line'
];
if (highlightableStrings.some((highlight) => code.includes(highlight))) {
return true;
}
return false;
};

export const MDXCode = ({
codeString,
language = 'js',
Expand All @@ -39,7 +51,7 @@ export const MDXCode = ({
title
}: MDXCodeProps) => {
const [code, setCode] = useState(codeString);
const shouldShowCopy = language !== 'console';
const shouldShowCopy = language !== 'console' && !hasHighlights(codeString);
const shouldShowHeader = shouldShowCopy || title;
const titleId = `${useId()}-titleID`;
const codeId = `${useId()}-codeID`;
Expand Down
14 changes: 1 addition & 13 deletions src/components/MDXComponents/MDXCopyCodeButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,7 @@ import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, VisuallyHidden } from '@aws-amplify/ui-react';
import { trackCopyClicks } from '@/utils/track';

export const prepareCopyText = (codeString: string): string => {
// We need to strip out markdown comments from the code string
// so they don't show up in our copied text
const highlightStartText = /\/\/\s?highlight-start/g;
const highlightEndText = /\/\/\s?highlight-end/g;
const highlightNextLine = /\/\/\s?highlight-next-line/g;

return codeString
.replace(highlightStartText, '')
.replace(highlightEndText, '')
.replace(highlightNextLine, '');
};
import { prepareCopyText } from './utils/copy-code';

interface MDXCopyCodeButtonProps {
codeId: string;
Expand Down
46 changes: 46 additions & 0 deletions src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { VisuallyHidden } from '@aws-amplify/ui-react';
import { trackCopyClicks } from '@/utils/track';
import { prepareCopyText } from './utils/copy-code';

interface MDXCopyCodeButtonProps {
codeId: string;
codeString: string;
testId?: string;
title?: string;
children?: React.ReactNode;
}

export const MDXHighlightedCopyCodeButton = ({
codeString,
title,
codeId,
children
}: MDXCopyCodeButtonProps) => {
const [copied, setCopied] = useState(false);

const copyText = prepareCopyText(codeString);

const copy = () => {
trackCopyClicks(copyText);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
};
return (
<CopyToClipboard text={copyText} onCopy={copy}>
<button className="highlight-copy-block" key={codeId}>
{children}
<span className="highlight-copy-block-hint">
{copied ? 'Copied' : 'Copy'}
</span>
<VisuallyHidden>
{` `}
{title} highlighted code example
</VisuallyHidden>
</button>
</CopyToClipboard>
);
};
104 changes: 97 additions & 7 deletions src/components/MDXComponents/TokenList.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
import type { Token } from 'prism-react-renderer';
import type { TokenListProps } from './types';
import { MDXHighlightedCopyCodeButton } from './MDXHighlightedCopyCodeButton';

type ProcessedToken = {
line: Token[];
showLine: boolean;
lineNumber: number;
};

type TokenGroup =
| (ProcessedToken & {
type: 'regular';
})
| {
tokens: ProcessedToken[];
type: 'highlighted';
};

export const TokenList = ({
tokens,
Expand All @@ -11,7 +27,9 @@ export const TokenList = ({
let shouldHighlight = false;
let highlightNextIndex: number | undefined;

return tokens.map((line: Token[], i: number) => {
const tokenGroups: TokenGroup[] = [];

tokens.forEach((line: Token[], i: number) => {
let showLine = true;
lineNumber++;

Expand All @@ -32,7 +50,7 @@ export const TokenList = ({
// Test if the line contains code comment for highlight-next-line
const isHighlightNext = textLine === '//highlight-next-line';

// If hilightNextIndex was set previously in the loop,
// If highlightNextIndex was set previously in the loop,
// then turn on highlight for this line
if (highlightNextIndex && i === highlightNextIndex) {
shouldHighlight = true;
Expand All @@ -53,6 +71,11 @@ export const TokenList = ({
showLine = false;
shouldHighlight = true;
lineNumber--;

tokenGroups.push({
tokens: [],
type: 'highlighted'
});
}

// If this line is highlight-end, don't show this line,
Expand All @@ -73,17 +96,84 @@ export const TokenList = ({
lineNumber--;
}

return showLine ? (
if (!shouldHighlight) {
tokenGroups.push({
type: 'regular',
line,
showLine,
lineNumber
});
} else {
const lastGroup = tokenGroups[tokenGroups.length - 1];
let existingTokens: ProcessedToken[] = [];
if (lastGroup?.type === 'highlighted') {
existingTokens = lastGroup.tokens;
}
tokenGroups[tokenGroups.length - 1] = {
tokens: [
...existingTokens,
{
lineNumber,
line,
showLine
}
],
type: 'highlighted'
};
}
});

function renderProcessedToken(
token: ProcessedToken,
key: string,
shouldHighlight: boolean,
showLineNumbers: boolean = true
) {
return token.showLine ? (
<div
key={i}
{...getLineProps({ line })}
key={key}
{...getLineProps({ line: token.line })}
className={`token-line${shouldHighlight ? ' line-highlight' : ''}`}
>
{showLineNumbers && <span className="line-number">{lineNumber}</span>}
{line.map((token, key) => (
{showLineNumbers && (
<span className="line-number">{token.lineNumber}</span>
)}
{token.line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
) : null;
}

return tokenGroups.map((processedToken, i) => {
if (processedToken.type === 'regular') {
return renderProcessedToken(
processedToken,
`regular:${i}`,
false,
showLineNumbers
);
} else {
const highlightedCodeString = processedToken.tokens
.map((token) => token.line.map((line) => line.content).join(''))
.join('\n');

return (
<MDXHighlightedCopyCodeButton
codeId={`highlighted:${i}`}
key={`highlighted:${i}`}
codeString={highlightedCodeString}
>
{processedToken.tokens.map((token, j) => {
return renderProcessedToken(
token,
`highlighted:${i}:${j}`,
true,
showLineNumbers
);
})}
</MDXHighlightedCopyCodeButton>
);
}
});
};
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { MDXCopyCodeButton, prepareCopyText } from '../MDXCopyCodeButton';
import { MDXCopyCodeButton } from '../MDXCopyCodeButton';
import userEvent from '@testing-library/user-event';
import * as trackModule from '../../../utils/track';
import { prepareCopyText } from '../utils/copy-code';

const codeString = `
import * as sns from 'aws-cdk-lib/aws-sns';
Expand Down
12 changes: 12 additions & 0 deletions src/components/MDXComponents/utils/copy-code.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const prepareCopyText = (codeString: string): string => {
// We need to strip out markdown comments from the code string
// so they don't show up in our copied text
const highlightStartText = /\/\/\s?highlight-start/g;
const highlightEndText = /\/\/\s?highlight-end/g;
const highlightNextLine = /\/\/\s?highlight-next-line/g;

return codeString
.replace(highlightStartText, '')
.replace(highlightEndText, '')
.replace(highlightNextLine, '');
};
Loading
Loading