This content originally appeared on DEV Community and was authored by Atsushi
GROWI, an open-source in-house wiki, has a plug-in feature. This feature allows you to display your own data or customize the display.
This article will explain the procedure for developing a GROWI plug-in. This is as much as we know, as we have not yet grasped the whole process, but please use it as a reference during development.
Types of plug-ins
There are three types of GROWI plug-ins
- script
- theme
- template
This time, we will focus on scripts.
Template
We have created a template that can be used to create plug-ins. This is the base template.
goofmint/growi-plugin-script-template
About files to be edited
After downloading or forking the above repository, edit the following files.
package.json
Describe the plugin information. Change name and description.
{
"name": "growi-plugin-script-template", // change this name
"version": "1.0.0",.
"description": "GROWI plugin template for script", // change this description
// : omitted
}
Installing Dependent Libraries
After renaming, install the libraries required for plugin development. Use the yarn command.
$ yarn
client-entry.tsx
This is the file that is loaded when the plugin is executed. It is where you describe the plugin process. The options.components contains the tag information, so you can change the plugin's default behavior.
import config from '. /package.json';
import { helloGROWI } from '. /src/Hello';
import { Options, Func, ViewOptions } from '. /types/utils';
declare const growiFacade : {
markdownRenderer?
optionsGenerators: {
customGenerateViewOptions: (path: string, options: Options, toc: Func) => ViewOptions, generateViewOptions: (path: string, options: Options, toc: Func)
generateViewOptions: (path: string, options: Options, toc: Func) => ViewOptions, ViewOptions
}, }
}, }
}; }
const activate = (): void => {
if (growiFacade == null || growiFacade.markdownRenderer == null) {
return;
}
const { optionsGenerators } = growiFacade.markdownRenderer;
optionsGenerators.customGenerateViewOptions = (. .args) => {
const options = optionsGenerators.generateViewOptions(. .args);
// extract the A tag
const { a } = options.components;
options.components.a = helloGROWI(a); // Overwrite the drawing content of the A tag
return options; }
}; }
}; }
const deactivate = (): void => {
};
// register activate
if ((window as any).pluginActivators == null) {
(window as any).pluginActivators = {}; }
}
(window as any).pluginActivators[config.name] = {
activate, deactivate, deactivate, deactivate, deactivate
deactivate, }
}; }
The following tags can be specified. When processing these tags, the plugin will override the process.
- a
- code
- h1
- h2
- h3
- h4
- h5
- h6
- lsx
- ref
- refs
- refimg
- refsimg
- gallery
- drawio
- table
- mermaid
- attachment
- img
For example, to change the processing of the a tag, use the following
options.components.a = helloGROWI(a);.
src/Hello.tsx
This is the file with helloGROWI above. Feel free to change the name of this function. In the following case, no processing is done.
import '. /Hello.css';.
export const helloGROWI = (Tag: React.FunctionComponent<any>): React.
return ({ children, . .props }) => {
return (
<Tag {. .props}>{children}</Tag>
);
};
};
src/Hello.css
CSS file. Feel free to change it.
Preview
Change src/Demo.tsx to see the actual display.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { helloGROWI } from '. /Hello';
const href = 'https://growi.org/';
const HelloGROWI = helloGROWI(() => <a href={href}>Hello, GROWI</a>);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<HelloGROWI
href={href}
>Hello, GROWI</HelloGROWI>
</React.StrictMode>,.
);
Preview with the vite command or yarn dev.
$ yarn dev
Now you can see the demo display at http://localhost:5173/demo.html.
Build the plugin
You can build the plugin with yarn build.
$ yarn build
If the build succeeds, the plugin files will be output in the dist directory.
Install the plugin
You can install the plugin from the GROWI administration page.
Publish the plugin
When the plugin is ready, publish it on GitHub repository and add a growi-plugin topic. It will then appear in the GROWI plugin list.
Summary
Developing a plugin for GROWI is not difficult if you use a template. Please customize your own GROWI!
GROWI, the OSS development wiki tool | Comfortable information sharing for all
This content originally appeared on DEV Community and was authored by Atsushi
Atsushi | Sciencx (2024-06-19T06:26:59+00:00) Developing GROWI Plug-ins (Scripting). Retrieved from https://www.scien.cx/2024/06/19/developing-growi-plug-ins-scripting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.