From 863d528d54b119a7f0c0652ded3479563d7b5636 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 24 Apr 2024 17:36:28 -0700 Subject: [PATCH 1/7] mv platforms to constants, narrow type for frameworks and InlineFilter --- src/components/Breadcrumbs/index.tsx | 38 ++++++------ .../FeatureLists/PlatformFeatureList.tsx | 8 +-- .../FrameworkGrid/FrameworkGrid.tsx | 2 +- .../GetStartedPopover/GetStartedPopover.tsx | 2 +- .../generateGetStartedLinks.tsx | 7 ++- src/components/InlineFilter/index.tsx | 11 ++-- src/components/Layout/Layout.tsx | 12 ++-- src/components/Layout/LayoutHeader.tsx | 2 +- src/components/Menu/Menu.tsx | 2 +- src/components/Menu/MenuItem.tsx | 5 +- src/components/Modal/Modal.tsx | 2 +- src/components/Modal/useGen1Path.ts | 2 +- src/components/Overview/Overview.tsx | 2 +- src/components/PlatformNavigator/index.tsx | 18 +++--- src/components/VersionSwitcher/index.tsx | 2 +- .../VersionSwitcher/useVersionSwitcherPath.ts | 2 +- src/constants/frameworks.tsx | 17 +++++- src/{data => constants}/platforms.ts | 61 ++++++++----------- src/directory/directory.d.ts | 2 +- src/pages/[platform]/index.tsx | 4 +- src/pages/gen1/[platform]/index.tsx | 4 +- src/pages/gen1/index.tsx | 2 +- src/utils/useCurrentPlatform.ts | 2 +- 23 files changed, 100 insertions(+), 109 deletions(-) rename src/{data => constants}/platforms.ts (54%) diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index 3af5bfcce09..82ee495471f 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/src/components/Breadcrumbs/index.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import { Breadcrumbs } from '@aws-amplify/ui-react'; import { findDirectoryNode as findNode } from '@/utils/findDirectoryNode'; import classNames from 'classnames'; -import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms'; +import { PLATFORMS } from '@/constants/platforms'; type BreadcrumbItem = { href: { pathname: string; query?: { platform: string } }; @@ -27,24 +27,24 @@ const overrides = { '/gen1/angular/prev': 'V5', '/gen1/nextjs/prev': 'V5', '/gen1/vue/prev': 'V5', - '/gen1/javascript': PLATFORM_DISPLAY_NAMES['javascript'], - '/gen1/react': PLATFORM_DISPLAY_NAMES['react'], - '/gen1/flutter': PLATFORM_DISPLAY_NAMES['flutter'], - '/gen1/swift': PLATFORM_DISPLAY_NAMES['swift'], - '/gen1/android': PLATFORM_DISPLAY_NAMES['android'], - '/gen1/react-native': PLATFORM_DISPLAY_NAMES['react-native'], - '/gen1/angular': PLATFORM_DISPLAY_NAMES['angular'], - '/gen1/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'], - '/gen1/vue': PLATFORM_DISPLAY_NAMES['vue'], - '/javascript': PLATFORM_DISPLAY_NAMES['javascript'], - '/react': PLATFORM_DISPLAY_NAMES['react'], - '/flutter': PLATFORM_DISPLAY_NAMES['flutter'], - '/swift': PLATFORM_DISPLAY_NAMES['swift'], - '/android': PLATFORM_DISPLAY_NAMES['android'], - '/react-native': PLATFORM_DISPLAY_NAMES['react-native'], - '/angular': PLATFORM_DISPLAY_NAMES['angular'], - '/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'], - '/vue': PLATFORM_DISPLAY_NAMES['vue'] + '/gen1/javascript': PLATFORMS['javascript'], + '/gen1/react': PLATFORMS['react'], + '/gen1/flutter': PLATFORMS['flutter'], + '/gen1/swift': PLATFORMS['swift'], + '/gen1/android': PLATFORMS['android'], + '/gen1/react-native': PLATFORMS['react-native'], + '/gen1/angular': PLATFORMS['angular'], + '/gen1/nextjs': PLATFORMS['nextjs'], + '/gen1/vue': PLATFORMS['vue'], + '/javascript': PLATFORMS['javascript'], + '/react': PLATFORMS['react'], + '/flutter': PLATFORMS['flutter'], + '/swift': PLATFORMS['swift'], + '/android': PLATFORMS['android'], + '/react-native': PLATFORMS['react-native'], + '/angular': PLATFORMS['angular'], + '/nextjs': PLATFORMS['nextjs'], + '/vue': PLATFORMS['vue'] }; function generateBreadcrumbs( diff --git a/src/components/FeatureLists/PlatformFeatureList.tsx b/src/components/FeatureLists/PlatformFeatureList.tsx index 5960284a356..aa1bc50b3dc 100644 --- a/src/components/FeatureLists/PlatformFeatureList.tsx +++ b/src/components/FeatureLists/PlatformFeatureList.tsx @@ -7,9 +7,9 @@ import { import { Flex } from '@aws-amplify/ui-react'; import featureListData from '@/constants/feature-lists-data'; -import { DEFAULT_PLATFORM } from '@/data/platforms'; -import type { Platform } from '@/data/platforms'; -import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms'; +import { DEFAULT_PLATFORM } from '@/constants/platforms'; +import type { Platform } from '@/constants/platforms'; +import { PLATFORMS } from '@/constants/platforms'; import { useIsGen1Page } from '@/utils/useIsGen1Page'; interface PlatformFeatureListProps { @@ -23,7 +23,7 @@ const PlatformFeatureList: React.FC = ({ return categories.length > 0 ? ( - + {categories.map((category, index) => ( {category.items.map((categoryItem, index) => ( diff --git a/src/components/FrameworkGrid/FrameworkGrid.tsx b/src/components/FrameworkGrid/FrameworkGrid.tsx index 5b6b0f3ab37..b74f9f58170 100644 --- a/src/components/FrameworkGrid/FrameworkGrid.tsx +++ b/src/components/FrameworkGrid/FrameworkGrid.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { Grid, View } from '@aws-amplify/ui-react'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; import { IconAndroid, IconAngular, diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx index da0661ee45d..0b1430154e5 100644 --- a/src/components/GetStartedPopover/GetStartedPopover.tsx +++ b/src/components/GetStartedPopover/GetStartedPopover.tsx @@ -1,7 +1,7 @@ import { Flex, VisuallyHidden } from '@aws-amplify/ui-react'; import { InternalLinkButton } from '@/components/InternalLinkButton'; import { Popover } from '@/components/Popover'; -import { DEFAULT_PLATFORM, Platform } from '@/data/platforms'; +import { DEFAULT_PLATFORM, Platform } from '@/constants/platforms'; import { useIsGen1Page } from '@/utils/useIsGen1Page'; import { UrlObject } from 'url'; import { gen1GetStartedHref, gen2GetStartedHref } from '@/data/index-page-data'; diff --git a/src/components/GetStartedPopover/generateGetStartedLinks.tsx b/src/components/GetStartedPopover/generateGetStartedLinks.tsx index ae8f259ff63..ed79e97d0e1 100644 --- a/src/components/GetStartedPopover/generateGetStartedLinks.tsx +++ b/src/components/GetStartedPopover/generateGetStartedLinks.tsx @@ -1,3 +1,4 @@ +import type { Platform } from '@/constants/platforms'; import { IconAndroid, IconAngular, @@ -9,7 +10,7 @@ import { IconVue } from '@/components/Icons'; import { GetStartedLinksType } from './GetStartedPopover'; -import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms'; +import { PLATFORMS } from '@/constants/platforms'; /** * Generates get started links for all platforms with the same get started url @@ -19,7 +20,7 @@ import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms'; export function generateGetStartedLinks( getStartedPathname ): GetStartedLinksType[] { - const platformOrder: Platforms = [ + const platformOrder: Platform[] = [ 'react', 'nextjs', 'angular', @@ -33,7 +34,7 @@ export function generateGetStartedLinks( const getStartedItems: Partial[] = platformOrder.map( (platform) => ({ - title: PLATFORM_DISPLAY_NAMES[platform], + title: PLATFORMS[platform], platform: platform }) ); diff --git a/src/components/InlineFilter/index.tsx b/src/components/InlineFilter/index.tsx index c7b20ed6d99..af3ff1454a9 100644 --- a/src/components/InlineFilter/index.tsx +++ b/src/components/InlineFilter/index.tsx @@ -1,9 +1,10 @@ +import type { Platform } from '@/constants/platforms'; import { Fragment } from 'react'; import FilterChildren from '../FilterChildren'; type InlineFilterProps = { children: React.ReactNode; - filters: string[]; + filters: Platform[]; }; export default function InlineFilter({ filters, children }: InlineFilterProps) { @@ -11,11 +12,9 @@ export default function InlineFilter({ filters, children }: InlineFilterProps) { return <>; } - const filteredChildren: Array = []; - - filters.forEach((filter) => { - filteredChildren.push({children}); - }); + const filteredChildren = filters.map((filter) => ( + {children} + )); return {filteredChildren}; } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 7872f29bb90..80da567cb69 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,3 +1,4 @@ +import type { Platform } from '@/constants/platforms'; import { useState, useEffect, ReactElement } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; @@ -15,12 +16,7 @@ import { defaultTheme } from '@/themes/defaultTheme'; import { gen1Theme } from '@/themes/gen1Theme'; import { Footer } from '@/components/Footer/'; import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav'; -import { - DEFAULT_PLATFORM, - PLATFORMS, - PLATFORM_DISPLAY_NAMES, - Platform -} from '@/data/platforms'; +import { DEFAULT_PLATFORM, PLATFORMS } from '@/constants/platforms'; import { SpaceShip } from '@/components/SpaceShip'; import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav'; import { LayoutProvider, LayoutHeader } from '@/components/Layout'; @@ -102,13 +98,13 @@ export const Layout = ({ const currentPlatform = platform ? platform - : PLATFORMS.includes(asPathPlatform) + : Object.keys(PLATFORMS).includes(asPathPlatform) ? asPathPlatform : DEFAULT_PLATFORM; const title = [ pageTitle, - platform ? PLATFORM_DISPLAY_NAMES[platform] : null, + platform ? PLATFORMS[platform] : null, isGen1 ? 'AWS Amplify Gen 1 Documentation' : 'AWS Amplify Documentation' ] .filter((s) => s !== '' && s !== null) diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx index 67bc553a84f..bc53c49c577 100644 --- a/src/components/Layout/LayoutHeader.tsx +++ b/src/components/Layout/LayoutHeader.tsx @@ -2,7 +2,7 @@ import { useContext, useRef } from 'react'; import { useRouter } from 'next/router'; import { Button, Flex, View, VisuallyHidden } from '@aws-amplify/ui-react'; import classNames from 'classnames'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; import { ALGOLIA_API_KEY, ALGOLIA_INDEX_NAME, diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 4fc98e97aa4..f7b8e8e0496 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -1,6 +1,6 @@ import { ReactElement } from 'react'; import { MenuItem } from './MenuItem'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; import { PageNode } from '@/directory/directory'; import { findDirectoryNode } from '@/utils/findDirectoryNode'; diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4856308b938..5cde4b14951 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,9 +1,10 @@ +import type { Platform } from '@/constants/platforms'; import { usePathWithoutHash } from '@/utils/usePathWithoutHash'; import { ReactElement, useContext, useEffect, useState, useMemo } from 'react'; import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react'; import { IconExternalLink, IconChevron } from '@/components/Icons'; import Link from 'next/link'; -import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms'; +import { JS_PLATFORMS } from '@/constants/platforms'; import { LayoutContext } from '@/components/Layout'; import { PageNode } from '@/directory/directory'; @@ -104,7 +105,7 @@ export function MenuItem({ if ( currentPlatform && - JS_PLATFORMS.includes(currentPlatform as JSPlatform) && + Object.keys(JS_PLATFORMS).includes(currentPlatform) && asPathWithoutHash.includes('/prev/') && pageNode.route == 'https://aws-amplify.github.io/amplify-js/api/' ) { diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 3d528f2d8ba..903d06497a4 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -10,7 +10,7 @@ import { IconChevron, IconStar, IconX, IconTSBoxed } from '@/components/Icons'; import { useEffect, useId, useState } from 'react'; import { InternalLinkButton } from '@/components/InternalLinkButton'; import { useCurrentPlatform } from '@/utils/useCurrentPlatform'; -import { DEFAULT_PLATFORM } from '@/data/platforms'; +import { DEFAULT_PLATFORM } from '@/constants/platforms'; import { useGen1Path } from './useGen1Path'; interface ModalProps extends ViewProps { diff --git a/src/components/Modal/useGen1Path.ts b/src/components/Modal/useGen1Path.ts index 0df75f80874..02eb36ead37 100644 --- a/src/components/Modal/useGen1Path.ts +++ b/src/components/Modal/useGen1Path.ts @@ -1,6 +1,6 @@ import flatDirectory from '@/directory/flatDirectory.json'; import { useRouter } from 'next/router'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; /** * Hook to find the Gen1 version of the Gen2 path you're on. diff --git a/src/components/Overview/Overview.tsx b/src/components/Overview/Overview.tsx index 296f1ffcad5..5f6cbaa2c3c 100644 --- a/src/components/Overview/Overview.tsx +++ b/src/components/Overview/Overview.tsx @@ -2,7 +2,7 @@ import { PageNode } from '@/directory/directory'; import { Card, Flex, View, Text } from '@aws-amplify/ui-react'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; import { Columns } from '@/components/Columns'; type OverviewProps = { diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx index cd27a302f43..0b2b646d348 100644 --- a/src/components/PlatformNavigator/index.tsx +++ b/src/components/PlatformNavigator/index.tsx @@ -1,13 +1,9 @@ +import type { Platform } from '@/constants/platforms'; import { Flex, Text, View } from '@aws-amplify/ui-react'; -import { frameworks } from '@/constants/frameworks'; - +import { FRAMEWORKS } from '@/constants/frameworks'; +import { PLATFORM_VERSIONS, PLATFORMS } from '@/constants/platforms'; import { VersionSwitcher } from '../VersionSwitcher'; import { Popover } from '../Popover'; -import { - PLATFORM_VERSIONS, - PLATFORM_DISPLAY_NAMES, - Platform -} from '@/data/platforms'; type PlatformNavigatorProps = { currentPlatform: Platform; @@ -18,9 +14,9 @@ export function PlatformNavigator({ currentPlatform, isGen1 }: PlatformNavigatorProps) { - const platformTitle = PLATFORM_DISPLAY_NAMES[currentPlatform]; + const platformTitle = PLATFORMS[currentPlatform]; - const platformItem = frameworks.filter((platform) => { + const platformItem = FRAMEWORKS.filter((platform) => { return platform.title === platformTitle; })[0]; @@ -45,11 +41,11 @@ export function PlatformNavigator({ {platformTitle} - {frameworks.map((platform, index) => { + {FRAMEWORKS.map((platform, index) => { const title = platform.title; const current = title === platformTitle; return ( diff --git a/src/components/VersionSwitcher/index.tsx b/src/components/VersionSwitcher/index.tsx index 98fdcf91bac..231a6fb7bba 100644 --- a/src/components/VersionSwitcher/index.tsx +++ b/src/components/VersionSwitcher/index.tsx @@ -2,7 +2,7 @@ import { Flex } from '@aws-amplify/ui-react'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { IconCheck } from '@/components/Icons'; -import { PLATFORM_VERSIONS } from '@/data/platforms'; +import { PLATFORM_VERSIONS } from '@/constants/platforms'; import classNames from 'classnames'; import { trackVersionChange } from '@/utils/track'; import { useVersionSwitcherPath } from './useVersionSwitcherPath'; diff --git a/src/components/VersionSwitcher/useVersionSwitcherPath.ts b/src/components/VersionSwitcher/useVersionSwitcherPath.ts index c12a92fc1d4..e0e778ed771 100644 --- a/src/components/VersionSwitcher/useVersionSwitcherPath.ts +++ b/src/components/VersionSwitcher/useVersionSwitcherPath.ts @@ -1,6 +1,6 @@ import flatDirectory from '@/directory/flatDirectory.json'; import { useRouter } from 'next/router'; -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; /** * Hook to find other version url for the Version switcher. diff --git a/src/constants/frameworks.tsx b/src/constants/frameworks.tsx index d17f88da11a..bbcd26d1bfc 100644 --- a/src/constants/frameworks.tsx +++ b/src/constants/frameworks.tsx @@ -1,3 +1,4 @@ +import type { ReactNode } from 'react'; import { IconAndroid, IconAngular, @@ -8,11 +9,21 @@ import { IconSwift, IconVue } from '@/components/Icons'; +import { PLATFORMS } from './platforms'; -export const frameworks = [ +export type Framework = { + [K in keyof typeof PLATFORMS]: { + key: K; + title: (typeof PLATFORMS)[K]; + href: `/${K}`; + icon: ReactNode; + }; +}[keyof typeof PLATFORMS]; + +export const FRAMEWORKS: Framework[] = [ { - title: 'React', key: 'react', + title: 'React', href: '/react', icon: }, @@ -64,4 +75,4 @@ export const frameworks = [ href: '/swift', icon: } -]; +] as const; diff --git a/src/data/platforms.ts b/src/constants/platforms.ts similarity index 54% rename from src/data/platforms.ts rename to src/constants/platforms.ts index 43c15c08edb..d75665a45de 100644 --- a/src/data/platforms.ts +++ b/src/constants/platforms.ts @@ -1,45 +1,34 @@ -export type Platform = 'android' | 'flutter' | 'swift' | JSPlatform; - -export type JSPlatform = - | 'angular' - | 'javascript' - | 'nextjs' - | 'react' - | 'react-native' - | 'vue'; - -export type Platforms = Platform[]; -export type JSPlatforms = JSPlatform[]; - -export const JS_PLATFORMS: JSPlatforms = [ - 'angular', - 'javascript', - 'nextjs', - 'react', - 'react-native', - 'vue' -]; - -export const PLATFORMS: Platforms = [ - 'android', - 'flutter', - 'swift', - ...JS_PLATFORMS -]; - -export const PLATFORM_DISPLAY_NAMES: Record = { - android: 'Android', +export const JS_PLATFORMS = { angular: 'Angular', - flutter: 'Flutter', javascript: 'JavaScript', nextjs: 'Next.js', react: 'React', 'react-native': 'React Native', - swift: 'Swift', vue: 'Vue' +} as const; + +export const MOBILE_PLATFORMS = { + android: 'Android', + flutter: 'Flutter', + swift: 'Swift' +} as const; + +export const PLATFORMS = { + ...JS_PLATFORMS, + ...MOBILE_PLATFORMS +} as const; + +export const DEFAULT_PLATFORM: Platform = 'react'; + +export type JSPlatform = keyof typeof JS_PLATFORMS; +export type Platform = keyof typeof PLATFORMS; + +type PlatformVersion = { + prev: `v${number}`; + current: `v${number}`; }; -export const PLATFORM_VERSIONS = { +export const PLATFORM_VERSIONS: Record = { android: { prev: 'v1', current: 'v2' @@ -76,6 +65,4 @@ export const PLATFORM_VERSIONS = { prev: 'v5', current: 'v6' } -}; - -export const DEFAULT_PLATFORM: Platform = 'react'; +} as const; diff --git a/src/directory/directory.d.ts b/src/directory/directory.d.ts index 5d1433a162b..56a72fd0d84 100644 --- a/src/directory/directory.d.ts +++ b/src/directory/directory.d.ts @@ -1,4 +1,4 @@ -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; export type PageNode = { /** diff --git a/src/pages/[platform]/index.tsx b/src/pages/[platform]/index.tsx index da1d6d815ad..bc1f0410f9f 100644 --- a/src/pages/[platform]/index.tsx +++ b/src/pages/[platform]/index.tsx @@ -12,7 +12,7 @@ import { generateGetStartedLinks } from '@/components/GetStartedPopover'; import { FrameworkGrid } from '@/components/FrameworkGrid'; -import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms'; +import { PLATFORMS } from '@/constants/platforms'; import { gen2GetStartedHref, gen2HowAmplifyWorksPathname @@ -58,7 +58,7 @@ const Gen2Overview = () => { - Amplify Documentation for {PLATFORM_DISPLAY_NAMES[currentPlatform]} + Amplify Documentation for {PLATFORMS[currentPlatform]} AWS Amplify streamlines full-stack app development. With its diff --git a/src/pages/gen1/[platform]/index.tsx b/src/pages/gen1/[platform]/index.tsx index a25159ca161..269b18fcb5d 100644 --- a/src/pages/gen1/[platform]/index.tsx +++ b/src/pages/gen1/[platform]/index.tsx @@ -1,5 +1,5 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; -import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms'; +import { PLATFORMS } from '@/constants/platforms'; import { FrameworkGrid } from '@/components/FrameworkGrid'; import { IconChevron } from '@/components/Icons'; import { @@ -54,7 +54,7 @@ const PlatformOverview = ({ platform }) => { - Amplify Documentation for {PLATFORM_DISPLAY_NAMES[platform]} + Amplify Documentation for {PLATFORMS[platform]} AWS Amplify streamlines full-stack app development. With its diff --git a/src/pages/gen1/index.tsx b/src/pages/gen1/index.tsx index b2fd741947f..a151abbb6a7 100644 --- a/src/pages/gen1/index.tsx +++ b/src/pages/gen1/index.tsx @@ -1,4 +1,4 @@ -import { DEFAULT_PLATFORM } from '@/data/platforms'; +import { DEFAULT_PLATFORM } from '@/constants/platforms'; import { FrameworkGrid } from '@/components/FrameworkGrid'; import { IconChevron } from '@/components/Icons'; import { diff --git a/src/utils/useCurrentPlatform.ts b/src/utils/useCurrentPlatform.ts index 0b5aa5d661d..69bbc9ff540 100644 --- a/src/utils/useCurrentPlatform.ts +++ b/src/utils/useCurrentPlatform.ts @@ -1,4 +1,4 @@ -import { Platform } from '@/data/platforms'; +import { Platform } from '@/constants/platforms'; import { useRouter } from 'next/router'; // Custom hook to return the current platform From f4307106c27633b618ca6df89ac74fe356d1c2c7 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 24 Apr 2024 17:37:25 -0700 Subject: [PATCH 2/7] mv platforms --- src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7795690aa91..f06e2020516 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,7 @@ import { generateGetStartedLinks } from '@/components/GetStartedPopover'; import { IconChevron } from '@/components/Icons'; -import { DEFAULT_PLATFORM } from '@/data/platforms'; +import { DEFAULT_PLATFORM } from '@/constants/platforms'; import { InternalLinkButton } from '@/components/InternalLinkButton'; import { FeatureItem, FeatureList } from '@/components/FeatureLists'; import { MDXCode } from '@/components/MDXComponents'; From 615c47888481cdaccbd2bac00877a94ca5349e77 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 24 Apr 2024 17:38:49 -0700 Subject: [PATCH 3/7] enable type-checking for mdx files --- tsconfig.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 2e464bf1ffc..844876668c7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,10 +27,15 @@ "extends": "./tsconfig.base.json", "include": [ "next-env.d.ts", + "mdx-components.tsx", "src/**/*.ts", "src/**/*.tsx", + "src/**/*.mdx", "tasks", "adobe.d.ts", "jest.setup.ts" - ] + ], + "mdx": { + "checkMdx": true + } } From 1c28eecac1588d1ba8bf4f9e25008573d9420999 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 24 Apr 2024 17:39:14 -0700 Subject: [PATCH 4/7] create types, declare globals for MDXComponent type checking --- mdx-components.tsx | 102 +++++++++++++++++++++++++++++---------------- 1 file changed, 66 insertions(+), 36 deletions(-) diff --git a/mdx-components.tsx b/mdx-components.tsx index d1d812f22ab..3decc2bed3c 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,5 +1,8 @@ import * as React from 'react'; -import type { MDXComponents } from 'mdx/types'; +import type { Metadata } from 'next'; +import type { MDXComponents, MDXProps } from 'mdx/types'; +import type { PageNode } from '@/directory/directory'; +import type { Platform } from '@/constants/platforms'; import ExportedImage from 'next-image-export-optimizer'; import InlineFilter from './src/components/InlineFilter'; import { YoutubeEmbed } from './src/components/YoutubeEmbed'; @@ -29,42 +32,69 @@ const MDXHeading4 = (props) => ; const MDXHeading5 = (props) => ; const MDXHeading6 = (props) => ; -export function useMDXComponents(components: MDXComponents): MDXComponents { - return { - // Map markdown elements to custom components - a: MDXLink, - h1: MDXHeading1, - h2: MDXHeading2, - h3: MDXHeading3, - h4: MDXHeading4, - h5: MDXHeading5, - h6: MDXHeading6, - pre: (preProps) => { - const props = preToCodeBlock(preProps); - if (props) { - return ; - } - return 
;
-    },
-    img: ResponsiveImage,
+const components = {
+  // Map markdown elements to custom components
+  a: MDXLink,
+  h1: MDXHeading1,
+  h2: MDXHeading2,
+  h3: MDXHeading3,
+  h4: MDXHeading4,
+  h5: MDXHeading5,
+  h6: MDXHeading6,
+  pre: (preProps) => {
+    const props = preToCodeBlock(preProps);
+    if (props) {
+      return ;
+    }
+    return 
;
+  },
+  img: ResponsiveImage,
+
+  // Make common custom components available to content authors
+  Accordion,
+  Block,
+  BlockSwitcher,
+  Callout,
+  Fragments,
+  InlineFilter,
+  MigrationAlert,
+  YoutubeEmbed,
+  Overview,
+  ExternalLink,
+  ExternalLinkButton,
+  InternalLinkButton,
+  FilterContent,
+  Grid,
+  Columns,
+  View
+};
+
+/**
+ * Type for Next.js's getStaticProps return in MDX pages
+ * this is needed to satisfy the type-check for 's childPageNodes
+ */
+type MDXGetStaticPropsResult = {
+  meta: Metadata & {
+    platforms: Platform[];
+  };
+  childPageNodes: PageNode[];
+};
 
-    // Make common custom components available to content authors
-    Accordion,
-    Block,
-    BlockSwitcher,
-    Callout,
-    Fragments,
-    InlineFilter,
-    MigrationAlert,
-    YoutubeEmbed,
-    Overview,
-    ExternalLink,
-    ExternalLinkButton,
-    InternalLinkButton,
-    FilterContent,
-    Grid,
-    Columns,
-    View,
+/**
+ * Declare types in the global scope for MDX to type-check
+ */
+declare global {
+  type MDXProvidedComponents = typeof components;
+  type Props = MDXProps & MDXGetStaticPropsResult;
+}
+
+/**
+ * @param _components Next.js components for MDX pages
+ * @returns all MDX components available for use in the page without import
+ */
+export function useMDXComponents(_components: MDXComponents) {
+  return {
+    ..._components,
     ...components
   };
 }

From 51c65bc16d76f34b6f0fafc3a9cf83fbd30f5460 Mon Sep 17 00:00:00 2001
From: josefaidt 
Date: Wed, 24 Apr 2024 17:41:32 -0700
Subject: [PATCH 5/7] find->replace platforms constant import paths in mdx
 files

---
 .../graphqlapi/connect-from-server-runtime/index.mdx            | 2 +-
 .../build-a-backend/graphqlapi/set-up-graphql-api/index.mdx     | 2 +-
 .../graphqlapi/connect-from-server-runtime/index.mdx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
index 92b74558b2f..c254dbb5401 100644
--- a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Connect to data from server-side runtimes',
diff --git a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
index ed29201095a..b39c9150ca9 100644
--- a/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/graphqlapi/set-up-graphql-api/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Set up Amplify GraphQL API',
diff --git a/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx b/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
index 908eb5807bc..d2e071971d9 100644
--- a/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
+++ b/src/pages/gen1/[platform]/prev/build-a-backend/graphqlapi/connect-from-server-runtime/index.mdx
@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { JS_PLATFORMS } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 
 export const meta = {
   title: 'Connect to data from server-side runtimes',

From ed754d41971b50be14f65b200858e4bcf5ebca53 Mon Sep 17 00:00:00 2001
From: josef 
Date: Fri, 31 May 2024 08:05:15 -0700
Subject: [PATCH 6/7] Update src/components/PlatformNavigator/index.tsx

---
 src/components/PlatformNavigator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx
index bf6bfd275e7..6fe360c86a1 100644
--- a/src/components/PlatformNavigator/index.tsx
+++ b/src/components/PlatformNavigator/index.tsx
@@ -54,7 +54,7 @@ export function PlatformNavigator({
               {platformTitle}
             
             

From 6cad9801eff45cdd7967768b4cfe62ee773d7435 Mon Sep 17 00:00:00 2001
From: josefaidt 
Date: Fri, 14 Jun 2024 16:20:20 -0700
Subject: [PATCH 7/7] fix test

---
 tasks/__tests__/generate-sitemap.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tasks/__tests__/generate-sitemap.test.ts b/tasks/__tests__/generate-sitemap.test.ts
index 31c68008b50..690ffc51a5e 100644
--- a/tasks/__tests__/generate-sitemap.test.ts
+++ b/tasks/__tests__/generate-sitemap.test.ts
@@ -1,5 +1,5 @@
 import { xmlUrlNode, findCanonicalPage } from '../generate-sitemap.mjs';
-import { PLATFORMS } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 jest.mock('node:crypto', () => {
   return {};
@@ -72,7 +72,7 @@ describe('generate-sitemap', () => {
 
   describe('findCanonicalPage', () => {
     it('should find the canonical page based on the platforms ranking', () => {
-      const pages = PLATFORMS.map(
+      const pages = Object.keys(PLATFORMS).map(
         (platform) =>
           `/${platform}/deploy-and-host/fullstack-branching/cross-account-deployments/index.html`
       );