thatsmydoing
/
blog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<meta name="generator" content="Hugo 0.36" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/assets/css/theme.css">
	<link rel="alternate" href="/rss.xml" type="application/rss+xml" title="Pleasant Programmer">
	<script type="text/javascript" src="//use.typekit.net/iwm5axp.js"></script>
	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
	<title>TiddlyWiki in the Sky (or TiddlyWeb for TW5) - Pleasant Programmer</title>
</head>

<body>
	<header id="header" role="banner">
		<div id="thomas">
			<img src="/assets/img/thomas.gif" alt="DJ THOMAS IN DA HAUS">
			<img src="/assets/img/thomas.png" alt="Pleasant Programmer">
		</div>
		<h1 class="site-title"><a href="/">Pleasant Programmer</a></h1>
		<nav id="menu" role="navigation">
			<ul>
				<li class="twitter">
					<a href="http://twitter.com/pleasantprog">@pleasantprog</a>
				</li>
				<li><a href="/pages/projects.html">projects</a></li>
				<li><a href="/posts.html">archives</a></li>
				<li><a href="/tags.html">tags</a></li>
				<li><a href="/rss.xml">rss</a></li>
			</ul>
		</nav>
	</header>
	<div id="container">


<main id="content" role="main">
<article itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="p-name entry-title" itemprop="headline name">
		<a href="/posts/tiddlywiki-in-the-sky-or-tiddlyweb-for-tw5.html">TiddlyWiki in the Sky (or TiddlyWeb for TW5)</a></h1>
	<small>
		<span class="dateline">Posted: <time itemprop="datePublished" datetime="2015-12-24">2015-12-24</time></span>
		| More posts about
		
		<a class="tag p-category" href="/tags/sysadmin.html" rel="tag">
			sysadmin
		</a>
		
		<a class="tag p-category" href="/tags/tiddlywiki.html" rel="tag">
			tiddlywiki
		</a>
		
	</small>
	<div class="e-content entry-content" itemprop="entry-text">
		

<p>I&rsquo;ve always liked <a href="http://tiddlywiki.com">TiddlyWiki</a>. Back when it first came out, it was really amazing. A wiki all in one file, that worked in the browser. It didn&rsquo;t need a backend, it would just save itself as an all new HTML file with all your posts inside. I&rsquo;ve used it a lot over the years, as a personal wiki/journal and a class notebook. I even had a blog with it at one point using one of the server-side forks.</p>

<p>Now, there&rsquo;s TiddlyWiki5 which is a rewrite of the original TiddlyWiki that looks a whole lot snazzier, and I assume has better architecture overall. It also has experimental support for all the server-side platforms (particularly TiddlyWeb) that have cropped up.</p>

<p>If you&rsquo;re just looking for a simple server setup for TiddlyWiki5, it has native support for that on its own. There&rsquo;s plenty of documentation on the site. But if you&rsquo;re looking for more advanced features (like storing your posts in git or a database), then you&rsquo;ll need to use it with TiddlyWeb. The problem is that most of the documentation for TiddlyWeb still refers to the old TiddlyWiki.</p>

<p>To support TiddlyWiki5, we&rsquo;ll need a version of the wiki which has the TiddlyWeb plugin already installed and configured. After that, some tweaking is necessary to get TiddlyWeb to provide what the wiki requires.</p>

<h2 id="setting-up-tiddlywiki">Setting Up TiddlyWiki</h2>

<p>TiddlyWiki5 provides a command line tool via <code>npm</code> that allows building custom versions of the wiki. In fact, it comes with templates, called &ldquo;editions&rdquo;, that we can use for our setup. Assuming you already have it installed, create the wiki using</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-sh" data-lang="sh"><span></span>tiddlywiki mywiki --init tw5tank          <span style="color: #408080; font-style: italic"># create wiki from template</span>
</code></pre></div>

