From c427dd383768f17b046435a20b5da25b3441adc0 Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 07:46:17 +0530 Subject: [PATCH 1/6] Add Bullet styled Index page --- src/css/custom.css | 73 ++++++++++++++-- src/theme/DocCard/index.tsx | 129 ++++++++++++++++++++++++++++ src/theme/DocCard/styles.module.css | 27 ++++++ 3 files changed, 221 insertions(+), 8 deletions(-) create mode 100644 src/theme/DocCard/index.tsx create mode 100644 src/theme/DocCard/styles.module.css diff --git a/src/css/custom.css b/src/css/custom.css index 869d7fe..65c250c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -660,16 +660,73 @@ article h4 { float: none; } -[class*="generatedIndexPage"] .row .col--6 { - flex: 0 0 100% !important; - max-width: 100% !important; +/* Style overview pages as bullet point list */ +[class*="generatedIndexPage"] .row { + display: block !important; + list-style: none !important; + padding: 1rem 0 0 2rem !important; } -[class*="generatedIndexPage"] .row { - display: flex !important; - flex-direction: column !important; - gap: 1rem !important; - align-items: stretch !important; +[class*="generatedIndexPage"] .col { + display: list-item !important; + list-style-type: disc !important; + list-style-position: outside !important; + margin-left: 1rem !important; + margin-bottom: 0.5rem !important; + padding: 0 !important; + color: #9ca3af !important; + cursor: pointer !important; +} + +[data-theme="dark"] [class*="generatedIndexPage"] .col { + color: #6b7280 !important; +} + +[class*="generatedIndexPage"] article, +[class*="generatedIndexPage"] .card, +[class*="generatedIndexPage"] .item { + all: unset !important; + display: inline !important; +} + +[class*="generatedIndexPage"] a { + all: unset !important; + display: inline !important; + cursor: pointer !important; + text-decoration: none !important; +} + +/* Style title inline with light blue color */ +[class*="generatedIndexPage"] .cardTitle_rnsV, +[class*="generatedIndexPage"] h2 { + all: unset !important; + display: inline !important; + font-weight: 600 !important; + color: var(--ifm-color-primary) !important; + font-size: 1rem !important; +} + +[data-theme="dark"] [class*="generatedIndexPage"] h2 { + color: var(--ifm-color-primary-lightest) !important; +} + +[class*="generatedIndexPage"] h2::before { + content: "" !important; +} + +/* Display description inline after heading */ +[class*="generatedIndexPage"] p { + all: unset !important; + display: inline !important; + color: var(--ifm-font-color-base) !important; + font-size: 1rem !important; +} + +/* Add colon separator between heading and description */ +[class*="generatedIndexPage"] h2::after { + content: ": " !important; + font-weight: normal !important; + color: var(--ifm-font-color-base) !important; } article, diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx new file mode 100644 index 0000000..30dc595 --- /dev/null +++ b/src/theme/DocCard/index.tsx @@ -0,0 +1,129 @@ +import React, { type ReactNode } from "react" +import clsx from "clsx" +import Link from "@docusaurus/Link" +import { + useDocById, + findFirstSidebarItemLink, +} from "@docusaurus/plugin-content-docs/client" +import { usePluralForm } from "@docusaurus/theme-common" +import isInternalUrl from "@docusaurus/isInternalUrl" +import { translate } from "@docusaurus/Translate" + +import type { Props } from "@theme/DocCard" +import Heading from "@theme/Heading" +import type { + PropSidebarItemCategory, + PropSidebarItemLink, +} from "@docusaurus/plugin-content-docs" + +import styles from "./styles.module.css" + +function useCategoryItemsPlural() { + const { selectMessage } = usePluralForm() + return (count: number) => + selectMessage( + count, + translate( + { + message: "1 item|{count} items", + id: "theme.docs.DocCard.categoryDescription.plurals", + description: + "The default description for a category card in the generated index about how many items this category includes", + }, + { count }, + ), + ) +} + +function CardContainer({ + className, + href, + children, +}: { + className?: string + href: string + children: ReactNode +}): ReactNode { + return ( + + {children} + + ) +} + +function CardLayout({ + className, + href, + title, + description, +}: { + className?: string + href: string + title: string + description?: string +}): ReactNode { + return ( + + + {title} + + {description && ( +

+ {description} +

+ )} + + ) +} + +function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode { + const href = findFirstSidebarItemLink(item) + const categoryItemsPlural = useCategoryItemsPlural() + + // Unexpected: categories that don't have a link have been filtered upfront + if (!href) { + return null + } + + return ( + + ) +} + +function CardLink({ item }: { item: PropSidebarItemLink }): ReactNode { + const doc = useDocById(item.docId ?? undefined) + return ( + + ) +} + +export default function DocCard({ item }: Props): ReactNode { + switch (item.type) { + case "link": + return + case "category": + return + default: + throw new Error(`unknown item type ${JSON.stringify(item)}`) + } +} diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css new file mode 100644 index 0000000..4f7ad27 --- /dev/null +++ b/src/theme/DocCard/styles.module.css @@ -0,0 +1,27 @@ +.cardContainer { + --ifm-link-color: var(--ifm-color-emphasis-800); + --ifm-link-hover-color: var(--ifm-color-emphasis-700); + --ifm-link-hover-decoration: none; + + box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); + border: 1px solid var(--ifm-color-emphasis-200); + transition: all var(--ifm-transition-fast) ease; + transition-property: border, box-shadow; +} + +.cardContainer:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%); +} + +.cardContainer *:last-child { + margin-bottom: 0; +} + +.cardTitle { + font-size: 1.2rem; +} + +.cardDescription { + font-size: 0.8rem; +} From ab0d6d1bdc2dbf4826706654d60ec4b5d6e5b169 Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 08:32:22 +0530 Subject: [PATCH 2/6] Bring back old pagination and also add spacing --- src/css/custom.css | 58 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/src/css/custom.css b/src/css/custom.css index 65c250c..ea51e6d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -664,7 +664,7 @@ article h4 { [class*="generatedIndexPage"] .row { display: block !important; list-style: none !important; - padding: 1rem 0 0 2rem !important; + padding: 1rem 0 2rem 2rem !important; } [class*="generatedIndexPage"] .col { @@ -729,6 +729,62 @@ article h4 { color: var(--ifm-font-color-base) !important; } +/* Exclude pagination navigation from bullet list styling - use higher specificity */ +nav.pagination-nav, +[class*="generatedIndexPage"] nav.pagination-nav { + display: grid !important; + grid-template-columns: repeat(2, 1fr) !important; + gap: var(--ifm-spacing-horizontal) !important; + padding: 0 !important; + list-style: none !important; +} + +nav.pagination-nav .pagination-nav__link, +[class*="generatedIndexPage"] nav.pagination-nav .pagination-nav__link { + display: block !important; + line-height: var(--ifm-heading-line-height) !important; + padding: var(--ifm-global-spacing) !important; + border: 1px solid var(--ifm-color-emphasis-300) !important; + border-radius: var(--ifm-pagination-nav-border-radius) !important; + text-decoration: none !important; + transition: border-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default) !important; + cursor: pointer !important; +} + +nav.pagination-nav .pagination-nav__link--next { + text-align: right !important; + grid-column: 2 / 3 !important; +} + +nav.pagination-nav .pagination-nav__link:hover, +[class*="generatedIndexPage"] nav.pagination-nav .pagination-nav__link:hover { + border-color: var(--ifm-color-primary) !important; + text-decoration: none !important; +} + +nav.pagination-nav .pagination-nav__sublabel, +[class*="generatedIndexPage"] nav.pagination-nav .pagination-nav__sublabel { + display: block !important; + color: var(--ifm-color-content-secondary) !important; + font-size: var(--ifm-h5-font-size) !important; + font-weight: var(--ifm-font-weight-semibold) !important; + margin-bottom: 0.25rem !important; +} + +nav.pagination-nav .pagination-nav__label, +[class*="generatedIndexPage"] nav.pagination-nav .pagination-nav__label { + display: block !important; + color: var(--ifm-link-color) !important; + font-size: var(--ifm-h4-font-size) !important; + font-weight: var(--ifm-heading-font-weight) !important; + word-break: break-word !important; +} + +nav.pagination-nav .pagination-nav__link *:last-child { + margin-bottom: 0 !important; +} + article, .markdown { max-width: 100% !important; From 62e1aace7942bcedf98cdf31fd86e7cb134db23d Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 08:46:28 +0530 Subject: [PATCH 3/6] Support nested categories --- src/theme/DocCard/index.tsx | 46 ++++++++++++++++++++++++----- src/theme/DocCard/styles.module.css | 13 ++++++++ 2 files changed, 52 insertions(+), 7 deletions(-) diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx index 30dc595..310d6a3 100644 --- a/src/theme/DocCard/index.tsx +++ b/src/theme/DocCard/index.tsx @@ -88,20 +88,52 @@ function CardLayout({ function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode { const href = findFirstSidebarItemLink(item) - const categoryItemsPlural = useCategoryItemsPlural() // Unexpected: categories that don't have a link have been filtered upfront if (!href) { return null } + // Render nested items as a list + const nestedItems = item.items.map((subItem) => { + if (subItem.type === "link") { + return ( +
  • + {subItem.label} +
    • + ) + } else if (subItem.type === "category") { + const subHref = findFirstSidebarItemLink(subItem) + return subHref ? ( +
  • + {subItem.label} +
    • + ) : null + } + return null + }) + return ( - + + + {item.label} + + {item.description && ( +

    + {item.description} +

    + )} + {item.items.length > 0 && ( +
      {nestedItems}
    + )} +     ) } diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css index 4f7ad27..4d85c43 100644 --- a/src/theme/DocCard/styles.module.css +++ b/src/theme/DocCard/styles.module.css @@ -25,3 +25,16 @@ .cardDescription { font-size: 0.8rem; } + +.nestedList { + margin-top: 0.5rem; + padding-left: 1.5rem; + list-style-type: circle; + font-weight: 400; + color: var(--ifm-color-emphasis-900); +} + +.nestedList a { + color: var(--ifm-link-color); + font-weight: 400; +} From 1c88910e6e0569613b040ef5d4cdf98f29993d17 Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 08:56:14 +0530 Subject: [PATCH 4/6] Center items in mobile --- src/css/custom.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index ea51e6d..4a3cfe7 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -660,6 +660,14 @@ article h4 { float: none; } +@media (max-width: 999px) { + [class*="generatedIndexPage"] { + max-width: 100%; + padding-left: 2rem; + padding-right: 2rem; + } +} + /* Style overview pages as bullet point list */ [class*="generatedIndexPage"] .row { display: block !important; From 980fa071d155e416d5ba10be29deb48e1829208d Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 09:10:48 +0530 Subject: [PATCH 5/6] Revert padding to center on mobile --- src/css/custom.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 4a3cfe7..ea51e6d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -660,14 +660,6 @@ article h4 { float: none; } -@media (max-width: 999px) { - [class*="generatedIndexPage"] { - max-width: 100%; - padding-left: 2rem; - padding-right: 2rem; - } -} - /* Style overview pages as bullet point list */ [class*="generatedIndexPage"] .row { display: block !important; From 39f19182d4a299310db1c5a8953d6876b2f40eed Mon Sep 17 00:00:00 2001 From: Ayush Jhawar Date: Sat, 11 Oct 2025 09:47:10 +0530 Subject: [PATCH 6/6] Add description to sub category --- src/theme/DocCard/index.tsx | 65 ++++++++++++++++++++--------- src/theme/DocCard/styles.module.css | 24 ++++++++++- 2 files changed, 68 insertions(+), 21 deletions(-) diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx index 310d6a3..967e42f 100644 --- a/src/theme/DocCard/index.tsx +++ b/src/theme/DocCard/index.tsx @@ -86,6 +86,46 @@ function CardLayout({ ) } +function NestedItem({ + item, +}: { item: PropSidebarItemLink | PropSidebarItemCategory }) { + if (item.type === "link") { + const doc = useDocById(item.docId ?? undefined) + const description = item.description ?? doc?.description + return ( +
  • + + {item.label} + {description && ( + <> + : + {description} + + )} + +
    • + ) + } else if (item.type === "category") { + const subHref = findFirstSidebarItemLink(item) + return subHref ? ( +
  • + + {item.label} + {item.description && ( + <> + : + + {item.description} + + + )} + +
    • + ) : null + } + return null +} + function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode { const href = findFirstSidebarItemLink(item) @@ -94,25 +134,6 @@ function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode { return null } - // Render nested items as a list - const nestedItems = item.items.map((subItem) => { - if (subItem.type === "link") { - return ( -
  • - {subItem.label} -
    • - ) - } else if (subItem.type === "category") { - const subHref = findFirstSidebarItemLink(subItem) - return subHref ? ( -
  • - {subItem.label} -
    • - ) : null - } - return null - }) - return ( )} {item.items.length > 0 && ( -
      {nestedItems}
    +
      + {item.items.map((subItem, index) => ( + + ))} +
    )}     ) diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css index 4d85c43..7a22a8c 100644 --- a/src/theme/DocCard/styles.module.css +++ b/src/theme/DocCard/styles.module.css @@ -27,7 +27,7 @@ } .nestedList { - margin-top: 0.5rem; + margin-top: 0; padding-left: 1.5rem; list-style-type: circle; font-weight: 400; @@ -38,3 +38,25 @@ color: var(--ifm-link-color); font-weight: 400; } + +.nestedLink { + text-decoration: none; + transition: color 0.2s ease; +} + +.nestedTitle { + color: var(--ifm-color-primary); + font-weight: 600; +} + +.nestedColon { + color: var(--ifm-font-color-base); +} + +.nestedDescription { + color: var(--ifm-font-color-base); +} + +.nestedLink:hover .nestedTitle { + color: var(--ifm-color-primary-dark); +}