2024-10-19: Starting Lisp on Yay Boo!

A first post to talk about starting Lisp on Yay Boo!

I dabble - in Lisp and computery things. And sometimes I want to write down a few ideas and notes. I came across Yay.Boo! the other day and thought: "seems easy, why not?". So, here we are.

Although I dabble, there are some things I have fixed and don't want to change. And one of these is my use of vim and vimwiki. So, starting these pages means setting up vimwiki to generate files to make a nice html website. I had to learn one or two new things, but the output is mostly how I want it.

To create the basic setup for vimwiki, I put the following settings in my .vimrc file:

var lisp = {}
lisp.path = '~/Documents/lisp/'
lisp.diary_rel_path = ''
lisp.path_html = '~/Documents/lisp/www'
lisp.template_ext = '.html'
lisp.template_default = 'default'
lisp.template_path = '~/Documents/lisp/templates'

g:vimwiki_list = [lisp]

This creates a lisp setting, pointing it to some useful folders and a default template. Notice that the diary relative path is empty - Yay.Boo! does not support folders, so the site must use a flat structure.

The default template is:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
    <title>%title%</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <header>
    <nav>
      <a href="/">Home</a>
      <a href="/blog.html">Blog</a>
    </nav>
    <h1>%title%</h1>
    </header>

    <main>
    %content%
    </main>

    <footer>
    <small>Page output from a <a href="http://vimwiki.github.io/">VimWiki</a> on %date%.</small>
    </footer>
</body>
</html>

One feature I wanted was to automatically add syntax highlighting to code blocks. Unfortunately, I cannot make vimwiki and my favourite syntax highlighter, rouge, work properly together. Using the following options does tell vimwiki about rouge and embed the html:

g:vimwiki_listing_hl = 1
g:vimwiki_listing_hl_command = 'rougify highlight -f html'

But somewhere along the line less-than characters become "<" etc.

(Instead, I use a ruby script to add in the highlighting for me.)

The second step is to make our website use the right style sheet. The necessary style sheet can be generated from rouge and put into the html output folder, e.g. using the command:

$ rougify style igorpro --scope "" > ~/Documents/lisp/www/rouge-style.css

Note the use of scope to remove the default "highlight" class.

Complete this second step by editing the default.html template to include the second stylesheet:

    <link rel="stylesheet" href="rouge-style.css">

Finally, we can see that everything works by admiring the colours on this piece of code:

;; function to double a number
(defun double (n)
  "Doubles an input number"
  (* 2 n))

What is left?

I cannot prevent vimwiki from outputting headers as links.
I would like a better automated output for the list of diary entries.

Currently, I avoid headers(!) and use a small program to write out a table of contents for the diary entries. But some vimwiki hacking might offer a better solution.

Update 21/10: prevent the output of header links by editing line 1259 of file "autoload/vimwiki/html.vim" in the vimwiki plugin:

   " let line = h_part.a_tag.h_text.'</a></h'.h_level.'></div>'
   let line = h_part.h_text.'</h'.h_level.'></div>'