Skip to content

Commit 40b14f9

Browse files
SeanCassiereSeanCassiere
authored
Merge branch 'main' into fix/ui-improvements
2 parents ac46dd8 + 966ca6b commit 40b14f9

19 files changed

Lines changed: 1129 additions & 475 deletions

‎app/components/ClientOnlySearchButton.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎app/components/DocsLayout.tsx‎

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,16 @@ import {
1313
useNavigate,
1414
useParams,
1515
} from '@tanstack/react-router'
16-
import { OramaSearchBox } from '@orama/react-components'
17-
import { Carbon } from '~/components/Carbon'
1816
import { Select } from '~/components/Select'
1917
import { useLocalStorage } from '~/utils/useLocalStorage'
2018
import { DocsLogo } from '~/components/DocsLogo'
2119
import { last, capitalize } from '~/utils/utils'
2220
import type { SelectOption } from '~/components/Select'
2321
import type { ConfigSchema, MenuItem } from '~/utils/config'
2422
import { create } from 'zustand'
25-
import { searchBoxParams, searchButtonParams } from '~/components/Orama'
2623
import { Framework, getFrameworkOptions } from '~/libraries'
2724
import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
2825
import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
29-
import { ClientOnlySearchButton } from './ClientOnlySearchButton'
3026
import { twMerge } from 'tailwind-merge'
3127
import { partners } from '~/utils/partners'
3228
import { useThemeStore } from './ThemeToggle'
@@ -35,7 +31,7 @@ import {
3531
GadLeftRailSquare,
3632
GadRightRailSquare,
3733
} from './GoogleScripts'
38-
import { DocContainer } from './DocContainer'
34+
import { SearchButton } from './SearchButton'
3935

