From 4d6f42c5b21f1753731c811e572c1146d7b2e934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Fri, 6 Sep 2024 10:51:42 +0200 Subject: [PATCH 1/4] fix: keep TOC in its place with `flex-wrap: nowrap` --- src/theme/DocItem/Layout/index.js | 2 +- src/theme/DocItem/Layout/styles.module.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js index 63d93b5d5b..8585fc8321 100644 --- a/src/theme/DocItem/Layout/index.js +++ b/src/theme/DocItem/Layout/index.js @@ -74,7 +74,7 @@ export default function DocItemLayout({ children }) { ); return (
+ className={clsx('row', styles.row)}>
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css index ad11aee2ea..6429a082e0 100644 --- a/src/theme/DocItem/Layout/styles.module.css +++ b/src/theme/DocItem/Layout/styles.module.css @@ -21,4 +21,8 @@ .docItemCol { max-width: 820px !important; } +} + +.row { + flex-wrap: nowrap; } \ No newline at end of file From b0c9549190f4545f5b43fdceafaac3121828c84a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Fri, 6 Sep 2024 10:52:38 +0200 Subject: [PATCH 2/4] chore: bump search-modal version --- apify-docs-theme/package.json | 2 +- package-lock.json | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apify-docs-theme/package.json b/apify-docs-theme/package.json index 552348e5e6..4058689e12 100644 --- a/apify-docs-theme/package.json +++ b/apify-docs-theme/package.json @@ -19,7 +19,7 @@ "access": "public" }, "dependencies": { - "@apify/docs-search-modal": "^1.1.0", + "@apify/docs-search-modal": "^1.1.1", "@docusaurus/theme-common": "^3.5.2", "@stackql/docusaurus-plugin-hubspot": "^1.1.0", "axios": "^1.7.4", diff --git a/package-lock.json b/package-lock.json index fb01c6365e..8f04d98e37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,10 +69,10 @@ }, "apify-docs-theme": { "name": "@apify/docs-theme", - "version": "1.0.130", + "version": "1.0.134", "license": "ISC", "dependencies": { - "@apify/docs-search-modal": "^1.1.0", + "@apify/docs-search-modal": "^1.1.1", "@docusaurus/theme-common": "^3.5.2", "@stackql/docusaurus-plugin-hubspot": "^1.1.0", "axios": "^1.7.4", @@ -347,7 +347,9 @@ } }, "node_modules/@apify/docs-search-modal": { - "version": "1.1.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@apify/docs-search-modal/-/docs-search-modal-1.1.1.tgz", + "integrity": "sha512-y5WqsaP3nxjbMlJ4HNc4QIkXXIRCs52f65/48dFu4HCr57FeJklhwa5VNeitpBaj/uqRImwxGk0OZh+FeQFc0g==", "license": "ISC", "dependencies": { "@algolia/autocomplete-js": "^1.10.0", From 9ca3b008b66ab8eb22e0916703cf4a500855f076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Fri, 6 Sep 2024 10:53:02 +0200 Subject: [PATCH 3/4] fix: reserve space for bold active TOC items with `::before` --- apify-docs-theme/src/theme/TOCItems/Tree.tsx | 41 +++++++++++++++ apify-docs-theme/src/theme/TOCItems/index.tsx | 52 +++++++++++++++++++ .../src/theme/TOCItems/styles.module.css | 12 +++++ 3 files changed, 105 insertions(+) create mode 100644 apify-docs-theme/src/theme/TOCItems/Tree.tsx create mode 100644 apify-docs-theme/src/theme/TOCItems/index.tsx create mode 100644 apify-docs-theme/src/theme/TOCItems/styles.module.css diff --git a/apify-docs-theme/src/theme/TOCItems/Tree.tsx b/apify-docs-theme/src/theme/TOCItems/Tree.tsx new file mode 100644 index 0000000000..7201843b74 --- /dev/null +++ b/apify-docs-theme/src/theme/TOCItems/Tree.tsx @@ -0,0 +1,41 @@ +import Link from '@docusaurus/Link'; +import type { Props } from '@theme/TOCItems/Tree'; +import clsx from 'clsx'; +import React from 'react'; +import styles from './styles.module.css'; + +// Recursive component rendering the toc tree +function TOCItemTree({ + toc, + className, + linkClassName, + isChild, +}: Props): JSX.Element | null { + if (!toc.length) { + return null; + } + return ( +
    + {toc.map((heading) => ( +
  • + + +
    • + ))} +
+ ); +} + +// Memo only the tree root is enough +export default React.memo(TOCItemTree); diff --git a/apify-docs-theme/src/theme/TOCItems/index.tsx b/apify-docs-theme/src/theme/TOCItems/index.tsx new file mode 100644 index 0000000000..a82d1d418b --- /dev/null +++ b/apify-docs-theme/src/theme/TOCItems/index.tsx @@ -0,0 +1,52 @@ +import { useThemeConfig } from '@docusaurus/theme-common'; +import { + useTOCHighlight, + useFilteredAndTreeifiedTOC, + type TOCHighlightConfig, +} from '@docusaurus/theme-common/internal'; +import type { Props } from '@theme/TOCItems'; +import TOCItemTree from '@theme/TOCItems/Tree'; +import React, { useMemo } from 'react'; + +export default function TOCItems({ + toc, + className = 'table-of-contents table-of-contents__left-border', + linkClassName = 'table-of-contents__link', + linkActiveClassName = undefined, + minHeadingLevel: minHeadingLevelOption, + maxHeadingLevel: maxHeadingLevelOption, + ...props +}: Props): JSX.Element | null { + const themeConfig = useThemeConfig(); + + const minHeadingLevel = minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel; + const maxHeadingLevel = maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel; + + const tocTree = useFilteredAndTreeifiedTOC({ + toc, + minHeadingLevel, + maxHeadingLevel, + }); + + const tocHighlightConfig: TOCHighlightConfig | undefined = useMemo(() => { + if (linkClassName && linkActiveClassName) { + return { + linkClassName, + linkActiveClassName, + minHeadingLevel, + maxHeadingLevel, + }; + } + return undefined; + }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]); + useTOCHighlight(tocHighlightConfig); + + return ( + + ); +} diff --git a/apify-docs-theme/src/theme/TOCItems/styles.module.css b/apify-docs-theme/src/theme/TOCItems/styles.module.css new file mode 100644 index 0000000000..6f578fc6c4 --- /dev/null +++ b/apify-docs-theme/src/theme/TOCItems/styles.module.css @@ -0,0 +1,12 @@ +.apifyTocLink { + display: block; +} + +.apifyTocLink::before { + display: block; + content: attr(data-label); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; +} \ No newline at end of file From e5e49c9c4dc0bca73bdc45a3e1fbd4c93d57efb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Fri, 6 Sep 2024 11:11:00 +0200 Subject: [PATCH 4/4] chore: run linter + suggestions --- apify-docs-theme/src/theme/TOCItems/{Tree.tsx => Tree.jsx} | 4 ++-- .../src/theme/TOCItems/{index.tsx => index.jsx} | 6 ++---- apify-docs-theme/src/theme/TOCItems/styles.module.css | 2 +- src/theme/DocItem/Layout/styles.module.css | 2 +- 4 files changed, 6 insertions(+), 8 deletions(-) rename apify-docs-theme/src/theme/TOCItems/{Tree.tsx => Tree.jsx} (93%) rename apify-docs-theme/src/theme/TOCItems/{index.tsx => index.jsx} (88%) diff --git a/apify-docs-theme/src/theme/TOCItems/Tree.tsx b/apify-docs-theme/src/theme/TOCItems/Tree.jsx similarity index 93% rename from apify-docs-theme/src/theme/TOCItems/Tree.tsx rename to apify-docs-theme/src/theme/TOCItems/Tree.jsx index 7201843b74..eb449fb929 100644 --- a/apify-docs-theme/src/theme/TOCItems/Tree.tsx +++ b/apify-docs-theme/src/theme/TOCItems/Tree.jsx @@ -1,7 +1,7 @@ import Link from '@docusaurus/Link'; -import type { Props } from '@theme/TOCItems/Tree'; import clsx from 'clsx'; import React from 'react'; + import styles from './styles.module.css'; // Recursive component rendering the toc tree @@ -10,7 +10,7 @@ function TOCItemTree({ className, linkClassName, isChild, -}: Props): JSX.Element | null { +}) { if (!toc.length) { return null; } diff --git a/apify-docs-theme/src/theme/TOCItems/index.tsx b/apify-docs-theme/src/theme/TOCItems/index.jsx similarity index 88% rename from apify-docs-theme/src/theme/TOCItems/index.tsx rename to apify-docs-theme/src/theme/TOCItems/index.jsx index a82d1d418b..4093b48dc6 100644 --- a/apify-docs-theme/src/theme/TOCItems/index.tsx +++ b/apify-docs-theme/src/theme/TOCItems/index.jsx @@ -2,9 +2,7 @@ import { useThemeConfig } from '@docusaurus/theme-common'; import { useTOCHighlight, useFilteredAndTreeifiedTOC, - type TOCHighlightConfig, } from '@docusaurus/theme-common/internal'; -import type { Props } from '@theme/TOCItems'; import TOCItemTree from '@theme/TOCItems/Tree'; import React, { useMemo } from 'react'; @@ -16,7 +14,7 @@ export default function TOCItems({ minHeadingLevel: minHeadingLevelOption, maxHeadingLevel: maxHeadingLevelOption, ...props -}: Props): JSX.Element | null { +}) { const themeConfig = useThemeConfig(); const minHeadingLevel = minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel; @@ -28,7 +26,7 @@ export default function TOCItems({ maxHeadingLevel, }); - const tocHighlightConfig: TOCHighlightConfig | undefined = useMemo(() => { + const tocHighlightConfig = useMemo(() => { if (linkClassName && linkActiveClassName) { return { linkClassName, diff --git a/apify-docs-theme/src/theme/TOCItems/styles.module.css b/apify-docs-theme/src/theme/TOCItems/styles.module.css index 6f578fc6c4..0187e4a1f2 100644 --- a/apify-docs-theme/src/theme/TOCItems/styles.module.css +++ b/apify-docs-theme/src/theme/TOCItems/styles.module.css @@ -9,4 +9,4 @@ height: 0; overflow: hidden; visibility: hidden; -} \ No newline at end of file +} diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css index 6429a082e0..989d2ca8a4 100644 --- a/src/theme/DocItem/Layout/styles.module.css +++ b/src/theme/DocItem/Layout/styles.module.css @@ -25,4 +25,4 @@ .row { flex-wrap: nowrap; -} \ No newline at end of file +}