diff --git a/src/components/article-pagination/index.tsx b/src/components/article-pagination/index.tsx index e659d38f..4e813103 100644 --- a/src/components/article-pagination/index.tsx +++ b/src/components/article-pagination/index.tsx @@ -20,7 +20,7 @@ const ArticlePagination = ({ const handleClick = (e: { preventDefault: () => void }, slug: string) => { e.preventDefault() - router.push(`/docs/guides/${slug}`) + router.push(`/docs/tutorial/${slug}`) } return ( @@ -28,7 +28,7 @@ const ArticlePagination = ({ {!hidePaginationPrevious && pagination.previousDoc.slug && ( void }) => { handleClick(e, pagination.previousDoc.slug as string) }} @@ -44,7 +44,7 @@ const ArticlePagination = ({ {!hidePaginationNext && pagination.nextDoc.slug && ( void }) => { handleClick(e, pagination.nextDoc.slug as string) }} diff --git a/src/components/feedback-section/index.tsx b/src/components/feedback-section/index.tsx index ecb6b6ae..33aa4624 100644 --- a/src/components/feedback-section/index.tsx +++ b/src/components/feedback-section/index.tsx @@ -40,7 +40,7 @@ const FeedbackSection = ({ slug, docPath, suggestEdits = true }: DocPath) => { const feedback = { data: [ new Date().toISOString(), - `https://developers.vtex.com/docs/guides/${slug}`, + `https://developers.vtex.com/docs/tutorial/${slug}`, modalState.liked ? 'positive' : 'negative', comment, ], diff --git a/src/components/markdown-renderer/components.tsx b/src/components/markdown-renderer/components.tsx index dad033c3..aa285389 100644 --- a/src/components/markdown-renderer/components.tsx +++ b/src/components/markdown-renderer/components.tsx @@ -2,7 +2,7 @@ import { useContext, useState } from 'react' import { InView } from 'react-intersection-observer' import Image from 'next/image' -import { APIGuideContext } from 'utils/contexts/api-guide' +import { DocumentContext } from 'utils/contexts/documentContext' import { childrenToString, slugify } from 'utils/string-utils' import OverviewCard from 'components/overview-card' import WhatsNextCard from 'components/whats-next-card' @@ -152,7 +152,7 @@ export default { }, h2: ({ node, ...props }: Component) => { const { activeItem, setActiveItem, goToPreviousItem } = - useContext(APIGuideContext) + useContext(DocumentContext) return ( { const { activeItem, setActiveItem, goToPreviousSubItem } = - useContext(APIGuideContext) + useContext(DocumentContext) return ( { const { onThisPageOpenStatus, setOnThisPageOpenStatus } = - useContext(APIGuideContext) + useContext(DocumentContext) return ( diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx index 813c0d96..911871f6 100644 --- a/src/components/search-results/index.tsx +++ b/src/components/search-results/index.tsx @@ -22,7 +22,7 @@ export interface SearchDataItemProps { const searchData: SearchDataItemProps[] = [ { - doc: 'Guides', + doc: 'Tutorials & Solutions', title: 'SKU Selector', description: 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', diff --git a/src/components/see-also-section/functions.ts b/src/components/see-also-section/functions.ts index a33944e7..a3ce1a87 100644 --- a/src/components/see-also-section/functions.ts +++ b/src/components/see-also-section/functions.ts @@ -6,18 +6,14 @@ import { useIntl } from 'react-intl' const getDoctype = (category: string) => { switch (category) { - case 'API Guides': - return 'Guides' - case 'api-reference': - return 'API Reference' - case 'App Development': - return 'App Development' - case 'Storefront Development': - return 'Storefront Development' - case 'VTEX IO Apps': - return 'VTEX IO Apps' + case 'Tutorials & Solutions': + return 'Tutorials & Solutions' + case 'Start here': + return 'Start here' + case 'News': + return 'News' default: - return 'Guides' + return 'Tutorials & Solutions' } } diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 0690afea..3b528ea7 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -26,7 +26,7 @@ interface SideBarSectionState { } const Sidebar = ({ - sectionSelected = 'Guides', + sectionSelected = 'Start here', parentsArray = [], }: SideBarSectionState) => { const [activeSectionName, setActiveSectionName] = useState(sectionSelected) diff --git a/src/components/table-of-contents/index.tsx b/src/components/table-of-contents/index.tsx index d6cdad2e..a45457dc 100644 --- a/src/components/table-of-contents/index.tsx +++ b/src/components/table-of-contents/index.tsx @@ -3,7 +3,7 @@ import { useContext } from 'react' import { Box, Text } from '@vtex/brand-ui' import AnimateHeight from 'react-animate-height' -import { APIGuideContext } from 'utils/contexts/api-guide' +import { DocumentContext } from 'utils/contexts/documentContext' import styles from './styles' @@ -18,7 +18,7 @@ export interface Item extends SubItem { const TableOfContents = () => { const { headings, activeItem, setActiveItem, setOnThisPageOpenStatus } = - useContext(APIGuideContext) + useContext(DocumentContext) const Item = ({ title, diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/tracks/[slug].tsx similarity index 96% rename from src/pages/docs/guides/[slug].tsx rename to src/pages/docs/tracks/[slug].tsx index b63ab6e0..adbaf4d2 100644 --- a/src/pages/docs/guides/[slug].tsx +++ b/src/pages/docs/tracks/[slug].tsx @@ -15,7 +15,7 @@ import remarkImages from 'utils/remark_plugins/plaiceholder' import { Box, Flex, Text } from '@vtex/brand-ui' -import APIGuideContextProvider from 'utils/contexts/api-guide' +import DocumentContextProvider from 'utils/contexts/documentContext' import { SidebarContext } from 'utils/contexts/sidebar' import type { Item } from 'components/table-of-contents' @@ -74,7 +74,7 @@ interface Props { branch: string } -const DocumentationPage: NextPage = ({ +const TrackPage: NextPage = ({ // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore slug, @@ -100,7 +100,7 @@ const DocumentationPage: NextPage = ({ <> {serialized.frontmatter?.title as string} - + {serialized.frontmatter?.hidden && ( )} @@ -111,7 +111,7 @@ const DocumentationPage: NextPage = ({ /> )} - + @@ -157,7 +157,7 @@ const DocumentationPage: NextPage = ({ - + ) } @@ -198,7 +198,7 @@ export const getStaticProps: GetStaticProps = async ({ ? docsPathsGLOBAL : await getDocsPaths(branch, currentLocale) - const logger = getLogger('Guides') + const logger = getLogger('Start here') const path = docsPaths[slug] if (!path) { @@ -357,7 +357,7 @@ export const getStaticProps: GetStaticProps = async ({ const breadcumbList: { slug: string; name: string; type: string }[] = [] parentsArrayName.forEach((_el: string, idx: number) => { breadcumbList.push({ - slug: `/docs/guides/${parentsArray[idx]}`, + slug: `/docs/tracks/${parentsArray[idx]}`, name: parentsArrayName[idx], type: parentsArrayType[idx], }) @@ -388,4 +388,4 @@ export const getStaticProps: GetStaticProps = async ({ } } -export default DocumentationPage +export default TrackPage diff --git a/src/pages/docs/guides/index.tsx b/src/pages/docs/tracks/index.tsx similarity index 98% rename from src/pages/docs/guides/index.tsx rename to src/pages/docs/tracks/index.tsx index c245a031..ebdc0bf0 100644 --- a/src/pages/docs/guides/index.tsx +++ b/src/pages/docs/tracks/index.tsx @@ -161,7 +161,7 @@ const Image2 = () => ( ) -const ApiGuidesPage: NextPage = ({ branch }) => { +const TracksPage: NextPage = ({ branch }) => { const { setBranchPreview } = useContext(PreviewContext) const intl = useIntl() setBranchPreview(branch) @@ -251,7 +251,7 @@ export const getStaticProps: GetStaticProps = async ({ previewData, }) => { const sidebarfallback = await getNavigation() - const sectionSelected = 'Guides' + const sectionSelected = 'Start here' const previewBranch = preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') @@ -268,4 +268,4 @@ export const getStaticProps: GetStaticProps = async ({ } } -export default ApiGuidesPage +export default TracksPage diff --git a/src/pages/docs/tutorial/[slug].tsx b/src/pages/docs/tutorial/[slug].tsx new file mode 100644 index 00000000..bf7acefc --- /dev/null +++ b/src/pages/docs/tutorial/[slug].tsx @@ -0,0 +1,391 @@ +import Head from 'next/head' +import { useEffect, useState, useContext } from 'react' +import { GetStaticPaths, GetStaticProps, NextPage } from 'next' +import { PHASE_PRODUCTION_BUILD } from 'next/constants' +import jp from 'jsonpath' +import ArticlePagination from 'components/article-pagination' +import { serialize } from 'next-mdx-remote/serialize' +import { MDXRemoteSerializeResult } from 'next-mdx-remote' +import remarkGFM from 'remark-gfm' +import rehypeHighlight from 'rehype-highlight' +import hljsCurl from 'highlightjs-curl' +import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote' + +import remarkImages from 'utils/remark_plugins/plaiceholder' + +import { Box, Flex, Text } from '@vtex/brand-ui' + +import DocumentContextProvider from 'utils/contexts/documentContext' +import { SidebarContext } from 'utils/contexts/sidebar' + +import type { Item } from 'components/table-of-contents' +import Contributors from 'components/contributors' +import MarkdownRenderer from 'components/markdown-renderer' +import FeedbackSection from 'components/feedback-section' +import OnThisPage from 'components/on-this-page' +import SeeAlsoSection from 'components/see-also-section' +import TableOfContents from 'components/table-of-contents' +import Breadcrumb from 'components/breadcrumb' + +import getHeadings from 'utils/getHeadings' +import getNavigation from 'utils/getNavigation' +import getGithubFile from 'utils/getGithubFile' +import getDocsPaths from 'utils/getDocsPaths' +import replaceMagicBlocks from 'utils/replaceMagicBlocks' +import escapeCurlyBraces from 'utils/escapeCurlyBraces' +import replaceHTMLBlocks from 'utils/replaceHTMLBlocks' +import { PreviewContext } from 'utils/contexts/preview' + +import styles from 'styles/documentation-page' +import getFileContributors, { + ContributorsType, +} from 'utils/getFileContributors' + +import { getLogger } from 'utils/logging/log-util' +import { + flattenJSON, + getKeyByValue, + getParents, + localeType, +} from 'utils/navigation-utils' + +const docsPathsGLOBAL = await getDocsPaths() + +interface Props { + sectionSelected: string + parentsArray: string[] + breadcumbList: { slug: string; name: string; type: string }[] + content: string + serialized: MDXRemoteSerializeResult + sidebarfallback: any //eslint-disable-line + contributors: ContributorsType[] + path: string + headingList: Item[] + seeAlsoData: { + url: string + title: string + category: string + }[] + pagination: { + previousDoc: { slug: string | null; name: string | null } + nextDoc: { slug: string | null; name: string | null } + } + isListed: boolean + branch: string +} + +const TutorialPage: NextPage = ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + //@ts-ignore + slug, + serialized, + path, + headingList, + contributors, + seeAlsoData, + pagination, + isListed, + breadcumbList, + branch, +}) => { + const [headings, setHeadings] = useState([]) + const { setBranchPreview } = useContext(PreviewContext) + setBranchPreview(branch) + const { setActiveSidebarElement } = useContext(SidebarContext) + useEffect(() => { + setActiveSidebarElement(slug) + setHeadings(headingList) + }, [serialized.frontmatter]) + return ( + <> + + {serialized.frontmatter?.title as string} + + {serialized.frontmatter?.hidden && ( + + )} + {serialized.frontmatter?.excerpt && ( + + )} + + + + + +
+
+ + + {serialized.frontmatter?.title} + + + {serialized.frontmatter?.excerpt} + +
+ +
+ + + + + + + + + {isListed && ( + + )} + {serialized.frontmatter?.seeAlso && ( + + )} + + + + + + + + + + ) +} + +export const getStaticPaths: GetStaticPaths = async () => { + //const slugs = Object.keys(await getDocsPaths()) + //const paths = slugs.map((slug) => ({ + // params: { slug }, + //})) + const paths = [ + { + params: { slug: 'about-the-community-support-plan' }, + }, + ] + return { + paths, + fallback: 'blocking', + } +} + +export const getStaticProps: GetStaticProps = async ({ + params, + locale, + preview, + previewData, +}) => { + const previewBranch = + preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') + ? JSON.parse(JSON.stringify(previewData)).branch + : 'main' + const branch = preview ? previewBranch : 'main' + const slug = params?.slug as string + const currentLocale: localeType = locale + ? (locale as localeType) + : ('en' as localeType) + const docsPaths = + process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD + ? docsPathsGLOBAL + : await getDocsPaths(branch, currentLocale) + + const logger = getLogger('Tutorials & Solutions') + + const path = docsPaths[slug] + if (!path) { + return { + notFound: true, + } + } + + let documentationContent = await getGithubFile( + 'vtexdocs', + 'help-center-content', + branch, + path + ) + + const contributors = await getFileContributors( + 'vtexdocs', + 'help-center-content', + branch, + path + ) + + let format: 'md' | 'mdx' = 'mdx' + try { + if (path.endsWith('.md')) { + documentationContent = escapeCurlyBraces(documentationContent) + documentationContent = replaceHTMLBlocks(documentationContent) + documentationContent = await replaceMagicBlocks(documentationContent) + } + } catch (error) { + logger.error(`${error}`) + format = 'md' + } + + try { + const headingList: Item[] = [] + let serialized = await serialize(documentationContent, { + parseFrontmatter: true, + mdxOptions: { + remarkPlugins: [ + remarkGFM, + remarkImages, + [getHeadings, { headingList }], + remarkBlockquote, + ], + rehypePlugins: [ + [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }], + ], + format, + }, + }) + + const sidebarfallback = await getNavigation() + serialized = JSON.parse(JSON.stringify(serialized)) + + logger.info(`Processing ${slug}`) + const seeAlsoData: { + url: string + title: string + category: string + }[] = [] + const seeAlsoUrls = serialized.frontmatter?.seeAlso + ? JSON.parse(JSON.stringify(serialized.frontmatter.seeAlso as string)) + : [] + await Promise.all( + seeAlsoUrls.map(async (seeAlsoUrl: string) => { + const seeAlsoPath = docsPaths[seeAlsoUrl.split('/')[3]] + if (seeAlsoPath) { + try { + const documentationContent = await getGithubFile( + 'vtexdocs', + 'help-center-content', + 'main', + seeAlsoPath + ) + const serialized = await serialize(documentationContent, { + parseFrontmatter: true, + }) + seeAlsoData.push({ + url: seeAlsoUrl, + title: serialized.frontmatter?.title + ? (serialized.frontmatter.title as string) + : seeAlsoUrl.split('/')[3], + category: serialized.frontmatter?.category + ? (serialized.frontmatter.category as string) + : seeAlsoUrl.split('/')[2], + }) + } catch (error) {} + } else if (seeAlsoUrl.startsWith('/docs')) { + seeAlsoData.push({ + url: seeAlsoUrl, + title: seeAlsoUrl.split('/')[3], + category: seeAlsoUrl.split('/')[2], + }) + } + }) + ) + + const docsListSlug = jp.query( + sidebarfallback, + `$..[?(@.type=='markdown')]..slug` + ) + const docsListName = jp.query( + sidebarfallback, + `$..[?(@.type=='markdown')]..name` + ) + const indexOfSlug = docsListSlug.indexOf(slug) + const pagination = { + previousDoc: { + slug: docsListSlug[indexOfSlug - 1] + ? docsListSlug[indexOfSlug - 1] + : null, + name: docsListName[indexOfSlug - 1] + ? docsListName[indexOfSlug - 1] + : null, + }, + nextDoc: { + slug: docsListSlug[indexOfSlug + 1] + ? docsListSlug[indexOfSlug + 1] + : null, + name: docsListName[indexOfSlug + 1] + ? docsListName[indexOfSlug + 1] + : null, + }, + } + + const flattenedSidebar = flattenJSON(sidebarfallback) + const isListed: boolean = getKeyByValue(flattenedSidebar, slug) + ? true + : false + const keyPath = getKeyByValue(flattenedSidebar, slug) + const parentsArray: string[] = [] + const parentsArrayName: string[] = [] + const parentsArrayType: string[] = [] + let sectionSelected = '' + if (keyPath) { + sectionSelected = flattenedSidebar[`${keyPath[0]}.documentation`] + getParents(keyPath, 'slug', flattenedSidebar, currentLocale, parentsArray) + parentsArray.push(slug) + getParents( + keyPath, + 'name', + flattenedSidebar, + currentLocale, + parentsArrayName + ) + getParents( + keyPath, + 'type', + flattenedSidebar, + currentLocale, + parentsArrayType + ) + } + + const breadcumbList: { slug: string; name: string; type: string }[] = [] + parentsArrayName.forEach((_el: string, idx: number) => { + breadcumbList.push({ + slug: `/docs/tutorial/${parentsArray[idx]}`, + name: parentsArrayName[idx], + type: parentsArrayType[idx], + }) + }) + + return { + props: { + sectionSelected, + parentsArray, + slug, + serialized, + sidebarfallback, + headingList, + contributors, + path, + seeAlsoData, + pagination, + isListed, + breadcumbList, + branch, + }, + } + } catch (error) { + logger.error(`Error while processing ${path}\n${error}`) + return { + notFound: true, + } + } +} + +export default TutorialPage diff --git a/src/pages/docs/guides/highlightjs-curl.d.ts b/src/pages/docs/tutorial/highlightjs-curl.d.ts similarity index 100% rename from src/pages/docs/guides/highlightjs-curl.d.ts rename to src/pages/docs/tutorial/highlightjs-curl.d.ts diff --git a/src/pages/docs/tutorial/index.tsx b/src/pages/docs/tutorial/index.tsx new file mode 100644 index 00000000..b0a6ea7b --- /dev/null +++ b/src/pages/docs/tutorial/index.tsx @@ -0,0 +1,271 @@ +import Image from 'next/image' +import { Fragment, useContext } from 'react' +import { Box, Text, Grid, Flex, Link } from '@vtex/brand-ui' +import Tooltip from 'components/tooltip' +import { GetStaticProps, NextPage } from 'next' +import getNavigation from 'utils/getNavigation' +import { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes' +import imgStyles from '../../../styles/core-services-styles' +import PageHeader from 'components/page-header' +import image from '../../../../public/images/api-guides.png' +import imageData from '../../../../public/images/data-orchestration.png' +import imagePlatform from '../../../../public/images/platform.png' +import styles from 'styles/documentation-landing-page' +import Head from 'next/head' +import { PreviewContext } from 'utils/contexts/preview' +import { useIntl } from 'react-intl' + +interface Props { + sidebarfallback: any //eslint-disable-line + sectionSelected?: DocumentationTitle | UpdatesTitle | '' + branch: string +} + +const Image2 = () => ( + + + Merchant channels + + + CDN + + Web Store + PWA + Live Shopping + Conversational + Marketplace Out + Personal Shopper + + + + + Mobile App + IOT + + + + + + + + VTEX Core services + + + + + Catalog + + + + + Checkout + + + + + Promotions + + + + + Pricing + + + + + Payment Hub + + + + + Intelligent Search + + + + + Account management + + + DaaS - Master Data + OMS + Subscriptions + Ratings and reviews + CMS + Search + Messages + Logistics/ Inventory + Customers + + + VTEX IO Apps (PaaS) + + Custom Admin + Custom store component + + Custom backend service (API) + + VTEX App + + + + + + 3rd party optional + + Search + Personalization + Ratings and Reviews + Loyalty + Analytics and Reporting + DXP + Customer Payments + ADA + + + + + Integration Layer + + + Merchant back office + + ERP + OMS + WMS + PIM + CRM + Data Lake + + + +) + +const TutorialsPage: NextPage = ({ branch }) => { + const { setBranchPreview } = useContext(PreviewContext) + const intl = useIntl() + setBranchPreview(branch) + return ( + <> + + + {intl.formatMessage({ + id: 'api_guides_page.title', + })} + + + + + + + Get started + + Our core commerce capabilities, provided by over 70 shared + microservices, are available for flexible customization through our + REST APIs. This enables our clients to integrate third-party + solutions into a single platform for all experiences.{' '} + + Platform overview + + Using our REST APIs with our serverless development platform (VTEX + IO) and scalable data service (Master Data), you can expand the VTEX + platform to address your unique business needs. + + + Data orchestration + + Our platform orchestrates data through multiple channels and sources + to remove barriers and enable more possibilities. E-commerce, + Brick-and-mortar, Marketplace, B2B... You name it, we enable it. + That is why we are a unified commerce platform for unified + businesses. + + Data orchestration + + Core services + + Get to know our core microsservices and leverage your business with + our Headless architecture. Our API Guides and Reference cover VTEX + Core Services, as illustrated in the image below. + + + + + + ) +} + +export const getStaticProps: GetStaticProps = async ({ + preview, + previewData, +}) => { + const sidebarfallback = await getNavigation() + const sectionSelected = 'Tutorials & Solutions' + + const previewBranch = + preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') + ? JSON.parse(JSON.stringify(previewData)).branch + : 'main' + const branch = preview ? previewBranch : 'main' + + return { + props: { + sidebarfallback, + sectionSelected, + branch, + }, + } +} + +export default TutorialsPage diff --git a/src/pages/editor/sidebar.tsx b/src/pages/editor/sidebar.tsx index 935999f7..fc2fc90e 100644 --- a/src/pages/editor/sidebar.tsx +++ b/src/pages/editor/sidebar.tsx @@ -65,7 +65,7 @@ const AdminPage: NextPage = ({ file, fileContent, isPRPreview }) => { export const getServerSideProps: GetServerSideProps = async (context) => { const { file } = context.query const isPreview = true - const sectionSelected = 'Guides' + const sectionSelected = 'Tutorials & Solutions' if (file) { const fileContent = await fetch(file as string) .then((res) => res.json()) diff --git a/src/pages/updates/announcements/[slug].tsx b/src/pages/updates/announcements/[slug].tsx index 3ce7a72c..c8c072e7 100644 --- a/src/pages/updates/announcements/[slug].tsx +++ b/src/pages/updates/announcements/[slug].tsx @@ -15,7 +15,7 @@ import { getLogger } from 'utils/logging/log-util' import { Box, Flex, Text } from '@vtex/brand-ui' -import APIGuideContextProvider from 'utils/contexts/api-guide' +import DocumentContextContextProvider from 'utils/contexts/documentContext' import type { Item } from 'components/table-of-contents' import MarkdownRenderer from 'components/markdown-renderer' @@ -51,7 +51,7 @@ interface Props { branch: string } -const DocumentationPage: NextPage = ({ serialized, branch }) => { +const NewsPage: NextPage = ({ serialized, branch }) => { const [headings, setHeadings] = useState([]) const { setBranchPreview } = useContext(PreviewContext) setBranchPreview(branch) @@ -90,7 +90,7 @@ const DocumentationPage: NextPage = ({ serialized, branch }) => { {serialized.frontmatter?.title as string} - + @@ -120,7 +120,7 @@ const DocumentationPage: NextPage = ({ serialized, branch }) => { - + ) } @@ -193,7 +193,7 @@ export const getStaticProps: GetStaticProps = async ({ const sidebarfallback = await getNavigation() serialized = JSON.parse(JSON.stringify(serialized)) - const sectionSelected = 'Announcements' + const sectionSelected = 'News' const flattenedSidebar = flattenJSON(sidebarfallback) const keyPath = getKeyByValue(flattenedSidebar, slug) const parentsArray: string[] = [] @@ -220,4 +220,4 @@ export const getStaticProps: GetStaticProps = async ({ } } -export default DocumentationPage +export default NewsPage diff --git a/src/pages/updates/announcements/index.tsx b/src/pages/updates/announcements/index.tsx index 6a7cc429..bb6fbc40 100644 --- a/src/pages/updates/announcements/index.tsx +++ b/src/pages/updates/announcements/index.tsx @@ -1,14 +1,13 @@ import { Text, Flex } from '@vtex/brand-ui' -import { NextPage } from 'next' +import { GetStaticProps, NextPage } from 'next' +import Head from 'next/head' +import { useIntl } from 'react-intl' +import getNavigation from 'utils/getNavigation' //import { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes' -//import getNavigation from 'utils/getNavigation' -//import ReleaseSection from '../../../components/release-section' import styles from 'styles/release-notes' -import Head from 'next/head' //import { PreviewContext } from 'utils/contexts/preview' //import { useContext } from 'react' -import { useIntl } from 'react-intl' // interface Props { // sidebarfallback: any //eslint-disable-line @@ -44,29 +43,29 @@ const ReleasePage: NextPage = () => { ) } -// export const getStaticProps: GetStaticProps = async ({ -// preview, -// locale, -// previewData, -// }) => { -// const sidebarfallback = await getNavigation() -// const sectionSelected = 'Announcements' -// const previewBranch = -// preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') -// ? JSON.parse(JSON.stringify(previewData)).branch -// : 'main' -// const branch = preview ? previewBranch : 'main' -// const currentLocale = locale ? locale : 'en' -// const releasesData = await getReleasesData(branch, currentLocale) +export const getStaticProps: GetStaticProps = async ({ + preview, + // locale, + previewData, +}) => { + const sidebarfallback = await getNavigation() + const sectionSelected = 'News' + const previewBranch = + preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch') + ? JSON.parse(JSON.stringify(previewData)).branch + : 'main' + const branch = preview ? previewBranch : 'main' + // const currentLocale = locale ? locale : 'en' + // const releasesData = await getReleasesData(branch, currentLocale) -// return { -// props: { -// sidebarfallback, -// sectionSelected, -// releasesData, -// branch, -// }, -// } -// } + return { + props: { + sidebarfallback, + sectionSelected, + // releasesData, + branch, + }, + } +} export default ReleasePage diff --git a/src/tests/cypress/integration/api-guides.cy.js b/src/tests/cypress/integration/api-guides.cy.js index fa503774..424ae861 100644 --- a/src/tests/cypress/integration/api-guides.cy.js +++ b/src/tests/cypress/integration/api-guides.cy.js @@ -3,10 +3,10 @@ import { filterSidebarItems, writeLog } from '../support/functions' import { getMessages } from 'utils/get-messages' const messages = getMessages() -describe('API guides documentation page', () => { +describe('Tutorials documentation page', () => { before(() => { - cy.task('setUrl', '/docs/guides') - cy.writeFile('cypress.log', `#API guides documentation page#\n`, { + cy.task('setUrl', '/docs/tutorial') + cy.writeFile('cypress.log', `#Tutorials documentation page#\n`, { flag: 'a+', }) }) @@ -73,7 +73,7 @@ describe('API guides documentation page', () => { }) cy.url({ timeout: 10000 }) - .should('match', /(\/guides\/.)/) + .should('match', /(\/tutorial\/.)/) .then((url) => cy.task('setUrl', url)) }) @@ -94,7 +94,7 @@ describe('API guides documentation page', () => { }) it('try to send feedback', () => { - cy.visit('/docs/guides/brands') + cy.visit('/docs/tutorial/brands') cy.get('[data-cy="feedback-section"]').scrollIntoView() diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 0ae4fa8a..245471df 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,11 +1,5 @@ import APIGuidesIcon from 'components/icons/api-guides-icon' -import OrdersIcon from 'components/icons/orders-icon' -import CatalogIcon from 'components/icons/catalog-icon' -import PromotionsIcon from 'components/icons/promotions-icon' -import StorefrontIcon from 'components/icons/storefront-icon' import AnnouncementIcon from 'components/icons/announcement-icon' -import ShippingIcon from 'components/icons/shipping-icon' -import MarketplaceIcon from 'components/icons/marketplace-icon' import DashboardsIcon from 'components/icons/dashboards-icon' import { getMessages } from 'utils/get-messages' @@ -31,67 +25,19 @@ export const documentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { Icon: APIGuidesIcon, - title: 'Guides', + title: 'Start here', description: intl.formatMessage({ id: 'documentation_api_guides.description', }), - link: '/docs/guides', + link: '/docs/tracks', }, { Icon: DashboardsIcon, - title: 'Dashboards', + title: 'Tutorials & Solutions', description: intl.formatMessage({ id: 'documentation_api_reference.description', }), - link: '/docs/guides', - }, - { - Icon: OrdersIcon, - title: 'Orders', - description: intl.formatMessage({ - id: 'documentation_app_development.description', - }), - link: '/docs/guides', - }, - { - Icon: CatalogIcon, - title: 'Catalog', - description: intl.formatMessage({ - id: 'documentation_storefront.description', - }), - link: '/docs/guides/catalog-overview', - }, - { - Icon: PromotionsIcon, - title: 'Promotions', - description: intl.formatMessage({ - id: 'documentation_vtexio_apps.description', - }), - link: '/docs/guides', - }, - { - Icon: StorefrontIcon, - title: 'Storefront', - description: intl.formatMessage({ - id: 'documentation_vtexio_apps.description', - }), - link: '/docs/guides', - }, - { - Icon: ShippingIcon, - title: 'Shipping', - description: intl.formatMessage({ - id: 'documentation_vtexio_apps.description', - }), - link: '/docs/guides', - }, - { - Icon: MarketplaceIcon, - title: 'Marketplace', - description: intl.formatMessage({ - id: 'documentation_vtexio_apps.description', - }), - link: '/docs/guides', + link: '/docs/tutorial', }, ] return data @@ -101,7 +47,7 @@ export const updatesData = (intl: IntlShape) => { const data: UpdatesDataElement[] = [ { Icon: AnnouncementIcon, - title: 'Announcements', + title: 'News', description: intl.formatMessage({ id: 'updates_release_notes.description', }), diff --git a/src/utils/contexts/api-guide.tsx b/src/utils/contexts/documentContext.tsx similarity index 90% rename from src/utils/contexts/api-guide.tsx rename to src/utils/contexts/documentContext.tsx index 24b32a4c..b4d4e126 100644 --- a/src/utils/contexts/api-guide.tsx +++ b/src/utils/contexts/documentContext.tsx @@ -18,7 +18,7 @@ type ContextType = { goToPreviousSubItem: () => void } -export const APIGuideContext = createContext({ +export const DocumentContext = createContext({ headings: [], activeItem: { item: '', @@ -35,7 +35,7 @@ interface Props { headings: Item[] } -const APIGuideContextProvider: React.FC = ({ children, headings }) => { +const DocumentContextProvider: React.FC = ({ children, headings }) => { const [onThisPageOpenStatus, setOnThisPageOpenStatus] = useState(false) const [activeItem, setActiveItem] = useState({ item: '', @@ -77,7 +77,7 @@ const APIGuideContextProvider: React.FC = ({ children, headings }) => { } return ( - = ({ children, headings }) => { }} > {children} - + ) } -export default APIGuideContextProvider +export default DocumentContextProvider diff --git a/src/utils/navigation-utils.ts b/src/utils/navigation-utils.ts index 06f265d5..f092f45b 100644 --- a/src/utils/navigation-utils.ts +++ b/src/utils/navigation-utils.ts @@ -51,6 +51,6 @@ export const getParents = ( parentsArray.push(flattenedSidebar[`${el}${desiredData}`]) } }) - console.log(parentsArray) + return parentsArray } diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index 52c342a7..e37b9c3a 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -1,18 +1,10 @@ export type Locale = 'en' | 'pt' | 'es' -export type DocumentationTitle = - | 'Guides' - | 'Dashboards' - | 'Orders' - | 'Catalog' - | 'Promotions' - | 'Storefront' - | 'Shipping' - | 'Marketplace' +export type DocumentationTitle = 'Start here' | 'Tutorials & Solutions' -export type UpdatesTitle = 'Announcements' | 'Documentation Updates' +export type UpdatesTitle = 'News' | 'Documentation Updates' -export type SlugPrefix = 'guides' +export type SlugPrefix = 'tutorial' export type ResourceTitle = | 'Community'