[TW5][Plugin] Oembed Public Beta!!!!!
Joshua Fontany
Manually or automatically generate embeddable html from user supplied urls. This plugin requires the tiddlywiki/consent-banner core plugin installed in the wiki, and that the user has accepted cookies in order to render the embeddable html code.
For a server to automatically generate the API requests, this plugin requires running TiddlyWiki on Node.js with the Bob plugin (or through Bob.exe). When run with Bob it also requires installing the oembetter npm package from within your TiddlyWiki5 directory (or cloning the 'oembetter' package locally and creating a global link by using npm link in the oembetter directory and npm link oembetter in the tiddlywiki5 directory).
If Bob and oembetter are not available, the plugin will prompt the user with a form to call the correct API. This makes the user into the server ;) .
''joshuafontany/oembed'' source
Introduction - New Wikitext SyntaxThis plugin introduces the following, new, WikiText Syntax: [embed[$url_or_tiddler$]]
This is automatically converted into an <$embed> widget, and can take attributes in the following forms:
The user supplies a URL that they wish to embed, or the title of a tiddler with a url field holding a target URL. By default, an empty [embed[]] widget will attempt to use the value of the currentTiddler variable as the source of the target url. The target URL must be from one of the Whitelited Providers.
If Bob and oembetter are not available, the $embed widget will prompt the user with a form to call the correct API. The user then pastes the returned JSON data into a text-edit field and clicks Save. The widget will automatically try to render the new content.
If Bob is available, the server automatically calls the endpoint API, which should return an embeddable HTML snippet for the user supplied url. This is done by calling the oembetter node package on the server side, and then storing the returned json as a state tiddler. This causes the widget to also automatcally try to render the new content.
Rendering the Embedded ContentThis widget renders a nested set of elements that causes the <iframe> element holding our embedded code to be "responsive". This means it will attempt to fill space, resize along with the window, and display scrollbar when content spills outside of its bounds and is hidden. Sometimes the returned data will have height and width properties that will allow the widget to set an intelligent "aspect-ratio". If unable, the default height of "64em" is used. You can override this by setting a valid CSS height-value for the height attribute. Similarly, if the width attribute is set, the API request will include a "maxwidth" option with that value, or the max-width of the containing <div> will be set to that value.
Attributestarget
The name of a tiddler with a url field, or if a tiddler with that name is not found, a url the user wishes to embed. This allows transclusion, variables, etc.
height
(Optional) The maximum height that the embeddable HTML should fill. Given in pixels ('px" not required).
(Optional) The maximum width that the embeddable HTML should fill. Given in pixels ('px" not required).
(Optional) The classes to add to the wrapping <div>.Using Oembed
Examples are found in the Using Oembed tiddler in the demo wiki:
Joshua Fontany
https://joshuafontany.github.io/TW5-Oembed/
Fixed.
Best,
Joshua F
