OK - now we're getting somewhere.
When we run our build command, our wiki entries are getting turned into static pages that are loading a bootstrap navbar and all the trappings that that involves.
SO, in these pages, we now have access to both bootstrap/jquery and to the power of tiddlywiki - unless we discover some horrible way they still don't want to play together.
Here's where I think we're going with this:
1. We add the footer and some token content there. 2. We "wire in" the top bar and we make some directory-type entries to provide access to the articles 3. We try and get that wiring to respond to wikitext
6. We want to put in google analytics, to show that we can include arbitrary script on the page
page specific content
adding bits to individual pages ie; next page / previous page buttons to some articles or custom javascript snippets.
7. Let's try building a page with our own javascript widget in it (bouncing balls)
This part
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>Is a tempting target for a tw list in place of what's coded there. I bet we have to do some hacking to get it to work.
For a start, this is a html tiddler, not a wikitext tiddler, but if we change that. I bet we need to use a different template to transclude it into the page template.
Let's stick in the code we wish would work.
Something like this
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Recent<span class="caret"></span></a>
<ul class="dropdown-menu">
<$list filter="[tag[Live]sort[created]limit[10]]">
<li><a href="./{{!!title}}">{{!!title}}</a></li>
</$list>
</ul>with the text/html in the type field, this doesn't get wikified, but without it, it does.
At the moment, it's being included in the template like this
{{$:/rs/StaticBanner||$:/core/templates/html-tiddler}}
But we already saw things being included like this
{{$:/boot/boot.css||$:/core/templates/plain-text-tiddler}}
{{$:/core/ui/PageStylesheet||$:/core/templates/wikified-tiddler}}in our stylesheet tiddler, so let's give this a whirl
{{$:/rs/StaticBanner||$:/core/templates/wikified-tiddler}}
A massive fail - the header disappears altogether - if we look at the source of the page we see it's because the header got rendered into it without any formatting at all - it's just the textual output of teh tiddler, not what we wanted at all.
Let's check that what was originally there doesn't 'just work'
Hmmm... it 'kinda' works - turns out the entries in the list get properly rendered. Which, hoonestly, isn't what I expected.
But the link, set in the href doesn't work - it isn't getting wikified. Some more digging is required. This specific problem and things like it, I have encountered before.
Patience.
if I do it this way
<li><a href={{!!title}}>{{!!title}}</a></li>IT does 'work', even when I use the plain text page template.
But the links are malformed - they need to have the .html extension and to be url encoded.
For that I think we need the view widget. Will it work in the same place?
<$view field="title" format="urlencoded"/>like this
exporting%20static%20sites%20from%20tiddlywiki%20part%204Here's where we get into Tiddlywiki "transclusion hell" where we're stumbling around for the right way to do something "simple".
I need to figure out if the google group will tell me how to do it - I know it's something that has been discussed a lot. I remember particularly that Tobias Beer made a catalogue of some kind of all the different ways that transclusion happens which are subtly different.
I want to know how to transclude into the props of an html element.
What's frustrating is that this works
<a href={{!!title}}>but this doesn't
<a href={{!!title||$:/rs/templates/urlencoded}}>We learn. We move forwards. We progress. We learn. We move forwards. We progress.
This is the best lead I've found so far towards solving the problem
https://groups.google.com/forum/#!searchin/tiddlywiki/transclusion$20html|sort:date/tiddlywiki/W_PxCSTNaaU/jy88sPj3DAAJ
Maybe some variant of the old "double macro" tick is required - or the macrocall widget - it's all coming back to mae now. The horror.
Oh snap - that was actually a lot easier than I was thinking.
Rookie error.
I was thinking I needed to make good external urls but I was being dumb. I'd already seen that the renderer makes the internal urls into good external urls all on its own.
Blasting on with images - easy
Universal (every page scripts) - easy
Per-page scripts, a bit harder - we get "safe-script" tags.
Now, we've got a way to load CSS for every static page in our site, but wouldn't it be neat if we had a way to load some CSS just for one specific page if we wanted to?
Sure it would!
NEXT: Part 5, Per-page Resources