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 . |
additional_style_files | Path | Add global style files needed for your project, e.g. 'src/assets/scss/base.scss', 'src/assets/scss/main.scss' |
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 | String | Default: onThemeChange If themes is used this adjusts the function below. If necessary, the function must be changed. |
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
}
}