A test page for my semi-custom static site generator

This is an example page that tries to show all features of my semi-custom static site generator. This website is generated using the org-mode HTML publishing features together with a hefty dose of custom Emacs Lisp and CSS. This page is meant as a test of the different styles and functionality of the website. It will contain a lot of Lorem Ipsum.

• This is an unordered list¹¹Here is an inline footnote. On narrow screens, this will not be displayed. Instead, the footnotes will only be in the footnotes section.
• I am trying this out
• Another item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut²² Hi, I am in the margin. aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Here is an ordered list This is a margin note. On narrow screeens, this will automatially be inlined.
2. With a few items
3. Great.

Here is a quote block:

:sitemap-function

Plug-in function to use for generation of the sitemap. It is called with two arguments: the title of the site-map and a representation of the files and directories involved in the project as a nested list, which can further be transformed using org-list-to-generic, org-list-to-subtree and alike. Default value generates a plain list of links to all files in the project.

This is a source code block³³ This is an out-of line footnote. Footnote definitions are very difficult and we must be careful. For example, any text between this and the next footnote definition or section is considered part of the footnote… For example. this paragraph is part of the sidenote/footnote. :

(defun my-blog-parse-sitemap-list (l)
  "Convert the sitemap list in to a list of filenames."
  (mapcar #'(lambda (i)
              (let ((link (with-temp-buffer
                            (let ((org-inhibit-startup nil))
                              (insert (car i))
                              (org-mode)
                              (goto-char (point-min))
                              (org-element-link-parser)))))
                (when link
                  (plist-get (cadr link) :path))))
          (cdr l)))

This is an equation:

And we can reference it: \eqref{org2cebc93}. Good, this works. Here is some inline math: \(a^2 + b^2 = c^2\). And here is an unnumbered equation:

Here is a tempo template that lets me insert a folded block:

(require 'org-tempo)
(tempo-define-template "html-details" ; just some name for the template
                       '("#+HTML: <details><summary></b>" p
                         "<b></summary>" n p n
                         "#+HTML: </details>" n)
                       "<d"
                       "Insert collapsible block" ; documentation
                       'org-tempo-tags)

(message "Hello World")

This is what comes after the details block. The code to generate the above is:

#+HTML: <details><summary><b>Anything here is collapsed</b></summary>

This is a little nicer than using a =#+BEGIN_details= block because it preserves syntax highlighting of nested blocks...

#+begin_src emacs-lisp
(message "Hello World")
#+end_src

#+HTML: </details>

Here we have an equation in the margin. Seems to me that reducing all of physics to this one equation is not the whole story: \begin{equation*} E = mc^2 \end{equation*} It does look pretty though.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.⁴⁴ Here is more math in the margin, but this time as footnote: \begin{equation*} S = \sum_{i=1}^n f(x_i^{*}) \Delta x_i \end{equation*} Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Let's add a photo of the top of Mammoth Mountain here. This works and displays the image inline with the main text.

A nicer way to caption inline images is using a margin note here. But this doesn't allow for figure numbering in the caption. I think that is OK.

In the spirit of tufte-css, if we want to display a figure across the whole width of the page, we assign it the fullwidth class using a #+begin_fullwidth ... #+end_fullwidth block.

This is of course a very important topic. For this, I will need to cite Shannon [2]. This seems to work. Let's cite a few more things [3], [4]. This is almost too easy.