Skip to content

Commit a2b9e03

Browse files
tannerlinsleytannerlinsley
committed
Better navigation
1 parent 942c430 commit a2b9e03

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+990
-1445
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"@visx/hierarchy": "^2.10.0",
5656
"@visx/responsive": "^2.10.0",
5757
"@vitejs/plugin-react": "^4.3.3",
58+
"@xstate/react": "^6.0.0",
5859
"algoliasearch": "^5.23.4",
5960
"cheerio": "^1.1.2",
6061
"cmdk": "^1.1.1",
@@ -99,6 +100,7 @@
99100
"valibot": "^1.2.0",
100101
"vite-bundle-analyzer": "^1.2.1",
101102
"vite-tsconfig-paths": "^5.0.1",
103+
"xstate": "^5.25.0",
102104
"zod": "^4.3.5",
103105
"zustand": "^4.5.2"
104106
},

‎pnpm-lock.yaml‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ClientAuth.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ErrorComponent } from '@tanstack/react-router'
22
import React from 'react'
33
import { Spinner } from '~/components/Spinner'
4-
import { SignInForm } from '~/routes/_libraries/login'
4+
import { SignInForm } from '~/routes/login'
55
import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
66
import { hasCapability } from '~/db/types'
77

‎src/components/DocsLayout.tsx‎

Lines changed: 95 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useLocalStorage } from '~/utils/useLocalStorage'
77
import { useClickOutside } from '~/hooks/useClickOutside'
88
import { last } from '~/utils/utils'
99
import type { ConfigSchema, MenuItem } from '~/utils/config'
10-
import { Framework } from '~/libraries'
10+
import { Framework, LibraryId } from '~/libraries'
1111
import { frameworkOptions } from '~/libraries/frameworks'
1212
import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
1313
import { twMerge } from 'tailwind-merge'
@@ -447,6 +447,7 @@ type DocsLayoutProps = {
447447
versions: string[]
448448
repo: string
449449
children: React.ReactNode
450+
isLandingPage?: boolean
450451
}
451452

