Building this Website (3. navigation)

Friday, May 1, 2015

This is a series of posts which technically describes how Not Even Odd is built. It is primarily meant as a guide for static website creation using TiddlyWiki.

Planning the Navigation

All the dynamic goodness of TiddlyWiki (such as the search, the sidebar, ...) will not be available in the static HTML pages. Thus you must plan a way for the user to navigate the site. For this site, I kept things very simple and created four tiddlers which contains basic lists:

Those are simple lists%20ListWidget]] based on the conventions chosen for content selection. For example, to show all tags, I just do something like this:

All Tags:
<<list-links filter:"[tags[]!is[system]!has[draft.of]!tag[private]!tag[draft]]">>

You may also want to include some navigation element include in the site template and this can be done like this:

< html from the site template ... >
`<$view tiddler="All Tags" format="htmlwikified" />`
</ html from the site template ... >

Landing Page

An interesting question is what the landing page of the site (ie. index.html file) should be. There are many options depending on how you want your site to look like. It could be static text, but in the case of this site, I decided the landing page should be the latest post.

I thus created a simple tiddler index.html_helper (which I tag as private) which just shows the latest post:

<$list filter="[!tag[private]!tag[draft]!has[notpost]!has[draft.of]!is[system]sort[created]last[]]" />

and I use this information during the static pages generation to point index.html to the right page:

# index.html as a symlink to the latest post
tiddlywiki --rendertiddler index.html_helper index.html_helper
INDEX=$(sed -ne 's/.*href="#\(.*\)">.*/\1/p' output/index.html_helper)
ln -s "$INDEX.html" output/index.html
rm output/index.html_helper

Here I am again using a tiny bit of shell along with TiddlyWiki and it seems like a powerful technique.

previous: template
next: tags

Not Even Odd

Musings and mumblings of a random nerd

Last 10 Posts:

Building this Website (8. feed)
Free Software
Building this Website (7. plugins)
Building this Website (6. external files)
Building this Website (5. tiddlers' date)
Building this Website (4. tags)
Building this Website (3. navigation)
Building this Website (2. template)
Building this Website (1. content selection)
Building this Website


see all tags
    All Posts
    (alphabetically | chronologically)

Follow:        ...