123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <!DOCTYPE html>
- <html lang="en-us">
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="Hugo 0.92.0" />
- <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><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’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’t need a backend, it would just save itself as an all new HTML file with all your posts inside. I’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’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’re just looking for a simple server setup for TiddlyWiki5, it has native support for that on its own. There’s plenty of documentation on the site. But if you’re looking for more advanced features (like storing your posts in git or a database), then you’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’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 “editions”, that we can use for our setup. Assuming you already have it installed, create the wiki using</p>
- <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">tiddlywiki mywiki --init tw5tank <span style="color:#007f7f"># 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’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’re just testing locally. With everything configured, you can build the new wiki by running</p>
- <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">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’t really needed, so we won’t go with that. So first, we’ll need to install TiddlyWeb and any plugins we might want to use.</p>
- <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">pip install tiddlyweb tiddlywebplugins.status tiddlywebplugins.cherrypy tiddlywebplugins.cors
- </code></pre></div><p>Next, we’ll need the tiddlyweb configuration in <code>tiddlywebconfig.py</code></p>
- <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#007f7f"># A basic configuration.</span>
- <span style="color:#007f7f"># `pydoc tiddlyweb.config` for details on configuration items.</span>
- <span style="color:#fff;font-weight:bold">import</span> tiddlywebplugins.status
- config = {
- <span style="color:#0ff;font-weight:bold">'system_plugins'</span>: [<span style="color:#0ff;font-weight:bold">'tiddlywebplugins.status'</span>, <span style="color:#0ff;font-weight:bold">'tiddlywebplugins.cors'</span>],
- <span style="color:#0ff;font-weight:bold">'secret'</span>: <span style="color:#0ff;font-weight:bold">'36c98d6d14618c79f0ed2d49cd1b9e272d8d4bd0'</span>,
- <span style="color:#0ff;font-weight:bold">'wsgi_server'</span>: <span style="color:#0ff;font-weight:bold">'tiddlywebplugins.cherrypy'</span>,
- <span style="color:#0ff;font-weight:bold">'cors.enable_non_simple'</span>: <span style="color:#fff;font-weight:bold">True</span>
- }
- original_gather_data = tiddlywebplugins.status._gather_data
- <span style="color:#fff;font-weight:bold">def</span> _status_gather_data(environ):
- data = original_gather_data(environ)
- data[<span style="color:#0ff;font-weight:bold">'space'</span>] = {<span style="color:#0ff;font-weight:bold">'recipe'</span>: <span style="color:#0ff;font-weight:bold">'default'</span>}
- <span style="color:#fff;font-weight:bold">return</span> data
- tiddlywebplugins.status._gather_data = _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 “recipe”</li>
- <li>using cherrypy server instead of the buggy default one</li>
- <li>using cors since we’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"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">twanager recipe default <span style="color:#0ff;font-weight:bold"><<EOF
- </span><span style="color:#0ff;font-weight:bold">desc: standard TiddlyWebWiki environment
- </span><span style="color:#0ff;font-weight:bold">policy: {"read": [], "create": [], "manage": ["R:ADMIN"], "accept": [], "write": ["R:ADMIN"], "owner": "administrator", "delete": ["R:ADMIN"]}
- </span><span style="color:#0ff;font-weight:bold">
- </span><span style="color:#0ff;font-weight:bold">/bags/default/tiddlers
- </span><span style="color:#0ff;font-weight:bold">EOF</span>
- twanager bag default <span style="color:#0ff;font-weight:bold"><<EOF
- </span><span style="color:#0ff;font-weight:bold">{"policy": {"read": [], "create": [], "manage": ["R:ADMIN"], "accept": [], "write": [], "owner": "administrator", "delete": []}}
- </span><span style="color:#0ff;font-weight:bold">EOF</span>
- </code></pre></div><p>Finally, we can start the TiddlyWeb server</p>
- <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">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’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’s done it’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’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?">← Previous post</a>
- </li>
-
-
- <li class="next">
- <a href="/posts/cloudflare-shenanigans.html" rel="next" title="Cloudflare Shenanigans">Next post →</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> © 2022 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>
|