Feat/tutorials

public/navigation.json

@@ -3650,7 +3650,7 @@
           "name": { "en": "Beta", "es": "Beta", "pt": "Beta" },
           "slug": "beta-products",
           "origin": "",
-          "type": "category",
+          "type": "tutorial-category",
           "children": [
             {
               "name": {
@@ -3660,7 +3660,7 @@
               },
               "slug": "subscriptions-beta",
               "origin": "",
-              "type": "category",
+              "type": "tutorial-category",
               "children": [
                 {
                   "name": {

src/components/article-pagination/index.tsx

@@ -55,7 +55,11 @@ const ArticlePagination = ({
               handleClick(e, pagination.nextDoc.slug as string)
             }}
           >
-            <Box sx={styles.paginationBox}>
+            <Box
+              sx={
+                !hidePaginationPrevious ? styles.paginationBox : styles.justNext
+              }
+            >
               <Text sx={styles.paginationText}>{pagination.nextDoc.name}</Text>
               <Text sx={styles.subTitle}>Next »</Text>
             </Box>

src/components/article-pagination/styles.ts

@@ -27,6 +27,20 @@ const paginationBox: SxStyleProp = {
   color: '#4A596B',
 }
 
+const justNext: SxStyleProp = {
+  ':hover': {
+    border: '1px solid #CCCED8',
+    boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)',
+    color: '#000711',
+  },
+  justifySelf: 'right',
+  border: '1px solid #E7E9EE',
+  padding: '16px',
+  borderRadius: '4px',
+  textAlign: 'right',
+  color: '#4A596B',
+}
+
 const paginationText: SxStyleProp = {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
@@ -48,6 +62,7 @@ const paginationLinkNext: SxStyleProp = {
   ...paginationLink,
   justifySelf: 'flex-end',
   textAlign: 'right',
+  justifyContent: 'right',
 }
 
 const paginationLinkPrevious: SxStyleProp = {
@@ -56,6 +71,7 @@ const paginationLinkPrevious: SxStyleProp = {
 }
 
 export default {
+  justNext,
   mainContainer,
   flexContainer,
   paginationLinkNext,

src/components/tutorial-index/index.tsx

@@ -0,0 +1,71 @@
+import { Box, Flex, Link, Text } from '@vtex/brand-ui'
+import Breadcrumb from 'components/breadcrumb'
+
+import FeedbackSection from 'components/feedback-section'
+import startHereImage from '../../../public/images/start-here.png'
+import PageHeader from 'components/page-header'
+
+import styles from 'styles/documentation-page'
+import ArticlePagination from 'components/article-pagination'
+import { useIntl } from 'react-intl'
+
+const TutorialIndexing = ({ ...props }) => {
+  const intl = useIntl()
+
+  return (
+    <>
+      <PageHeader
+        title={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.title',
+        })}
+        description={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.description',
+        })}
+        imageUrl={startHereImage}
+        imageAlt={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.title',
+        })}
+      />
+      <Flex sx={styles.innerContainer}>
+        <Box sx={styles.articleBox}>
+          <Box sx={styles.contentContainer}>
+            <article>
+              <header style={{ all: 'unset' }}>
+                {props.breadcrumbList.length > 1 ? (
+                  <Breadcrumb breadcrumbList={props.breadcrumbList} />
+                ) : undefined}
+              </header>
+              <Box sx={styles.textContainer}>
+                <Box sx={styles.titleContainer}>
+                  <Text>{props.name}</Text>
+                </Box>
+                <Box sx={styles.indexContainer}>
+                  <Text sx={{ fontSize: '22px', pt: '32px' }}>
+                    In this section
+                  </Text>
+                  <Flex sx={styles.linksContainer}>
+                    {props.children.map(
+                      (el: { slug: string; name: string }) => (
+                        <Link href={el.slug}>{el.name}</Link>
+                      )
+                    )}
+                  </Flex>
+                </Box>
+              </Box>
+            </article>
+          </Box>
+          <FeedbackSection slug={props.slug} suggestEdits={false} />
+          {props.isListed && (
+            <ArticlePagination
+              hidePaginationNext={props.hidePaginationNext || false}
+              hidePaginationPrevious={props.hidePaginationPrevious || false}
+              pagination={props.pagination}
+            />
+          )}
+        </Box>
+      </Flex>
+    </>
+  )
+}
+
+export default TutorialIndexing

src/components/tutorial-markdown-render/index.tsx

@@ -0,0 +1,145 @@
+import Head from 'next/head'
+import { Box, Flex, Text } from '@vtex/brand-ui'
+import Breadcrumb from 'components/breadcrumb'
+
+import FeedbackSection from 'components/feedback-section'
+import OnThisPage from 'components/on-this-page'
+import SeeAlsoSection from 'components/see-also-section'
+import startHereImage from '../../../public/images/start-here.png'
+import PageHeader from 'components/page-header'
+import { useIntl } from 'react-intl'
+import DocumentContextProvider from 'utils/contexts/documentContext'
+import { Item, MarkdownRenderer, TableOfContents } from '@vtexdocs/components'
+
+import styles from 'styles/documentation-page'
+import ArticlePagination from 'components/article-pagination'
+import Contributors from 'components/contributors'
+import { MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { ContributorsType } from 'utils/getFileContributors'
+
+interface Props {
+  content: string
+  serialized: MDXRemoteSerializeResult
+  contributors: ContributorsType[]
+  path: string
+  headingList: Item[]
+  seeAlsoData: {
+    url: string
+    title: string
+    category: string
+  }[]
+  // sectionSelected: string
+  // sidebarfallback: any //eslint-disable-line
+  slug: string
+  // parentsArray: string[]
+  // path: string
+  isListed: boolean
+  branch: string
+  pagination: {
+    previousDoc: {
+      slug: string | null
+      name: string | null
+    }
+    nextDoc: {
+      slug: string | null
+      name: string | null
+    }
+  }
+  breadcrumbList: { slug: string; name: string; type: string }[]
+  headings: Item[]
+}
+const TutorialMarkdownRender = (props: Props) => {
+  const intl = useIntl()
+
+  return (
+    <>
+      <Head>
+        <title>{props.serialized.frontmatter?.title as string}</title>
+        <meta name="docsearch:doctype" content="Tutorials & Solutions" />
+        {props.serialized.frontmatter?.hidden && (
+          <meta name="robots" content="noindex" />
+        )}
+        {props.serialized.frontmatter?.excerpt && (
+          <meta
+            property="og:description"
+            content={props.serialized.frontmatter?.excerpt as string}
+          />
+        )}
+      </Head>
+      <PageHeader
+        title={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.title',
+        })}
+        description={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.description',
+        })}
+        imageUrl={startHereImage}
+        imageAlt={intl.formatMessage({
+          id: 'tutorial_and_solutions_page.title',
+        })}
+      />
+      <DocumentContextProvider headings={props.headings}>
+        <Flex sx={styles.innerContainer}>
+          <Box sx={styles.articleBox}>
+            <Box sx={styles.contentContainer}>
+              <article>
+                <header>
+                  <Breadcrumb breadcrumbList={props.breadcrumbList} />
+                  <Text sx={styles.documentationTitle} className="title">
+                    {props.serialized.frontmatter?.title}
+                  </Text>
+                  <Text sx={styles.documentationExcerpt}>
+                    {props.serialized.frontmatter?.excerpt}
+                  </Text>
+                </header>
+                <Text sx={styles.readingTime}>
+                  {intl.formatMessage(
+                    {
+                      id: 'documentation_reading_time.text',
+                      defaultMessage: '',
+                    },
+                    {
+                      minutes: props.serialized.frontmatter?.readingTime,
+                    }
+                  )}
+                </Text>
+                <MarkdownRenderer serialized={props.serialized} />
+              </article>
+            </Box>
+
+            <Box sx={styles.bottomContributorsContainer}>
+              <Box sx={styles.bottomContributorsDivider} />
+              <Contributors contributors={props.contributors} />
+            </Box>
+
+            <FeedbackSection docPath={props.path} slug={props.slug} />
+            {props.isListed && (
+              <ArticlePagination
+                hidePaginationNext={
+                  Boolean(props.serialized.frontmatter?.hidePaginationNext) ||
+                  false
+                }
+                hidePaginationPrevious={
+                  Boolean(
+                    props.serialized.frontmatter?.hidePaginationPrevious
+                  ) || false
+                }
+                pagination={props.pagination}
+              />
+            )}
+            {props.serialized.frontmatter?.seeAlso && (
+              <SeeAlsoSection docs={props.seeAlsoData} />
+            )}
+          </Box>
+          <Box sx={styles.rightContainer}>
+            <Contributors contributors={props.contributors} />
+            <TableOfContents headingList={props.headings} />
+          </Box>
+          <OnThisPage />
+        </Flex>
+      </DocumentContextProvider>
+    </>
+  )
+}
+
+export default TutorialMarkdownRender

