Skip to content

Commit 16ea30c

Browse files
hasparushasparus
committed
Render NavLinkCard inline
1 parent 9db204b commit 16ea30c

File tree

3 files changed

+96
-109
lines changed

3 files changed

+96
-109
lines changed

‎src/components/nav-links/learn-nav-link-card.tsx‎

Lines changed: 61 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -43,82 +43,78 @@ export function LearnNavLinkCard({
4343
const section = pageData?.section
4444

4545
return (
46-
<div
46+
<NextLink
47+
href={displayPost.route}
4748
className={clsx(
48-
"gql-container gql-section bg-neu-0 py-8 lg:py-16 xl:py-20 print:hidden",
49+
"gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50",
4950
className,
5051
)}
5152
>
52-
<NextLink
53-
href={displayPost.route}
54-
className="gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50"
53+
<div
54+
className={clsx(
55+
"pointer-events-none absolute inset-0 left-4 overflow-hidden",
56+
section === "getting-started" &&
57+
"[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
58+
section === "best-practices" &&
59+
"[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
60+
)}
61+
style={{
62+
maskImage: `url(${blurCorner.src})`,
63+
WebkitMaskImage: `url(${blurCorner.src})`,
64+
maskSize: "50% 50%",
65+
WebkitMaskSize: "50% 50%",
66+
maskPosition: "top right",
67+
WebkitMaskPosition: "top right",
68+
maskRepeat: "no-repeat",
69+
WebkitMaskRepeat: "no-repeat",
70+
}}
5571
>
56-
<div
57-
className={clsx(
58-
"pointer-events-none absolute inset-0 left-4 overflow-hidden",
59-
section === "getting-started" &&
60-
"[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
61-
section === "best-practices" &&
62-
"[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
72+
<StripesDecoration
73+
oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
74+
stripeWidth="12px"
75+
/>
76+
</div>
77+
78+
<div className="flex flex-1 flex-col gap-4">
79+
<p className="typography-menu text-pri-base dark:text-pri-light">
80+
{isNext ? "next lesson" : "previous lesson"}
81+
</p>
82+
83+
<div className="flex flex-col gap-4 text-neu-900">
84+
<h2 className="typography-h2">{displayPost.title}</h2>
85+
{pageData?.description && (
86+
<p className="typography-body-md max-w-[560px]">
87+
{pageData.description}
88+
</p>
6389
)}
64-
style={{
65-
maskImage: `url(${blurCorner.src})`,
66-
WebkitMaskImage: `url(${blurCorner.src})`,
67-
maskSize: "50% 50%",
68-
WebkitMaskSize: "50% 50%",
69-
maskPosition: "top right",
70-
WebkitMaskPosition: "top right",
71-
maskRepeat: "no-repeat",
72-
WebkitMaskRepeat: "no-repeat",
73-
}}
74-
>
75-
<StripesDecoration
76-
oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
77-
stripeWidth="12px"
78-
/>
7990
</div>
8091

81-
<div className="flex flex-1 flex-col gap-6">
82-
<p className="typography-menu text-pri-base dark:text-pri-light">
83-
{isNext ? "next lesson" : "previous lesson"}
84-
</p>
92+
<div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
93+
<span className="typography-button text-neu-0">
94+
Go to {isNext ? "next" : "previous"} lesson
95+
</span>
96+
</div>
97+
</div>
8598

86-
<div className="flex flex-col gap-4 text-neu-900">
87-
<h2 className="typography-h2">{displayPost.title}</h2>
88-
{pageData?.description && (
89-
<p className="typography-body-lg max-w-[560px]">
90-
{pageData.description}
91-
</p>
99+
{pageData?.icon && (
100+
<div className="relative flex size-[222px] bg-neu-0">
101+
<div
102+
className={clsx(
103+
"shrink-0 items-center justify-center p-12",
104+
section === "getting-started" &&
105+
"bg-pri-lightest dark:bg-pri-lighter/5",
106+
section === "best-practices" &&
107+
"bg-sec-lighter dark:bg-sec-lighter/10",
92108
)}
93-
</div>
94-
95-
<div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
96-
<span className="typography-button text-neu-0">
97-
Go to {isNext ? "next" : "previous"} lesson
98-
</span>
109+
>
110+
<img
111+
src={pageData.icon}
112+
alt=""
113+
className="size-full object-contain"
114+
/>
99115
</div>
100116
</div>
101-
102-
{pageData?.icon && (
103-
<div className="relative flex size-[222px] bg-neu-0">
104-
<div
105-
className={clsx(
106-
"shrink-0 items-center justify-center p-12",
107-
section === "getting-started" &&
108-
"bg-pri-lightest dark:bg-pri-lighter/5",
109-
section === "best-practices" &&
110-
"bg-sec-lighter dark:bg-sec-lighter/10",
111-
)}
112-
>
113-
<img
114-
src={pageData.icon}
115-
alt=""
116-
className="size-full object-contain"
117-
/>
118-
</div>
119-
</div>
120-
)}
121-
</NextLink>
122-
</div>
117+
)}
118+
</NextLink>
123119
)
124120
}

‎src/components/nextra-mdx-wrapper.tsx‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -50,47 +50,28 @@ export function NextraMdxWrapper({
5050
</nav>
5151
)
5252

53-
const isLearnPage = config.filePath.includes("/learn/")
54-
const showLearnNavLinkCard =
55-
activeType !== "page" && themeContext.pagination && isLearnPage
56-
5753
return (
58-
<>
59-
<div
60-
className={clsx(
61-
"mx-auto flex pb-8",
62-
themeContext.layout !== "raw" && "max-w-[90rem]",
63-
!showLearnNavLinkCard && "xl:pb-12",
64-
)}
65-
>
66-
<Sidebar
67-
docsDirectories={docsDirectories}
68-
fullDirectories={directories}
69-
toc={toc}
70-
asPopover={config.hideSidebar}
71-
includePlaceholder={themeContext.layout === "default"}
72-
/>
73-
{tocEl}
74-
<SkipNavContent />
75-
<Body isLearnPage={isLearnPage}>{children}</Body>
76-
</div>
77-
{showLearnNavLinkCard && (
78-
<LearnNavLinkCard
79-
flatDocsDirectories={config.normalizePagesResult.flatDocsDirectories}
80-
currentIndex={config.normalizePagesResult.activeIndex}
81-
/>
54+
<div
55+
className={clsx(
56+
"mx-auto flex pb-8 xl:pb-12",
57+
themeContext.layout !== "raw" && "max-w-[90rem]",
8258
)}
83-
</>
59+
>
60+
<Sidebar
61+
docsDirectories={docsDirectories}
62+
fullDirectories={directories}
63+
toc={toc}
64+
asPopover={config.hideSidebar}
65+
includePlaceholder={themeContext.layout === "default"}
66+
/>
67+
{tocEl}
68+
<SkipNavContent />
69+
<Body>{children}</Body>
70+
</div>
8471
)
8572
}
8673

87-
function Body({
88-
children,
89-
isLearnPage,
90-
}: {
91-
children: ReactNode
92-
isLearnPage: boolean
93-
}): ReactElement {
74+
function Body({ children }: { children: ReactNode }): ReactElement {
9475
const config = useConfig()
9576
const themeConfig = useThemeConfig()
9677
const mounted = useMounted()
@@ -121,18 +102,27 @@ function Body({
121102
<div className="mt-16" />
122103
)
123104

105+
const isLearnPage = config.filePath.includes("/learn/")
106+
124107
const content = (
125108
<>
126109
{renderComponent(themeContext.topContent)}
127110
{children}
128111
{gitTimestampEl}
129112
{renderComponent(themeContext.bottomContent)}
130-
{activeType !== "page" && themeContext.pagination && !isLearnPage && (
131-
<ArrowNavLinks
132-
flatDocsDirectories={flatDocsDirectories}
133-
currentIndex={activeIndex}
134-
/>
135-
)}
113+
{activeType !== "page" &&
114+
themeContext.pagination &&
115+
(isLearnPage ? (
116+
<LearnNavLinkCard
117+
flatDocsDirectories={flatDocsDirectories}
118+
currentIndex={activeIndex}
119+
/>
120+
) : (
121+
<ArrowNavLinks
122+
flatDocsDirectories={flatDocsDirectories}
123+
currentIndex={activeIndex}
124+
/>
125+
))}
136126
</>
137127
)
138128

@@ -159,7 +149,8 @@ function Body({
159149
<article
160150
className={clsx(
161151
classes.main,
162-
"nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]",
152+
"nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pr-[calc(env(safe-area-inset-right)-1.5rem)]",
153+
isLearnPage ? "pb-4" : "pb-8",
163154
themeContext.typesetting === "article" &&
164155
"nextra-body-typesetting-article",
165156
)}

‎src/components/sidebar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,7 @@ export function SidebarFooter({
512512
return (
513513
<div
514514
className={cn(
515-
"nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:-ml-1 xl:mr-0 xl:px-0",
515+
"nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:ml-0.5 xl:mr-0 xl:px-0",
516516
showSidebar
517517
? hasI18n && "justify-end"
518518
: "flex-col flex-wrap justify-center py-4",

0 commit comments

Comments
 (0)