GROWI, an open-source in-house wiki, provides a plug-in feature. You can use it to display your own data or customize the display.
This is the first time I have developed a GROWI plugin, and we will explain the procedure.
Plug-in developed
I developed GROWI Plug-in to embed YouTube URL. When you paste a YouTube URL into a GROWI page, the URL will be embedded in the GROWI page.
If you do not want to embed the link, please use the youtu.be domain.
// will be embedded
https://www.youtube.com/watch?v=XXXXXXXXXXX
// will not be embedded
https://youtu.be/XXXXXXXXXXX
// the following will not be embedded
If you would like to see the video, please visit [this link](https://youtu.be/XXXXXXXXXXX).
Plugin Development
When developing the plugin, I used the template introduced recently as a base.
goofmint/growi-plugin-script-template: this is a template for creating a GROWI script plugin.
Rename
Rename the plugin.
{
"name": "growi-plugin-youtube-embed", // change
"version": "1.0.0",.
"description": "GROWI plugin for embedding YouTube videos", // Change
:: }
}
Install the libraries needed for plugin development.
$ yarn
Rename the files
Rename src/Hello.tsx and src/Hello.css to src/EmbedYouTube.tsx and src/EmbedYouTube.css.
Edit src/EmbedYouTube.tsx
Depending on the content of the link, we determine whether it is a normal link or an embedded link.
import innerText from 'react-innertext';.
import '. /EmbedYouTube.css';
const getYouTubeId = (href: string): string | null => {
const url = new URL(href);
const videoId = url.searchParams.get('v');
if (videoId) return videoId;
return null; }
};
export const EmbedYouTube = (A: React.FunctionComponent<any>): React.FunctionComponent<any> => {
return ({ children, href, . .props }) => {
const videoId = getYouTubeId(href);
// normal link
if (!videoId) {
return (
<>
<A {. .props}>{children}</A>
</>
);
}
// convert to embedded display
return (
<div className="youtube">
<iframe
width="560"
height="315"
src={`https://www.youtube.com/embed/${videoId}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
></iframe>
</div>
);
};
};
Edit src/EmbedYouTube.css
Write the CSS to make the video responsive.
.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%; }
}
Editing client-entry.tsx
Edit client-entry.tsx to override the' a' tag's processing. This will send all a tag-related processing to EmbedYouTube.
const activate = (): void => {
if (growiFacade == null || growiFacade.markdownRenderer == null) {
return;
}
const { optionsGenerators } = growiFacade.markdownRenderer;
optionsGenerators.customGenerateViewOptions = (. .args) => {
const options = optionsGenerators.generateViewOptions(. .args);
const A = options.components.a;
// replace
options.components.a = EmbedYouTube(A); // overwrite processing
return options; }
}; }
};
About the code
This plugin is available when you use it. Please specify https://github.com/goofmint/growi-plugin-embed-youtube in the GROWI plugin management.
goofmint/growi-plugin-embed-youtube: this is a GROWI plugin to change YouTube URL to embed
Summary
The GROWI plugin makes it very easy to customize the display content. This time, it is the a tag, but you can also customize other tags, such as the img tag and the table tag.
Please develop a plugin and make GROWI more useful!
GROWI, an OSS development wiki tool | comfortable information sharing for all
Top comments (0)