thurstylark
/
tlwiki
1
0
Fork 0
Code Issues 6 Pull Requests Projects Releases Wiki Activity
tlwiki/content/misc/archive/thurstylark-vps/vimwiki.md

143 lines
4.8 KiB
Markdown
Raw Normal View History

Massaging the current vimwiki pages into md suitable for the new hugo setup
2021-09-26 04:58:15 +00:00
---
title: "Vimwiki"
description: "Using vimwiki to generate a static html site"
author: "Thurstylark"
date: 2021-9-25
draft: true
---
Converting the pages to markdown with sed
2021-02-12 21:14:09 +00:00
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` | `&#9711;` |
| 1 | 1-33% | `done1` | ◔ | `\u25D4` | `&#9684;` |
| 2 | 34-66% | `done2` | ◑ | `\u25D1` | `&#9681;` |
| 3 | 67-99% | `done3` | ◕ | `\u25D5` | `&#9685;` |
| 4 | 100% | `done4` | ✔ | `\u2714` | `&#10004;` |
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:
Massaging the current vimwiki pages into md suitable for the new hugo setup
2021-09-26 04:58:15 +00:00
```
Converting the pages to markdown with sed
2021-02-12 21:14:09 +00:00
<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.
Massaging the current vimwiki pages into md suitable for the new hugo setup
2021-09-26 04:58:15 +00:00
```
Converting the pages to markdown with sed
2021-02-12 21:14:09 +00:00
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.
Massaging the current vimwiki pages into md suitable for the new hugo setup
2021-09-26 04:58:15 +00:00
```
Converting the pages to markdown with sed
2021-02-12 21:14:09 +00:00
#!/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.