Star

MIT License
Copyright © 2020
CONNECT-platform

linkRecipe: ToC State

The CODEDOC ToC by default is closed and need to be opened by users via the hamburger menu on the bottom-left side. It might be preferable in some cases that the ToC is opened by default, and you can customize that simply by modifying .codedoc/content/index.tsx:

.codedoc/content/index.tsx
1import { RendererLike } from '@connectv/html';

2import { File } from 'rxline/fs';

3import { Page, Meta, ContentNav, Fonts, ToC, GithubSearch$ } from '@codedoc/core/components';

4

5import { config } from '../config';

6import { Header } from './header';

7import { Footer } from './footer';

8

9

10export function content(_content: HTMLElement, toc: HTMLElement, renderer: RendererLike<any, any>, file: File<string>) {

11 return (

12 <Page title={config.page.title.extractor(_content, config, file)}

13 favicon={config.page.favicon}

14 meta={<Meta {...config.page.meta}/>}

15 fonts={<Fonts {...config.page.fonts}/>}

16

17 scripts={config.page.scripts}

18 stylesheets={config.page.stylesheets}

19

20 header={<Header {...config}/>}

21 footer={<Footer {...config}/>}

22 toc={

23 <ToC default="open" // --> change this line.

24 search={

25 config.misc?.github ?

26 <GithubSearch$

27 repo={config.misc.github.rep}

28 user={config.misc.github.user}

29 root={config.src.base}

30 pick={config.src.pick.source}

31 drop={config.src.drop.source}

32 /> : false

33 }>{toc}</ToC>

34 }>

35 {_content}

36 <ContentNav content={_content}/>

37 </Page>

38 )

39}

The default property on ToC component affects the default state of the ToC on desktop, and can be either "open" or "close".

Recipe: ToC State

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right