Skip to content

Commit f08ecb8

Browse files
author
Erik Hanchett
committed
Added new badge and message for AI kit
1 parent e6af6e0 commit f08ecb8

File tree

13 files changed

+362
-2
lines changed

13 files changed

+362
-2
lines changed

‎mdx-components.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import type { MDXComponents } from 'mdx/types';
33
import ExportedImage from 'next-image-export-optimizer';
4+
import { Banner } from './src/components/Banner';
45
import InlineFilter from './src/components/InlineFilter';
56
import { YoutubeEmbed } from './src/components/YoutubeEmbed';
67
import { Accordion } from './src/components/Accordion';
@@ -64,6 +65,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
6465
InlineFilter,
6566
MigrationAlert,
6667
YoutubeEmbed,
68+
Banner,
6769
Overview,
6870
ExternalLink,
6971
ExternalLinkButton,

‎src/components/Banner/Banner.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Flex, Message, IconsProvider, Text } from '@aws-amplify/ui-react';
2+
import { IconStar, IconChevron } from '../Icons';
3+
import { Button } from '@aws-amplify/ui-react';
4+
5+
interface BannerProps {
6+
url?: string;
7+
}
8+
9+
export const Banner: React.FC<BannerProps> = ({
10+
url = '/react/ai/set-up-ai/'
11+
}) => {
12+
return (
13+
<IconsProvider
14+
icons={{
15+
message: {
16+
info: <IconStar />
17+
}
18+
}}
19+
>
20+
<Message className="message-banner" colorTheme="info">
21+
<Flex className="message-banner__inner">
22+
<Flex direction="column" gap="xxs">
23+
<Text as="span" className="message-banner__heading">
24+
Amplify AI kit is now generally available
25+
</Text>
26+
<Text className="message-banner__content">
27+
Create fullstack AI capabable apps using TypeScript, with just a
28+
few lines of code.
29+
</Text>
30+
</Flex>
31+
32+
<Button
33+
as="a"
34+
href={url}
35+
size="small"
36+
gap="small"
37+
target="_blank"
38+
colorTheme="overlay"
39+
rel="noopener noreferrer"
40+
className="message-banner__button"
41+
>
42+
Get started
43+
<IconChevron className="icon-rotate-270" fontSize=".875em" />
44+
</Button>
45+
</Flex>
46+
</Message>
47+
</IconsProvider>
48+
);
49+
};

‎src/components/Banner/__tests__/Banner.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { Banner } from '../index';
4+
5+
describe('Banner', () => {
6+
it('should render the Banner component', async () => {
7+
const bannerText = 'Amplify AI kit is now generally available';
8+
render(<Banner />);
9+
10+
const component = await screen.findByText(bannerText);
11+
expect(component).toBeInTheDocument();
12+
});
13+
});

‎src/components/Banner/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Banner } from './Banner';

