Merge pull request #16 from vtexdocs/feat/helpcenter-structure

Feat/helpcenter structure

src/components/article-pagination/index.tsx

@@ -20,15 +20,15 @@ const ArticlePagination = ({
 
   const handleClick = (e: { preventDefault: () => void }, slug: string) => {
     e.preventDefault()
-    router.push(`/docs/guides/${slug}`)
+    router.push(`/docs/tutorial/${slug}`)
   }
   return (
     <Box sx={styles.mainContainer}>
       <Grid sx={styles.flexContainer}>
         {!hidePaginationPrevious && pagination.previousDoc.slug && (
           <Link
             sx={styles.paginationLinkPrevious}
-            href={`/docs/guides/${pagination.previousDoc.slug}`}
+            href={`/docs/tutorial/${pagination.previousDoc.slug}`}
             onClick={(e: { preventDefault: () => void }) => {
               handleClick(e, pagination.previousDoc.slug as string)
             }}
@@ -44,7 +44,7 @@ const ArticlePagination = ({
         {!hidePaginationNext && pagination.nextDoc.slug && (
           <Link
             sx={styles.paginationLinkNext}
-            href={`/docs/guides/${pagination.nextDoc.slug}`}
+            href={`/docs/tutorial/${pagination.nextDoc.slug}`}
             onClick={(e: { preventDefault: () => void }) => {
               handleClick(e, pagination.nextDoc.slug as string)
             }}

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,
       ],

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 (
       <ObservableHeading
         level={2}
@@ -173,7 +173,7 @@ export default {
   },
   h3: ({ node, ...props }: Component) => {
     const { activeItem, setActiveItem, goToPreviousSubItem } =
-      useContext(APIGuideContext)
+      useContext(DocumentContext)
 
     return (
       <ObservableHeading

src/components/on-this-page/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import { Box, Flex, 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 MenuIcon from 'components/icons/menu-icon'
 import CloseIcon from 'components/icons/close-icon'
@@ -14,7 +14,7 @@ import { FormattedMessage } from 'react-intl'
 
 const OnThisPage = () => {
   const { onThisPageOpenStatus, setOnThisPageOpenStatus } =
-    useContext(APIGuideContext)
+    useContext(DocumentContext)
 
   return (
     <Flex sx={styles.container}>

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.',

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'
   }
 }
 

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)

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,

src/pages/docs/guides/[slug].tsx → 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<Props> = ({
+const TrackPage: NextPage<Props> = ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   slug,
@@ -100,7 +100,7 @@ const DocumentationPage: NextPage<Props> = ({
     <>
       <Head>
         <title>{serialized.frontmatter?.title as string}</title>
-        <meta name="docsearch:doctype" content="Guides" />
+        <meta name="docsearch:doctype" content="Start here" />
         {serialized.frontmatter?.hidden && (
           <meta name="robots" content="noindex" />
         )}
@@ -111,7 +111,7 @@ const DocumentationPage: NextPage<Props> = ({
           />
         )}
       </Head>
-      <APIGuideContextProvider headings={headings}>
+      <DocumentContextProvider headings={headings}>
         <Flex sx={styles.innerContainer}>
           <Box sx={styles.articleBox}>
             <Box sx={styles.contentContainer}>
@@ -157,7 +157,7 @@ const DocumentationPage: NextPage<Props> = ({
           </Box>
           <OnThisPage />
         </Flex>
-      </APIGuideContextProvider>
+      </DocumentContextProvider>
     </>
   )
 }
@@ -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

src/pages/docs/guides/index.tsx → src/pages/docs/tracks/index.tsx

@@ -161,7 +161,7 @@ const Image2 = () => (
   </Box>
 )
 
-const ApiGuidesPage: NextPage<Props> = ({ branch }) => {
+const TracksPage: NextPage<Props> = ({ 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