Linking my HTML pages and their Org Mode sources


If you have tinkered with Org Mode, you know you can control the information which appears in the footer using two variables: org-html-postamble (should I show the footer?) and org-html-postamble-format (how does the footer look like?) 1.

Customizing the postamble

Special format strings can be used in org-html-postamble-format to insert content depending on the page. In fact, most of the information shown on the footer of my web pages, that is, author, last modification and publication date, is directly supported by Org Mode.

The link to the source code, however, requires a special handling. More in details, first I customized org-html-postamble-format, in my .emacs.el file, adding a placeholder for the source code:

(setq org-html-postamble t)

(setq org-html-postamble-format 
'(("en" "<p class=\"author\">Author: %a</p>
   <p class=\"date\">Last modified: %C (created on: %d)</p>
   <p class=\"date\">Published: %T</p>
   <p id=\"source-link\" class=\"source\"></p>")))

Fixing postamble content at run time

I then include the following Javascript code in each page of my website:

deploy_url = ""
staging_url = "http://localhost:4567/"
source_url = ""

document.addEventListener("DOMContentLoaded", function(event) { 
    file_link_position = document.getElementById("source-link")
    url = document.URL;
    file = url.replace(deploy_url, "");
    file = file.replace(staging_url, ""); /* this is useless in production, useful in staging */
    file = file.replace(".html", ".org");
    file_link_position.innerHTML = "Link to source: <a href=\"" + source_url + file + "\">" + source_url + file + "</a>"

The code determines the link to the source code, by appending the name of the file, derived from the current URL to the URL of the Git repository where sources are hosted. It then inserts the link computed in this way to the element identified by source-link.

At page generation time, Org Mode includes the footer with the source-link placeholder. When the page is loaded in a browser, the JavaScript inserts the link to the source code of the page.



See HTML preamble and postamble for the documentation.

Author: Adolfo Villafiorita

Last modified: 2020-06-29 Mon 22:35 (created on: 2020-05-27 Wed 00:00)

Published: 2020-06-30 Tue 22:55