diff --git a/app/[locale]/contributing/translation-program/translatathon/leaderboard/page.tsx b/app/[locale]/contributing/translation-program/translatathon/leaderboard/page.tsx index 6add8a7c63b..80e80ff0dc8 100644 --- a/app/[locale]/contributing/translation-program/translatathon/leaderboard/page.tsx +++ b/app/[locale]/contributing/translation-program/translatathon/leaderboard/page.tsx @@ -2,12 +2,14 @@ import { setRequestLocale } from "next-intl/server" import { List as ButtonDropdownList } from "@/components/ButtonDropdown" import ContentHero, { ContentHeroProps } from "@/components/Hero/ContentHero" -import LeftNavBar from "@/components/LeftNavBar" import MainArticle from "@/components/MainArticle" +import TableOfContents from "@/components/TableOfContents" import { ApplyNow } from "@/components/Translatathon/ApplyNow" +import { APPLICATION_END_DATE } from "@/components/Translatathon/constants" import PaperformCallToAction from "@/components/Translatathon/PaperformCallToAction" import { dataLoader } from "@/lib/utils/data/dataLoader" +import { isDateReached } from "@/lib/utils/date" import { getMetadata } from "@/lib/utils/metadata" import { BASE_TIME_UNIT } from "@/lib/constants" @@ -96,6 +98,20 @@ const Page = async ({ params }: { params: Promise<{ locale: string }> }) => { ], } + const tocItems = [ + { + title: "Leaderboard", + url: "#leaderboard", + }, + ] + + if (isDateReached(APPLICATION_END_DATE)) { + tocItems.push({ + title: "Apply now", + url: "#apply-now", + }) + } + return ( <>
@@ -103,20 +119,10 @@ const Page = async ({ params }: { params: Promise<{ locale: string }> }) => {
-
@@ -143,9 +149,11 @@ const Page = async ({ params }: { params: Promise<{ locale: string }> }) => {
)}
-
- -
+ {isDateReached(APPLICATION_END_DATE) && ( +
+ +
+ )} 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/app/[locale]/what-is-ethereum/page.tsx b/app/[locale]/what-is-ethereum/page.tsx index e93b002c0b1..2ecbe45cc80 100644 --- a/app/[locale]/what-is-ethereum/page.tsx +++ b/app/[locale]/what-is-ethereum/page.tsx @@ -167,8 +167,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
- - + +
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 diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx index 6cbd44664e5..8d2a5bbe3cb 100644 --- a/src/components/TableOfContents/ItemsList.tsx +++ b/src/components/TableOfContents/ItemsList.tsx @@ -4,16 +4,29 @@ 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: "", - beginner: - "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item", + docs: "mb-2", + card: "[&: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", + card: "", + left: "", + }, + }, + defaultVariants: { + variant: "docs", }, }) @@ -22,7 +35,7 @@ export type ItemsListProps = { depth: number maxDepth: number activeHash?: string -} & VariantProps +} & VariantProps const ItemsList = ({ items, @@ -39,7 +52,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", + docs: "", + card: "[&>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..7f29c767b4e 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 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", - 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" + docs: "top-19 min-w-48 max-w-[25%] p-4 pe-0 gap-4", + card: cn( + "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: "top-28 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", + card: "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 text-sm", + card: "list-decimal 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 ( - + ) } diff --git a/src/components/Translatathon/ApplyNow.tsx b/src/components/Translatathon/ApplyNow.tsx index 391122bd0bf..db4f1d60974 100644 --- a/src/components/Translatathon/ApplyNow.tsx +++ b/src/components/Translatathon/ApplyNow.tsx @@ -1,5 +1,7 @@ import CalloutSSR from "@/components/CalloutSSR" +import { isDateReached } from "@/lib/utils/date" + import { Button } from "../ui/buttons/Button" import { Flex } from "../ui/flex" @@ -14,10 +16,7 @@ import DolphinImage from "@/public/images/translatathon/translatathon_dolphin.pn export const ApplyNow = () => { const { t } = useTranslation("page-translatathon") - const dateToday = new Date() - const deadline = new Date(APPLICATION_END_DATE) - - if (dateToday < deadline) { + if (isDateReached(APPLICATION_END_DATE)) { return (
        & - Pick & { - showDropdown?: boolean + Pick & { children: React.ReactNode + tocItems: TableOfContentsProps["items"] heroSection: React.ReactNode contributors: FileContributor[] lastEditLocaleTimestamp: string @@ -21,7 +23,6 @@ export const ContentLayout = ({ children, dropdownLinks, tocItems, - maxDepth, showDropdown = true, heroSection, contributors, @@ -33,14 +34,13 @@ export const ContentLayout = ({ {heroSection} - - {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 42ab973731b..c388677c06d 100644 --- a/src/layouts/Static.tsx +++ b/src/layouts/Static.tsx @@ -134,9 +134,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", diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts index 9aff7d97bfc..c5259b85ffb 100644 --- a/src/lib/utils/date.ts +++ b/src/lib/utils/date.ts @@ -17,3 +17,9 @@ export const formatDate = (date: string, locale: string = "en-US") => { year: "numeric", }) } + +export const isDateReached = (date: string) => { + const today = new Date() + const threshold = new Date(date) + return threshold >= today +}