<p>This creates a wiki intended for use with <a href="https://tank.peermore.com/">Tank</a>, which is built on top of TiddlyWeb. From here, you should look in <code>mywiki/tiddlers/system</code> which contain the entries for <code>SiteTitle</code>, <code>SiteSubtitle</code>, <code>DefaultTiddlers</code>, and <code>tiddlyweb-host</code>. The first 3 should be configured however you want. These are necessary because they&rsquo;re needed before the wiki can load them from the server. <code>tiddlyweb-host</code> contains the location of the TiddlyWeb server, this should be <code>http://localhost:8080/</code> if you&rsquo;re just testing locally. With everything configured, you can build the new wiki by running</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-sh" data-lang="sh"><span></span>tiddlywiki mywiki --build
</code></pre></div>

<p>This will output the wiki to <code>mywiki/output/tw5tank.html</code>. You can now serve it using your favorite local webserver, like <code>python -m http.server</code>.</p>

<h2 id="setting-up-tiddlyweb">Setting Up TiddlyWeb</h2>

<p>The TiddlyWeb tutorial recommends using <code>tiddlywebwiki</code> which has all the plugins setup for a nice wiki instance for the old TiddlyWiki. It has a lot of features that aren&rsquo;t really needed, so we won&rsquo;t go with that. So first, we&rsquo;ll need to install TiddlyWeb and any plugins we might want to use.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-sh" data-lang="sh"><span></span>pip install tiddlyweb tiddlywebplugins.status tiddlywebplugins.cherrypy tiddlywebplugins.cors
</code></pre></div>

<p>Next, we&rsquo;ll need the tiddlyweb configuration in <code>tiddlywebconfig.py</code></p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-python" data-lang="python"><span></span><span style="color: #408080; font-style: italic"># A basic configuration.</span>
<span style="color: #408080; font-style: italic"># `pydoc tiddlyweb.config` for details on configuration items.</span>

<span style="color: #008000; font-weight: bold">import</span> <span style="color: #0000FF; font-weight: bold">tiddlywebplugins.status</span>

config <span style="color: #666666">=</span> {
    <span style="color: #BA2121">&#39;system_plugins&#39;</span>: [<span style="color: #BA2121">&#39;tiddlywebplugins.status&#39;</span>, <span style="color: #BA2121">&#39;tiddlywebplugins.cors&#39;</span>],
    <span style="color: #BA2121">&#39;secret&#39;</span>: <span style="color: #BA2121">&#39;36c98d6d14618c79f0ed2d49cd1b9e272d8d4bd0&#39;</span>,
    <span style="color: #BA2121">&#39;wsgi_server&#39;</span>: <span style="color: #BA2121">&#39;tiddlywebplugins.cherrypy&#39;</span>,
    <span style="color: #BA2121">&#39;cors.enable_non_simple&#39;</span>: <span style="color: #008000">True</span>
}

original_gather_data <span style="color: #666666">=</span> tiddlywebplugins<span style="color: #666666">.</span>status<span style="color: #666666">.</span>_gather_data

