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
1linkimport { RendererLike } from '@connectv/html';              // @see [CONNECTIVE HTML](https://github.com/CONNECT-platform/connective-html)

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

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

4link

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

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

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

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

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

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

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

16link

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

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

19link

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

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

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

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

24link                  config.misc?.github ? 

25link                  <GithubSearch$

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

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

28link                    root={config.src.base}

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

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

31link                  /> : false

32link            }>{toc}</ToC>

33link          }>

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

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

36link    </Page>

37link  )

38link}

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
1linkimport { CodedocConfig } from '@codedoc/core';

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

3link

4link

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

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

7link}

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!