I’m making my first plugin. I understand TiddlyWiki from a user perspective, but when it comes to the JS side of TiddlyWiki I’m clueless. I wish to make a plugin that when you press a button in the Wiki, it runs some js that collects all of the tiddlers, formats them, and then downloads a PDF. I understand JS, but I have no clue where to even start here. I’ve tried reading the dev docs, but they aren’t that useful and have an annoying color scheme. Can anyone help?
G’day,
Just lobbing an idea your way in case you aren’t too attached to the use of either javascript and/or plugin.
My favorite way to create a PDF of anything in my web browser is to just use my browser’s print “Save as PDF” print destination option.
So whatever you would like as a Tiddler-Conglomeration-for-Printing product, you could create a tiddler that transcludes all of the tiddlers you’d like bundled together for printing. When somebody goes to print that one aggregation of tiddlers, or just you printing that to create a PDF for sharing, it is a pretty simple setup.
Well, all bets are off if you want detailed control of the PDF (formatting, page numbers, whatever … I have no idea what is involved in manually generating a proper PDF file.)
Cheers, and best wishes with your plugin if you go that route.
This falls very heavily into the detailed control of the PDF side. I know how to do it in JS, TW is the mystery to me.
But thanks anyway 
Unlike other software (e.g. Calibre, Anki) plugins don’t have super powers in TW. They’re just collections of tiddlers.
The provided mechanisms for interfacing with JS are javascript macros and widgets. Unfortunately, there is no current documentation on how to make widgets. There used to be some 3rd party documentation, but now you can only find it on archive.org. It’s frustrating that we can’t have even just a tiny bit of guidance.
There also is no guidance on the dozens (hundreds?) of internal JS routines. There are routines for gathering and managing tiddlers, but it’s up to you to figure out how to access them.
In any event, the usual answer is to look at an existing widget that does something like you want to do, and then modify it.
However, in your case, a better approach might be to do a static export of your tiddlers to an HTML page. Then import the result into Word, tweak the result for page breaks, and then export as PDF. It might even be possible to include page-breaks using @media CSS. This is the approach I usually use when I want nice looking PDF output.
There are various PDF print utilities, but they usually print the entire thing without any regard to page breaks, so page breaks will happen in the middle of lines, diagrams, pictures, etc.
Could you link the 3d party widget docs?
Also at least in my case that “better approach” won’t work for me. I need full integration for a couple of reasons. It sucks to know the lack of documentation. I guess I’ll need to get my hands dirty and read through the code. Makes me wonder how stuff like highlight js intergration was even created.
Then I would suggest writing the javascript that does the work, wrapping it in HTML, and putting all of that in “text” tiddler.
Put a wee placeholder in there for where you would like to inject the TiddlyWiki content.
Setup an iframe with srcdoc = to the content of your HTML template with the javascript, doing a search-replace of the placeholder with the TiddlyWiki content.
A save button in the iframe, and there we go.
That is how I get BASIC Anywhere Machine working: dynamically generate HTML + CSS + javascript, and feed that into an iframe. Dynamically-created embedded web page !
1 Like
Could you elaborate on the “TiddlyWiki content” part? What is that.
The text that comes from the tiddlers in the TiddlyWiki. The stuff you want included in the PDF.
So manually adding all the text from another tiddler that compiles everything?
1 Like
A rough explanation of what BASIC Anywhere Machine is doing.
NOTE: Give me a few minutes to test this first and cleanup if I’ve made mistakes !!!
- OK: just added a little bit of CSS to the iframe to size it. Otherwise, it worked with what I had ad-hoc spilled out of my sponge. That doesn’t happen often …
- Update: for convenience, tiddlers attached in JSON file
- A note about security: for the sake of expediency in this discussion, I left unaltered the script reference to the wwwbasic.js library stored on github. In BASIC Anywhere Machine, I did not want javascript existing externally, out of my control, going into my programs. So I manually copied the entire content of that wwwbasic.js file, and I pasted that text right into the “Web Page Template” file, replacing that “<script src…” that retrieved the external file. So BASIC Anywhere Machine if fully self-contained, and always uses the javascript that I have reviewed and validated as secure (and have also heavily altered for my purposes).
If you take a look at the wwwBASIC github page , you’ll find what’s needed for a web page to run a BASIC program:
<!DOCTYPE html>
<html>
<head>
<script src="https://google.github.io/wwwbasic/wwwbasic.js"></script>
<script type="text/basic">
PRINT "Hello World!"
FOR i = 1 to 10
PRINT "Counting "; i
NEXT i
</script>
</head>
</html>
In TiddlyWiki, create a tiddler (type plain text), and paste the above with a wee modification into that tiddler (call it “Web Page Template”):
<!DOCTYPE html>
<html>
<head>
<script src="https://google.github.io/wwwbasic/wwwbasic.js"></script>
<script type="text/basic">
::My Program::
</script>
</head>
</html>
Put the BASIC program into some other plain text tiddler (call it “HelloWorld.BAS”):
PRINT "Hello World!"
FOR i = 1 to 10
PRINT "Counting "; i
NEXT i
In a third tiddler, a standard tiddler, put this:
<iframe srcdoc ={{{ [[Web Page Template]get[text]search-replace[::My Program::],{HelloWorld.BAS!!text}] }}} style="width:100%;height:300px;">
</iframe>
Tiddlers_from_Charlie.json (843 Bytes)
1 Like
Oh, I just found (using Links) that btheado has some docs: TW widget tutorials — Step-by-step widget demonstrations
Charlies approach sounds interesting.
2 Likes
My ninja way of avoiding javascript and javascript macros.
More Beverly Hills Ninja, maybe …
Charlie’s approach sounds interesting, but thanks a lot for the link. It’s very instructive.
@GameDungeon with all due respect you are making a serious error. You do not need to revert to JS for most things in tiddlywiki. It was not built as a javascript development environment (although it may) it was built to provide almost everything to need to handle tiddlers.
- Possibly The reason you are having trouble finding adequate documentation is you are possibly looking for the wrong info eg PDF and Javascript.
Simply create a tiddler containing;
<$list filter=" filter">
<$transclude/>
</$list>
- Where filter includes all the tiddlers you want in your PDF, you can view the full content in this tiddler. Lets call this a compound tiddler - one made up of others.
- Sure you need to learn about filters, but they are worth it because they give you great power.
- Now on the “compound tiddler” select the view toolbar More > Open in New window > Ctrl-P and select a PDF printer.
All done!
There are ways to help with page breaks if needed.
The reason I want to use js is there are things TiddilyWiki was just not made to do. It’s possible to do all of this, but for what I want I would need a lot of CSS to style it the way I want. Plus there are js libs that already do this. Also, I have other reasons I wish to avoid using the browser’s print function.
Ok, perhaps, but whether tiddler wiki can do it or not can only be answered by an experienced tiddlywiki user, because it can do a lot. For example you are unhappy with the css but css is totally customisable in tiddlywiki. You have to do your styling somewhere, why not use tiddlywikis robust css handling.
For example as other such as @Charlie_Veniot and @Mark_S re suggesting you can build custom exports. html documents can be imported to Microsoft Word and other applications natively? With or without css.
Another option is to look into the WYSIWYIG editors that are available perhaps they can help you style it as you want.
Being able to preview the output as PDF and set page breaks would be wonderful
- You can go ahead and look at bringing in a JS tool or library, and there is a lot of doco available starting with https://tiddlywiki.com/dev/ but you need to be aware of;
- All Javascript within tiddlywiki must comply with a range of design guidelines because they must support tiddlywikis architecture that delivers its always up to relationships.
- By the sounds of your basic needs your desired outcomes can be achieved otherways with a lot less effort.
Have your CSS already? Put it in a tiddler and apply it only to your content tiddler or override existing css as desired.
- Yes, so lets make use of exporting in almost any format you want.
I can only guess at the full picture you are trying to achieve but I do think there is value ask for what you want starting with the requirements, rather than starting with Exporting Tiddilers to JS and writting javascript.
Feel free to proceed however you wish but I/we are just trying to help you reach your goals in a quick and pragmatic way.
Hi, I’m a js developer, I have written many buttons.
You can use GitHub - tiddly-gittly/TiddlyWiki-TS-Plugin-Template: Typescript plugin template for TiddlyWiki5 or GitHub - tiddly-gittly/Modern.TiddlyDev: Modern TiddlyWiki Developing Environment to get start
And you will create a widget that renders a button, like this GoogleCalendarImportButton
Fill in Lifecycle methods, and add *.js.meta file with
module-type: widget
title: $:/plugins/xxxx.js
type: application/javascript
You will get a widget just like <$list widget in the core that you can use in the wikitext.
1 Like
For a detailed dev doc, you have to read the code, or read our TS type TW5-Typed/widget.d.ts at master · tiddly-gittly/TW5-Typed · GitHub
1 Like
If you say what library you are going to use we can tell you have to include / interface with it from tiddlywiki
1 Like