*ReadMe* *Oembed for TiddlyWiki5, Version 0.1.0*
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* ;) . github: oembetter <https://github.com/apostrophecms/oembetter> ''joshuafontany/oembed'' source <https://github.com/joshuafontany/TW5-oembed> *Introduction - New Wikitext Syntax* This 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: ``` [embed[https://www.youtube.com/watch?v=Imx-EzCOWGc]] [embed width=500 [https://www.youtube.com/watch?v=Imx-EzCOWGc]] [embed width={{!!width}} [https://www.youtube.com/watch?v=Imx-EzCOWGc]] [embed width={{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} [https://www.youtube.com/watch?v=Imx-EzCOWGc]] [embed height="32em" class="custom-embed" [TiddlerTitle]] ``` 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 Content* This 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. *Attributes* AttributeDescription *target* 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). *width* (Optional) The maximum width that the embeddable HTML should fill. Given in pixels ('px" not required). *class* (Optional) The classes to add to the wrapping <div>.Using Oembed Examples are found in the *Using Oembed* tiddler in the demo wiki: https://joshuafontany.github.io/TW5-Oembed/ <https://joshuafontany.github.io/TW5-oembed/> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f9666d77-ef2c-49f3-b352-3773e39e5e0en%40googlegroups.com.
