Setting up Gardenjs

During installation, the configuration file garden.config.js is generated in the root directory. All project-specific settings are made here.

Arguments

Argument	Type	Description
`serverport`	Positive number	Default: `3010` Define the server port.
`devmodus`	Boolean	Default: `false` !!! For garden development purposes only.
`no_open_browser`	Boolean	Default: `true` Stops auto opening Gardenjs on start.
`project_title`	String, Text	Default: `My project name` Title is displayed above the navigation.
`project_logo`	Path	Optional. Logo is displayed above the navigation. Then “project_title” is used as title tag.
`project_logo_darkmode`	Path	Optional. Logo is displayed above the navigation in dark mode. Then “project_title” is used as title tag.
`welcome_page`	Path	Optional. Set a path to your own start page, e.g. `/src/foo.html`.
`docs_link`	Boolean	Default: `true` Set a path to your own start page, e.g. `/src/foo.svelte`.
`structure`	Path	Each entry is output with its subpages in the page tree. E.g. `layouts: './src/layout/, 'components: './src/components/'.`
`watch`	`directories`: Path, `include`: File suffix	Defines which directories and file types to monitor.
`watch`: `directories`	Path	Path to directories to be monitored for changes, e.g. `['./src/'],`.
`watch`: `include`	File suffix	File types to be monitored for changes, e.g. [‘.svelte’, ‘.vue’, ‘.scss’, ‘.css’, ‘.js’, ‘.ts’].
`vite_config`	Path	Default: `./vite.config.js` Path to the vite.config file. (In any case, make sure Vite is installed.)
`renderer`	String	Specify the JS framework(s) used in the project. Requires a corresponding framework plugin. When the npm install script was run, a render was automatically stored here if the appropriate selection was made. E.g. `gardenjs-plugin-svelte`.
getComponentName	Function	Option to generate component names in the component tree from dasFileName using your own function.
getComponentFileNames	Function	Option to generate component file names from dasFileName using your own function. Must return an array. First match will be used.
`additional_style_files`	Path	Add global style files needed for your project, e.g. `'src/assets/scss/base.scss', 'src/assets/scss/main.scss'`
`devices`	`small`: deviceConfig[], `medium`: deviceConfig[], `large`: deviceConfig[]	Set custom device types for each category.
`deviceConfig`	name: String, w: Number, h: Number	Set name, width and height for a device type.
`grid`	`size`: number, `style`: ‘dotted’ or ‘lined’, `color`: string	Custom configuration for background grid.
`themes`	`name`: String, `stageBg`: Color, `active`: Boolean	Edit or disable “Themes” depending on whether your app uses themes. Defines a list of display modes of your project to output the components accordingly.
`themes`: `name`	String	Name of the mode as it appears in the theme navigation. E.g. `name: 'Dark mode'`
`themes`: `stageBg`	String	Sets the background color of the stage for each mode. All common CSS color values can be used as values. E.g. `stageBg: '#101010'`
`themes`: `active`	Boolean	Set the default theme on start: `active: 'true',`. Optionally, if it is empty, the first entry in the list is automatically used as the default.
`themeHandler`	Function	The theme handler allows you to select project-specific themes in Gardenjs.

Pagetree

The source folder of the components was queried during installation. It is also possible to display several page trees one below the other. With the structure option, you can define a finer granulation of the page tree and integrate components from different directories. You could also display external components in your project.

 "structure": {
    "layouts": "./src/layout/",
    "components": "./src/components/",
    "external lib": "/absolute/path/to/lib"
  },

Theme Function

The following theme function is integrated as default. Adapt it to your own needs and adjust the option themeHandler if necessary.

function onThemeChange(theme) {
  if (theme === 'default') {
    delete document.body.dataset.theme
  } else {
    document.body.dataset.theme = theme
  }
}