Storage
++ GraphQL API{' '} + + Supports AWS CDK + +
- A simple mechanism for managing user content in public, - protected or private storage + Easy and secure solution to access your backend data with + support for real-time updates using GraphQL
GraphQL API
+Storage
- Easy and secure solution to access your backend data with - support for real-time updates using GraphQL + A simple mechanism for managing user content in public, + protected or private storage
{fragment}
);
}
- return
+
({
+ useRouter() {
+ return {
+ route: '/',
+ pathname: '',
+ query: '',
+ asPath: ''
+ };
+ }
+}));
+
describe('Menu', () => {
directoryKeys.forEach((directoryKey) => {
it(`should render the Menu component with the ${directoryKey} key`, async () => {
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 3c2bcad8e48..08344fd34e4 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -36,7 +36,7 @@ function Menu(props: MenuProps, ref) {
const [isOpen, setIsOpen] = useState(true);
const { state } = useLastUpdatedDatesContext();
const menuRef = useRef(null);
- const [onDesktop, setOnDesktop] = useState(false);
+ const [onDesktop, setOnDesktop] = useState(true);
useEffect(() => {
const MQDesktopJS = MQDesktop.substring(6);
diff --git a/src/components/NextPrevious/index.tsx b/src/components/NextPrevious/index.tsx
index 70e010d462a..1bd72c263da 100644
--- a/src/components/NextPrevious/index.tsx
+++ b/src/components/NextPrevious/index.tsx
@@ -17,8 +17,8 @@ type Directory = {
function Prev(item: DirectoryItem) {
return (
-
- 
+
+
previous
-
+
next
- 
+
);
diff --git a/src/components/NextPrevious/styles.tsx b/src/components/NextPrevious/styles.tsx
index 4d814080217..e8de9266514 100644
--- a/src/components/NextPrevious/styles.tsx
+++ b/src/components/NextPrevious/styles.tsx
@@ -7,7 +7,8 @@ export const NextPreviousContainerStyle = styled.div`
padding: 1rem 0;
`;
-export const NextPreviousLinkStyle = styled.a`
+export const NextPreviousLinkStyle = styled.a(
+ ({ isPrevious }) => `
&:first-child {
margin-right: 1rem;
}
@@ -22,7 +23,7 @@ export const NextPreviousLinkStyle = styled.a`
h4,
span {
color: var(--font-color);
- text-align: right;
+ text-align: ${isPrevious ? 'left' : 'right'};
}
h4 {
@@ -36,27 +37,17 @@ export const NextPreviousLinkStyle = styled.a`
}
img {
- margin-left: 1rem;
+ margin-left: ${isPrevious ? '0' : '1rem'};
+ margin-right: ${isPrevious ? '1rem' : '0'};
width: 0.5rem;
}
+`
+);
- &:first-child {
- img {
- margin-left: 0;
- margin-right: 1rem;
- }
-
- h4,
- span {
- text-align: left;
- }
- }
-`;
-
-type NextPreviousTextProps = {
+type NextPreviousProps = {
isPrevious: boolean;
};
-export const NextPreviousTextStyle = styled.div(
+export const NextPreviousTextStyle = styled.div(
({ isPrevious }) => `
display: flex;
flex-direction: column;
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index d04c92350aa..e272d6b82eb 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -7,12 +7,12 @@ import {
getChapterDirectory,
isProductRoot
} from '../../utils/getLocalDirectory';
-import { useRef } from 'react';
+import { useEffect, useRef, useState, createContext } from 'react';
import {
filterMetadataByOption,
SelectedFilters
} from '../../utils/filter-data';
-import ChooseFilterPage from '../../pages/ChooseFilterPage';
+import ChooseFilterPage from '../ChooseFilterPage';
import { parseLocalStorage } from '../../utils/parseLocalStorage';
import { withFilterOverrides } from '../../utils/withFilterOverrides';
@@ -20,21 +20,28 @@ export type MdxFrontmatterType = {
lastUpdated: string;
};
+export const PageContext = createContext({});
+
export default function Page({
children,
meta,
- frontmatter
+ frontmatter,
+ platform = '',
+ filterKind = ''
}: {
children: any;
meta?: any;
frontmatter?: MdxFrontmatterType;
+ platform?: string;
+ filterKind?: string;
}) {
const footerRef = useRef(null);
const router = useRouter();
+ const [filterKeysLoaded, setFilterKeysLoaded] = useState({});
- if (!router.isReady) {
- return <>;
- }
+ useEffect(() => {
+ setFilterKeysLoaded(parseLocalStorage('filterKeys', {} as SelectedFilters));
+ }, []);
let url = router.asPath;
// remove trailing slash. this is important on pages like /cli/index.mdx
@@ -46,13 +53,11 @@ export default function Page({
const directoryPath = router.pathname;
- let filterKey = '',
- filterKind = '';
- const filterKeysLoaded = parseLocalStorage(
- 'filterKeys',
- {} as SelectedFilters
- );
+ let filterKey = platform;
const filterKeyUpdates = {} as SelectedFilters;
+ if (filterKey && filterKind) {
+ filterKeyUpdates[filterKind] = filterKey;
+ }
if ('platform' in router.query) {
filterKey = router.query.platform as string;
filterKeyUpdates.platform = filterKey;
@@ -82,8 +87,18 @@ export default function Page({
...overrides
};
- localStorage.setItem('filterKeys', JSON.stringify(filterKeys));
- if (filters.length !== 0 && !filters.includes(filterKey) && meta) {
+ useEffect(() => {
+ if (Object.keys(filterKeys).length !== 0) {
+ localStorage.setItem('filterKeys', JSON.stringify(filterKeys));
+ }
+ }, [filterKeys]);
+
+ if (
+ filterKey &&
+ filters.length !== 0 &&
+ !filters.includes(filterKey) &&
+ meta
+ ) {
return (
- {meta ? (
-
+
+
+ {meta ? (
+
+
);
}
diff --git a/src/components/Page/metaContent.tsx b/src/components/Page/metaContent.tsx
index a5a031d5713..905e0d3c7c6 100644
--- a/src/components/Page/metaContent.tsx
+++ b/src/components/Page/metaContent.tsx
@@ -4,7 +4,7 @@ import TableOfContents from '../TableOfContents/index';
import NextPrevious from '../NextPrevious/index';
import { ContentStyle, ChapterTitleStyle } from './styles';
import MobileMenuIcons from '../MobileMenuIcons';
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
import { MQDesktop } from '../media';
import Feedback from '../Feedback';
import LastUpdatedDatesProvider from '../LastUpdatedProvider';
@@ -39,14 +39,18 @@ export default function MetaContent({
const buttonsRef = useRef(null);
const contentsRef = useRef(null);
const [menuIsOpen, setMenuIsOpen] = useState(false);
+ const [onDesktop, setOnDesktop] = useState(true);
// Slice off the "@media " string at the start for use in JS instead of CSS
const MQDesktopJS = MQDesktop.substring(6);
// If the media query matches, then the user is on desktop and should not see the mobile toggle
- const onDesktop =
- typeof window === 'undefined'
- ? false
- : window.matchMedia(MQDesktopJS).matches;
+ useEffect(() => {
+ setOnDesktop(
+ typeof window === 'undefined'
+ ? false
+ : window.matchMedia(MQDesktopJS).matches
+ );
+ }, []);
return (
<>
diff --git a/src/components/SecondaryNav/index.tsx b/src/components/SecondaryNav/index.tsx
index 5b5f77cda69..c7f0d11cf2b 100644
--- a/src/components/SecondaryNav/index.tsx
+++ b/src/components/SecondaryNav/index.tsx
@@ -16,21 +16,25 @@ import ExternalLink from '../ExternalLink';
import InternalLink from '../InternalLink';
import { useRouter } from 'next/router';
import { Container } from '../Container';
-import { parseLocalStorage } from '../../utils/parseLocalStorage';
+import { useContext } from 'react';
+import { PageContext } from '../Page';
import SearchBar from '../SearchBar';
export default function SecondaryNav() {
+ const filterKeys = useContext(PageContext);
const router = useRouter();
const path = router.asPath;
- const filterKeys = parseLocalStorage('filterKeys', {});
-
return (
+
{item.title}
@@ -31,12 +31,12 @@ function Prev(item: DirectoryItem) { function Next(item: DirectoryItem) { return ({item.title}
+
{[
+ {
+ label: 'How Amplify Works',
+ url: '/how-amplify-works'
+ },
{
label: 'Getting Started',
url: '/start'
diff --git a/src/components/SecondaryNav/styles.tsx b/src/components/SecondaryNav/styles.tsx
index 9db49fba314..e4467c2264d 100644
--- a/src/components/SecondaryNav/styles.tsx
+++ b/src/components/SecondaryNav/styles.tsx
@@ -41,7 +41,7 @@ export const SecondaryNavStyle = styled.div`
a {
margin-left: 1.75rem;
- &:first-child {
+ &:first-of-type {
margin-left: 0;
}
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index df7715be473..da9b4f0e12f 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -7,10 +7,11 @@ import {
H3AnchorStyle,
HeaderStyle
} from './styles';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { MQDesktop } from '../media';
import { CloseIcon } from '../Icons';
+import { truncate } from 'fs';
const stickyHeaderHeight = 124;
function scroll(hash) {
@@ -24,26 +25,26 @@ function scroll(hash) {
function TableOfContents({ children, title, buttonsRef }, ref) {
const router = useRouter();
const MQDesktopJS = MQDesktop.substring(6);
- const onDesktop =
- typeof window === 'undefined'
- ? false
- : window.matchMedia(MQDesktopJS).matches;
-
- if (children.length === 0) {
- return <>;
- }
- window.onload = (_) => {
- if (window.location.href.includes('#')) {
- const hash = window.location.href.split('#')[1];
- scroll(hash);
- }
- };
+ const [onDesktop, setOnDesktop] = useState(true);
let headers = [];
let headerQueries = [];
let activeLink = 0;
let previousLink = -1;
useEffect(() => {
+ setOnDesktop(
+ typeof window === 'undefined'
+ ? false
+ : window.matchMedia(MQDesktopJS).matches
+ );
+
+ window.onload = (_) => {
+ if (window.location.href.includes('#')) {
+ const hash = window.location.href.split('#')[1];
+ scroll(hash);
+ }
+ };
+
const idSet = new Set();
const pageHeadings = document.querySelectorAll('a > h2, a > h3');
const headings = [];
@@ -56,7 +57,6 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
headings.push(heading);
}
});
- // console.log(document.getElementById('toc')?.querySelectorAll('a'))
const headings2 = document.getElementById('toc')?.querySelectorAll('a');
for (let i = 0; i < headings.length; ++i) {
const id = headings[i].id;
@@ -77,13 +77,15 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
setTimeout(scroll.bind(undefined, uniqueId), 50);
return false;
};
- headings2[i].onclick = () => {
- if (headings[i].classList.contains('docs-expander__title')) {
- uniqueId = headings[i].parentNode.parentNode.parentNode.id;
- }
- setTimeout(scroll.bind(undefined, uniqueId), 50);
- return false;
- };
+ if (headings2 && headings2[i]) {
+ headings2[i].onclick = () => {
+ if (headings[i].classList.contains('docs-expander__title')) {
+ uniqueId = headings[i].parentNode.parentNode.parentNode.id;
+ }
+ setTimeout(scroll.bind(undefined, uniqueId), 50);
+ return false;
+ };
+ }
}
headers = Array.from(headings).map((heading) => heading.id);
headerQueries = headers.map((header) => {
@@ -150,7 +152,7 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
}
};
- return (
+ return children.length ? (
{!onDesktop && (
@@ -175,6 +177,8 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
})}
+ ) : (
+ <>
);
}
diff --git a/src/components/WhatsNewBanner/index.tsx b/src/components/WhatsNewBanner/index.tsx
new file mode 100644
index 00000000000..f22813255ca
--- /dev/null
+++ b/src/components/WhatsNewBanner/index.tsx
@@ -0,0 +1,27 @@
+import { Link, View } from '@aws-amplify/ui-react';
+import { FiArrowRightCircle } from 'react-icons/fi';
+import { BannerContainer } from './styles';
+import { trackWhatsNewBanner } from '../../utils/track';
+
+export default function WhatsNewBanner({ href, content }) {
+ return (
+
+
+
+ What's New:
+ {content}
+
+
+ );
+}
diff --git a/src/components/WhatsNewBanner/styles.tsx b/src/components/WhatsNewBanner/styles.tsx
new file mode 100644
index 00000000000..8daeea9d62b
--- /dev/null
+++ b/src/components/WhatsNewBanner/styles.tsx
@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { MQTablet, MQLaptop } from '../media';
+
+export const BannerContainer = styled.div`
+ text-align: center;
+ display: none;
+
+ ${MQLaptop} {
+ display: block;
+ margin-top: 24px;
+ }
+`;
diff --git a/src/constants/versions.ts b/src/constants/versions.ts
index 93094b37d42..e60a1c73736 100644
--- a/src/constants/versions.ts
+++ b/src/constants/versions.ts
@@ -1,5 +1,5 @@
module.exports = {
- ANDROID_VERSION: "2.13.2",
+ ANDROID_VERSION: "2.14.4",
ANDROID_DEVPREVIEW: "1.36.5-dev-preview.0",
ANDROID_V1_VERSION: "1.38.8",
ANDROID_V1_GEO_VERSION: "1.0.1",
diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs
index 9a5b3a5751a..8e1d0449731 100644
--- a/src/directory/directory.mjs
+++ b/src/directory/directory.mjs
@@ -87,26 +87,36 @@ export const directory = {
route: '/lib/auth/getting-started',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
+ {
+ title: 'Manage user session and credentials',
+ route: '/lib/auth/manage-session',
+ filters: ['js', 'react-native']
+ },
{
title: 'Enable sign-up, sign-in, and sign-out',
route: '/lib/auth/emailpassword',
filters: ['js', 'react-native']
},
{
- title: 'Social sign-in (OAuth)',
+ title: 'Add social provider sign-in',
route: '/lib/auth/social',
filters: ['js', 'react-native']
},
{
- title: 'Multi-factor authentication',
+ title: 'Manage MFA and device settings',
route: '/lib/auth/mfa',
- filters: ['js', 'react-native', 'android', 'flutter', 'ios']
+ filters: ['js', 'react-native']
},
{
- title: 'Password & user management',
+ title: 'Manage user profiles',
route: '/lib/auth/manageusers',
filters: ['js', 'react-native']
},
+ {
+ title: 'Set up user password change and recovery',
+ route: '/lib/auth/password_management',
+ filters: ['js', 'react-native', 'android', 'flutter', 'ios']
+ },
{
title: 'Switching authentication flows',
route: '/lib/auth/switch-auth',
@@ -138,10 +148,15 @@ export const directory = {
filters: ['android', 'flutter', 'ios']
},
{
- title: 'Social sign-in (OAuth)',
+ title: 'Add social provider sign-in',
route: '/lib/auth/social',
filters: ['android', 'flutter', 'ios']
},
+ {
+ title: 'Multi-factor authentication',
+ route: '/lib/auth/mfa',
+ filters: ['ios', 'flutter', 'android']
+ },
{
title: 'SMS flows',
route: '/lib/auth/sms_flows',
@@ -158,7 +173,7 @@ export const directory = {
filters: ['android', 'flutter', 'ios']
},
{
- title: 'Auth events',
+ title: 'Listen to auth events',
route: '/lib/auth/auth-events',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
@@ -172,11 +187,6 @@ export const directory = {
route: '/lib/auth/device_features',
filters: ['android', 'ios', 'js', 'flutter', 'react-native']
},
- {
- title: 'Password management',
- route: '/lib/auth/password_management',
- filters: ['android', 'flutter', 'ios']
- },
{
title: 'Sign out',
route: '/lib/auth/signOut',
@@ -193,7 +203,7 @@ export const directory = {
filters: ['flutter']
},
{
- title: 'Delete user',
+ title: 'Delete user account',
route: '/lib/auth/delete_user',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
@@ -207,6 +217,11 @@ export const directory = {
route: '/lib/auth/advanced',
filters: ['android', 'ios', 'flutter']
},
+ {
+ title: 'Use existing Amazon Cognito resources',
+ route: '/lib/auth/existing-resources',
+ filters: ['ios', 'flutter']
+ },
{
title: 'Under the hood',
route: '/lib/auth/overview',
@@ -287,6 +302,11 @@ export const directory = {
route: '/lib/graphqlapi/getting-started',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
+ {
+ title: 'Connect your app code to the API',
+ route: '/lib/graphqlapi/connect',
+ filters: ['js']
+ },
{
title: 'Concepts',
route: '/lib/graphqlapi/concepts',
@@ -298,20 +318,25 @@ export const directory = {
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
{
- title: 'Create, update, delete data',
+ title: 'Create, update, and delete application data',
route: '/lib/graphqlapi/mutate-data',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
{
- title: 'Fetch data',
+ title: 'Read application data',
route: '/lib/graphqlapi/query-data',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
{
- title: 'Subscribe to data',
+ title: 'Subscribe to real-time events',
route: '/lib/graphqlapi/subscribe-data',
filters: ['android', 'flutter', 'ios', 'js', 'react-native']
},
+ {
+ title: 'Relational models',
+ route: '/lib/graphqlapi/relational',
+ filters: ['android']
+ },
{
title: 'Working with files and attachments',
route: '/lib/graphqlapi/working-with-files',
@@ -1267,6 +1292,11 @@ export const directory = {
route: '/lib-v1/auth/escapehatch',
filters: ['android', 'ios']
},
+ {
+ title: 'Use existing Amazon Cognito resources',
+ route: '/lib-v1/auth/existing-resources',
+ filters: ['ios', 'flutter']
+ },
{
title: 'Under the hood',
route: '/lib-v1/auth/overview',
@@ -1432,11 +1462,6 @@ export const directory = {
route: '/lib-v1/storage/overview',
filters: ['android', 'ios', 'flutter', 'js']
},
- {
- title: 'Upload files',
- route: '/lib-v1/storage/upload',
- filters: ['android', 'ios', 'flutter', 'js']
- },
{
title: 'Download files',
route: '/lib-v1/storage/download',
@@ -1457,6 +1482,11 @@ export const directory = {
route: '/lib-v1/storage/copy',
filters: ['js']
},
+ {
+ title: 'Upload files',
+ route: '/lib-v1/storage/upload',
+ filters: ['android', 'ios', 'flutter', 'js']
+ },
{
title: 'Remove files',
route: '/lib-v1/storage/remove',
@@ -2650,6 +2680,11 @@ export const directory = {
'api-rest': {
title: 'API (REST)',
items: [
+ {
+ title: 'Generative AI',
+ route: '/guides/api-rest/gen-ai',
+ filters: ['js']
+ },
{
title: 'NodeJS API',
route: '/guides/api-rest/node-api',
@@ -2809,6 +2844,13 @@ export const directory = {
]
}
}
+ },
+ 'how-amplify-works': {
+ productRoot: {
+ title: 'How Amplify works',
+ route: '/how-amplify-works'
+ },
+ items: {}
}
};
diff --git a/src/fragments/cli/plugins/custom-transformer.mdx b/src/fragments/cli/plugins/custom-transformer.mdx
index 5c624184995..550a92e5f26 100644
--- a/src/fragments/cli/plugins/custom-transformer.mdx
+++ b/src/fragments/cli/plugins/custom-transformer.mdx
@@ -105,16 +105,18 @@ The table below shows the lifecycle methods that a transformer plugin can implem
-
| Lifecycle method | -Description | +|||
|---|---|---|---|---|
| Lifecycle method | +Description | +|||
| before | +before | initialization of the transformer | ||
| GraphQL visitor pattern functions | +GraphQL visitor pattern functions | object | for each type that has the directive defined by the transformer | for each inputValue that has the directive defined by the transformer |
| prepare | +prepare | transformer register themselves in the `TransformerContext` (as data provider or data enhancer) | ||
| validate | +validate | transformer validates the directive arguments | ||
| transformSchema | +transformSchema | transformer updates/augments the output schema | ||
| generateResolvers | +generateResolvers | transformer generates resources such as resolvers, IAM policies, Tables, etc. | ||
| after | +after | cleanup, this lifecycle method is invoked in reverse order for the registered transformers | ||