feat: fix button position

vtexdocs · Dec 18, 2024 · 9c15899 · 9c15899
1 parent d161f80
commit 9c15899
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 77 deletions.
diff --git a/src/components/tutorial-markdown-render/index.tsx b/src/components/tutorial-markdown-render/index.tsx
@@ -30,11 +30,7 @@ interface Props {
     title: string
     category: string
   }[]
-  // sectionSelected: string
-  // sidebarfallback: any //eslint-disable-line
   slug: string
-  // parentsArray: string[]
-  // path: string
   isListed: boolean
   branch: string
   pagination: {
@@ -50,6 +46,7 @@ interface Props {
   breadcrumbList: { slug: string; name: string; type: string }[]
   headings: Item[]
 }
+
 const TutorialMarkdownRender = (props: Props) => {
   const intl = useIntl()
 
@@ -90,11 +87,16 @@ const TutorialMarkdownRender = (props: Props) => {
                     <Breadcrumb breadcrumbList={props.breadcrumbList} />
                     <Text sx={styles.documentationTitle} className="title">
                       {props.serialized.frontmatter?.title}
+                      {/* Adiciona a propriedade justifyContent ao Flex para alinhar o botão à direita */}
+                      <Flex
+                        sx={{ display: 'flex', justifyContent: 'flex-end' }}
+                      >
+                        <CopyLinkButton />
+                      </Flex>
                     </Text>
                     <Text sx={styles.documentationExcerpt}>
                       {props.serialized.frontmatter?.excerpt}
                     </Text>
-                    <CopyLinkButton />
                   </header>
                   {props.serialized.frontmatter?.readingTime && (
                     <TimeToRead

diff --git a/src/pages/announcements/[slug].tsx b/src/pages/announcements/[slug].tsx
@@ -109,30 +109,6 @@ const AnnouncementPage: NextPage<Props> = ({
         <Flex sx={styles.innerContainer}>
           <Box sx={styles.articleBox}>
             <Box sx={styles.contentContainer}>
-              <article ref={articleRef}>
-                <header>
-                  <Breadcrumb breadcrumbList={[breadcrumb]} />
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
-                  <Box sx={styles.divider}></Box>
-                  <Flex sx={styles.flexContainer}>
-                    <Box>
-                      <Author contributor={contributor} />
-                      {createdAtDate && updatedAtDate && (
-                        <Flex sx={styles.date}>
-                          <DateText
-                            createdAt={createdAtDate}
-                            updatedAt={updatedAtDate}
-                          />
-                        </Flex>
-                      )}
-                    </Box>
-                    <CopyLinkButton />
-                  </Flex>
-                </header>
-                <MarkdownRenderer serialized={serialized} />
-              </article>
               <Box sx={styles.textContainer}>
                 <article ref={articleRef}>
                   <header>
@@ -150,6 +126,7 @@ const AnnouncementPage: NextPage<Props> = ({
                               createdAt={createdAtDate}
                               updatedAt={updatedAtDate}
                             />
+                            <CopyLinkButton />
                           </Flex>
                         )}
                       </Box>

diff --git a/src/pages/docs/tracks/[slug].tsx b/src/pages/docs/tracks/[slug].tsx
@@ -46,11 +46,11 @@ import {
 import { MarkdownRenderer } from '@vtexdocs/components'
 
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
-import CopyLinkButton from 'components/copy-link-button'
 
 import theme from 'styles/code-hike-theme'
 import TimeToRead from 'components/TimeToRead'
 import { getBreadcrumbsList } from 'utils/getBreadcrumbsList'
+import CopyLinkButton from 'components/copy-link-button'
 
 const docsPathsGLOBAL = await getTracksPaths('tracks')
 
@@ -140,7 +140,15 @@ const TrackPage: NextPage<Props> = ({
                           minutes={serialized.frontmatter.readingTime}
                         />
                       )}
-                      <CopyLinkButton />
+                      {/* Adiciona a propriedade justifyContent ao Flex para alinhar o botão à direita */}
+                      <Flex
+                        sx={{
+                          ...styles.copyLinkContainer,
+                          justifyContent: 'flex-end',
+                        }}
+                      >
+                        <CopyLinkButton />
+                      </Flex>
                     </Flex>
                   </header>
                   <MarkdownRenderer serialized={serialized} />
@@ -211,12 +219,6 @@ export const getServerSideProps: GetServerSideProps = async ({
     }
   }
 
-  // let documentationContent = await getGithubFile(
-  //   'vtexdocs',
-  //   'help-center-content',
-  //   branch,
-  //   path
-  // )
   let documentationContent =
     (await fetch(
       `https://raw.githubusercontent.com/vtexdocs/help-center-content/${branch}/${path}`
@@ -238,7 +240,6 @@ export const getServerSideProps: GetServerSideProps = async ({
       .then((res) => res.json())
       .then(({ users }) => {
         const result: ContributorsType[] = []
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         for (let i = 0; i < users.length; i++) {
           const user = users[i]
           if (user.id === '41898282') continue
@@ -254,17 +255,6 @@ export const getServerSideProps: GetServerSideProps = async ({
       })
       .catch((err) => console.log(err))) || []
 
-  // const contributors = []
-  // const contributors =
-  //   (await getFileContributors(
-  //     'vtexdocs',
-  //     'help-center-content',
-  //     branch,
-  //     path
-  //   ).catch((err) => {
-  //     console.log(err)
-  //   })) || []
-
   let format: 'md' | 'mdx' = 'mdx'
   try {
     if (path.endsWith('.md')) {
@@ -298,7 +288,6 @@ export const getServerSideProps: GetServerSideProps = async ({
       },
     })
 
-    // Check the frontmatter status
     if (serialized.frontmatter?.status !== 'PUBLISHED') {
       return {
         notFound: true,
@@ -331,13 +320,6 @@ export const getServerSideProps: GetServerSideProps = async ({
                 .then((res) => res.text())
                 .catch((err) => console.log(err))) || ''
 
-            // const documentationContent = await getGithubFile(
-            //   'vtexdocs',
-            //   'help-center-content',W
-            //   'main',
-            //   seeAlsoPath
-            // )
-
             const serialized = await serialize(documentationContent, {
               parseFrontmatter: true,
             })

diff --git a/src/pages/faq/[slug].tsx b/src/pages/faq/[slug].tsx
@@ -25,7 +25,6 @@ import TimeToRead from 'components/TimeToRead'
 
 import getHeadings from 'utils/getHeadings'
 import getNavigation from 'utils/getNavigation'
-// import getGithubFile from 'utils/getGithubFile'
 import escapeCurlyBraces from 'utils/escapeCurlyBraces'
 import replaceHTMLBlocks from 'utils/replaceHTMLBlocks'
 import { PreviewContext } from 'utils/contexts/preview'
@@ -36,7 +35,6 @@ import { ContributorsType } from 'utils/getFileContributors'
 import { getLogger } from 'utils/logging/log-util'
 import { localeType } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
-// import { ParsedUrlQuery } from 'querystring'
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getFaqPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
@@ -57,8 +55,6 @@ interface Props {
 }
 
 const FaqPage: NextPage<Props> = ({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
   serialized,
   headingList,
   contributors,
@@ -114,13 +110,27 @@ const FaqPage: NextPage<Props> = ({
                           minutes={serialized.frontmatter.readingTime}
                         />
                       )}
+
+                      {/* Verifica se as datas de criação e atualização estão disponíveis */}
                       {createdAtDate && updatedAtDate && (
-                        <DateText
-                          createdAt={createdAtDate}
-                          updatedAt={updatedAtDate}
-                        />
+                        <Flex sx={{ alignItems: 'center' }}>
+                          <DateText
+                            createdAt={createdAtDate}
+                            updatedAt={updatedAtDate}
+                          />
+
+                          {/* Coloca o botão à direita das datas */}
+                          <Flex
+                            sx={{
+                              ...styles.copyLinkContainer,
+                              ml: 2,
+                              justifyContent: 'flex-end',
+                            }}
+                          >
+                            <CopyLinkButton />
+                          </Flex>
+                        </Flex>
                       )}
-                      <CopyLinkButton />
                     </Flex>
                   </header>
                   <MarkdownRenderer serialized={serialized} />

diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
@@ -10,7 +10,6 @@ import hljsCurl from 'highlightjs-curl'
 import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 import { remarkCodeHike } from '@code-hike/mdx'
 import theme from 'styles/code-hike-theme'
-
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 
 import { Box, Flex, Text } from '@vtex/brand-ui'
@@ -117,7 +116,6 @@ const KnownIssuePage: NextPage<Props> = ({
                           minutes={serialized.frontmatter.readingTime}
                         />
                       )}
-                      <CopyLinkButton />
                     </Flex>
                     <Box sx={styles.divider}></Box>
                     <Flex sx={styles.detailedInfo}>
@@ -127,11 +125,26 @@ const KnownIssuePage: NextPage<Props> = ({
                         </Text>
                         <Tag>{serialized.frontmatter?.kiStatus}</Tag>
                       </Flex>
+
+                      {/* Reorganizado para colocar o botão após as datas */}
                       {createdAtDate && updatedAtDate && (
-                        <DateText
-                          createdAt={createdAtDate}
-                          updatedAt={updatedAtDate}
-                        />
+                        <Flex sx={{ alignItems: 'center' }}>
+                          <DateText
+                            createdAt={createdAtDate}
+                            updatedAt={updatedAtDate}
+                          />
+                          {/* Adicionando o botão à direita das datas */}
+                          <Flex
+                            sx={{
+                              display: 'flex',
+                              justifyContent: 'flex-end',
+                              alignItems: 'center',
+                              ml: 2,
+                            }}
+                          >
+                            <CopyLinkButton />
+                          </Flex>
+                        </Flex>
                       )}
                     </Flex>
                   </header>

diff --git a/src/pages/troubleshooting/[slug].tsx b/src/pages/troubleshooting/[slug].tsx
@@ -101,13 +101,26 @@ const TroubleshootingPage: NextPage<Props> = ({
                           (serialized.frontmatter?.readingTime as string) ?? 0
                         }
                       />
+
+                      {/* Reorganizado para colocar o botão após as datas */}
                       {createdAtDate && updatedAtDate && (
-                        <DateText
-                          createdAt={createdAtDate}
-                          updatedAt={updatedAtDate}
-                        />
+                        <Flex sx={{ alignItems: 'center' }}>
+                          <DateText
+                            createdAt={createdAtDate}
+                            updatedAt={updatedAtDate}
+                          />
+                          <Flex
+                            sx={{
+                              display: 'flex',
+                              justifyContent: 'flex-end',
+                              alignItems: 'center',
+                              ml: 2,
+                            }}
+                          >
+                            <CopyLinkButton />
+                          </Flex>
+                        </Flex>
                       )}
-                      <CopyLinkButton />
                     </Flex>
                   </header>
                   <MarkdownRenderer serialized={serialized} />