In the first part of this tutorial, we installed Node, NPM and Tiddlywiki and used the terminal to both run a tiddlywiki server and extract the tiddlers with a particular tag as individual static pages.
Next we're going to look at the tiddlers that are responsible for formatting the output that we got.
The command that we used to generate our static pages was tweaked from the example given in the documentation at Tiddlywiki.com
tiddlywiki --rendertiddlers [!is[system]tag[Live]] $:/core/templates/static.tiddler.html static text/plainTo generate the css, we used
tiddlywiki --rendertiddler $:/core/templates/static.template.css static/static.css text/plainSo, we want to find the tiddlers $:/core/templates/static.tiddler.html and $:/core/templates/static.template.css.
These are easy to find, but we need to use the advanced search and look in the shadow tiddlers tab.
In theory we can just over-write these tiddlers but I prefer to keep my changes separate from the core because I think it's neater that way. I'm going to clone each of these tiddlers and change 'core' to my initials 'rs'. All tiddlers that start $: are sxcluded from the regular search and any additions of this kind that I make, I like to start with a common prefix indicating my authorship so that they are easy to find, group and manage (ie; exporting them all to a different wiki).
Once I've cloned them, I'll check the build process with the new names in place of the old ones.
By doing it this way, I know that I can always go back to the original templates easily if I make a real mess of something.
First, let's take a look at the html. It's a straightforward template and it looks like this;
\define tv-wikilink-template() $uri_doubleencoded$.html
\define tv-config-toolbar-icons() no
\define tv-config-toolbar-text() no
\define tv-config-toolbar-class() tc-btn-invisible
`<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="TiddlyWiki" />
<meta name="tiddlywiki-version" content="`{{$:/core/templates/version}}`" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no">
<link id="faviconLink" rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="static.css">
<title>`<$view field="caption"><$view field="title"/></$view>: {{$:/core/wiki/title}}`</title>
</head>
<body class="tc-body">
`{{$:/StaticBanner||$:/core/templates/html-tiddler}}`
<section class="tc-story-river">
`<$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]">
<$view tiddler="$:/core/ui/ViewTemplate" format="htmlwikified"/>
</$importvariables>`
</section>
</body>
</html>everything between <body... and </body> is the content of the page.
We see reference to a tiddler called $:/StaticBanner. Let's have a look for it. Doesn't seem to exist.
Let's make one but prefix it with rs, so we don't lose it and tweak the code to point to our new static banner.
We re-run the build script and refresh the browser window that's displaying one of our static pages and we can see that the content from this tiddler is being inserted at the top of every page. That's good :)
Then add a footer.
Added the code for the footer - the tweak to the size of the font on the page was messing with it sitting properly on the bottom of the screen.
tweak required to the footer code
<footer class="footer">
<div class="container">
<p class="text-muted">
`{{$:/rs/static_footer||$:/core/templates/html-tiddler}}`
</p>
</div>
</footer>What to put in the footer? For now I'm just going to put a link to the creative commons licence that I want to use.
You can get one that you like from here https://creativecommons.org/choose/
Next, I want to get rid of the extraneous information from the page - I don't want the tiddler title to be there, or the tags or the date.
I want my static pages to look as much like 'normal' web pages as possible, and not like TW. I might choose to add some of these elements back in later if I think they add value to the content (if, for example, I decide to use a tagging scheme).
I can see that the rest of the code is wrapped around the view template $:/core/ui/ViewTemplate so next I'm going to clone that and change its reference.
Initially, the view template looks like this
\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set>Let's not touch what we don't have to and just strip out the bits we think we don't need.
But YO! What it's actually doing is transcluding all the parts of the regular view template together based on the fact that they have the tag $:/tags/ViewTemplate
Let's look at all the tiddlers that are carrying this tag
The easiest way to find a system tag and the tiddlers that carry it is to go to Tiddlywiki.com and drag the tiddler called 'System Tags' across into your own wiki. You can give it the sidebar tag.
$:/core/ui/ViewTemplate/title
$:/core/ui/ViewTemplate/unfold
$:/core/ui/ViewTemplate/subtitle
$:/core/ui/ViewTemplate/tags
$:/core/ui/ViewTemplate/classic
$:/core/ui/ViewTemplate/body
$:/core/ui/ViewTemplate/import
$:/core/ui/ViewTemplate/pluginI don't know what some of those do. Ideally I'd like to be able to remove them one by one.
I can't just remove this tag, though, because it's the same tag that's rendering them into the browser UI. If I remove the tag from all of them, it will remove all the UI from my wiki and I won't have an interface to change it from.
(I should demonstrate the effect of doing just that and explain how I would recover from it.)
What we'll do here instead is give them all another tag and change the reference here to use that tag instead. Then we can experiment with deleting the tag from some of them and seeing how it chsnges the behaviour.
It wouldn't be too hard to do by hand, but we can also hack something together that looks like this
We use it to add the tag $:/rs/tags/ViewTemplate to them all, then we can change the reference and everything should work the same.
What we find is that it does work but, interestingly, the order of the components has gone off, because we're missing a list field somewhere that provides the ordering to the original tag.
It will probably be on the tag's own tiddler.
Correct. By copying the list field from $:/tags/ViewTemplate to $:/rs/tags/ViewTemplate it restores the order when I rerun ./build.sh
Now that the order is restored, we can see which tiddlers to remove the tag from.
We remove the tag from
$:/core/ui/ViewTemplate/title
$:/core/ui/ViewTemplate/subtitle
$:/core/ui/ViewTemplate/tagsNow we're cooking.
Now let's look at the css in $:/rs/templates/static.template.css
{{$:/boot/boot.css||$:/core/templates/plain-text-tiddler}}
{{$:/core/ui/PageStylesheet||$:/core/templates/wikified-tiddler}}So, it just transcludes the css from two different places. Why are they treated differently? Not exactly sure. I think it's just because the second one uses transclusion whereas the first one doesn't need it.
Doesn't really matter because all I need to do is start with one of them as the basis for my changes.
First try dropping the first on altogether
As expected, it doesn't seem to have an effect.
Now clone the second one and alter the reference.
now test again.
Works.
Now look at modifying the pagestylesheet. It concatenates all the tiddlers tagged $:/tags/Stylesheet
We use our tag adder to add a new tag to each of them, then we can start removing it from the ones that look like too much.
NOTE HERE that we are using TW as a CSS bundler, which is pretty interesting. We won't see that functionality in the regular web stack until we get to webpack.
I wonder how we use it as a javascript bundler, too?
The css is quite complicated.
I am reminded that TW has top bar and side-bar code built in to it and it might be possible to add them that way if you want them. And a footer?
I am also minded to think that it might be better to just have Tiddlywiki exporting the page body with links and have the other stuff generated somewhere else - but then again, tw is the thing that knows about how the site is structured - so its the only thing that can generate the side-bar TOC for example.
We can use the developer tools to explore the css that is being applied to things.
Nevertheless it is quite complicated.
Some of the values are being transcluded from elsewhere.
This seems pretty complicated.
Maybe a better way to do it is to start from scratch and add styles until the page looks the way we want it to? At least that way we should be in a position to know what each part of our css does.
To do this we'll change $:/rs/templates/static.template.css
{{$:/rs/normalise.css||$:/core/templates/plain-text-tiddler}}
{{$:/rs/static_styles.css||$:/core/templates/plain-text-tiddler}}Aha!
(into the static_styles, I put a backround: red on body to show it's working)
It works tremongously!
NEXT Part 3, Adding Bootstrap