Skip to content

Commit cda2c96

Browse files
tannerlinsleytannerlinsley
committed
better toc and partners spacing
1 parent 830ced4 commit cda2c96

File tree

9 files changed

+168
-367
lines changed

9 files changed

+168
-367
lines changed

‎src/components/Doc.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,15 +121,15 @@ export function Doc({
121121
>
122122
<div
123123
className={twMerge(
124-
'flex overflow-auto flex-col w-full p-4 lg:p-6',
124+
'flex overflow-auto flex-col w-full p-2 lg:p-4 xl:p-6',
125125
isTocVisible && 'pr-0!'
126126
)}
127127
>
128128
<AdGate>
129129
<GamLeader />
130130
</AdGate>
131131
{title ? (
132-
<div className="flex items-center justify-between gap-4 pr-4">
132+
<div className="flex items-center justify-between gap-4 pr-2 lg:pr-4">
133133
<DocTitle>{title}</DocTitle>
134134
<div className="flex items-center gap-4">
135135
<CopyMarkdownButton
@@ -162,7 +162,7 @@ export function Doc({
162162
className={twMerge(
163163
'prose prose-gray dark:prose-invert max-w-none',
164164
'[font-size:14px]',
165-
isTocVisible && 'pr-4 lg:pr-6',
165+
isTocVisible && 'pr-2 lg:pr-4 xl:pr-6',
166166
'styled-markdown-content'
167167
)}
168168
>
@@ -182,7 +182,7 @@ export function Doc({
182182
</div>
183183

184184
{isTocVisible && (
185-
<div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
185+
<div className="border-l border-gray-500/20 max-w-32 lg:max-w-36 xl:max-w-44 2xl:max-w-52 w-full hidden lg:block transition-all">
186186
<Toc
187187
headings={headings}
188188
activeHeadings={activeHeadings}

‎src/components/DocContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function DocContainer({
99
<div
1010
{...props}
1111
className={twMerge(
12-
'w-full max-w-full p-2 md:p-4 2xl:p-8',
12+
'w-full max-w-full p-2 xl:p-4 2xl:p-8',
1313
props.className
1414
)}
1515
>

‎src/components/DocsLayout.tsx‎

Lines changed: 20 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { Framework, getFrameworkOptions } from '~/libraries'
2323
import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
2424
import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
2525
import { twMerge } from 'tailwind-merge'
26-
import { partners } from '~/utils/partners'
26+
import { partners, PartnerImage } from '~/utils/partners'
2727
import { GamFooter, GamLeftRailSquare, GamRightRailSquare } from './Gam'
2828
import { AdGate } from '~/contexts/AdsContext'
2929
import { SearchButton } from './SearchButton'
@@ -329,7 +329,7 @@ export function DocsLayout({
329329

330330
const largeMenu = (
331331
<div
332-
className="bg-white/50 dark:bg-black/30 shadow-xl max-w-[300px] xl:max-w-[350px] 2xl:max-w-[400px]
332+
className="bg-white/50 dark:bg-black/30 shadow-xl max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]
333333
hidden lg:flex flex-col gap-4 sticky
334334
h-[calc(100dvh-var(--navbar-height))] lg:top-[var(--navbar-height)]
335335
z-20 dark:border-r
@@ -407,21 +407,28 @@ export function DocsLayout({
407407
</div>
408408
</div>
409409
<div
410-
className="lg:-ml-2 lg:pl-2 w-full lg:w-[300px] [@media(min-width:1600px)]:w-[350px] shrink-0 lg:sticky
410+
className="lg:-ml-2 lg:pl-2 w-full lg:w-[300px] [@media(min-width:1600px)]:w-[350px] [@media(min-width:1920px)]:w-[400px] shrink-0 lg:sticky
411411
lg:max-h-[calc(100dvh-var(--navbar-height))] lg:top-[var(--navbar-height)]
412412
lg:overflow-y-auto lg:overflow-x-hidden relative"
413413
>
414-
<div className="ml-auto flex flex-wrap flex-row justify-center lg:flex-col gap-4">
414+
<div className="ml-auto flex flex-wrap flex-row justify-center lg:flex-col gap-2">
415415
<div className="bg-white/70 dark:bg-black/40 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border border-r-0 border-t-0 rounded-bl-lg">
416416
<Link
417417
className="uppercase font-black text-center p-2 opacity-60 hover:opacity-100 text-sm"
418418
to="/partners"
419419
>
420420
Partners
421421
</Link>
422-
<div className="flex flex-wrap justify-center gap-x-2 gap-y-8 p-4">
422+
<div
423+
className="flex flex-wrap justify-center px-4 py-2
424+
gap-x-3
425+
gap-y-3
426+
[@media(min-width:1600px)]:gap-y-4
427+
[@media(min-width:1920px)]:gap-y-6
428+
"
429+
>
423430
{activePartners
424-
.filter((d) => d.sidebarImgLight)
431+
.filter((d) => d.id !== 'ui-dev')
425432
.map((partner) => {
426433
return (
427434
<a
@@ -432,99 +439,41 @@ export function DocsLayout({
432439
className="flex grow-1 justify-center"
433440
>
434441
<div
435-
className="z-0 flex items-center justify-center [@media(min-width:1600px)]:scale-[1.1]"
442+
className="z-0 flex items-center justify-center max-w-full"
436443
style={{
437444
width: Math.max(
438445
50 + Math.round(200 * partner.score),
439446
100
440447
),
441448
}}
442449
>
443-
{partner.homepageImg}
450+
<PartnerImage
451+
config={partner.image}
452+
alt={partner.name}
453+
/>
444454
</div>
445-
{/* <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/80">
446-
{partner.content}
447-
</div> */}
448455
</a>
449456
)
450457
})}
451458
</div>
452459
</div>
453-
{libraryId === 'query' ? (
454-
<div className="p-4 bg-white/70 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">
455-
<DocsCalloutQueryGG />
456-
</div>
457-
) : null}
458-
459460
<AdGate>
460461
<div className="bg-white/70 dark:bg-black/40 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-2 space-y-2 rounded-l-lg">
461462
<GamRightRailSquare />
462463
</div>
463464
</AdGate>
464-
465465
<AdGate>
466466
<div className="bg-white/70 dark:bg-black/40 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-2 space-y-2 rounded-l-lg">
467467
<GamLeftRailSquare />
468468
</div>
469469
</AdGate>
470-
471-
{/* <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">
472-
<Carbon />
473-
</div> */}
474-
475-
{libraryId !== 'query' ? (
470+
{libraryId === 'query' ? (
476471
<div className="p-4 bg-white/70 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">
477-
<DocsCalloutBytes />
472+
<DocsCalloutQueryGG />
478473
</div>
479474
) : null}
480475
</div>
481476
</div>
482-
{showBytes ? (
483-
<div className="w-[300px] max-w-[350px] fixed md:hidden top-1/2 right-2 z-30 -translate-y-1/2 shadow-lg print:hidden">
484-
<div className="bg-white dark:bg-gray-800 border border-black/10 dark:border-white/10 p-4 md:p-6 rounded-lg">
485-
{libraryId === 'query' ? (
486-
<DocsCalloutQueryGG />
487-
) : (
488-
<DocsCalloutBytes />
489-
)}
490-
<button
491-
className="absolute top-0 right-0 p-2 hover:text-red-500 opacity:30 hover:opacity-100"
492-
onClick={() => {
493-
setShowBytes(false)
494-
}}
495-
>
496-
<FaTimes />
497-
</button>
498-
</div>
499-
</div>
500-
) : (
501-
<button
502-
className="right-0 top-1/2 -translate-y-[50px] fixed lg:hidden print:hidden"
503-
onClick={() => {
504-
setShowBytes(true)
505-
}}
506-
>
507-
<div
508-
className="origin-bottom-right -rotate-90 text-xs bg-white dark:bg-gray-800 border border-gray-100
509-
hover:bg-rose-600 hover:text-white p-1 px-2 rounded-t-md shadow-md dark:border-0"
510-
>
511-
{libraryId === 'query' ? (
512-
<>
513-
<strong>
514-
<span role="img" aria-label="crystal ball">
515-
&#128302;
516-
</span>{' '}
517-
Skip the docs?
518-
</strong>
519-
</>
520-
) : (
521-
<>
522-
Subscribe to <strong>Bytes</strong>
523-
</>
524-
)}
525-
</div>
526-
</button>
527-
)}
528477
</div>
529478
</WidthToggleContext.Provider>
530479
)

‎src/components/PartnersGrid.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { partners as allPartners } from '~/utils/partners'
2+
import { partners as allPartners, PartnerImage } from '~/utils/partners'
33

44
type PartnerItem = (typeof allPartners)[number]
55

@@ -30,7 +30,7 @@ export function PartnersGrid({ partnersList }: PartnersGridProps) {
3030
width: Math.max(Math.round(100 + 300 * partner.score), 150),
3131
}}
3232
>
33-
{partner.homepageImg}
33+
<PartnerImage config={partner.image} alt={partner.name} />
3434
</div>
3535
</a>
3636
)

‎src/components/Toc.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { twMerge } from 'tailwind-merge'
33
import { HeadingData } from 'marked-gfm-heading-id'
44

55
const headingLevels: Record<number, string> = {
6-
1: 'pl-2',
7-
2: 'pl-2',
8-
3: 'pl-6',
9-
4: 'pl-10',
10-
5: 'pl-14',
11-
6: 'pl-16',
6+
1: 'pl-0.5 lg:pl-1 xl:pl-1.5 2xl:pl-2',
7+
2: 'pl-0.5 lg:pl-1 xl:pl-1.5 2xl:pl-2',
8+
3: 'pl-2 lg:pl-3 xl:pl-4 2xl:pl-6',
9+
4: 'pl-3 lg:pl-5 xl:pl-7 2xl:pl-10',
10+
5: 'pl-4 lg:pl-7 xl:pl-10 2xl:pl-14',
11+
6: 'pl-5 lg:pl-9 xl:pl-12 2xl:pl-16',
1212
}
1313

1414
type TocProps = {
@@ -26,12 +26,14 @@ export function Toc({
2626
}: TocProps) {
2727
return (
2828
<nav className="flex flex-col sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] divide-y divide-gray-500/20">
29-
<div className="p-2">
30-
<h3 className="text-[.9em] font-bold px-2">On this page</h3>
29+
<div className="p-0.5 lg:p-1 xl:p-1.5 2xl:p-2">
30+
<h3 className="text-[.8em] lg:text-[.825em] xl:text-[.875em] 2xl:text-[.9em] font-bold px-0.5 lg:px-1 xl:px-1.5 2xl:px-2">
31+
On this page
32+
</h3>
3133
</div>
3234
<ul
3335
className={twMerge(
34-
'p-2 flex flex-col overflow-y-auto gap-0.5 text-[.8em]'
36+
'p-0.5 lg:p-1 xl:p-1.5 2xl:p-2 flex flex-col overflow-y-auto gap-0.5 text-[.7em] lg:text-[.725em] xl:text-[.775em] 2xl:text-[.8em]'
3537
)}
3638
>
3739
{headings?.map((heading) => (

‎src/images/unkey-black.svg‎

Lines changed: 6 additions & 11 deletions
Loading

‎src/images/unkey-white.svg‎

Lines changed: 6 additions & 11 deletions
Loading

‎src/routes/_libraries/partners.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createFileRoute } from '@tanstack/react-router'
22
import { Footer } from '~/components/Footer'
3-
import { partners } from '~/utils/partners'
3+
import { partners, PartnerImage } from '~/utils/partners'
44
import { seo } from '~/utils/seo'
55
import { z } from 'zod'
66
import { Library } from '~/libraries'
@@ -374,7 +374,10 @@ function RouteComp() {
374374
>
375375
<div className="p-6">
376376
<div className="mb-4 h-24 flex items-center justify-center">
377-
{partner.homepageImg}
377+
<PartnerImage
378+
config={partner.image}
379+
alt={partner.name}
380+
/>
378381
</div>
379382
<h3 className="text-center text-xl font-semibold mb-4">
380383
{partner.name}

0 commit comments

Comments
 (0)