Wow! Conceptually, I could see this as a "sandbox" mechanism where I could inject all of my tiddlers into the innerwiki and then try risky plugins/modifications/etc. How can we inject the outer wiki user contents into the inner wiki?
Thanks! Diego On Sunday, January 27, 2019 at 1:30:25 PM UTC-6, Brian Theado wrote: > > Jeremy, > > Wow, this is great! Nice work! > > When I wrote the demo at > https://btheado.github.io/tw-ftlist/#ftlist%20demo, I was able to show > step-by-step results of example user interactions. I did this by cloning a > new example tiddler from the previous one and building on to it. There was > one case where the global state of something which I wanted to demo in a > later step "bled" onto an earlier step. > > With the innerwiki plugin I could bypass that issue. Each step could be in > its own iframe with each example having their own state. I will consider > changing my examples to use this plugin and see if it works out better. > > The 3 ways you provide of injecting tiddlers into the innerwiki looks very > well thought out. Nicely done! > > On Sun, Jan 27, 2019 at 7:04 AM Jeremy Ruston <[email protected] > <javascript:>> wrote: > >> Software documentation is better with screenshots. However, the >> problem is that screenshots go out of date the moment a typo is fixed or a >> drop shadow is deepened. So I’ve been interested for some time in the idea >> of a tool that could automate the generation of TiddlyWiki screenshots from >> a set of tiddlers. >> >> This could be done by creating a separate wiki for each screenshot, >> loading it up with the tiddlers required for the screenshot. The cool thing >> about the way that TiddlyWiki maintains the entire user interface state in >> the tiddler store is that we can restore any specific state of the user >> interface just by arranging the right tiddlers. So, we could create a wiki >> that shows a tiddler in the process of being edited, or one that shows the >> dropdown in the “filter” tab of the advanced search tiddler. >> >> Then we’d need a mechanism for creating a PNG from the wiki under Node.js >> so that we can automate it. That part turns out to be quite >> straightforward: Google’s Puppeteer project allows a headless installation >> of Chrome to be controlled from a Node.js application. Thus the Node.js >> application can spin up a virtual page in Puppeteer, load it with HTML and >> then there’s an API call to take a screenshot. All of this is documented in >> numerous blog posts and official docs. For example: >> >> >> https://buddy.works/guides/how-take-screenshots-with-puppeteer-headless-chrome >> >> But, I wanted to do a bit better: setting up a wiki is time consuming and >> having one for each screemshot would mean a lot of jumping around between >> wikis. And I didn’t like the idea of having to set up an entire wiki with >> just a couple of tiddlers in it. >> >> The solution I’ve come up with is a new plugin called “innerwiki” that >> enables wikis to be constructed on the fly and either embedded in a tiddler >> in the browser, or rendered as a PNG under Node.js. One can type a complete >> description of a wiki in just a few lines, editing a single tiddler. Here’s >> a simple example: >> >> <$innerwiki width="1200" height="400" style="width:100%;" >> filename="screenshot-1"> >> <$data title="HelloThere" text="This tiddler is inside a wiki"/> >> <$data title="$:/DefaultTiddlers" text="HelloThere"/> >> </$innerwiki> >> >> The innerwiki widget sets up a blank wiki of a specified virtual width >> and height, and then injects the tiddlers described by the data widgets >> embedded within it. In this example, we inject a “HelloThere” tiddler and >> then we set up $:/DefaultTiddlers so that the new tiddler is displayed at >> startup. Here’s how it renders: >> >> >> Because it’s an iframe, the innerwiki is completely interactive (however >> everytime it is refreshed it will revert to its original content). >> >> One quite satisfying-but-useless thing is that it is entirely possible to >> embed an innerwiki within an innerwiki: >> >> >> >> Under Node.js these innerwikis can be turned into PNG screenshots with >> the screenshot command: >> >> tiddlywiki mywiki --screenshot [tag[screenshot]] >> >> You can try out the innerwiki plugin in the prerelease: >> >> https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/ >> >> Any comments or questions are welcome. >> >> Best wishes >> >> Jeremy >> >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "TiddlyWikiDev" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at https://groups.google.com/group/tiddlywikidev. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/tiddlywikidev/06943C70-B665-4B40-99C7-C4D6A74F0573%40gmail.com >> >> <https://groups.google.com/d/msgid/tiddlywikidev/06943C70-B665-4B40-99C7-C4D6A74F0573%40gmail.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > -- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywikidev. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/9902ff24-387a-42f4-a15c-1e880cb09b74%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
