Skip to content

Commit

Permalink
Merge pull request #140 from vtexdocs/style/textContainer
Browse files Browse the repository at this point in the history 
style: add textContainer to documentation pages
  • Loading branch information
@julia-rabello
julia-rabello authored Nov 21, 2024
2 parents 11c8382 + ee85a63 commit 8813197
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 142 deletions.
36 changes: 19 additions & 17 deletions src/components/tutorial-markdown-render/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,23 +83,25 @@ const TutorialMarkdownRender = (props: Props) => {
<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>
{props.serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={props.serialized.frontmatter.readingTime}
/>
)}
<MarkdownRenderer serialized={props.serialized} />
</article>
<Box sx={styles.textContainer}>
<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>
{props.serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={props.serialized.frontmatter.readingTime}
/>
)}
<MarkdownRenderer serialized={props.serialized} />
</article>
</Box>
</Box>

<Box sx={styles.bottomContributorsContainer}>
Expand Down
50 changes: 26 additions & 24 deletions src/pages/announcements/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,30 +114,32 @@ 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>
{url && <ShareButton url={url} />}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
<Box sx={styles.textContainer}>
<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>
{url && <ShareButton url={url} />}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
</Box>
</Box>
<FeedbackSection docPath={path} slug={slug} />
{serialized.frontmatter?.seeAlso && (
Expand Down
34 changes: 18 additions & 16 deletions src/pages/docs/tracks/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,22 +126,24 @@ const TrackPage: NextPage<Props> = ({
<Flex sx={styles.innerContainer}>
<Box sx={styles.articleBox}>
<Box sx={styles.contentContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
<Box sx={styles.textContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
</Box>
</Box>

<Box sx={styles.bottomContributorsContainer}>
Expand Down
46 changes: 24 additions & 22 deletions src/pages/faq/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,28 +100,30 @@ const FaqPage: NextPage<Props> = ({
<Flex sx={styles.innerContainer}>
<Box sx={styles.articleBox}>
<Box sx={styles.contentContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
<Box sx={styles.textContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
</Box>
</Box>

<Box sx={styles.bottomContributorsContainer}>
Expand Down
60 changes: 31 additions & 29 deletions src/pages/known-issues/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,37 +103,39 @@ const KnownIssuePage: NextPage<Props> = ({
<Flex sx={styles.innerContainer}>
<Box sx={styles.articleBox}>
<Box sx={styles.contentContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
</Flex>
<Box sx={styles.divider}></Box>
<Flex sx={styles.detailedInfo}>
<Flex sx={styles.id}>
<Text>
ID: {serialized.frontmatter?.internalReference}
<Box sx={styles.textContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
<Tag>{serialized.frontmatter?.kiStatus}</Tag>
{serialized.frontmatter?.readingTime && (
<TimeToRead
minutes={serialized.frontmatter.readingTime}
/>
)}
</Flex>
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
<Box sx={styles.divider}></Box>
<Flex sx={styles.detailedInfo}>
<Flex sx={styles.id}>
<Text>
ID: {serialized.frontmatter?.internalReference}
</Text>
<Tag>{serialized.frontmatter?.kiStatus}</Tag>
</Flex>
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
</Box>
</Box>
<Box sx={styles.bottomContributorsContainer}>
<Box sx={styles.bottomContributorsDivider} />
Expand Down
44 changes: 23 additions & 21 deletions src/pages/troubleshooting/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,28 +87,30 @@ const TroubleshootingPage: NextPage<Props> = ({
<Flex sx={styles.innerContainer}>
<Box sx={styles.articleBox}>
<Box sx={styles.contentContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
<TimeToRead
minutes={
(serialized.frontmatter?.readingTime as string) ?? 0
}
/>
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
<Box sx={styles.textContainer}>
<article ref={articleRef}>
<header>
<Breadcrumb breadcrumbList={breadcrumbList} />
<Flex sx={styles.flexContainer}>
<Text sx={styles.documentationTitle} className="title">
{serialized.frontmatter?.title}
</Text>
<TimeToRead
minutes={
(serialized.frontmatter?.readingTime as string) ?? 0
}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
{createdAtDate && updatedAtDate && (
<DateText
createdAt={createdAtDate}
updatedAt={updatedAtDate}
/>
)}
</Flex>
</header>
<MarkdownRenderer serialized={serialized} />
</article>
</Box>
</Box>

<Box sx={styles.bottomContributorsContainer}>
Expand Down
13 changes: 0 additions & 13 deletions src/pages/updates/documentation-updates/index.tsx
View file

This file was deleted.

8 changes: 8 additions & 0 deletions src/styles/announcement-page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,19 @@ const date: SxStyleProp = {
ml: '48px',
}

const textContainer: SxStyleProp = {
width: ['100%', '544px'],
gap: '8px',
pb: '43px',
mb: '64px',
}

export default {
container,
mainContainer,
articleBox,
contentContainer,
textContainer,
documentationTitle,
rightContainer,
releaseAction,
Expand Down

0 comments on commit 8813197

Please sign in to comment.