Created a plugin to display embedded YouTube URLs in GROWI

Created a plugin to display embedded YouTube URLs in GROWI

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).
Enter fullscreen mode
Exit fullscreen mode

image.png

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 :: }
}
Enter fullscreen mode
Exit fullscreen mode

Install the libraries needed for plugin development.

$ yarn
Enter fullscreen mode
Exit fullscreen mode

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> ); };
};
Enter fullscreen mode
Exit fullscreen mode

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%; }
}
Enter fullscreen mode
Exit fullscreen mode

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; } }; }
};
Enter fullscreen mode
Exit fullscreen mode

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


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

    Leave a Reply

    Your email address will not be published. Required fields are marked *