gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-21 10:03:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement header link style (#2513)

Browse Source
This commit is contained in:
Greg Bergé
2024-10-09 15:25:47 +02:00
committed by GitHub
parent 133c3e7c0a
commit 32e4193557
12 changed files with 131 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/.env.example
+3
View File
@@ -25,3 +25,6 @@
### Sentry ###
# SENTRY_DSN=xxx
### Silent logs
# SILENT=true
packages/gitbook/e2e/pages.spec.ts
+26 -1
View File
@@ -18,6 +18,7 @@ interface Test {
run?: (page: Page) => Promise<unknown>; // The test to run
fullPage?: boolean; // Whether the test should be fullscreened during testing
screenshot?: false; // Should a screenshot be stored
only?: boolean; // Only run this test
}
interface TestsCase {
@@ -452,6 +453,29 @@ const testCases: TestsCase[] = [
}),
run: waitForCookiesDialog,
},
{
name: 'With header buttons',
url: getCustomizationURL({
header: {
preset: CustomizationHeaderPreset.Default,
links: [
{
title: 'Secondary button',
to: { kind: 'url', url: 'https://www.gitbook.com' },
// @ts-ignore Remove once we upgrade to the latest version of the API
style: 'button-secondary',
},
{
title: 'Primary button',
to: { kind: 'url', url: 'https://www.gitbook.com' },
// @ts-ignore Remove once we upgrade to the latest version of the API
style: 'button-primary',
},
],
},
}),
run: waitForCookiesDialog,
},
],
},
{
@@ -744,7 +768,8 @@ const testCases: TestsCase[] = [
for (const testCase of testCases) {
test.describe(testCase.name, () => {
for (const testEntry of testCase.tests) {
test(testEntry.name, async ({ page, baseURL }) => {
const testFn = testEntry.only ? test.only : test;
testFn(testEntry.name, async ({ page, baseURL }) => {
const contentUrl = new URL(testEntry.url, testCase.baseUrl);
const url = getContentTestURL(contentUrl.toString(), baseURL);
await page.goto(url);
packages/gitbook/src/app/(space)/layout.tsx
+2
View File
@@ -98,6 +98,7 @@ export default async function SpaceRootLayout(props: { children: React.ReactNode
headerTheme.backgroundColor.light,
)}
${generateColorVariable('header-link', headerTheme.linkColor.light)}
${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.light as string, ['#000', '#fff']))}
}
.dark {
${generateColorVariable(
@@ -127,6 +128,7 @@ export default async function SpaceRootLayout(props: { children: React.ReactNode
headerTheme.backgroundColor.dark,
)}
${generateColorVariable('header-link', headerTheme.linkColor.dark)}
${generateColorVariable('header-button-text', colorContrast(headerTheme.linkColor.dark as string, ['#000', '#fff']))}
}
`}</style>
</head>
packages/gitbook/src/components/Header/Dropdown.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function Dropdown<E extends HTMLElement>(props: {
const dropdownId = useId();
return (
<div className={tcls('group/dropdown', 'relative')}>
<div className={tcls('group/dropdown', 'relative flex')}>
{button({
id: dropdownId,
tabIndex: 0,
packages/gitbook/src/components/Header/HeaderLink.tsx
+75 -35
View File
@@ -5,6 +5,7 @@ import {
CustomizationHeaderPreset,
SiteCustomizationSettings,
} from '@gitbook/api';
import assertNever from 'assert-never';
import { ContentRefContext, resolveContentRef } from '@/lib/references';
import { tcls } from '@/lib/tailwind';
@@ -16,56 +17,95 @@ import {
DropdownMenu,
DropdownMenuItem,
} from './Dropdown';
import { Link } from '../primitives';
import { Button, Link } from '../primitives';
// @TODO Remove it once we have the proper types in API
type CustomizationHeaderLinkWithStyle = CustomizationHeaderLink & {
style?: 'link' | 'button-primary' | 'button-secondary';
};
export async function HeaderLink(props: {
context: ContentRefContext;
link: CustomizationHeaderLink;
link: CustomizationHeaderLinkWithStyle;
customization: CustomizationSettings | SiteCustomizationSettings;
}) {
const { context, link, customization } = props;
const isCustomizationCustom = customization.header.preset === CustomizationHeaderPreset.Custom;
const isCustomizationDefault =
customization.header.preset === CustomizationHeaderPreset.Default;
const target = await resolveContentRef(link.to, context);
if (!target) {
return null;
}
const renderLink = (linkProps: DropdownButtonProps<HTMLAnchorElement>) => (
<Link
{...linkProps}
href={target.href}
className={tcls(
'overflow-hidden',
'text-sm',
'flex',
'flex-row',
'items-center',
'whitespace-nowrap',
'lg:text-base',
const headerPreset = customization.header.preset;
!isCustomizationDefault
? ['text-header-link-500']
: ['text-dark/8', 'dark:text-light/8', 'dark:hover:text-light'],
target.active
? [
isCustomizationCustom
? ['shadow-header-link-500/7']
: ['shadow-dark/6', 'dark:shadow-light/7'],
]
: ['hover:text-header-link-400'],
)}
>
<span className={tcls('truncate')}> {link.title}</span>
const renderLink = (linkProps: DropdownButtonProps<HTMLAnchorElement>) => {
const linkStyle = link.style ?? 'link';
{link.links && link.links.length > 0 ? <DropdownChevron /> : null}
</Link>
);
switch (linkStyle) {
case 'button-secondary':
case 'button-primary': {
const variant = (() => {
switch (linkStyle) {
case 'button-secondary':
return 'secondary';
case 'button-primary':
return 'primary';
default:
assertNever(linkStyle);
}
})();
return (
<Button
href={target.href}
variant={variant}
className={tcls(
{
'button-primary':
headerPreset === CustomizationHeaderPreset.Custom ||
headerPreset === CustomizationHeaderPreset.Bold
? tcls(
'bg-header-link-500 hover:bg-text-header-link-300 text-header-button-text',
'dark:bg-header-link-500 dark:hover:bg-text-header-link-300 dark:text-header-button-text',
)
: null,
'button-secondary': tcls(
'dark:bg-transparent dark:hover:bg-transparent',
'ring-header-link-500 hover:ring-header-link-300 dark:ring-header-link-500 dark:hover:ring-header-link-300 text-header-link-500 dark:text-header-link-500',
),
}[linkStyle],
)}
>
{link.title}
</Button>
);
}
case 'link': {
return (
<Link
{...linkProps}
href={target.href}
className={tcls(
'overflow-hidden',
'text-sm lg:text-base',
'flex flex-row items-center',
'whitespace-nowrap',
'hover:text-header-link-400 dark:hover:text-light',
headerPreset === CustomizationHeaderPreset.Default
? ['text-dark/8', 'dark:text-light/8']
: ['text-header-link-500 hover:text-header-link-400'],
)}
>
<span className={tcls('truncate')}>{link.title}</span>
{link.links && link.links.length > 0 ? <DropdownChevron /> : null}
</Link>
);
}
default:
assertNever(linkStyle);
}
};
if (link.links && link.links.length > 0) {
return (
packages/gitbook/src/components/Header/HeaderLinks.tsx
+7 -15
View File
@@ -10,21 +10,13 @@ interface HeaderLinksProps {
export async function HeaderLinks({ children }: HeaderLinksProps) {
return (
<div className={tcls('w-full', 'h-full', 'inline-flex', 'tracking-[-0.02em]')}>
<div
className={`${styles.containerHeaderlinks} ${tcls(
'flex',
'w-full',
'h-full',
'justify-end',
'gap-x-2.5',
'mr-2.5',
'lg:gap-x-5',
'*:max-w-56',
)}`}
>
{children}
</div>
<div
className={tcls(
styles.containerHeaderlinks,
'flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56',
)}
>
{children}
</div>
);
}
packages/gitbook/src/components/Header/headerLinks.module.css
-8
View File
@@ -3,9 +3,6 @@
container-name: headerlinks;
}
.containerHeaderlinks > * {
display: flex;
}
.linkEllipsis {
display: none;
& div > a {
@@ -79,8 +76,3 @@
}
}
}
@container headerlinks ( width > 900px ) {
.containerHeaderlinks > *:not(.linkEllipsis) {
display: flex;
}
}
packages/gitbook/src/components/primitives/Button.tsx
+2
View File
@@ -51,6 +51,7 @@ export function Button({
['text-xs', 'px-3 py-2'];
const domClassName = tcls(
'inline-block',
'rounded-md',
'straight-corners:rounded-none',
'place-self-start',
@@ -58,6 +59,7 @@ export function Button({
'ring-inset',
'grow-0',
'shrink-0',
'truncate',
variantClasses,
sizeClasses,
className,
packages/gitbook/src/lib/cache/cache.ts
Vendored
+9 -7
View File
@@ -197,13 +197,15 @@ export function cache<Args extends any[], Result>(
const totalDuration = now() - timeStart;
// Log
console.log(
`cache: ${key} ${cacheStatus}${
cacheStatus === 'hit' ? ` on ${backendName}` : ''
} in total ${totalDuration.toFixed(0)}ms, fetch in ${fetchDuration.toFixed(
0,
)}ms, read in ${readCacheDuration.toFixed(0)}ms`,
);
if (process.env.SILENT !== 'true') {
console.log(
`cache: ${key} ${cacheStatus}${
cacheStatus === 'hit' ? ` on ${backendName}` : ''
} in total ${totalDuration.toFixed(0)}ms, fetch in ${fetchDuration.toFixed(
0,
)}ms, read in ${readCacheDuration.toFixed(0)}ms`,
);
}
if (savedEntry.meta.revalidatesAt && savedEntry.meta.revalidatesAt < Date.now()) {
// Revalidate in the background
packages/gitbook/src/lib/references.tsx
+1 -1
View File
@@ -213,7 +213,7 @@ export async function resolveContentRef(
return {
href: targetSpace.urls.published ?? targetSpace.urls.app,
text: targetSpace.title,
active: true,
active: contentRef.space === space.id,
};
}
packages/gitbook/src/lib/tracing.ts
+4 -2
View File
@@ -43,8 +43,10 @@ export async function trace<T>(
span.setAttribute('error', true);
throw error;
} finally {
let end = now();
console.log(`trace ${completeName} ${end - start}ms`, attributes);
if (process.env.SILENT !== 'true') {
let end = now();
console.log(`trace ${completeName} ${end - start}ms`, attributes);
}
}
},
);
packages/gitbook/tailwind.config.ts
+1
View File
@@ -77,6 +77,7 @@ const config: Config = {
'header-background': generateVarShades('header-background'),
'header-link': generateVarShades('header-link'),
'header-button-text': generateVarShades('header-button-text'),
light: {
1: `color-mix(in srgb, var(--light-1), transparent calc(100% - 100% * <alpha-value>))`, //1 99%