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
1linkimport { RendererLike } from '@connectv/html';

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

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

4link

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

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

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

8link

9link

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

11link return (

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

13link favicon={config.page.favicon}

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

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

16link

17link scripts={config.page.scripts}

18link stylesheets={config.page.stylesheets}

19link

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

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

22link toc={

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

24link search={

25link config.misc?.github ?

26link <GithubSearch$

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

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

29link root={config.src.base}

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

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

32link /> : false

33link }>{toc}</ToC>

34link }>

35link {_content}

36link <ContentNav content={_content}/>

37link </Page>

38link )

39link}

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