452453
export function DocsLayout({
@@ -457,10 +458,11 @@ export function DocsLayout({
457458
frameworks,
458459
repo,
459460
children,
461+
isLandingPage = false,
460462
}: DocsLayoutProps) {
461463
const { libraryId, version } = useParams({
462-
from: '/$libraryId/$version/docs',
463-
})
464+
strict: false,
465+
}) as { libraryId: LibraryId; version: string }
464466
const { _splat } = useParams({ strict: false })
465467
const menuConfig = useMenuConfig({ config, frameworks, repo })
466468

@@ -736,100 +738,108 @@ export function DocsLayout({
736738
>
737739
{smallMenu}
738740
{largeMenu}
739-
<div className="flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative px-4 sm:px-8">
741+
<div
742+
className={twMerge(
743+
'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative',
744+
!isLandingPage && 'px-4 sm:px-8',
745+
)}
746+
>
740747
<div
741748
className={twMerge(
742-
`max-w-full min-w-0 flex flex-col justify-center w-full min-h-[88dvh] sm:min-h-0`,
743-
!isExample && !isFullWidth && 'mx-auto w-[900px]', // page width
749+
`max-w-full min-w-0 flex flex-col justify-center w-full`,
750+
!isLandingPage && 'min-h-[88dvh] sm:min-h-0',
751+
!isLandingPage &&
752+
!isExample &&
753+
!isFullWidth &&
754+
'mx-auto w-[900px]',
744755
)}
745756
>
746757
{children}
747758
</div>
748-
<AdGate>
749-
{/* <div className="flex border-t border-gray-500/20">
750-
<div className="py-4 px-2 xl:px-4 mx-auto max-w-full justify-center">
751-
<GamFooter popupPosition="top" />
752-
</div>
753-
</div> */}
754-
<div className="py-8 lg:py-12 xl:py-16 max-w-full">
755-
<GamHeader />
756-
</div>
757-
</AdGate>
758-
</div>
759-
<div
760-
className="w-full sm:w-[300px] shrink-0 sm:sticky
761-
sm:top-[var(--navbar-height)]
762-
"
763-
>
764-
<div className="sm:sticky sm:top-[var(--navbar-height)] ml-auto flex flex-wrap flex-row justify-center sm:flex-col gap-4 pb-4 max-w-full overflow-hidden">
765-
<div className="flex flex-wrap items-stretch border-l border-gray-500/20 rounded-bl-lg overflow-hidden w-full">
766-
<div className="w-full flex gap-2 justify-between border-b border-gray-500/20 px-3 py-2">
767-
<Link
768-
className="font-medium opacity-60 hover:opacity-100 text-xs"
769-
to="/partners"
770-
>
771-
Partners
772-
</Link>
773-
<a
774-
href="https://docs.google.com/document/d/1Hg2MzY2TU6U3hFEZ3MLe2oEOM3JS4-eByti3kdJU3I8"
775-
target="_blank"
776-
rel="noopener noreferrer"
777-
className="font-medium opacity-60 hover:opacity-100 text-xs hover:underline"
778-
>
779-
Become a Partner
780-
</a>
759+
{!isLandingPage && (
760+
<AdGate>
761+
<div className="py-8 lg:py-12 xl:py-16 max-w-full">
762+
<GamHeader />
781763
</div>
782-
{activePartners
783-
.filter((d) => d.id !== 'ui-dev')
784-
.map((partner) => {
785-
// flexBasis as percentage based on score, flexGrow to fill remaining row space
786-
const widthPercent = Math.round(partner.score * 100)
787-
788-
return (
789-
<a
790-
key={partner.name}
791-
href={partner.href}
792-
target="_blank"
793-
rel="noreferrer"
794-
className="flex items-center justify-center px-3 py-2
795-
border-r border-b border-gray-500/20
796-
hover:bg-gray-500/10 transition-colors duration-150 ease-out"
797-
style={{
798-
flexBasis: `${widthPercent}%`,
799-
flexGrow: 1,
800-
flexShrink: 0,
801-
}}
802-
>
803-
<div
764+
</AdGate>
765+
)}
766+
</div>
767+
{!isLandingPage && (
768+
<div
769+
className="w-full sm:w-[300px] shrink-0 sm:sticky
770+
sm:top-[var(--navbar-height)]
771+
"
772+
>
773+
<div className="sm:sticky sm:top-[var(--navbar-height)] ml-auto flex flex-wrap flex-row justify-center sm:flex-col gap-4 pb-4 max-w-full overflow-hidden">
774+
<div className="flex flex-wrap items-stretch border-l border-gray-500/20 rounded-bl-lg overflow-hidden w-full">
775+
<div className="w-full flex gap-2 justify-between border-b border-gray-500/20 px-3 py-2">
776+
<Link
777+
className="font-medium opacity-60 hover:opacity-100 text-xs"
778+
to="/partners"
779+
>
780+
Partners
781+
</Link>
782+
<a
783+
href="https://docs.google.com/document/d/1Hg2MzY2TU6U3hFEZ3MLe2oEOM3JS4-eByti3kdJU3I8"
784+
target="_blank"
785+
rel="noopener noreferrer"
786+
className="font-medium opacity-60 hover:opacity-100 text-xs hover:underline"
787+
>
788+
Become a Partner
789+
</a>
790+
</div>
791+
{activePartners
792+
.filter((d) => d.id !== 'ui-dev')
793+
.map((partner) => {
794+
// flexBasis as percentage based on score, flexGrow to fill remaining row space
795+
const widthPercent = Math.round(partner.score * 100)
796+
797+
return (
798+
<a
799+
key={partner.name}
800+
href={partner.href}
801+
target="_blank"
802+
rel="noreferrer"
803+
className="flex items-center justify-center px-3 py-2
804+
border-r border-b border-gray-500/20
805+
hover:bg-gray-500/10 transition-colors duration-150 ease-out"
804806
style={{
805-
width: Math.max(
806-
60 + Math.round(140 * partner.score),
807-
70,
808-
),
807+
flexBasis: `${widthPercent}%`,
808+
flexGrow: 1,
809+
flexShrink: 0,
809810
}}
810811
>
811-
<PartnerImage
812-
config={partner.image}
813-
alt={partner.name}
814-
/>
815-
</div>
816-
</a>
817-
)
818-
})}
819-
</div>
820-
<AdGate>
821-
<GamVrec1
822-
popupPosition="top"
823-
borderClassName="rounded-l-xl rounded-r-none"
824-
/>
825-
</AdGate>
826-
{libraryId === 'query' ? (
827-
<div className="p-4 bg-white/70 dark:bg-black/40 rounded-lg flex flex-col">
828-
<DocsCalloutQueryGG />
812+
<div
813+
style={{
814+
width: Math.max(
815+
60 + Math.round(140 * partner.score),
816+
70,
817+
),
818+
}}
819+
>
820+
<PartnerImage
821+
config={partner.image}
822+
alt={partner.name}
823+
/>
824+
</div>
825+
</a>
826+
)
827+
})}
829828
</div>
830-
) : null}
829+
<AdGate>
830+
<GamVrec1
831+
popupPosition="top"
832+
borderClassName="rounded-l-xl rounded-r-none"
833+
/>
834+
</AdGate>
835+
{libraryId === 'query' ? (
836+
<div className="p-4 bg-white/70 dark:bg-black/40 rounded-lg flex flex-col">
837+
<DocsCalloutQueryGG />
838+
</div>
839+
) : null}
840+
</div>
831841
</div>
832-
</div>
842+
)}
833843
</div>
834844
</DocNavigationContext.Provider>
835845
</WidthToggleContext.Provider>

0 commit comments

Comments
 (0)