mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-16 07:35:16 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Zeno Kapitein
|
00bb7d4220 | ||
|
Zeno Kapitein
|
259a8aa7ac | ||
|
Zeno Kapitein
|
150269a6ee |
@@ -45,27 +45,27 @@ export function Header(props: {
|
||||
'w-full',
|
||||
'flex-none',
|
||||
'shadow-thinbottom',
|
||||
'dark:shadow-light/2',
|
||||
withTopHeader ? null : 'lg:hidden',
|
||||
'lg:z-10',
|
||||
'dark:shadow-light/1',
|
||||
`${isCustomizationDefault || !withTopHeader ? 'bg-light' : 'bg-header-background'}`,
|
||||
`${
|
||||
isCustomizationDefault || !withTopHeader
|
||||
? 'dark:bg-dark'
|
||||
: 'bg-header-background'
|
||||
}`,
|
||||
isCustomizationDefault || !withTopHeader
|
||||
? ['bg-light', 'dark:bg-dark']
|
||||
: ['bg-header-background', 'bg-header-background'],
|
||||
'text-sm',
|
||||
'bg-opacity-9',
|
||||
'dark:bg-opacity-9',
|
||||
'backdrop-blur-lg',
|
||||
'contrast-more:bg-opacity-11',
|
||||
'contrast-more:dark:bg-opacity-11',
|
||||
)}
|
||||
>
|
||||
<div className={tcls('scroll-nojump')}>
|
||||
<div
|
||||
className={tcls(
|
||||
'gap-4',
|
||||
'grid',
|
||||
'grid-flow-col',
|
||||
'auto-cols-[auto_auto_1fr_auto]',
|
||||
'lg:gap-8',
|
||||
'flex',
|
||||
'h-16',
|
||||
'items-center',
|
||||
'align-center',
|
||||
'justify-between',
|
||||
'w-full',
|
||||
CONTAINER_STYLE,
|
||||
@@ -109,21 +109,21 @@ export function Header(props: {
|
||||
style={
|
||||
!isCustomizationDefault && withTopHeader
|
||||
? [
|
||||
'bg-header-link/3',
|
||||
'shadow-sm',
|
||||
'ring-header-link/3',
|
||||
'[&>span]:!text-header-link/7',
|
||||
'[&_svg]:text-header-link',
|
||||
'contrast-more:bg-transparent',
|
||||
'contrast-more:ring-header-link',
|
||||
'contrast-more:[&>span]:!text-header-link',
|
||||
'dark:bg-header-link/3',
|
||||
'dark:ring-header-link/3',
|
||||
'[&>span]:!text-header-link/7',
|
||||
'dark:[&_svg]:text-header-link',
|
||||
'dark:contrast-more:bg-transparent',
|
||||
'dark:contrast-more:ring-header-link',
|
||||
'dark:contrast-more:[&>span]:!text-header-link',
|
||||
// 'bg-header-link/3',
|
||||
// 'shadow-sm',
|
||||
// 'ring-header-link/3',
|
||||
// '[&>span]:!text-header-link/7',
|
||||
// '[&_svg]:text-header-link',
|
||||
// 'contrast-more:bg-transparent',
|
||||
// 'contrast-more:ring-header-link',
|
||||
// 'contrast-more:[&>span]:!text-header-link',
|
||||
// 'dark:bg-header-link/3',
|
||||
// 'dark:ring-header-link/3',
|
||||
// '[&>span]:!text-header-link/7',
|
||||
// 'dark:[&_svg]:text-header-link',
|
||||
// 'dark:contrast-more:bg-transparent',
|
||||
// 'dark:contrast-more:ring-header-link',
|
||||
// 'dark:contrast-more:[&>span]:!text-header-link',
|
||||
]
|
||||
: null
|
||||
}
|
||||
@@ -142,7 +142,7 @@ export function Header(props: {
|
||||
{sections ? (
|
||||
<div
|
||||
className={tcls(
|
||||
'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark mt-0.5',
|
||||
'w-full',
|
||||
// Handle long section tabs, particularly on smaller screens.
|
||||
'overflow-x-auto hide-scroll',
|
||||
)}
|
||||
|
||||
@@ -85,14 +85,18 @@ export async function HeaderLink(props: {
|
||||
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'],
|
||||
? [
|
||||
'text-dark/8',
|
||||
'dark:text-light/8',
|
||||
'hover:text-primary',
|
||||
'dark:hover:text-primary',
|
||||
]
|
||||
: ['text-header-link hover:text-header-link/8'],
|
||||
)}
|
||||
>
|
||||
<span className={tcls('truncate')}>{link.title}</span>
|
||||
|
||||
@@ -10,7 +10,7 @@ import React from 'react';
|
||||
import { ContentRefContext, resolveContentRef } from '@/lib/references';
|
||||
import { tcls } from '@/lib/tailwind';
|
||||
|
||||
import { Dropdown, DropdownMenu, DropdownMenuItem } from './Dropdown';
|
||||
import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
|
||||
import styles from './headerLinks.module.css';
|
||||
|
||||
/**
|
||||
@@ -30,15 +30,23 @@ export function HeaderLinkMore(props: {
|
||||
const renderButton = () => (
|
||||
<button
|
||||
className={tcls(
|
||||
'px-1',
|
||||
!isCustomizationDefault
|
||||
? ['text-header-link-500']
|
||||
: ['text-dark/8', 'dark:text-light/8', 'dark:hover:text-light'],
|
||||
'hover:text-header-link-400',
|
||||
isCustomizationDefault
|
||||
? [
|
||||
'text-dark/8',
|
||||
'dark:text-light/8',
|
||||
'hover:text-primary',
|
||||
'dark:hover:text-primary',
|
||||
]
|
||||
: ['text-header-link', 'hover:text-header-link/8'],
|
||||
'flex',
|
||||
'gap-1',
|
||||
'items-center',
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">{label}</span>
|
||||
<Icon icon="ellipsis" className={tcls('opacity-6', 'size-3', 'ms-1')} />
|
||||
<Icon icon="ellipsis" className={tcls('size-4')} />
|
||||
<DropdownChevron />
|
||||
{/* <Icon icon="chevron-down" className={tcls('size-3')} /> */}
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
|
||||
<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 z-20',
|
||||
'w-full flex justify-end items-center gap-x-4 lg:gap-x-8 *:max-w-56 z-20',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Icon } from '@gitbook/icons';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { useLanguage, tString } from '@/intl/client';
|
||||
@@ -26,7 +27,22 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
<motion.button
|
||||
layout="position"
|
||||
layoutId="searchbox"
|
||||
transition={{
|
||||
layout: {
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
duration: 0.2,
|
||||
},
|
||||
}}
|
||||
whileHover={{
|
||||
scale: 1.02,
|
||||
}}
|
||||
whileTap={{
|
||||
scale: 0.98,
|
||||
}}
|
||||
onClick={onClick}
|
||||
aria-label={tString(language, 'search')}
|
||||
className={tcls(
|
||||
@@ -35,47 +51,57 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
|
||||
'flex-row',
|
||||
'justify-center',
|
||||
'items-center',
|
||||
'px-2',
|
||||
'gap-3',
|
||||
'text-dark/7',
|
||||
'min-h-[2.5rem]',
|
||||
'w-[2.5rem]',
|
||||
'w-full',
|
||||
'p-2',
|
||||
'gap-2',
|
||||
|
||||
'bg-light',
|
||||
'dark:bg-dark',
|
||||
|
||||
'ring-1',
|
||||
'ring-dark/1',
|
||||
'dark:ring-light/2',
|
||||
|
||||
'shadow',
|
||||
'dark:shadow-none',
|
||||
|
||||
'text-dark/6',
|
||||
'dark:text-light/6',
|
||||
|
||||
'rounded-lg',
|
||||
'straight-corners:rounded-none',
|
||||
'bg-dark/2',
|
||||
'transition-colors',
|
||||
'transition-opacity',
|
||||
'ease-out',
|
||||
'hover:opacity-8',
|
||||
'ring-1',
|
||||
'ring-inset',
|
||||
'ring-dark/1',
|
||||
|
||||
'contrast-more:ring-dark',
|
||||
'contrast-more:bg-light',
|
||||
'contrast-more:text-dark',
|
||||
'dark:bg-light/1',
|
||||
'dark:ring-light/1',
|
||||
'dark:text-light/7',
|
||||
'contrast-more:dark:ring-light',
|
||||
'contrast-more:dark:bg-dark',
|
||||
'contrast-more:dark:text-light',
|
||||
'[&>p]:hidden',
|
||||
'[&>span]:hidden',
|
||||
|
||||
'transition-[box-shadow,color,background-color]',
|
||||
'hover:shadow-md',
|
||||
'dark:hover:bg-light/1',
|
||||
'hover:ring-dark/2',
|
||||
'hover:text-dark/8',
|
||||
'dark:hover:ring-light/4',
|
||||
'dark:hover:text-light/8',
|
||||
|
||||
'active:shadow-sm',
|
||||
|
||||
// '[&>p]:hidden',
|
||||
// '[&>span]:hidden',
|
||||
'md:justify-start',
|
||||
'md:[&>p]:flex',
|
||||
'md:[&>span]:flex',
|
||||
'flex',
|
||||
// 'md:[&>p]:flex',
|
||||
// 'md:[&>span]:flex',
|
||||
'md:w-full',
|
||||
'md:px-3.5',
|
||||
'text-base',
|
||||
style,
|
||||
)}
|
||||
>
|
||||
<div className={tcls('text-dark/7', 'pt-1.5', 'pb-2', 'dark:text-light/7')}>
|
||||
<Icon icon="magnifying-glass" className={tcls('shrink-0', 'size-4')} />
|
||||
<Icon icon="magnifying-glass" className={tcls('text-dark/8', 'dark:text-light/8', 'shrink-0', 'size-4')} />
|
||||
<div className={tcls('w-full', 'hidden', 'md:block', 'text-left')}>
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
<Shortcut />
|
||||
</button>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -96,7 +122,7 @@ const Shortcut = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<span
|
||||
<div
|
||||
className={tcls(
|
||||
'hidden',
|
||||
'md:inline',
|
||||
@@ -105,11 +131,12 @@ const Shortcut = () => {
|
||||
'text-dark/5',
|
||||
'contrast-more:text-dark',
|
||||
'dark:text-light/5',
|
||||
'whitespace-nowrap',
|
||||
'contrast-more:dark:text-light',
|
||||
`[font-feature-settings:"calt",_"case"]`,
|
||||
)}
|
||||
>
|
||||
{operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -56,9 +56,9 @@ export function SearchModal(props: SearchModalProps) {
|
||||
};
|
||||
}, [isSearchOpened]);
|
||||
|
||||
if (state === null) {
|
||||
return null;
|
||||
}
|
||||
// if (state === null) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
const onChangeQuery = (newQuery: SearchState) => {
|
||||
setSearchState(newQuery);
|
||||
@@ -72,62 +72,72 @@ export function SearchModal(props: SearchModalProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
role="dialog"
|
||||
className={tcls(
|
||||
'flex',
|
||||
'items-start',
|
||||
'justify-center',
|
||||
'fixed',
|
||||
'inset-0',
|
||||
'bg-dark/4',
|
||||
'backdrop-blur-2xl',
|
||||
'opacity-[1]',
|
||||
'z-30',
|
||||
'px-4',
|
||||
'pt-4',
|
||||
'dark:bg-dark/8',
|
||||
'md:pt-[min(8vw,_6rem)]',
|
||||
)}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{askState?.type === 'loading' ? (
|
||||
<motion.div
|
||||
key="loading"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
className={tcls(
|
||||
'w-[100vw]',
|
||||
'h-[100vh]',
|
||||
'fixed',
|
||||
'inset-0',
|
||||
'z-10',
|
||||
'pointer-events-none',
|
||||
)}
|
||||
>
|
||||
<LoadingPane
|
||||
gridStyle={['h-[100vh]', 'aspect-auto', 'top-[-30%]']}
|
||||
pulse
|
||||
tile={96}
|
||||
style={['grid']}
|
||||
/>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<SearchModalBody
|
||||
{...props}
|
||||
state={state}
|
||||
onChangeQuery={onChangeQuery}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<AnimatePresence>
|
||||
{state !== null ? (
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
}}
|
||||
role="dialog"
|
||||
className={tcls(
|
||||
'fixed',
|
||||
'inset-0',
|
||||
'bg-dark/4',
|
||||
'backdrop-blur-2xl',
|
||||
'z-30',
|
||||
'px-4',
|
||||
'pt-4',
|
||||
'dark:bg-dark/8',
|
||||
'md:pt-[min(8vh,6rem)]',
|
||||
)}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{askState?.type === 'loading' ? (
|
||||
<motion.div
|
||||
key="loading"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
className={tcls(
|
||||
'w-screen',
|
||||
'h-screen',
|
||||
'fixed',
|
||||
'inset-0',
|
||||
'z-10',
|
||||
'pointer-events-none',
|
||||
)}
|
||||
>
|
||||
<LoadingPane
|
||||
gridStyle={['h-screen', 'aspect-auto', 'top-[-30%]']}
|
||||
pulse
|
||||
tile={96}
|
||||
style={['grid']}
|
||||
/>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<SearchModalBody
|
||||
{...props}
|
||||
state={state}
|
||||
onChangeQuery={onChangeQuery}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -183,6 +193,18 @@ function SearchModalBody(
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
transition={{
|
||||
default: {
|
||||
duration: 0
|
||||
},
|
||||
layout: {
|
||||
type: 'spring',
|
||||
bounce: 0.15,
|
||||
duration: 0.2,
|
||||
},
|
||||
}}
|
||||
layoutId="searchbox"
|
||||
role="dialog"
|
||||
aria-label={tString(language, 'search')}
|
||||
className={tcls(
|
||||
@@ -190,8 +212,9 @@ function SearchModalBody(
|
||||
'flex',
|
||||
'flex-col',
|
||||
'bg-white',
|
||||
'max-w-[768px]',
|
||||
'mt-[-1px]',
|
||||
'max-w-prose',
|
||||
'mx-auto',
|
||||
'max-h-[70dvh]',
|
||||
'w-full',
|
||||
'rounded-lg',
|
||||
'straight-corners:rounded-sm',
|
||||
@@ -203,14 +226,6 @@ function SearchModalBody(
|
||||
'dark:bg-dark-3',
|
||||
'dark:ring-light/2',
|
||||
)}
|
||||
initial={{
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
|
||||
@@ -174,7 +174,7 @@ export const SearchResults = React.forwardRef(function SearchResults(
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={tcls('max-h-[70vh]', 'overflow-auto', 'relative')}>
|
||||
<div className={tcls('overflow-auto')}>
|
||||
{children}
|
||||
{results.length === 0 ? (
|
||||
<div
|
||||
|
||||
@@ -45,7 +45,7 @@ export function Button({
|
||||
|
||||
const sizes = {
|
||||
default: ['text-base', 'px-4', 'py-2'],
|
||||
medium: ['text-base', 'px-3', 'py-1'],
|
||||
medium: ['text-sm', 'px-3', 'py-1'],
|
||||
small: ['text-xs', 'px-3 py-2'],
|
||||
};
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ export const en = {
|
||||
switch_to_light_theme: 'Switch to light theme',
|
||||
switch_to_system_theme: 'Switch to system theme',
|
||||
search: 'Search',
|
||||
search_or_ask: 'Ask or Search',
|
||||
search_or_ask: 'Search or ask...',
|
||||
search_input_placeholder: 'Search content',
|
||||
search_ask_input_placeholder: 'Search content or ask a question',
|
||||
search_no_results: 'No results for "${1}".',
|
||||
|
||||
@@ -98,6 +98,8 @@ export function apiWithToken(apiToken: string): GitBookAPI {
|
||||
const headersList = headers();
|
||||
const apiEndpoint = headersList.get('x-gitbook-api') ?? DEFAULT_API_ENDPOINT;
|
||||
|
||||
console.log("API Endpoint", apiEndpoint);
|
||||
|
||||
const gitbook = new GitBookAPI({
|
||||
authToken: apiToken,
|
||||
endpoint: apiEndpoint,
|
||||
@@ -113,9 +115,12 @@ export function apiWithToken(apiToken: string): GitBookAPI {
|
||||
export function api(): GitBookAPI {
|
||||
const existing = apiSyncStorage.getStore();
|
||||
if (existing) {
|
||||
console.log("Existing", existing);
|
||||
return existing;
|
||||
}
|
||||
|
||||
console.log("Bringing up API");
|
||||
|
||||
const headersList = headers();
|
||||
const apiToken = headersList.get('x-gitbook-token');
|
||||
|
||||
@@ -199,6 +204,7 @@ export const getPublishedContentByUrl = cache({
|
||||
visitorAuthToken: string | undefined,
|
||||
options: CacheFunctionOptions,
|
||||
) => {
|
||||
console.log("Requesting URL", url);
|
||||
try {
|
||||
const response = await api().urls.getPublishedContentByUrl(
|
||||
{
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ import { memoryCache } from './memory';
|
||||
export const cacheBackends = [
|
||||
// Cache local to the process
|
||||
// (can't be globally purged or shared between processes)
|
||||
memoryCache,
|
||||
// memoryCache,
|
||||
// Cache local to the datacenter
|
||||
// It can't be purged globally but it's faster
|
||||
cloudflareCache,
|
||||
|
||||
@@ -54,8 +54,8 @@ export function getContentSecurityPolicy(scripts: SpaceIntegrationScript[], nonc
|
||||
object-src 'none';
|
||||
base-uri 'self' ${assetsDomain};
|
||||
form-action 'self' ${assetsDomain};
|
||||
frame-ancestors https:;
|
||||
`;
|
||||
// frame-ancestors https:;
|
||||
|
||||
const result = scripts
|
||||
.map(({ contentSecurityPolicy }) => contentSecurityPolicy)
|
||||
|
||||
@@ -501,7 +501,7 @@ async function lookupSiteOrSpaceInMultiIdMode(
|
||||
httpOnly: true,
|
||||
maxAge: 60 * 30,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'none',
|
||||
sameSite: undefined,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
|
||||
import { hexToRgb, shadesOfColor } from './src/lib/colors';
|
||||
|
||||
export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||
export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96];
|
||||
export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96, 100];
|
||||
|
||||
/**
|
||||
* Generate a Tailwind color shades from a variable.
|
||||
@@ -209,6 +209,10 @@ const config: Config = {
|
||||
thintop: '0px -1px 0px rgba(0, 0, 0, 0.05)',
|
||||
'1xs': '0px 1px 1px rgba(0, 0, 0, 0.09), 0px 3.267px 2.754px rgb(0, 0, 0, 0.05), 0px 6.278px 6.63px rgb(0, 0, 0, 0.05), 0px 14px 22px rgb(0, 0, 0, 0.04)',
|
||||
},
|
||||
scale: {
|
||||
'98': '0.98',
|
||||
'102': '1.02',
|
||||
}
|
||||
},
|
||||
opacity: opacity(),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user