Skip to content

Commit

Permalink
fix prose exclusions
Browse files Browse the repository at this point in the history
  • Loading branch information
@rezrah
rezrah committed Dec 11, 2023
1 parent 6fe32d1 commit 3ef8800
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 135 deletions.
2 changes: 1 addition & 1 deletion packages/theme/components/content/dos-and-donts/DosAndDonts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ type DoDontContainerProps = {

export function DoDontContainer({stacked = false, children}: React.PropsWithChildren<DoDontContainerProps>) {
return (
<Box sx={{display: 'grid', gridTemplateColumns: ['1fr', null, stacked ? '1fr' : '1fr 1fr'], gridGap: 4, mb: 6}}>
<Box sx={{display: 'grid', gridTemplateColumns: ['1fr', null, stacked ? '1fr' : '1fr 1fr'], gridGap: 4, my: 6}}>
{children}
</Box>
)
Expand Down
211 changes: 112 additions & 99 deletions packages/theme/components/layout/root-layout/Theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,115 +85,128 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
siteTitle={siteTitle}
/>
</PRCBox>
<PageLayout containerWidth="full" padding="none" sx={{pt: 16}}>
<PageLayout containerWidth="full" padding="none">
<PageLayout.Content padding="normal">
<PRCBox sx={!isHomePage && {display: 'flex', maxWidth: 1600, margin: '0 auto'}}>
<PRCBox sx={!isHomePage && {maxWidth: 800, width: '100%', margin: '0 auto'}}>
<Stack direction="vertical" padding="none" gap="spacious">
{!isHomePage && (
<>
{activePath.length && (
<Breadcrumbs>
{siteTitle && (
<Breadcrumbs.Item
href={basePath || '/'}
sx={{
color: 'var(--brand-InlineLink-color-rest)',
}}
>
{siteTitle}
</Breadcrumbs.Item>
)}
{activePath.map((item, index) => {
return (
<main>
<PRCBox sx={!isHomePage && {display: 'flex', maxWidth: 1600, margin: '0 auto'}}>
<PRCBox sx={!isHomePage && {maxWidth: 800, width: '100%', margin: '0 auto'}}>
<Stack direction="vertical" padding="none" gap="spacious">
{!isHomePage && (
<>
{activePath.length && (
<Breadcrumbs>
{siteTitle && (
<Breadcrumbs.Item
key={item.name}
href={`${basePath}${item.route}`}
selected={index === activePath.length - 1}
sx={{textTransform: 'capitalize', color: 'var(--brand-InlineLink-color-rest)'}}
href={basePath || '/'}
sx={{
color: 'var(--brand-InlineLink-color-rest)',
}}
>
{item.title.replace(/-/g, ' ')}
{siteTitle}
</Breadcrumbs.Item>
)
})}
</Breadcrumbs>
)}
)}
{activePath.map((item, index) => {
return (
<Breadcrumbs.Item
key={item.name}
href={`${basePath}${item.route}`}
selected={index === activePath.length - 1}
sx={{
textTransform: 'capitalize',
color: 'var(--brand-InlineLink-color-rest)',
}}
>
{item.title.replace(/-/g, ' ')}
</Breadcrumbs.Item>
)
})}
</Breadcrumbs>
)}

<Box marginBlockEnd={24}>
<Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
{frontMatter.title && (
<Heading as="h1" size="3">
{frontMatter.title}
</Heading>
)}
{frontMatter.image && (
<Box paddingBlockEnd={16}>
<Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
</Box>
)}
{frontMatter.description && (
<Text as="p" variant="muted" size="300">
{frontMatter.description}
</Text>
)}
{frontMatter['action-1-text'] && (
<Box paddingBlockStart={16}>
<ButtonGroup>
<Button as="a">{frontMatter['action-1-text']}</Button>
{frontMatter['action-2-text'] && (
<Button as="a" variant="secondary">
{frontMatter['action-2-text']}
</Button>
)}
</ButtonGroup>
</Box>
)}
</Stack>
</Box>
{Boolean(frontMatter['show-tabs']) && <UnderlineNav tabData={filteredTabData} />}
</>
)}
<article className={route !== '/' && !isIndexPage ? bodyStyles.Prose : ''}>
{isIndexPage ? <IndexCards folderData={flatDocsDirectories} route={route} /> : children}
</article>
<footer>
<Box marginBlockStart={64}>
<Stack direction="vertical" padding="none" gap={16}>
<Stack direction="horizontal" padding="none" alignItems="center" gap={8}>
<PencilIcon size={16} fill="var(--brand-InlineLink-color-rest)" />
<Box>
<Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
{frontMatter.title && (
<Heading as="h1" size="3">
{frontMatter.title}
</Heading>
)}
{frontMatter.image && (
<Box paddingBlockEnd={16}>
<Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
</Box>
)}
{frontMatter.description && (
<Text as="p" variant="muted" size="300">
{frontMatter.description}
</Text>
)}
{frontMatter['action-1-text'] && (
<Box paddingBlockStart={16}>
<ButtonGroup>
<Button as="a">{frontMatter['action-1-text']}</Button>
{frontMatter['action-2-text'] && (
<Button as="a" variant="secondary">
{frontMatter['action-2-text']}
</Button>
)}
</ButtonGroup>
</Box>
)}
</Stack>
</Box>
{Boolean(frontMatter['show-tabs']) && <UnderlineNav tabData={filteredTabData} />}
</>
)}
<article className={route !== '/' && !isIndexPage ? bodyStyles.Prose : ''}>
{isIndexPage ? <IndexCards folderData={flatDocsDirectories} route={route} /> : children}
</article>
<footer>
<Box marginBlockStart={64}>
<Stack direction="vertical" padding="none" gap={16}>
<Stack direction="horizontal" padding="none" alignItems="center" gap={8}>
<PencilIcon size={16} fill="var(--brand-InlineLink-color-rest)" />

<InlineLink
href={`${publicRuntimeConfig.repo}/blob/main/${
publicRuntimeConfig.repoSrcPath ? `${publicRuntimeConfig.repoSrcPath}/` : ''
}${filePath}`}
<InlineLink
href={`${publicRuntimeConfig.repo}/blob/main/${
publicRuntimeConfig.repoSrcPath ? `${publicRuntimeConfig.repoSrcPath}/` : ''
}${filePath}`}
>
Edit this page
</InlineLink>
</Stack>
<Box
marginBlockStart={8}
paddingBlockStart={24}
borderStyle="solid"
borderBlockStartWidth="thin"
borderColor="default"
>
Edit this page
</InlineLink>
<Text as="p" variant="muted" size="100">
&copy; {new Date().getFullYear()} GitHub, Inc. All rights reserved.
</Text>
</Box>
</Stack>
<Box
marginBlockStart={8}
paddingBlockStart={24}
borderStyle="solid"
borderBlockStartWidth="thin"
borderColor="default"
>
<Text as="p" variant="muted" size="100">
&copy; {new Date().getFullYear()} GitHub, Inc. All rights reserved.
</Text>
</Box>
</Stack>
</Box>
</footer>
</Stack>
</PRCBox>
{!isHomePage && headings.length > 0 && (
<PRCBox sx={{py: 2, pr: 3, display: ['none', null, null, null, 'block']}}>
<TableOfContents headings={headings} />
</Box>
</footer>
</Stack>
</PRCBox>
)}
</PRCBox>
{!isHomePage && headings.length > 0 && (
<PRCBox sx={{py: 2, pr: 3, display: ['none', null, null, null, 'block']}}>
<TableOfContents headings={headings} />
</PRCBox>
)}
</PRCBox>
</main>
</PageLayout.Content>
<PageLayout.Pane width="small" sticky padding="none" position="start" hidden={{narrow: true}}>
<PageLayout.Pane
width="small"
sticky
padding="none"
position="start"
hidden={{narrow: true}}
resizable
divider="line"
>
<Sidebar pageMap={docsDirectories} />
</PageLayout.Pane>
</PageLayout>
Expand Down
8 changes: 8 additions & 0 deletions packages/theme/components/layout/sidebar/Sidebar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,11 @@
.NavList [data-component='ActionList.Divider'] {
display: none; /* TODO: Find workaround to hide this in component */
}

.NavList h3 {
text-transform: initial;
color: var(--brand-color-text-default);
font-weight: var(--brand-text-subhead-weight-medium);
font-size: var(--brand-text-subhead-size-medium);
line-height: var(--brand-text-subhead-lineHeight-medium);
}
43 changes: 21 additions & 22 deletions packages/theme/components/layout/sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,28 +67,6 @@ export function Sidebar({pageMap}: SidebarProps) {

return (
<NavList className={styles.NavList}>
{sidebarLinks && sidebarLinks.length > 0 && (
<NavList.Group title="" sx={{mb: 24}}>
{sidebarLinks.map(link => {
const {leadingIcon} = link
const isExternalUrl = link.href.startsWith('http')
const LeadingIcon = getOcticonForType(leadingIcon)

return (
<NavList.Item key={link.title} href={link.href} target={isExternalUrl ? '_blank' : undefined}>
<NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
{link.title}
{isExternalUrl && (
<NavList.TrailingVisual>
<LinkExternalIcon />
</NavList.TrailingVisual>
)}
</NavList.Item>
)
})}
</NavList.Group>
)}

{pageMap.map(item => {
if (item.kind === 'MdxPage' && item.route === '/') return null

Expand Down Expand Up @@ -164,6 +142,27 @@ export function Sidebar({pageMap}: SidebarProps) {

return null
})}
{sidebarLinks && sidebarLinks.length > 0 && (
<NavList.Group title="" sx={{mb: 24}}>
{sidebarLinks.map(link => {
const {leadingIcon} = link
const isExternalUrl = link.href.startsWith('http')
const LeadingIcon = getOcticonForType(leadingIcon)

return (
<NavList.Item key={link.title} href={link.href} target={isExternalUrl ? '_blank' : undefined}>
<NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
{link.title}
{isExternalUrl && (
<NavList.TrailingVisual>
<LinkExternalIcon />
</NavList.TrailingVisual>
)}
</NavList.Item>
)
})}
</NavList.Group>
)}
</NavList>
)
}
2 changes: 1 addition & 1 deletion packages/theme/components/layout/table-of-contents/TableOfContents.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
}
.item[aria-current='location'] {
transform: translateX(var(--base-size-8));
transform: translateX(var(--base-size-4));
}
4 changes: 1 addition & 3 deletions packages/theme/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ body {
}

.exclude-from-prose,
.exclude-from-prose * + *,
.custom-component,
.custom-component * + * {
.exclude-from-prose * + * {
margin-block-start: 0 !important;
}
37 changes: 28 additions & 9 deletions packages/theme/css/prose.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,25 @@
/* 2. Element spacing */
/* ---------------------------------------------------------- */

.Prose * + * {
/* .Prose * + * {
margin-block-start: var(--spacing, 1em);
} */

.Prose h1:not(:global(.custom-component) h1),
.Prose h2:not(:global(.custom-component) h2),
.Prose h3:not(:global(.custom-component) h3),
.Prose h4:not(:global(.custom-component) h4),
.Prose h5:not(:global(.custom-component) h5),
.Prose h6:not(:global(.custom-component) h6),
.Prose p:not(:global(.custom-component) p),
.Prose ul:not(:global(.custom-component) ul),
.Prose ol:not(:global(.custom-component) ol),
.Prose blockquote:not(:global(.custom-component) blockquote),
.Prose hr:not(:global(.custom-component) hr),
.Prose table:not(:global(.custom-component) table),
.Prose pre:not(:global(.custom-component) pre),
.Prose dl:not(:global(.custom-component) dl),
.Prose figure:not(:global(.custom-component) figure) {
margin-block-start: var(--spacing, 1em);
}

Expand Down Expand Up @@ -168,18 +186,18 @@
font-synthesis: none;
}

.Prose a,
.Prose a:-webkit-any-link {
.Prose a:not(:global(.custom-component) a),
.Prose a:-webkit-any-link:not(:global(.custom-component) a:-webkit-any-link) {
color: var(--brand-InlineLink-color-rest);
text-decoration: none !important;
text-decoration: none;
position: relative;
}

.Prose a:hover {
text-decoration: none;
.Prose a:hover:not(:global(.custom-component) a:hover) {
text-decoration: underline;
}

.Prose a::after {
.Prose a::after:not(:global(.custom-component) a::after) {
content: '';
border-bottom: var(--brand-borderWidth-thin) solid var(--brand-InlineLink-color-rest);
height: 0;
Expand All @@ -192,11 +210,11 @@
left: 0;
}

.Prose a:hover::after {
.Prose a:hover::after:not(:global(.custom-component) a:hover::after) {
transform: scaleY(var(--brand-InlineLink-transition-scale-end));
}

.Prose a:active::after {
.Prose a:active::after:not(:global(.custom-component) a:active::after) {
border-color: var(--brand-InlineLink-color-pressed);
}

Expand Down Expand Up @@ -228,6 +246,7 @@
/* ---------------------------------------------------------- */

.Prose blockquote {
font-family: var(--brand-fontStack-sansSerif);
--spacing: var(--brand-Prose-blockquote-spacing);
position: relative;
font-size: var(--brand-text-size-400);
Expand Down

0 comments on commit 3ef8800

Please sign in to comment.