143 lines
4.8 KiB
Markdown
143 lines
4.8 KiB
Markdown
|
---
|
||
|
|
title: "Vimwiki"
|
||
|
|
description: "Using vimwiki to generate a static html site"
|
||
|
|
author: "Thurstylark"
|
||
|
|
date: 2021-9-25
|
||
|
|
draft: 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](https://git.thurstylark.com/vimwiki.git/tree/html-template/index.html) 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:
|
||
|
|
|
||
|
|
```prettyprint
|
||
|
|
<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
|
||
|
|
|
||
|
|
- http://stackoverflow.com/a/39897883
|
||
|
|
- http://www.w3schools.com/jquery/jquery_syntax.asp
|
||
|
|
|
||
|
|
## 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
|
||
|
|
- [X] Finished item
|
||
|
|
- [ ] Parent item 1
|
||
|
|
- [X] Child item 1
|
||
|
|
- [ ] Child item 2
|
||
|
|
- [ ] Child item 3
|
||
|
|
- [ ] Child item 4
|
||
|
|
- [ ] Parent item 2
|
||
|
|
- [X] Child item 1
|
||
|
|
- [X] Child item 2
|
||
|
|
- [ ] Child item 3
|
||
|
|
- [ ] Child item 4
|
||
|
|
- [ ] Parent item 3
|
||
|
|
- [X] Child item 1
|
||
|
|
- [X] Child item 2
|
||
|
|
- [X] Child item 3
|
||
|
|
- [ ] Child item 4
|
||
|
|
- [X] Parent item 4
|
||
|
|
- [X] Child item 1
|
||
|
|
- [X] Child item 2
|
||
|
|
- [X] Child item 3
|
||
|
|
- [X] 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.
|