‎src/components/Layout/Layout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
PLATFORM_DISPLAY_NAMES,
2222
Platform
2323
} from '@/data/platforms';
24+
import { GEN2BANNER_URLS } from '@/data/gen2Banner-urls';
2425
import { SpaceShip } from '@/components/SpaceShip';
2526
import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
2627
import { LayoutProvider, LayoutHeader } from '@/components/Layout';
@@ -29,6 +30,7 @@ import type { HeadingInterface } from '@/components/TableOfContents/TableOfConte
2930
import { Breadcrumbs } from '@/components/Breadcrumbs';
3031
import { debounce } from '@/utils/debounce';
3132
import '@docsearch/css';
33+
import { Banner } from '@/components/Banner';
3234
import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
3335
import {
3436
NextPrevious,
@@ -71,6 +73,7 @@ export const Layout = ({
7173
const basePath = 'docs.amplify.aws';
7274
const metaUrl = url ? url : basePath + asPathWithNoHash;
7375
const pathname = router.pathname;
76+
const shouldShowGen2Banner = GEN2BANNER_URLS.includes(asPathWithNoHash);
7477
const isGen1 = asPathWithNoHash.split('/')[1] === 'gen1';
7578
const isContributor = asPathWithNoHash.split('/')[1] === 'contribute';
7679
const currentGlobalNavMenuItem = isContributor ? 'Contribute' : 'Docs';
@@ -272,6 +275,7 @@ export const Layout = ({
272275
platform={currentPlatform}
273276
/>
274277
) : null}
278+
{shouldShowGen2Banner ? <Banner /> : null}
275279
{useCustomTitle ? null : (
276280
<Heading level={1}>{pageTitle}</Heading>
277281
)}

‎src/components/Menu/MenuItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
22
import { ReactElement, useContext, useEffect, useState, useMemo } from 'react';
3-
import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react';
3+
import { Link as AmplifyUILink, Flex, Badge } from '@aws-amplify/ui-react';
44
import { IconExternalLink, IconChevron } from '@/components/Icons';
55
import Link from 'next/link';
66
import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
@@ -200,6 +200,7 @@ export function MenuItem({
200200
className={`menu__list-item__link__inner ${listItemLinkInnerStyle}`}
201201
>
202202
{pageNode.title}
203+
{pageNode.isNew && <Badge backgroundColor="purple.20">New</Badge>}
203204
{children && hasVisibleChildren && level !== Levels.Category && (
204205
<IconChevron className={open ? '' : 'icon-rotate-90-reverse'} />
205206
)}

‎src/data/gen2Banner-urls.ts‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
/**
2+
* List of paths that the gen2 <Banner /> should display on
3+
*/
4+
export const GEN2BANNER_URLS = [
5+
'/',
6+
'/angular/',
7+
'/javascript/',
8+
'/nextjs/',
9+
'/react/',
10+
'/vue/',
11+
'/react-native/',
12+
'/javascript/how-amplify-works/',
13+
'/angular/how-amplify-works/',
14+
'/react/how-amplify-works/',
15+
'/nextjs/how-amplify-works/',
16+
'/vue/how-amplify-works/',
17+
'/angular/start/',
18+
'/javascript/start/',
19+
'/nextjs/start/',
20+
'/react/start/',
21+
'/vue/start/',
22+
'/react-native/start/',
23+
'/javascript/build-a-backend/',
24+
'/angular/build-a-backend/',
25+
'/nextjs/build-a-backend/',
26+
'/react/build-a-backend/',
27+
'/vue/build-a-backend/',
28+
'/react-native/build-a-backend/',
29+
'/javascript/build-a-backend/graphqlapi/',
30+
'/angular/build-a-backend/graphqlapi/',
31+
'/react/build-a-backend/graphqlapi/',
32+
'/nextjs/build-a-backend/graphqlapi/',
33+
'/vue/build-a-backend/graphqlapi/',
34+
'/javascript/build-a-backend/graphqlapi/connect-to-api/',
35+
'/react/build-a-backend/graphqlapi/connect-to-api/',
36+
'/angular/build-a-backend/graphqlapi/connect-to-api/',
37+
'/vue/build-a-backend/graphqlapi/connect-to-api/',
38+
'/nextjs/build-a-backend/graphqlapi/connect-to-api/',
39+
'/javascript/build-a-backend/graphqlapi/connect-existing-data/',
40+
'/react/build-a-backend/graphqlapi/connect-existing-data/',
41+
'/angular/build-a-backend/graphqlapi/connect-existing-data/',
42+
'/vue/build-a-backend/graphqlapi/connect-existing-data/',
43+
'/nextjs/build-a-backend/graphqlapi/connect-existing-data/',
44+
'/javascript/build-a-backend/graphqlapi/mutate-data/',
45+
'/react/build-a-backend/graphqlapi/mutate-data/',
46+
'/angular/build-a-backend/graphqlapi/mutate-data/',
47+
'/vue/build-a-backend/graphqlapi/mutate-data/',
48+
'/nextjs/build-a-backend/graphqlapi/mutate-data/',
49+
'/javascript/build-a-backend/graphqlapi/query-data/',
50+
'/react/build-a-backend/graphqlapi/query-data/',
51+
'/angular/build-a-backend/graphqlapi/query-data/',
52+
'/vue/build-a-backend/graphqlapi/query-data/',
53+
'/nextjs/build-a-backend/graphqlapi/query-data/',
54+
'/javascript/build-a-backend/graphqlapi/subscribe-data/',
55+
'/react/build-a-backend/graphqlapi/subscribe-data/',
56+
'/angular/build-a-backend/graphqlapi/subscribe-data/',
57+
'/vue/build-a-backend/graphqlapi/subscribe-data/',
58+
'/nextjs/build-a-backend/graphqlapi/subscribe-data/',
59+
'/javascript/build-a-backend/graphqlapi/data-modeling/',
60+
'/angular/build-a-backend/graphqlapi/data-modeling/',
61+
'/react/build-a-backend/graphqlapi/data-modeling/',
62+
'/nextjs/build-a-backend/graphqlapi/data-modeling/',
63+
'/vue/build-a-backend/graphqlapi/data-modeling/',
64+
'/javascript/build-a-backend/graphqlapi/customize-authorization-rules/',
65+
'/react/build-a-backend/graphqlapi/customize-authorization-rules/',
66+
'/angular/build-a-backend/graphqlapi/customize-authorization-rules/',
67+
'/vue/build-a-backend/graphqlapi/customize-authorization-rules/',
68+
'/nextjs/build-a-backend/graphqlapi/customize-authorization-rules/',
69+
'/javascript/build-a-backend/graphqlapi/custom-business-logic/',
70+
'/angular/build-a-backend/graphqlapi/custom-business-logic/',
71+
'/react/build-a-backend/graphqlapi/custom-business-logic/',
72+
'/nextjs/build-a-backend/graphqlapi/custom-business-logic/',
73+
'/vue/build-a-backend/graphqlapi/custom-business-logic/',
74+
'/javascript/build-a-backend/graphqlapi/modify-amplify-generated-resources/',
75+
'/angular/build-a-backend/graphqlapi/modify-amplify-generated-resources/',
76+
'/react/build-a-backend/graphqlapi/modify-amplify-generated-resources/',
77+
'/nextjs/build-a-backend/graphqlapi/modify-amplify-generated-resources/',
78+
'/vue/build-a-backend/graphqlapi/modify-amplify-generated-resources/',
79+
'/javascript/build-a-backend/graphqlapi/best-practice/',
80+
'/react/build-a-backend/graphqlapi/best-practice/',
81+
'/angular/build-a-backend/graphqlapi/best-practice/',
82+
'/vue/build-a-backend/graphqlapi/best-practice/',
83+
'/nextjs/build-a-backend/graphqlapi/best-practice/',
84+
'/javascript/build-a-backend/graphqlapi/best-practice/warehouse-management/',
85+
'/angular/build-a-backend/graphqlapi/best-practice/warehouse-management/',
86+
'/react/build-a-backend/graphqlapi/best-practice/warehouse-management/',
87+
'/nextjs/build-a-backend/graphqlapi/best-practice/warehouse-management/',
88+
'/vue/build-a-backend/graphqlapi/best-practice/warehouse-management/',
89+
'/javascript/build-a-backend/graphqlapi/search-and-result-aggregations/',
90+
'/react/build-a-backend/graphqlapi/search-and-result-aggregations/',
91+
'/angular/build-a-backend/graphqlapi/search-and-result-aggregations/',
92+
'/nextjs/build-a-backend/graphqlapi/search-and-result-aggregations/',
93+
'/vue/build-a-backend/graphqlapi/search-and-result-aggregations/',
94+
'/javascript/build-a-backend/graphqlapi/connect-machine-learning-services/',
95+
'/angular/build-a-backend/graphqlapi/connect-machine-learning-services/',
96+
'/react/build-a-backend/graphqlapi/connect-machine-learning-services/',
97+
'/nextjs/build-a-backend/graphqlapi/connect-machine-learning-services/',
98+
'/vue/build-a-backend/graphqlapi/connect-machine-learning-services/',
99+
'/javascript/build-a-backend/graphqlapi/troubleshooting/',
100+
'/react/build-a-backend/graphqlapi/troubleshooting/',
101+
'/angular/build-a-backend/graphqlapi/troubleshooting/',
102+
'/vue/build-a-backend/graphqlapi/troubleshooting/',
103+
'/nextjs/build-a-backend/graphqlapi/troubleshooting/',
104+
'/javascript/tools/cli/graphqlapi/directives-reference/',
105+
'/angular/tools/cli/graphqlapi/directives-reference/',
106+
'/react/tools/cli/graphqlapi/directives-reference/',
107+
'/nextjs/tools/cli/graphqlapi/directives-reference/',
108+
'/vue/tools/cli/graphqlapi/directives-reference/',
109+
'/javascript/build-a-backend/auth/',
110+
'/angular/build-a-backend/auth/',
111+
'/react/build-a-backend/auth/',
112+
'/nextjs/build-a-backend/auth/',
113+
'/vue/build-a-backend/auth/',
114+
'/javascript/build-a-backend/auth/set-up-auth/',
115+
'/react/build-a-backend/auth/set-up-auth/',
116+
'/angular/build-a-backend/auth/set-up-auth/',
117+
'/vue/build-a-backend/auth/set-up-auth/',
118+
'/nextjs/build-a-backend/auth/set-up-auth/',
119+
'/javascript/build-a-backend/auth/enable-sign-up/',
120+
'/react/build-a-backend/auth/enable-sign-up/',
121+
'/angular/build-a-backend/auth/enable-sign-up/',
122+
'/vue/build-a-backend/auth/enable-sign-up/',
123+
'/nextjs/build-a-backend/auth/enable-sign-up/',
124+
'/javascript/build-a-backend/auth/manage-user-session/',
125+
'/react/build-a-backend/auth/manage-user-session/',
126+
'/angular/build-a-backend/auth/manage-user-session/',
127+
'/vue/build-a-backend/auth/manage-user-session/',
128+
'/nextjs/build-a-backend/auth/manage-user-session/',
129+
'/javascript/build-a-backend/auth/add-social-provider/',
130+
'/react/build-a-backend/auth/add-social-provider/',
131+
'/angular/build-a-backend/auth/add-social-provider/',
132+
'/vue/build-a-backend/auth/add-social-provider/',
133+
'/nextjs/build-a-backend/auth/add-social-provider/',
134+
'/javascript/build-a-backend/auth/manage-user-profile/',
135+
'/react/build-a-backend/auth/manage-user-profile/',
136+
'/angular/build-a-backend/auth/manage-user-profile/',
137+
'/vue/build-a-backend/auth/manage-user-profile/',
138+
'/nextjs/build-a-backend/auth/manage-user-profile/',
139+
'/javascript/build-a-backend/auth/password-management/',
140+
'/react/build-a-backend/auth/password-management/',
141+
'/angular/build-a-backend/auth/password-management/',
142+
'/vue/build-a-backend/auth/password-management/',
143+
'/nextjs/build-a-backend/auth/password-management/',
144+
'/javascript/build-a-backend/auth/manage-mfa/',
145+
'/react/build-a-backend/auth/manage-mfa/',
146+
'/angular/build-a-backend/auth/manage-mfa/',
147+
'/vue/build-a-backend/auth/manage-mfa/',
148+
'/nextjs/build-a-backend/auth/manage-mfa/',
149+
'/javascript/build-a-backend/auth/delete-user-account/',
150+
'/react/build-a-backend/auth/delete-user-account/',
151+
'/angular/build-a-backend/auth/delete-user-account/',
152+
'/vue/build-a-backend/auth/delete-user-account/',
153+
'/nextjs/build-a-backend/auth/delete-user-account/',
154+
'/javascript/build-a-backend/server-side-rendering/nextjs/',
155+
'/react/build-a-backend/server-side-rendering/nextjs/',
156+
'/angular/build-a-backend/server-side-rendering/nextjs/',
157+
'/vue/build-a-backend/server-side-rendering/nextjs/',
158+
'/nextjs/build-a-backend/server-side-rendering/nextjs/',
159+
'/javascript/build-a-backend/auth/auth-events/',
160+
'/react/build-a-backend/auth/auth-events/',
161+
'/angular/build-a-backend/auth/auth-events/',
162+
'/vue/build-a-backend/auth/auth-events/',
163+
'/nextjs/build-a-backend/auth/auth-events/',
164+
'/javascript/build-a-backend/build-a-backend/auth/admin-actions/',
165+
'/angular/build-a-backend/build-a-backend/auth/admin-actions/',
166+
'/react/build-a-backend/build-a-backend/auth/admin-actions/',
167+
'/nextjs/build-a-backend/build-a-backend/auth/admin-actions/',
168+
'/vue/build-a-backend/build-a-backend/auth/admin-actions/',
169+
'/javascript/build-a-backend/build-a-backend/auth/override-cognito/',
170+
'/angular/build-a-backend/build-a-backend/auth/override-cognito/',
171+
'/react/build-a-backend/build-a-backend/auth/override-cognito/',
172+
'/nextjs/build-a-backend/build-a-backend/auth/override-cognito/',
173+
'/vue/build-a-backend/build-a-backend/auth/override-cognito/',
174+
'/react-native/build-a-backend/build-a-backend/auth/override-cognito/',
175+
'/react-native/build-a-backend/graphqlapi/',
176+
'/react-native/build-a-backend/graphqlapi/custom-business-logic/',
177+
'/react-native/build-a-backend/graphqlapi/search-and-result-aggregations/',
178+
'/react-native/build-a-backend/graphqlapi/connect-machine-learning-services/',
179+
'/javascript/prev/start/project-setup/create-application/',
180+
'/angular/prev/start/project-setup/create-application/',
181+
'/nextjs/prev/start/project-setup/create-application/',
182+
'/react/prev/start/project-setup/create-application/',
183+
'/vue/prev/start/project-setup/create-application/',
184+
'/javascript/prev/start/project-setup/prerequisites/',
185+
'/angular/prev/start/project-setup/prerequisites/',
186+
'/react/prev/start/project-setup/prerequisites/',
187+
'/nextjs/prev/start/project-setup/prerequisites/',
188+
'/vue/prev/start/project-setup/prerequisites/',
189+
'/javascript/start/project-setup/create-application/',
190+
'/angular/start/project-setup/create-application/',
191+
'/nextjs/start/project-setup/create-application/',
192+
'/react/start/project-setup/create-application/',
193+
'/vue/start/project-setup/create-application/',
194+
'/javascript/start/project-setup/prerequisites/',
195+
'/angular/start/project-setup/prerequisites/',
196+
'/nextjs/start/project-setup/prerequisites/',
197+
'/react/start/project-setup/prerequisites/',
198+
'/vue/start/project-setup/prerequisites/',
199+
'/angular/start/getting-started/auth/',
200+
'/react/start/getting-started/auth/',
201+
'/vue/start/getting-started/auth/',
202+
'/angular/start/getting-started/data-model/',
203+
'/javascript/start/getting-started/data-model/',
204+
'/nextjs/start/getting-started/data-model/',
205+
'/react/start/getting-started/data-model/',
206+
'/vue/start/getting-started/data-model/',
207+
'/angular/start/getting-started/hosting/',
208+
'/javascript/start/getting-started/hosting/',
209+
'/nextjs/start/getting-started/hosting/',
210+
'/react/start/getting-started/hosting/',
211+
'/vue/start/getting-started/hosting/',
212+
'/angular/start/getting-started/installation/',
213+
'/javascript/start/getting-started/installation/',
214+
'/nextjs/start/getting-started/installation/',
215+
'/react/start/getting-started/installation/',
216+
'/vue/start/getting-started/installation/',
217+
'/angular/start/getting-started/nextsteps/',
218+
'/javascript/start/getting-started/nextsteps/',
219+
'/nextjs/start/getting-started/nextsteps/',
220+
'/react/start/getting-started/nextsteps/',
221+
'/vue/start/getting-started/nextsteps/',
222+
'/angular/start/getting-started/setup/',
223+
'/javascript/start/getting-started/setup/',
224+
'/nextjs/start/getting-started/setup/',
225+
'/react/start/getting-started/setup/',
226+
'/vue/start/getting-started/setup/',
227+
'/angular/start/getting-started/introduction/',
228+
'/javascript/start/getting-started/introduction/',
229+
'/nextjs/start/getting-started/introduction/',
230+
'/react/start/getting-started/introduction/',
231+
'/vue/start/getting-started/introduction/',
232+
'/react-native/start/getting-started/auth/',
233+
'/react-native/start/getting-started/data-model/',
234+
'/react-native/start/getting-started/installation/',
235+
'/react-native/start/getting-started/nextsteps/',
236+
'/react-native/start/getting-started/setup/',
237+
'/react-native/start/getting-started/introduction/',
238+
'/android/build-ui/',
239+
'/angular/build-ui/',
240+
'/flutter/build-ui/',
241+
'/react/build-ui/',
242+
'/react-native/build-ui/',
243+
'/swift/build-ui/',
244+
'/vue/build-ui/',
245+
'/javascript/deploy-and-host/',
246+
'/angular/deploy-and-host/',
247+
'/react/deploy-and-host/',
248+
'/nextjs/deploy-and-host/',
249+
'/vue/deploy-and-host/',
250+
'/javascript/prev/tools/libraries/',
251+
'/angular/prev/tools/libraries/',
252+
'/nextjs/prev/tools/libraries/',
253+
'/react/prev/tools/libraries/',
254+
'/vue/prev/tools/libraries/',
255+
'/javascript/tools/libraries/',
256+
'/angular/tools/libraries/',
257+
'/react/tools/libraries/',
258+
'/nextjs/tools/libraries/',
259+
'/vue/tools/libraries/'
260+
];

0 commit comments

Comments
 (0)