mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-14 06:35:17 +00:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Zeno Kapitein
|
3a37591bd4 | ||
|
Zeno Kapitein
|
b9b5887b5f | ||
|
Zeno Kapitein
|
6ecdfc695a | ||
|
Zeno Kapitein
|
a9d011aa2e |
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"gitbook": patch
|
||||
---
|
||||
|
||||
Move variant selector to sidebar & support translations
|
||||
@@ -17,9 +17,10 @@ import { SpacesDropdown } from './SpacesDropdown';
|
||||
export function Header(props: {
|
||||
context: GitBookSiteContext;
|
||||
withTopHeader?: boolean;
|
||||
withVariants?: 'generic' | 'translations';
|
||||
search?: React.ReactNode;
|
||||
}) {
|
||||
const { context, withTopHeader, search } = props;
|
||||
const { context, withTopHeader, withVariants, search } = props;
|
||||
const { siteSpace, siteSpaces, sections, customization } = context;
|
||||
|
||||
return (
|
||||
@@ -143,7 +144,7 @@ export function Header(props: {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sections || siteSpaces.length > 1 ? (
|
||||
{sections || withVariants ? (
|
||||
<div className="scroll-nojump">
|
||||
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
|
||||
<div
|
||||
@@ -164,10 +165,13 @@ export function Header(props: {
|
||||
'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
|
||||
)}
|
||||
>
|
||||
{siteSpaces.length > 1 && (
|
||||
{withVariants ? (
|
||||
<div
|
||||
id="variants"
|
||||
className="my-2 mr-5 grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
|
||||
className={tcls(
|
||||
'my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64',
|
||||
withVariants === 'translations' ? 'xl:hidden!' : ''
|
||||
)}
|
||||
>
|
||||
<SpacesDropdown
|
||||
context={context}
|
||||
@@ -176,14 +180,17 @@ export function Header(props: {
|
||||
className="w-full grow py-1"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{sections &&
|
||||
(sections.list.some((s) => s.object === 'site-section-group') || // If there's even a single group, show the tabs
|
||||
sections.list.length > 1) && ( // Otherwise, show the tabs if there's more than one section
|
||||
<SiteSectionTabs
|
||||
sections={encodeClientSiteSections(context, sections)}
|
||||
/>
|
||||
)}
|
||||
) : null}
|
||||
{sections
|
||||
? (sections.list.some(
|
||||
(s) => s.object === 'site-section-group'
|
||||
) || // If there's even a single group, show the tabs
|
||||
sections.list.length > 1) && ( // Otherwise, show the tabs if there's more than one section
|
||||
<SiteSectionTabs
|
||||
sections={encodeClientSiteSections(context, sections)}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,18 +44,18 @@ export function SpacesDropdown(props: {
|
||||
'hover:text-tint-strong',
|
||||
'data-[state=open]:text-tint-strong',
|
||||
|
||||
'ring-1',
|
||||
'ring-tint-subtle',
|
||||
'hover:ring-tint-hover',
|
||||
'data-[state=open]:ring-tint-hover',
|
||||
'border',
|
||||
'border-tint-subtle',
|
||||
'hover:border-tint-hover',
|
||||
'data-[state=open]:border-tint-hover',
|
||||
|
||||
'contrast-more:bg-tint-base',
|
||||
'contrast-more:ring-1',
|
||||
'contrast-more:hover:ring-2',
|
||||
'contrast-more:data-[state=open]:ring-2',
|
||||
'contrast-more:ring-tint',
|
||||
'contrast-more:hover:ring-tint-hover',
|
||||
'contrast-more:data-[state=open]:ring-tint-hover',
|
||||
'contrast-more:border',
|
||||
'contrast-more:hover:border-2',
|
||||
'contrast-more:data-[state=open]:border-2',
|
||||
'contrast-more:border-tint',
|
||||
'contrast-more:hover:border-tint-hover',
|
||||
'contrast-more:data-[state=open]:border-tint-hover',
|
||||
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -15,6 +15,7 @@ import { getDocumentSections } from '@/lib/document-sections';
|
||||
import { tcls } from '@/lib/tailwind';
|
||||
|
||||
import { Ad } from '../Ads';
|
||||
import { SpacesDropdown } from '../Header/SpacesDropdown';
|
||||
import { getPDFURLSearchParams } from '../PDF';
|
||||
import { PageFeedbackForm } from '../PageFeedback';
|
||||
import { ThemeToggler } from '../ThemeToggler';
|
||||
@@ -292,6 +293,18 @@ async function PageAsideFooter(props: { context: GitBookSiteContext }) {
|
||||
ignore={process.env.NODE_ENV !== 'production'}
|
||||
style={site?.ads ? 'mt-4' : undefined}
|
||||
/>
|
||||
{context.siteSpaces.some(
|
||||
(space) =>
|
||||
space.space.language &&
|
||||
space.space.language !== context.siteSpace.space.language
|
||||
) ? (
|
||||
<SpacesDropdown
|
||||
context={context}
|
||||
siteSpace={context.siteSpace}
|
||||
siteSpaces={context.siteSpaces}
|
||||
className="mt-2 w-full grow py-2"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ import { useSearch } from './useSearch';
|
||||
interface SearchContainerProps {
|
||||
siteSpaceId: string;
|
||||
spaceTitle: string;
|
||||
isMultiVariants: boolean;
|
||||
withVariants: boolean;
|
||||
aiMode: CustomizationAIMode;
|
||||
className?: string;
|
||||
}
|
||||
@@ -27,7 +27,7 @@ interface SearchContainerProps {
|
||||
* Client component to render the search input and results.
|
||||
*/
|
||||
export function SearchContainer(props: SearchContainerProps) {
|
||||
const { siteSpaceId, spaceTitle, isMultiVariants, aiMode, className } = props;
|
||||
const { siteSpaceId, spaceTitle, withVariants, aiMode, className } = props;
|
||||
|
||||
const withAIChat = aiMode === CustomizationAIMode.Assistant;
|
||||
const [state, setSearchState] = useSearch(withAIChat);
|
||||
@@ -142,7 +142,7 @@ export function SearchContainer(props: SearchContainerProps) {
|
||||
// Only show content if there's a query or Ask is enabled
|
||||
(state?.query || aiMode !== CustomizationAIMode.None) && open ? (
|
||||
<React.Suspense fallback={null}>
|
||||
{isMultiVariants && !showAsk ? (
|
||||
{withVariants && !showAsk ? (
|
||||
<SearchScopeToggle spaceTitle={spaceTitle} />
|
||||
) : null}
|
||||
{state !== null && !showAsk ? (
|
||||
|
||||
@@ -44,8 +44,18 @@ export function SpaceLayout(props: {
|
||||
|
||||
const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
|
||||
|
||||
const currentLanguage =
|
||||
siteSpace.space.language ?? context.customization.internationalization.locale;
|
||||
|
||||
const withSections = Boolean(sections && sections.list.length > 1);
|
||||
const isMultiVariants = Boolean(siteSpaces.length > 1);
|
||||
const withVariants: 'generic' | 'translations' | undefined =
|
||||
siteSpaces.length > 1
|
||||
? siteSpaces.some(
|
||||
(space) => space.space.language && space.space.language !== currentLanguage
|
||||
)
|
||||
? 'translations'
|
||||
: 'generic'
|
||||
: undefined;
|
||||
|
||||
const withFooter =
|
||||
customization.themes.toggeable ||
|
||||
@@ -60,7 +70,7 @@ export function SpaceLayout(props: {
|
||||
<React.Suspense fallback={null}>
|
||||
<SearchContainer
|
||||
aiMode={aiMode}
|
||||
isMultiVariants={siteSpaces.length > 1}
|
||||
withVariants={Boolean(withVariants)}
|
||||
spaceTitle={siteSpace.title}
|
||||
siteSpaceId={siteSpace.id}
|
||||
/>
|
||||
@@ -96,7 +106,12 @@ export function SpaceLayout(props: {
|
||||
visitorCookieTrackingEnabled={customization.insights?.trackingCookie}
|
||||
>
|
||||
<Announcement context={context} />
|
||||
<Header withTopHeader={withTopHeader} context={context} search={searchAndAI} />
|
||||
<Header
|
||||
withVariants={withVariants}
|
||||
withTopHeader={withTopHeader}
|
||||
context={context}
|
||||
search={searchAndAI}
|
||||
/>
|
||||
{aiMode === CustomizationAIMode.Assistant ? (
|
||||
<AIChat trademark={customization.trademark.enabled} />
|
||||
) : null}
|
||||
@@ -147,13 +162,16 @@ export function SpaceLayout(props: {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isMultiVariants && !sections && (
|
||||
{withVariants && (
|
||||
<SpacesDropdown
|
||||
context={context}
|
||||
siteSpace={siteSpace}
|
||||
siteSpaces={siteSpaces}
|
||||
className={tcls(
|
||||
'w-full',
|
||||
withVariants === 'translations'
|
||||
? 'xl:hidden'
|
||||
: '',
|
||||
'page-no-toc:hidden',
|
||||
'page-no-toc:site-header-none:flex'
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user