4036
// Let's use zustand to wrap the local storage logic. This way
4137
// we'll get subscriptions for free and we can use it in other
@@ -329,10 +325,6 @@ export function DocsLayout({
329325
const versionConfig = useVersionConfig({ versions })
330326
const menuConfig = useMenuConfig({ config, frameworks, repo })
331327

332-
const { mode: themeMode } = useThemeStore()
333-
334-
const oramaThemeMode = themeMode === 'auto' ? 'system' : themeMode
335-
336328
const matches = useMatches()
337329
const lastMatch = last(matches)
338330

@@ -509,12 +501,7 @@ export function DocsLayout({
509501
onSelect={versionConfig.onSelect}
510502
/>
511503
</div>
512-
<ClientOnlySearchButton
513-
{...searchButtonParams}
514-
colorScheme={oramaThemeMode}
515-
>
516-
Search
517-
</ClientOnlySearchButton>
504+
<SearchButton />
518505
{menuItems}
519506
</div>
520507
</details>
@@ -532,7 +519,7 @@ export function DocsLayout({
532519
{logo}
533520
</div>
534521
<div className="px-4">
535-
<ClientOnlySearchButton {...searchButtonParams} />
522+
<SearchButton />
536523
</div>
537524
<div className="flex gap-2 px-4">
538525
<Select
@@ -553,33 +540,13 @@ export function DocsLayout({
553540
<div className="flex-1 flex flex-col gap-4 px-4 whitespace-nowrap overflow-y-auto text-base pb-8">
554541
{menuItems}
555542
</div>
556-
<div className="mt-auto overflow-hidden h-0">
557-
<GadLeftRailSquare />
558-
</div>
559543
</div>
560544
)
561545

562546
return (
563547
<div
564548
className={`min-h-screen flex flex-col lg:flex-row w-full transition-all duration-300`}
565549
>
566-
<div className="fixed z-50">
567-
{mounted && (
568-
<OramaSearchBox
569-
{...searchBoxParams}
570-
searchParams={{
571-
threshold: 0,
572-
where: {
573-
category: {
574-
eq: capitalize(libraryId!) as string,
575-
},
576-
} as any,
577-
}}
578-
facetProperty={undefined}
579-
colorScheme={oramaThemeMode}
580-
/>
581-
)}
582-
</div>
583550
{smallMenu}
584551
{largeMenu}
585552
<div className="flex flex-col max-w-full min-w-0 w-full min-h-0 relative">
@@ -708,9 +675,13 @@ export function DocsLayout({
708675
</div>
709676

710677
<div className="bg-white dark:bg-black/40 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
711-
<Carbon />
678+
<GadLeftRailSquare />
712679
</div>
713680

681+
{/* <div className="bg-white dark:bg-black/40 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
682+
<Carbon />
683+
</div> */}
684+
714685
{libraryId !== 'query' ? (
715686
<div className="p-4 bg-white dark:bg-black/40 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
716687
<DocsCalloutBytes />

‎app/components/GoogleScripts.tsx‎

Lines changed: 86 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Link } from '@tanstack/react-router'
22
import React from 'react'
3+
import { twMerge } from 'tailwind-merge'
4+
import { getLibrary, libraries } from '~/libraries'
35

46
declare global {
57
interface Window {
@@ -87,8 +89,12 @@ function Gad({
8789
}, [])
8890

8991
return (
90-
<div {...props} className="grid [&>*]:col-start-1 [&>*]:row-start-1">
91-
<div id={adId} className="w-full flex-1 z-10"></div>
92+
<div
93+
{...props}
94+
className="grid [&>*]:col-start-1 [&>*]:row-start-1"
95+
id={adId}
96+
>
97+
{/* <div className="w-full flex-1 z-10"></div> */}
9298
<div className="flex items-center justify-center">{children}</div>
9399
</div>
94100
)
@@ -116,32 +122,93 @@ export function GadFooter() {
116122
)
117123
}
118124

119-
export function GadLeftRailSquare() {
120-
// return (
121-
// <Gad
122-
// adId={adSlots.leftRail.id}
123-
// style={{ maxWidth: '300px', aspectRatio: '300 / 250' }}
124-
// />
125-
// )
126-
127-
return null
128-
}
125+
const libraryHalfIndex = Math.ceil(libraries.length / 2)
129126

130127
export function GadRightRailSquare() {
128+
const randomLibrary = React.useMemo(() => {
129+
const sampledLibraries = libraries.slice(0, libraryHalfIndex)
130+
const seed = Math.floor(Date.now() / (1000 * 60 * 5)) // Change seed every 5 minutes
131+
return sampledLibraries[seed % sampledLibraries.length]
132+
}, [])
133+
131134
return (
132135
<Gad
133136
name="rightRail"
134137
className="[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
135138
>
136139
<Link
137-
to="/form"
138-
className="flex items-center gap-2 text-3xl font-black uppercase tracking-tighter h-[256px]"
140+
to={`/${randomLibrary.id}`}
141+
className="flex flex-col justify-center items-center h-[250px] gap-4 group"
142+
>
143+
<div className="flex items-center gap-2 text-3xl font-black uppercase tracking-tighter">
144+
<span>TanStack</span>
145+
<span
146+
className={twMerge(
147+
'text-transparent bg-clip-text bg-gradient-to-r',
148+
randomLibrary.colorFrom,
149+
randomLibrary.colorTo
150+
)}
151+
>
152+
{randomLibrary.name.replace('TanStack ', '')}
153+
</span>
154+
</div>
155+
<div className="text-sm text-center">{randomLibrary.description}</div>
156+
<div>
157+
<button
158+
className={twMerge(
159+
'text-sm px-2 py-1 rounded-lg text-white font-black uppercase tracking-tighter transition-transform duration-700 group-hover:scale-[1.2]',
160+
randomLibrary.bgStyle
161+
)}
162+
>
163+
Learn More
164+
</button>
165+
</div>
166+
</Link>
167+
</Gad>
168+
)
169+
}
170+
171+
export function GadLeftRailSquare() {
172+
const randomRemainingLibrary = React.useMemo(() => {
173+
const remainingLibraries = libraries.slice(libraryHalfIndex)
174+
const seed = Math.floor(Date.now() / (1000 * 60 * 5)) // Change seed every 5 minutes
175+
return remainingLibraries[seed % remainingLibraries.length]
176+
}, [])
177+
178+
return (
179+
<Gad
180+
name="leftRail"
181+
className="[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
182+
>
183+
<Link
184+
to={`/${randomRemainingLibrary.id}`}
185+
className="flex flex-col justify-center items-center h-[250px] gap-4 group"
139186
>
140-
<span>TanStack</span>
141-
<span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-yellow-600">
142-
Form
143-
</span>
144-
<span className="text-xs">V1</span>
187+
<div className="flex items-center gap-2 text-3xl font-black uppercase tracking-tighter">
188+
<span>TanStack</span>
189+
<span
190+
className={twMerge(
191+
'text-transparent bg-clip-text bg-gradient-to-r',
192+
randomRemainingLibrary.colorFrom,
193+
randomRemainingLibrary.colorTo
194+
)}
195+
>
196+
{randomRemainingLibrary.name.replace('TanStack ', '')}
197+
</span>
198+
</div>
199+
<div className="text-sm text-center">
200+
{randomRemainingLibrary.description}
201+
</div>
202+
<div>
203+
<button
204+
className={twMerge(
205+
'text-sm px-2 py-1 rounded-lg text-white font-black uppercase tracking-tighter transition-transform duration-700 group-hover:scale-[1.2]',
206+
randomRemainingLibrary.bgStyle
207+
)}
208+
>
209+
Learn More
210+
</button>
211+
</div>
145212
</Link>
146213
</Gad>
147214
)

‎app/components/Orama.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎app/components/SearchButton.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react'
2+
import { BiCommand } from 'react-icons/bi'
3+
import { MdSearch } from 'react-icons/md'
4+
import { twMerge } from 'tailwind-merge'
5+
import { useSearchContext } from '~/contexts/SearchContext'
6+
7+
interface SearchButtonProps {
8+
className?: string
9+
children?: React.ReactNode
10+
}
11+
12+
export function SearchButton({ className }: SearchButtonProps) {
13+
const { openSearch } = useSearchContext()
14+
15+
return (
16+
<button
17+
onClick={openSearch}
18+
className={twMerge(
19+
'flex items-center justify-between w-full p-2 text-left bg-gray-500/10 rounded-lg opacity-80 hover:opacity-100 transition-opacity duration-300',
20+
className
21+
)}
22+
>
23+
<div className="flex items-center gap-2 text-sm">
24+
<MdSearch className="text-lg" /> Search...
25+
</div>
26+
<div className="flex items-center bg-gray-500/10 rounded-lg px-2 py-1 gap-1 font-bold text-xs">
27+
<BiCommand /> + K
28+
</div>
29+
</button>
30+
)
31+
}

0 commit comments

Comments
 (0)