Star

MIT License
Copyright © 2020
CONNECT-platform

linkCustomization

Besides the theme and the config, you can customize how CODEDOC looks and behaves by using custom layout components. Codedoc uses TSX-based components for all layout elements, and you can start modifying them simply by changing the content of .codedoc/content/index.tsx:

.codedoc/content/index.tsx
1import { RendererLike } from '@connectv/html'; // @see [CONNECTIVE HTML](https://github.com/CONNECT-platform/connective-html)

2import { File } from 'rxline/fs'; // @see [RxLine](https://github.com/loreanvictor/rxline)

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

4

5import { config } from '../config'; // --> configuration of the project

6import { Header } from './header'; // --> your own header component

7import { Footer } from './footer'; // --> your own footer component

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)} {/* --> set title based on config */}

13 favicon={config.page.favicon} {/* --> set faviocn based on config */}

14 meta={<Meta {...config.page.meta}/>} {/* --> set meta based on config */}

15 fonts={<Fonts {...config.page.fonts}/>} {/* --> set fonts based on config */}

16

17 scripts={config.page.scripts} {/* --> add scripts from config */}

18 stylesheets={config.page.stylesheets} {/* --> add stylesheets from config */}

19

20 header={<Header {...config}/>} {/* --> use the header component */}

21 footer={<Footer {...config}/>} {/* --> use the footer component */}

22 toc={ // --> the ToC component

23 <ToC search={ // --> configure ToC search based on GitHub config

24 config.misc?.github ?

25 <GithubSearch$

26 repo={config.misc.github.repo}

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

28 root={config.src.base}

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

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

31 /> : false

32 }>{toc}</ToC>

33 }>

34 {_content} {/* --> display the content of each page */}

35 <ContentNav content={_content}/> {/* --> the content nav element */}

36 </Page>

37 )

38}


touch_app NOTE

Despite the TSX syntax, CODEDOC components are not React components. The component library used by codedoc is CONNECTIVE SDH, which is a more close-to-DOM-api library for creating JAMStack apps.

Learn More

linkOverriding Default Layout

As you can see from the code, you can simply create your own custom layout elements and use them instead of the default ones:

.codedoc/content/footer.tsx
1import { CodedocConfig } from '@codedoc/core';

2import { Footer as _Footer } from '@codedoc/core/components';

3

4

5export function Footer(config: CodedocConfig, renderer: any) {

6 return <_Footer>I prefer an empty footer</_Footer>;

7}

However, since CODEDOC's default layout elements sometimes have specific interactions with each other, with codedoc bundle's initialization scripts and generally with codedoc features, it is a good idea to look at the source code of the default layout component you want to override first.

warning WARNING

Your custom layout elements might not work with codedoc features if some specific properties of them are missing. So DO CHECK the source of the original layout components before writing and using your own custom ones.

Check out the Source Codes

linkRecipes

For convenience, recipes for most common customizations are included in these docs. If you however cannot find a neat solution to the particular customization you have in mind, do not hesitate to ask (for example in our community). Additionally, if you have your own customization recipe that you think will be useful for other people using CODEDOCC, it would be extremely nice of you if you could contribute to these docs and add your recipes!

Contribute to the Docs!
CustomizationOverriding Default LayoutRecipes

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right