From ba484454b05d70de4b0bba43c832297597918c70 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 23 Aug 2025 20:23:51 -0700 Subject: [PATCH 1/4] feat: expand ToC variants, docs + beginner + left --- src/components/TableOfContents/ItemsList.tsx | 26 +++++++-- .../TableOfContents/TableOfContentsLink.tsx | 7 ++- .../TableOfContents/TableOfContentsMobile.tsx | 5 +- src/components/TableOfContents/index.tsx | 58 ++++++++++++++----- 4 files changed, 70 insertions(+), 26 deletions(-) diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx index 6cbd44664e5..c3d9a58be1c 100644 --- a/src/components/TableOfContents/ItemsList.tsx +++ b/src/components/TableOfContents/ItemsList.tsx @@ -4,16 +4,30 @@ import type { ToCItem } from "@/lib/types" import ToCLink from "@/components/TableOfContents/TableOfContentsLink" -const variants = cva("mb-2 last:mb-0", { +const itemVariants = cva("last:mb-0", { variants: { variant: { - default: "", + docs: "mb-2", beginner: "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item", + left: "mb-4 list-none text-xl", }, }, defaultVariants: { - variant: "default", + variant: "docs", + }, +}) + +const listVariants = cva("", { + variants: { + variant: { + docs: "m-0 mt-2 list-none gap-2 ps-2 text-sm", + beginner: "", + left: "", + }, + }, + defaultVariants: { + variant: "docs", }, }) @@ -22,7 +36,7 @@ export type ItemsListProps = { depth: number maxDepth: number activeHash?: string -} & VariantProps +} & VariantProps const ItemsList = ({ items, @@ -39,7 +53,7 @@ const ItemsList = ({ {items.map((item, index) => { const { title, items } = item return ( -
  • +
  • {items && ( -
      +
        span]:flex-none mb-16 justify-center rounded-lg border-border bg-accent-a/10 text-lg font-bold", + left: "", }, }, defaultVariants: { - variant: "default", + variant: "docs", }, }) diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx index 8b60396ddd0..776f69b479d 100644 --- a/src/components/TableOfContents/index.tsx +++ b/src/components/TableOfContents/index.tsx @@ -4,6 +4,9 @@ import { cva, type VariantProps } from "class-variance-authority" import type { ToCItem } from "@/lib/types" +import ButtonDropdown, { + List as ButtonDropdownList, +} from "@/components/ButtonDropdown" import Github from "@/components/icons/github.svg" import ItemsList from "@/components/TableOfContents/ItemsList" import Mobile from "@/components/TableOfContents/TableOfContentsMobile" @@ -17,34 +20,47 @@ import { useTranslation } from "@/hooks/useTranslation" import { usePathname } from "@/i18n/routing" const variants = cva( - "sticky hidden flex-col items-start overflow-y-auto lg:flex", + "sticky top-28 flex h-fit max-lg:hidden flex-col items-start overflow-y-auto", { variants: { variant: { - default: - "top-19 min-w-48 max-w-[25%] p-4 pe-0 h-[calc(100vh-80px)] gap-4", + docs: "top-20 min-w-48 max-w-[25%] p-4 pe-0 gap-4", beginner: cn( - "top-[7.25rem] min-w-80 max-w-72 lg:p-8 px-3 py-2", - "h-fit shrink-0 space-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium", - "[&_ul]:list-decimal [&_ul]:border-s-0 [&_ul]:text-base [&_ul]:list-inside [&_ul]:ps-0" + "min-w-80 max-w-72 lg:p-8 px-3 py-2", + "shrink-0 gap-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium" ), + left: "me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed", }, }, defaultVariants: { - variant: "default", + variant: "docs", }, } ) -const labelVariants = cva("text-body-medium", { +const labelVariants = cva("font-bold", { variants: { variant: { - default: "uppercase", - beginner: "font-bold text-lg", + docs: "uppercase text-body-medium font-normal", + beginner: "text-lg text-body-medium", + left: "mb-8 text-3xl leading-xs", }, }, defaultVariants: { - variant: "default", + variant: "docs", + }, +}) + +const listVariants = cva("mx-0 gap-2 py-0", { + variants: { + variant: { + docs: "list-none border-s border-s-body-medium ps-4 my-2", + beginner: "list-decimal border-s-0 text-base list-inside ps-0 my-2", + left: "list-none my-0", + }, + }, + defaultVariants: { + variant: "docs", }, }) @@ -55,6 +71,8 @@ export interface TableOfContentsProps extends VariantProps { hideEditButton?: boolean isMobile?: boolean className?: string + dropdownLinks?: ButtonDropdownList + showDropdown?: boolean } const TableOfContents = ({ @@ -65,6 +83,8 @@ const TableOfContents = ({ isMobile = false, className, variant, + dropdownLinks, + showDropdown = true, ...rest }: TableOfContentsProps) => { const pathname = usePathname() @@ -93,7 +113,7 @@ const TableOfContents = ({ } return ( - + ) } From 73eec1527192eca638acc1e0f23c5636ef19bd4f Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 23 Aug 2025 20:24:40 -0700 Subject: [PATCH 2/4] refactor: LeftNavBar to ToC variant="left" --- app/[locale]/learn/page.tsx | 8 ++------ app/[locale]/staking/_components/staking.tsx | 9 ++++----- src/layouts/ContentLayout.tsx | 14 +++++++------- 3 files changed, 13 insertions(+), 18 deletions(-) diff --git a/app/[locale]/learn/page.tsx b/app/[locale]/learn/page.tsx index 3627c054948..d7d8ca5c7e3 100644 --- a/app/[locale]/learn/page.tsx +++ b/app/[locale]/learn/page.tsx @@ -13,9 +13,9 @@ import FileContributors from "@/components/FileContributors" import { HubHero } from "@/components/Hero" import type { HubHeroProps } from "@/components/Hero/HubHero" import { Image, ImageProps } from "@/components/Image" -import LeftNavBar from "@/components/LeftNavBar" import MainArticle from "@/components/MainArticle" import { ContentContainer } from "@/components/MdComponents" +import TableOfContents from "@/components/TableOfContents" import { ButtonLink } from "@/components/ui/buttons/Button" import { Center, Flex, Stack } from "@/components/ui/flex" import InlineLink from "@/components/ui/Link" @@ -185,11 +185,7 @@ export default async function Page({ params }: { params: Promise }) { asChild > - +
        - diff --git a/src/layouts/ContentLayout.tsx b/src/layouts/ContentLayout.tsx index 6f181798afb..8496c8b376b 100644 --- a/src/layouts/ContentLayout.tsx +++ b/src/layouts/ContentLayout.tsx @@ -4,14 +4,16 @@ import { FileContributor } from "@/lib/types" import FeedbackCard from "@/components/FeedbackCard" import FileContributors from "@/components/FileContributors" -import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar" import { ContentContainer, Page } from "@/components/MdComponents" import MobileButtonDropdown from "@/components/MobileButtonDropdown" +import TableOfContents, { + type TableOfContentsProps, +} from "@/components/TableOfContents" type ContentLayoutProps = HTMLAttributes & - Pick & { - showDropdown?: boolean + Pick & { children: React.ReactNode + tocItems: TableOfContentsProps["items"] heroSection: React.ReactNode contributors: FileContributor[] lastEditLocaleTimestamp: string @@ -33,14 +35,12 @@ export const ContentLayout = ({ {heroSection} - - {children} From 8ff44988b78a3ea838dbd57fb7244746ce97e705 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 23 Aug 2025 20:24:50 -0700 Subject: [PATCH 3/4] deprecate: LeftNavBar --- src/components/LeftNavBar/index.tsx | 53 ----------------------------- 1 file changed, 53 deletions(-) delete mode 100644 src/components/LeftNavBar/index.tsx diff --git a/src/components/LeftNavBar/index.tsx b/src/components/LeftNavBar/index.tsx deleted file mode 100644 index 2aa4d837f7d..00000000000 --- a/src/components/LeftNavBar/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { ToCItem } from "@/lib/types" - -import ButtonDropdown, { - List as ButtonDropdownList, -} from "@/components/ButtonDropdown" -import Translation from "@/components/Translation" -import UpgradeTableOfContents from "@/components/UpgradeTableOfContents" - -import { cn } from "@/lib/utils/cn" - -export type LeftNavBarProps = { - dropdownLinks?: ButtonDropdownList - maxDepth?: number - tocItems: ToCItem[] - className?: string - showDropdown?: boolean -} - -const LeftNavBar = ({ - dropdownLinks, - maxDepth = 1, - tocItems, - className, - showDropdown = true, - ...props -}: LeftNavBarProps) => { - return ( - - ) -} - -export default LeftNavBar From ddc63ed44e8712145d123fc41ab0851a7aac8c48 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 23 Aug 2025 22:31:10 -0700 Subject: [PATCH 4/4] patch: variant styling details and maxDepth --- .../TableOfContents/TableOfContentsLink.tsx | 2 +- src/components/TableOfContents/index.tsx | 12 ++++++------ src/layouts/ContentLayout.tsx | 6 +++--- src/layouts/Docs.tsx | 2 +- src/layouts/Static.tsx | 2 +- src/layouts/md/Roadmap.tsx | 1 - src/layouts/md/Staking.tsx | 1 - src/layouts/md/UseCases.tsx | 1 - src/layouts/stories/ContentLayout.stories.tsx | 1 - 9 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx index 659e1bffc75..4c2ffe21d46 100644 --- a/src/components/TableOfContents/TableOfContentsLink.tsx +++ b/src/components/TableOfContents/TableOfContentsLink.tsx @@ -11,7 +11,7 @@ const variants = cva( { variants: { variant: { - docs: "", + docs: "py-0.5", beginner: "[&_[data-label='marker']]:!hidden inline leading-base", left: "", }, diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx index 776f69b479d..22ec5e0e22b 100644 --- a/src/components/TableOfContents/index.tsx +++ b/src/components/TableOfContents/index.tsx @@ -20,16 +20,16 @@ import { useTranslation } from "@/hooks/useTranslation" import { usePathname } from "@/i18n/routing" const variants = cva( - "sticky top-28 flex h-fit max-lg:hidden flex-col items-start overflow-y-auto", + "sticky flex h-fit max-lg:hidden flex-col items-start overflow-y-auto", { variants: { variant: { - docs: "top-20 min-w-48 max-w-[25%] p-4 pe-0 gap-4", + docs: "top-19 min-w-48 max-w-[25%] p-4 pe-0 gap-4", beginner: cn( - "min-w-80 max-w-72 lg:p-8 px-3 py-2", + "top-28 min-w-80 max-w-72 lg:p-8 px-3 py-2", "shrink-0 gap-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium" ), - left: "me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed", + left: "top-28 me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed", }, }, defaultVariants: { @@ -54,7 +54,7 @@ const labelVariants = cva("font-bold", { const listVariants = cva("mx-0 gap-2 py-0", { variants: { variant: { - docs: "list-none border-s border-s-body-medium ps-4 my-2", + docs: "list-none border-s border-s-body-medium ps-4 my-2 text-sm", beginner: "list-decimal border-s-0 text-base list-inside ps-0 my-2", left: "list-none my-0", }, @@ -129,7 +129,7 @@ const TableOfContents = ({ )} {variant === "left" && showDropdown && dropdownLinks && ( -
        +
        & - Pick & { + Pick & { children: React.ReactNode tocItems: TableOfContentsProps["items"] heroSection: React.ReactNode @@ -23,7 +23,6 @@ export const ContentLayout = ({ children, dropdownLinks, tocItems, - maxDepth, showDropdown = true, heroSection, contributors, @@ -38,8 +37,9 @@ export const ContentLayout = ({ {children} diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx index c83b9cedb64..d8e4f363d54 100644 --- a/src/layouts/Docs.tsx +++ b/src/layouts/Docs.tsx @@ -144,9 +144,9 @@ export const DocsLayout = ({
        {children} diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx index 1ad0f0521a7..917bb1ddcd3 100644 --- a/src/layouts/Static.tsx +++ b/src/layouts/Static.tsx @@ -132,9 +132,9 @@ export const StaticLayout = ({ {children} diff --git a/src/layouts/md/Roadmap.tsx b/src/layouts/md/Roadmap.tsx index 18cb9eb0f88..4c2330ae1b1 100644 --- a/src/layouts/md/Roadmap.tsx +++ b/src/layouts/md/Roadmap.tsx @@ -106,7 +106,6 @@ export const RoadmapLayout = ({ dir={contentNotTranslated ? "ltr" : "unset"} tocItems={tocItems} dropdownLinks={dropdownLinks} - maxDepth={frontmatter.sidebarDepth} contributors={contributors} lastEditLocaleTimestamp={lastEditLocaleTimestamp} heroSection={ diff --git a/src/layouts/md/Staking.tsx b/src/layouts/md/Staking.tsx index 0df3431c9d1..6c4349dab2e 100644 --- a/src/layouts/md/Staking.tsx +++ b/src/layouts/md/Staking.tsx @@ -172,7 +172,6 @@ export const StakingLayout = ({ dir={contentNotTranslated ? "ltr" : "unset"} tocItems={tocItems} dropdownLinks={dropdownLinks} - maxDepth={frontmatter.sidebarDepth} contributors={contributors} lastEditLocaleTimestamp={lastEditLocaleTimestamp} heroSection={} diff --git a/src/layouts/md/UseCases.tsx b/src/layouts/md/UseCases.tsx index c6c6504e5d6..90bf3fc090d 100644 --- a/src/layouts/md/UseCases.tsx +++ b/src/layouts/md/UseCases.tsx @@ -199,7 +199,6 @@ export const UseCasesLayout = ({ } diff --git a/src/layouts/stories/ContentLayout.stories.tsx b/src/layouts/stories/ContentLayout.stories.tsx index 0ad1da8ca02..2da65cee80d 100644 --- a/src/layouts/stories/ContentLayout.stories.tsx +++ b/src/layouts/stories/ContentLayout.stories.tsx @@ -61,7 +61,6 @@ export const ContentLayout: StoryObj = { }, ], }, - maxDepth: 2, contributors: [ { login: "samajammin",