Skip to content

Commit

Permalink
styling breadcrumbs and toc
Browse files Browse the repository at this point in the history
  • Loading branch information
nahbee10 committed Nov 13, 2024
1 parent df1cdae commit d862b3a
Show file tree
Hide file tree
Showing 27 changed files with 607 additions and 3 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
"postcss": "^8.4.47",
"prettier": "3.3.3",
"tailwindcss": "^3.4.13",
"typescript": "^4.8.4"
"typescript": "^4.8.4",
"postcss-import": "^16.1.0"
},
"engines": {
"npm": "please-use-yarn",
Expand Down
8 changes: 8 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('postcss').PostcssConfig} */
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
},
};
10 changes: 10 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@
.default-grid {
@apply grid grid-cols-4 gap-gap-large sm:grid-cols-8;
}

.breadcrumbs__link {
@apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-transparent !p-0 !body-3;
}
.breadcrumbs__item:first-child, .breadcrumbs__item:first-child:after {
@apply !hidden;
}
.breadcrumbs__item:not(:last-child):after {
@apply !text-light-neutral-1 dark:!text-dark-neutral-1;
}
Empty file added src/css/index.css
Empty file.
2 changes: 1 addition & 1 deletion src/theme/DocBreadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import SentimentTracking from '../components/SentimentTracking'
export default function DocBreadcrumbs(props) {
return (
<div>
<OriginalDocBreadcrumbs {...props} />
<OriginalDocBreadcrumbs />
<div>
<SentimentTracking analyticsSection={DocsSentimentSection.TOP_SECTION} />
</div>
Expand Down
38 changes: 38 additions & 0 deletions src/theme/DocItem/Content/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import Heading from '@theme/Heading';
import MDXContent from '@theme/MDXContent';
/**
Title can be declared inside md content or declared through
front matter and added manually. To make both cases consistent,
the added title is added under the same div.markdown block
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
We render a "synthetic title" if:
- user doesn't ask to hide it with front matter
- the markdown content does not already contain a top-level h1 heading
*/
function useSyntheticTitle() {
const {metadata, frontMatter, contentTitle} = useDoc();
const shouldRender =
!frontMatter.hide_title && typeof contentTitle === 'undefined';
if (!shouldRender) {
return null;
}
return metadata.title;
}
export default function DocItemContent({children}) {
const syntheticTitle = useSyntheticTitle();
return (
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
{syntheticTitle && (
<header>
<Heading as="h1">{syntheticTitle}</Heading>
</header>
)}
<MDXContent>{children}</MDXContent>
</div>
);
}
68 changes: 68 additions & 0 deletions src/theme/DocItem/Footer/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import LastUpdated from '@theme/LastUpdated';
import EditThisPage from '@theme/EditThisPage';
import TagsListInline from '@theme/TagsListInline';
import styles from './styles.module.css';
function TagsRow(props) {
return (
<div
className={clsx(
ThemeClassNames.docs.docFooterTagsRow,
'row margin-bottom--sm',
)}>
<div className="col">
<TagsListInline {...props} />
</div>
</div>
);
}
function EditMetaRow({
editUrl,
lastUpdatedAt,
lastUpdatedBy,
formattedLastUpdatedAt,
}) {
return (
<div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
<div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>

<div className={clsx('col', styles.lastUpdated)}>
{(lastUpdatedAt || lastUpdatedBy) && (
<LastUpdated
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
/>
)}
</div>
</div>
);
}
export default function DocItemFooter() {
const {metadata} = useDoc();
const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
metadata;
const canDisplayTagsRow = tags.length > 0;
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
if (!canDisplayFooter) {
return null;
}
return (
<footer
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
{canDisplayTagsRow && <TagsRow tags={tags} />}
{canDisplayEditMetaRow && (
<EditMetaRow
editUrl={editUrl}
lastUpdatedAt={lastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
formattedLastUpdatedAt={formattedLastUpdatedAt}
/>
)}
</footer>
);
}
11 changes: 11 additions & 0 deletions src/theme/DocItem/Footer/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.lastUpdated {
margin-top: 0.2rem;
font-style: italic;
font-size: smaller;
}

@media (min-width: 997px) {
.lastUpdated {
text-align: right;
}
}
53 changes: 53 additions & 0 deletions src/theme/DocItem/Layout/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';
import clsx from 'clsx';
import {useWindowSize} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
import DocItemFooter from '@theme/DocItem/Footer';
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocItemContent from '@theme/DocItem/Content';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import styles from './styles.module.css';
/**
* Decide if the toc should be rendered, on mobile or desktop viewports
*/
function useDocTOC() {
const {frontMatter, toc} = useDoc();
const windowSize = useWindowSize();
const hidden = frontMatter.hide_table_of_contents;
const canRender = !hidden && toc.length > 0;
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
const desktop =
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
<DocItemTOCDesktop />
) : undefined;
return {
hidden,
mobile,
desktop,
};
}
export default function DocItemLayout({children}) {
const docTOC = useDocTOC();
return (
<div className="row">
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
<DocVersionBanner />
<div className={styles.docItemContainer}>
<article>
<DocBreadcrumbs />
<DocVersionBadge />
{docTOC.mobile}
<DocItemContent>{children}</DocItemContent>
<DocItemFooter />
</article>
<DocItemPaginator />
</div>
</div>
{docTOC.desktop && <div className="col col--3">On this page {docTOC.desktop}</div>}
</div>
);
}
10 changes: 10 additions & 0 deletions src/theme/DocItem/Layout/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.docItemContainer header + *,
.docItemContainer article > *:first-child {
margin-top: 0;
}

@media (min-width: 997px) {
.docItemCol {
max-width: 75% !important;
}
}
14 changes: 14 additions & 0 deletions src/theme/DocItem/Metadata/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import {PageMetadata} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
export default function DocItemMetadata() {
const {metadata, frontMatter, assets} = useDoc();
return (
<PageMetadata
title={metadata.title}
description={metadata.description}
keywords={frontMatter.keywords}
image={assets.image ?? frontMatter.image}
/>
);
}
11 changes: 11 additions & 0 deletions src/theme/DocItem/Paginator/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import {useDoc} from '@docusaurus/theme-common/internal';
import DocPaginator from '@theme/DocPaginator';
/**
* This extra component is needed, because <DocPaginator> should remain generic.
* DocPaginator is used in non-docs contexts too: generated-index pages...
*/
export default function DocItemPaginator() {
const {metadata} = useDoc();
return <DocPaginator previous={metadata.previous} next={metadata.next} />;
}
15 changes: 15 additions & 0 deletions src/theme/DocItem/TOC/Desktop/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import TOC from '@theme/TOC';
export default function DocItemTOCDesktop() {
const {toc, frontMatter} = useDoc();
return (
<TOC
toc={toc}
minHeadingLevel={frontMatter.toc_min_heading_level}
maxHeadingLevel={frontMatter.toc_max_heading_level}
className={ThemeClassNames.docs.docTocDesktop}
/>
);
}
17 changes: 17 additions & 0 deletions src/theme/DocItem/TOC/Mobile/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import TOCCollapsible from '@theme/TOCCollapsible';
import styles from './styles.module.css';
export default function DocItemTOCMobile() {
const {toc, frontMatter} = useDoc();
return (
<TOCCollapsible
toc={toc}
minHeadingLevel={frontMatter.toc_min_heading_level}
maxHeadingLevel={frontMatter.toc_max_heading_level}
className={clsx(ThemeClassNames.docs.docTocMobile, styles.tocMobile)}
/>
);
}
12 changes: 12 additions & 0 deletions src/theme/DocItem/TOC/Mobile/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@media (min-width: 997px) {
/* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
.tocMobile {
display: none;
}
}

@media print {
.tocMobile {
display: none;
}
}
19 changes: 19 additions & 0 deletions src/theme/DocItem/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import {HtmlClassNameProvider} from '@docusaurus/theme-common';
import {DocProvider} from '@docusaurus/theme-common/internal';
import DocItemMetadata from '@theme/DocItem/Metadata';
import DocItemLayout from '@theme/DocItem/Layout';
export default function DocItem(props) {
const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
const MDXComponent = props.content;
return (
<DocProvider content={props.content}>
<HtmlClassNameProvider className={docHtmlClassName}>
<DocItemMetadata />
<DocItemLayout>
<MDXComponent />
</DocItemLayout>
</HtmlClassNameProvider>
</DocProvider>
);
}
23 changes: 23 additions & 0 deletions src/theme/DocPage/Layout/Main/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import clsx from 'clsx';
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
import styles from './styles.module.css';
export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
const sidebar = useDocsSidebar();
return (
<main
className={clsx(
styles.docMainContainer,
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
)}>
<div
className={clsx(
'container padding-top--md padding-bottom--lg',
styles.docItemWrapper,
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
)}>
{children}
</div>
</main>
);
}
21 changes: 21 additions & 0 deletions src/theme/DocPage/Layout/Main/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.docMainContainer {
display: flex;
width: 100%;
}

@media (min-width: 997px) {
.docMainContainer {
flex-grow: 1;
max-width: calc(100% - var(--doc-sidebar-width));
}

.docMainContainerEnhanced {
max-width: calc(100% - var(--doc-sidebar-hidden-width));
}

.docItemWrapperEnhanced {
max-width: calc(
var(--ifm-container-width) + var(--doc-sidebar-width)
) !important;
}
}
28 changes: 28 additions & 0 deletions src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import {translate} from '@docusaurus/Translate';
import IconArrow from '@theme/Icon/Arrow';
import styles from './styles.module.css';
export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) {
return (
<div
className={styles.expandButton}
title={translate({
id: 'theme.docs.sidebar.expandButtonTitle',
message: 'Expand sidebar',
description:
'The ARIA label and title attribute for expand button of doc sidebar',
})}
aria-label={translate({
id: 'theme.docs.sidebar.expandButtonAriaLabel',
message: 'Expand sidebar',
description:
'The ARIA label and title attribute for expand button of doc sidebar',
})}
tabIndex={0}
role="button"
onKeyDown={toggleSidebar}
onClick={toggleSidebar}>
<IconArrow className={styles.expandButtonIcon} />
</div>
);
}
Loading

0 comments on commit d862b3a

Please sign in to comment.