<span style="color: #008000; font-weight: bold">def</span> <span style="color: #0000FF">_status_gather_data</span>(environ):
    data <span style="color: #666666">=</span> original_gather_data(environ)
    data[<span style="color: #BA2121">&#39;space&#39;</span>] <span style="color: #666666">=</span> {<span style="color: #BA2121">&#39;recipe&#39;</span>: <span style="color: #BA2121">&#39;default&#39;</span>}
    <span style="color: #008000; font-weight: bold">return</span> data

tiddlywebplugins<span style="color: #666666">.</span>status<span style="color: #666666">.</span>_gather_data <span style="color: #666666">=</span> _status_gather_data
</code></pre></div>

<p>The tweaks involved are:</p>

<ul>
<li>using the status plugin which the wiki requires</li>
<li>monkeypatching the status plugin for the wiki to use the correct &ldquo;recipe&rdquo;</li>
<li>using cherrypy server instead of the buggy default one</li>
<li>using cors since we&rsquo;re not hosting the wiki itself on the same server</li>
</ul>

<p>With that, we just need to create the store that will hold our data</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-sh" data-lang="sh"><span></span>twanager recipe default <span style="color: #BA2121">&lt;&lt;EOF</span>
<span style="color: #BA2121">desc: standard TiddlyWebWiki environment</span>
<span style="color: #BA2121">policy: {&quot;read&quot;: [], &quot;create&quot;: [], &quot;manage&quot;: [&quot;R:ADMIN&quot;], &quot;accept&quot;: [], &quot;write&quot;: [&quot;R:ADMIN&quot;], &quot;owner&quot;: &quot;administrator&quot;, &quot;delete&quot;: [&quot;R:ADMIN&quot;]}</span>

<span style="color: #BA2121">/bags/default/tiddlers</span>
<span style="color: #BA2121">EOF</span>

twanager bag default <span style="color: #BA2121">&lt;&lt;EOF</span>
<span style="color: #BA2121">{&quot;policy&quot;: {&quot;read&quot;: [], &quot;create&quot;: [], &quot;manage&quot;: [&quot;R:ADMIN&quot;], &quot;accept&quot;: [], &quot;write&quot;: [], &quot;owner&quot;: &quot;administrator&quot;, &quot;delete&quot;: []}}</span>
<span style="color: #BA2121">EOF</span>
</code></pre></div>

<p>Finally, we can start the TiddlyWeb server</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-sh" data-lang="sh"><span></span>twanager server
</code></pre></div>

<h2 id="putting-it-all-together">Putting it all together</h2>

<p>Once you have the TiddlyWeb server running, you can just go to wherever you&rsquo;re hosting the wiki html and it should work. You can try creating some posts, and the check mark on the sidebar should be red for a while and then turn black. Once that&rsquo;s done it&rsquo;s saved. You can refresh your browser and your posts should still be there.</p>

<p>At this point, you can start customizing your TiddlyWeb instance, by changing your store to something like a database, or adding authorization. You can also tweak the server setup so you won&rsquo;t need CORS anymore.</p>

<p>TiddlyWiki5 is still relatively new. I hope that eventually, support for server-side and the plugin ecosystem grows to be as great as the old TiddlyWiki.</p>

	</div>
	<aside class="postpromonav">
		<nav>
			<ul class="pager clearfix">
				
				<li class="previous">
					<a href="/posts/is-my-terminal-window-active.html" rel="prev" title="Is My Terminal Window Active?">&larr; Previous post</a>
				</li>
				
				
				<li class="next">
					<a href="/posts/cloudflare-shenanigans.html" rel="next" title="Cloudflare Shenanigans">Next post &rarr;</a>
				</li>
				
			</ul>
		</nav>
	</aside>
	<section class="comments">
		<script
	data-isso="https://isso.pleasantprogrammer.com/"
	data-isso-require-author="true"
	data-isso-vote="false"
	src="https://isso.pleasantprogrammer.com/js/embed.min.js">
</script>
<section id="isso-thread"></section>

	</section>
</article>
</main>


	<footer id="footer" role="contentinfo">
		<p>
		<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
			<img alt="CC-BY-SA" style="border-width:0" src="https://licensebuttons.net/l/by-sa/3.0/80x15.png">
		</a> &copy; 2018 Thomas Dy - Powered by <a href="http://gohugo.io">Hugo</a></p>
	</footer>
</div>

<script src="/assets/js/konami.js"></script>
<script>
var easter_egg = new Konami();
easter_egg.code = function() {
	var el = document.getElementById('thomas');
	if(el.className == "whoa") {
		el.className = "";
	}
	else {
		el.className = "whoa";
	}
	document.body.scrollTop = document.documentElement.scrollTop = 0;
}
easter_egg.load();


</script>


</body>
</html>