NeatoJS
Showcase

mrjvs/neatojs

--

GuidesWritingAPI reference
GitHubDiscordSuggest features

Theme configuration

defineTheme()site()siteTemplate()directory()link()group()separator()component()social()Layout settings

Setup

guider()

_meta.json

Structure of _meta.json

Client functions

createRedirect()createNotFoundPage()useGuider()useGuiderPage()

Theme components

<GuiderHeader/><GuiderLayout/><GuiderSidebar/><GuiderToc/><GuiderLogo/><GuiderContentFooter/><GuiderPageFooter/><GuiderPageEnd/>

Theme configuration

site()#

A site is an instance of root level configuration. If you need to modify navigation items, footers and alike, you'll be modifying a site.

You can find more information on how to use sites effectively in this guide.

Example#

theme.config.tsx
export default defineTheme([
  site('site-a', {
    directories: [],
  }),
  site('site-b', {
    directories: [],
  })
])

Reference#

function site(id, options);

idstringrequired

The ID of the site, this is used for referencing the site in other parts of your configuration, for example in _meta.json files.

optionsSiteOptionsrequired

All options of the site.

extendsSiteTemplate[]

Extending of site templates, specified site templates get merged in the order they are passed in. Meaning that the last specified site will have priority over the sites earlier in the array.

Site templates can be made with siteTemplate(), more info found here.

Read more about how to use templates in this guide.

navigationArray<LinkComponent | SeparatorComponent | SeparatorComponent>

List of items shown in the top navigation bar. You can only specify separator(), link() and component(). Read more about those on their respective documentation pages.

tabsArray<LinkComponent | CustomComponentComponent>

List of links to show in the tabs section of the header. You can only specify link() and component(). Read more about those on their respective documentation pages.

The tabs section of the header only shows up if there are items in the array.

dropdownArray<LinkComponent | GroupComponent<LinkComponent>>

List of links to show in the dropdown section of the header. You can only specify link() and group() (groups can only hold other links). Read more about those on their respective documentation pages.

The dropdown section of the header only shows up if there are items in the array.

metaNextSeoProps | ((pageMeta: MetaTagPageMeta) => ReactNode)

The meta data shown for all pages associated with the site.

You can either specify an object for your meta data, which will follow the structure defined here.

Or you can pass in a function to render your own meta tags. Note that you do must use NextSeo when using this method.

Read more about how to use this on this page.

githubstring

A repository identifier, if specified a GitHub widget with the star count and fork count is displayed on the right side of the header.

The identifier needs to be either {ORG_NAME}/{REPO_NAME} or {USER_NAME}/{REPO_NAME}. For example: mrjvs/neatojs.

logoobject

A text based logo to show top left of the header. If not specified, a placeholder is shown.

You can also overwrite the logo, for example to show an image. Read more about overwriting the logo.

layoutstring

The default layout to show for all pages associated with this site. Defaults to the layout with the ID default.

layoutsobject[]

List of layouts to add to the site. Pages and directories can specify which layout they want to use.

The default included layouts are still added even if you add items to this list. You can change the default layouts by making a layout yourself with the same ID as the defaults.

Read more about layouts in this guide.

settingsLayoutSettings

The layout settings for this site, read more about layout settings.

The settings in this settings layer act as defaults for following layers. The settings are overriden by the layout settings and directory settings in that order if they exist.

directoriesDirectoryComponent[]

List of directories for this site, read more about directories here.

To have a sidebar, you will need at least one directory.

contentFooterobject

Options for the content footer (the footer placed right below the content).

The visibility of the content footer is not controlled by the settings. To control the visibility of the footer, check the footer page for more info.

pageFooterobject

Options for the page footer (the footer placed at the very bottom of the page).

The visibility of the page footer is not controlled by the settings. To control the visibility of the footer, check the footer page for more info.

Example

Reference