Skip to content

Commit aa0a8dd

Browse files
committed
Theme Modules: Added dev documentation
1 parent 120ee38 commit aa0a8dd

File tree

4 files changed

+104
-6
lines changed

4 files changed

+104
-6
lines changed

app/Theming/ThemeModule.php

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
use BookStack\Exceptions\ThemeException;
66

7-
class ThemeModule
7+
readonly class ThemeModule
88
{
99
public function __construct(
10-
public readonly string $name,
11-
public readonly string $description,
12-
public readonly string $folderName,
13-
public readonly string $version,
10+
public string $name,
11+
public string $description,
12+
public string $folderName,
13+
public string $version,
1414
) {
1515
}
1616

dev/docs/logical-theme-system.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,41 @@ Theme::listen(ThemeEvents::APP_BOOT, function($app) {
9999
});
100100
```
101101

102+
## Custom View Registration Example
103+
104+
Using the logical theme system, you can register custom views to be rendered before/after other existing views, providing a flexible way to add content without needing to override and/or replicate existing content. This is done by listening to the `THEME_REGISTER_VIEWS`.
105+
106+
**Note:** You don't need to use this to override existing views, or register whole new main views to use, since that's done automatically based on their existence. This is just for advanced capabilities like inserting before/after existing views.
107+
108+
This event provides a `ThemeViews` instance which has the following methods made available:
109+
110+
- `renderBefore(string $targetView, string $localView, int $priority)`
111+
- `renderAfter(string $targetView, string $localView, int $priority)`
112+
113+
The target view is the name of that which we want to insert our custom view relative to.
114+
The local view is the name of the view we want to add and render.
115+
The priority provides a suggestion to the ordering of view display, with lower numbers being shown first. This defaults to 50 if not provided.
116+
117+
Here's an example of this in use:
118+
119+
```php
120+
<?php
121+
122+
use BookStack\Facades\Theme;
123+
use BookStack\Theming\ThemeEvents;
124+
use BookStack\Theming\ThemeViews;
125+
126+
Theme::listen(ThemeEvents::THEME_REGISTER_VIEWS, function (ThemeViews $themeViews) {
127+
$themeViews->renderBefore('layouts.parts.header', 'welcome-banner', 4);
128+
$themeViews->renderAfter('layouts.parts.header', 'information-alert');
129+
$themeViews->renderAfter('layouts.parts.header', 'additions.password-notice', 20);
130+
});
131+
```
132+
133+
In this example, we're inserting custom views before and after the main header bar.
134+
BookStack will look for a `welcome-banner.blade.php` file within our theme folder (or a theme module view folder) to render before the header. It'll look for the `information-alert.blade.php` and `additions/password-notice.blade.php` views to render afterwards.
135+
The password notice will be shown above the information alert view, since it has a specified priority of 20, whereas the information alert view would default to a priority of 50.
136+
102137
## Custom Command Registration Example
103138

104139
The logical theme system supports adding custom [artisan commands](https://laravel.com/docs/8.x/artisan) to BookStack.

dev/docs/theme-system-modules.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Theme System Modules
2+
3+
A theme system module is a collection of customizations using the [visual](visual-theme-system.md) and [logical](logical-theme-system.md) theme systems, provided along with some metadata, that can be installed alongside other modules within a theme. They can effectively be thought of as "plugins" or "extensions" that can be applied in addition to any customizations in the active theme.
4+
5+
### Module Location
6+
7+
Modules are contained within a folder themselves, which should be located inside a `modules` folder within a [BookStack theme folder](visual-theme-system.md#getting-started).
8+
As an example, starting from the `themes/` top-level folder of a BookStack instance:
9+
10+
```txt
11+
themes
12+
└── my-theme
13+
└── modules
14+
├── module-a
15+
│ └── bookstack-module.json
16+
└── module-b
17+
└── bookstack-module.json
18+
```
19+
20+
### Module Format
21+
22+
A module exists as a folder in the location [as detailed above](#module-location).
23+
The content within the module folder should then follow this format:
24+
25+
- `bookstack-module.json` - REQUIRED - A JSON file containing [the metadata](#module-json-metadata) for the module.
26+
- `functions.php` - OPTIONAL - A PHP file containing code for the [logical theme system](logical-theme-system.md).
27+
- `icons/` - OPTIONAL - A folder containing any icons to use as per [the visual theme system](visual-theme-system.md#customizing-icons).
28+
- `lang/` - OPTIONAL - A folder containing any language files to use as per [the visual theme system](visual-theme-system.md#customizing-text-content).
29+
- `public/` - OPTIONAL - A folder containing any files to expose into public web-space as per [the visual theme system](visual-theme-system.md#publicly-accessible-files).
30+
- `views/` - OPTIONAL - A folder containing any view additions or overrides as per [the visual theme system](visual-theme-system.md#customizing-view-files).
31+
32+
You can create additional directories/files for your own needs within the module, but ideally name them something unique to prevent conflicts with the above structure.
33+
34+
### Module JSON Metadata
35+
36+
Modules are required to have a `bookstack-module.json` file in the top level directory of the module.
37+
This must be a JSON file with the following properties:
38+
39+
- `name` - string - An (ideally unique) name for the module.
40+
- `description` - string - A short description of the module.
41+
- `version` - string - A string version number generally following [semantic versioning](https://semver.org/).
42+
- Examples: `v0.4.0`, `4.3.12`, `v0.1.0-beta4`.
43+
44+
### Customization Order/Precedence
45+
46+
It's possible that multiple modules may override/customize the same content.
47+
Right now, there's no assurance in regard to the order in which modules may be loaded.
48+
Generally they will be used/searched in order of their module folder name, but this is not assured and should not be relied upon.
49+
50+
It's also possible that modules customize the same content as the configured theme.
51+
In this scenario, the theme takes precedence. Modules are designed to be more portable and instance abstract, whereas the theme folder would typically be specific to the instance.
52+
This allows the theme to be used to customize or override module content for the BookStack instance, without altering the module code itself.
53+
54+
### Module Best Practices
55+
56+
Here are some general best practices when it comes to creating modules:
57+
58+
- Use a unique name and clear description so the user can understand the purpose of the module.
59+
- Increment the metadata version on change, keeping to [semver](https://semver.org/) to indicate compatibility of new versions.
60+
- Where possible, prefer to [insert views before/after](logical-theme-system.md#custom-view-registration-example) instead of overriding existing views, to reduce likelihood of conflicts or update troubles.

dev/docs/visual-theme-system.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ BookStack allows visual customization via the theme system which enables you to
44

55
This is part of the theme system alongside the [logical theme system](./logical-theme-system.md).
66

7-
**Note:** This theme system itself is maintained and supported but usages of this system, including the files you are able to override, are not considered stable and may change upon any update. You should test any customizations made after updates.
7+
**Note:** This theme system itself is maintained and supported, but usages of this system, including the files you are able to override, are not considered stable and may change upon any update. You should test any customizations made after updates.
88

99
## Getting Started
1010

@@ -18,6 +18,9 @@ You'll need to tell BookStack to use your theme via the `APP_THEME` option in yo
1818
Content placed in your `themes/<theme_name>/` folder will override the original view files found in the `resources/views` folder. These files are typically [Laravel Blade](https://laravel.com/docs/10.x/blade) files.
1919
As an example, I could override the `resources/views/books/parts/list-item.blade.php` file with my own template at the path `themes/<theme_name>/books/parts/list-item.blade.php`.
2020

21+
In addition to overriding original views, this could be used to add new views for use via the [logical theme system](logical-theme-system.md).
22+
By using the `THEME_REGISTER_VIEWS` logical event, you can also register your views to be rendered before/after existing views. An example of this can be found in our [logical theme guidance](logical-theme-system.md#custom-view-registration-example).
23+
2124
## Customizing Icons
2225

2326
SVG files placed in a `themes/<theme_name>/icons` folder will override any icons of the same name within `resources/icons`. You'd typically want to follow the format convention of the existing icons, where no XML deceleration is included and no width & height attributes are set, to ensure optimal compatibility.

0 commit comments

Comments
 (0)