src/messages/en.json

@@ -248,5 +248,7 @@
   "known_issues_sort.newest": "Newest",
   "known_issues_result.empty": "No matching results. Try other filters.",
   "known_issues_date.created": "Created at",
-  "known_issues_date.updated": "Updated at"
+  "known_issues_date.updated": "Updated at",
+  "tutorial_and_solutions_page.title": "Tutorials & Solutions",
+  "tutorial_and_solutions_page.description": "Access the documentation of all platform modules and clarify your doubts."
 }

src/messages/es.json

@@ -254,5 +254,7 @@
   "known_issues_sort.newest": "Más nuevos",
   "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
   "known_issues_date.created": "Creado en",
-  "known_issues_date.updated": "Actualizado en"
+  "known_issues_date.updated": "Actualizado en",
+  "tutorial_and_solutions_page.title": "Tutoriales y Soluciones",
+  "tutorial_and_solutions_page.description": "Accede a la documentación de todos los módulos de la plataforma y resuelve tus dudas."
 }

src/messages/pt.json

@@ -269,5 +269,7 @@
   "known_issues_sort.newest": "Mais novos",
   "known_issues_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
   "known_issues_date.created": "Criado em",
-  "known_issues_date.updated": "Atualizado em"
+  "known_issues_date.updated": "Atualizado em",
+  "tutorial_and_solutions_page.title": "Tutoriais & Soluções",
+  "tutorial_and_solutions_page.description": "Acesse a documentação de todas os módulos da plataforma e tire suas dúvidas."
 }