tlwiki/vimwiki.md at 07d0e73a987d42bbec2f40494f3cac27f58a1c93

4.8 KiB

Raw Blame History

title	description	author	date	draft
Vimwiki	Using vimwiki to generate a static html site	Thurstylark	2021-9-25	true

Source: https://git.thurstylark.com/vimwiki.git/

Features

All content is stored in a git repo as vimwiki content (to avoid having to sync HTML content as well)
All content automatically converted to HTML and moved to the appropriate directory when the git repo is pushed
Template based on bootstrap, so theming/building the template is easy peasy

Table tweaks

Tables without any styles are gross, so let's use the styles from Bootstrap. Problem is that Vimwiki doesn't provide a way to add a class to a table element, so we'll do it with JQuery:

<head>
...
	<script>
		$(document).ready(function(){
			$("table").addClass("table table-condensed table-hover");
		});
	</script>
...
</head>

This adds .table, .table-condensed, and .table-hover classes to every table element in the whole document. Don't see why it should be any other way for the moment.

References

HTML Checkboxes

By default, there is no difference between how a non-checkbox list item, unchecked list item, and a checked list item are displayed when exported to HTML.

There are 5 states of a checkbox, 0-4, and they each represent a different level of completeness. This is mainly for checklist items with children.

Checkbox states:

State *	% Complete	li class	Unicode character	Escape sequence	HTML code
0	0%	`done0`	◯	`\u25EF`	`◯`
1	1-33%	`done1`	◔	`\u25D4`	`◔`
2	34-66%	`done2`	◑	`\u25D1`	`◑`
3	67-99%	`done3`	◕	`\u25D5`	`◕`
4	100%	`done4`	✔	`\u2714`	`✔`

Now, in order to use these in our HTML, we just have to write a style for ul li.doneX:before in our header like so:

<style>
ul li.done0:before {content: '\25EF';}
ul li.done1:before {content: '\25D4';}
ul li.done2:before {content: '\25D1';}
ul li.done3:before {content: '\25D5';}
ul li.done4:before {content: '\2714';}
</style>

Now here's a few test lists:

Unfinished item
Finished item
Parent item 1
- Child item 1
- Child item 2
- Child item 3
- Child item 4
Parent item 2
- Child item 1
- Child item 2
- Child item 3
- Child item 4
Parent item 3
- Child item 1
- Child item 2
- Child item 3
- Child item 4
Parent item 4
- Child item 1
- Child item 2
- Child item 3
- Child item 4
Parent item 5
- Child item 1
- Child item 2
- Child item 3
- Child item 4

Push to Deploy

The easiest way to manage this wiki, and also allow it to be hosted, is to commit all the wiki documents to a repo, and script the deployment to the wiki's webroot using git's post-receive hook. The origin remote repo also hosts the http server, so it makes things simple. Less simple because it requires a vim plugin to compile the HTML files, but it's still doable.

First part of this solution is the vimrc for the remote machine. This sets the destination for the final html files, the origin wiki files, and the html template page.

set nocompatible
filetype plugin on
syntax on
let g:vimwiki_list = [{
  \ 'path': '/tmp/vimwiki/',
  \ 'path_html': '/srv/wiki/',
  \ 'template_path': '/tmp/vimwiki/html-template',
  \ 'template_default': 'index',
  \ 'template_ext': '.html'}]

Note: lines 1-3 are required for vimwiki to work correctly with the post-receive hook. The rest of the config are options for vimwiki directly.

The post-receive hook is a fairly simple bash script. This script is located at ~/git/vimwiki.git/hooks/post-receive, and is run every time the repo receives a push from downstream.

#!/bin/bash
mkdir /tmp/vimwiki
export GIT_WORK_TREE=/tmp/vimwiki

export GIT_DIR=/home/thurstylark/git/vimwiki.git 

git checkout -f

vim -u /tmp/vimwiki/html-template/srv-vimrc -c VimwikiAll2HTML -c q /tmp/vimwiki/index.wiki 

cp /tmp/vimwiki/html-template/slate.bootstrap.css /srv/wiki/

rm -rf /tmp/vimwiki

It first makes a directory under /tmp for the contents of the repo, sets $GIT_WORK_TREE and $GIT_DIR, and does a git checkout for all the files in the repo.

Line 9 is where the magic happens. This line runs vim with the vimrc from above, and runs the :VimwikiAll2HTML command.

Next, the script copies over the one CSS file that I need to host myself, and lastly, it cleans up the temp dir.

4.8 KiB Raw Blame History