January, 1st, 2021

My Demo Page

A demonstration and test page for my Org-file to HTML export setup

Introduction

This document serves as a demonstration/test page for the setup and styling used on this blog. To create blog posts I use plain text files structured in the Org file format which are then automatically exported to HTML files. One of the main advantages of this setup is that I can concentrate on the content of the documents without being distracted by technicalities like styles or complicated syntax. In the following I will give a very short introduction to Org Mode and to my reasons to use it for blogging. Finally, the remainder of this document contains mainly placeholder texts to demonstrate styling of different features in Org Mode.

What is Org Mode?

Org Mode is a build-in major mode in GNU Emacs to create plain-text files for all sorts of use-cases like keeping notes, maintaining TODO lists, authoring documents and much more.

Demonstration

Overview of features that should be tested

On this page I test different features of org-mode including

  1. [X] Title, subtitle, date of file
  2. [X] Table of contents
  3. [-] Section headings
    • [X] without status
    • [ ] with TODO
    • [ ] with DONE
    • [ ] with priority
    • [ ] with tags
  4. [X] Text markup
    • [X] italics, bold, underlined, strikethrough, combinations thereof
    • [X] verbatim
    • [X] inline code
  5. [ ] Hyperlinks
  6. [ ] Structure blocks
    • [ ] example
    • [ ] quote
    • [ ] source code
  7. [ ] Lists
    • [ ] unordered
    • [ ] ordered
  8. [ ] Tables
  9. [ ] Images
  10. [ ] Footnotes
  11. [ ] Math formulas
    • [ ] inline
    • [ ] display
  12. [ ] Footer

Section Headings

Here are some examples for section headings of different levels. This text belongs to a first level section.

This is a second level section heading

Second level section headings use a smaller font size than first level section headings.

This is a third level section heading

Third, fourth and fifth level section headings use the same font size as the body text but are set in bold.

  • This is a sixth level section heading

    Section headings of levels higher than five are printed as list items.

Text Markup

Org mode files support a great variety of different text markup styles. These include italic texts, bold text, underlined text, strikethrough text, and all sorts of combinations thereof like bold italic underlined strikethrough text.

It is also possible to use sub- and superscripts: H2O, C12, Ebody, Pvehicle.

Other text markup styles include verbatim text, inline code or inline code can also be printed with syntax highlighting (require 'package). Source code examples look as follows. 

> find . -iname ".sh"

Hyperlinks

Structure Blocks

Quotes

This is a famous quote! 

  1: ;; publish.el --- Publish org-mode project on Gitlab Pages
  2: ;; Author: pekaha
  3: 
  4: ;;; Commentary:
  5: ;; This script will convert the org-mode files in this directory into
  6: ;; html.
  7: 
  8: ;;; Code:
  9: 
 10: (require 'package)
 11: (package-initialize)
 12: (add-to-list 'package-archives '("org" . "https://orgmode.org/elpa/") t)
 13: (add-to-list 'package-archives '("melpa" . "https://melpa.org/packages/") t)
 14: (package-refresh-contents)
 15: (package-install 'htmlize)
 16: (package-install 'org-plus-contrib)
 17: (package-install 'ox-reveal)
 18: 
 19: (require 'org)
 20: (require 'ox-publish)
 21: (require 'ox-reveal)
 22: 
 23: (setq user-full-name "pekaha"
 24:       org-export-default-language "en")
 25: 
 26: (setq org-export-with-smart-quotes t ; defaults to nil
 27:       org-export-with-author nil ; defaults to t
 28:       org-export-with-broken-links 'mark ; defaults to nil
 29:       org-export-headline-levels 5 ; defaults to 3
 30:       org-export-with-section-numbers nil ; defaults to t
 31:       org-export-with-statistics-cookies nil ; defaults to t
 32:       org-export-with-tags 'not-in-toc ; defaults to t
 33:       org-export-with-toc nil ; defaults to t
 34:       org-export-with-todo-keywords nil) ; defaults to t
 35: 
 36: (defvar pekaha/default-html-head "
 37: <link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />
 38: ")
 39: 
 40: (defvar pekaha/default-html-head-extra "
 41: <meta html-head-extra=\"default-head-extra-value\">
 42: ")
 43: 
 44: (setq org-html-link-home "index.html#home"
 45:       org-html-link-up "index.html#up"
 46:       org-html-head pekaha/default-html-head
 47:       org-html-head-extra pekaha/default-html-head-extra
 48:       org-html-validation-link nil
 49:       org-html-preamble t
 50:       org-html-postamble 'auto)
 51: 
 52: (setq org-html-doctype "html5"
 53:       org-html-html5-fancy t
 54:       org-html-container-element "section")
 55: 
 56:  (setq org-html-divs '((preamble "header" "preamble")
 57:                        (content "main" "content")
 58:                        (postamble "footer" "postamble")))
 59: 
 60: (setq org-html-home/up-format "
 61: <nav id=\"org-div-home-and-up\">
 62:   <div id=\"navbar\">
 63:     <div id=\"navbar-logo\">
 64:       <a id=\"org-link-home\" accesskey=\"h\" href=\"%2$s\">
 65:         <img src=\"images/pekaha.svg\" alt=\"pekaha logo\"/>
 66:       </a>
 67:     </div>
 68:     <div class=\"navbar-item\"><a id=\"org-link-up\" accesskey=\"h\" href=\"%1$s\">Blog</a></div>
 69:     <div class=\"navbar-item\"><a id=\"org-link-about\" accesskey=\"a\" href=\"about.html\">About</a></div>
 70:   </div>
 71: </nav>
 72: ")
 73: 
 74: (defvar pekaha/blog-html-head "
 75: <link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />
 76: <link rel=\"stylesheet\" type=\"text/css\" href=\"css/syntax-coloring.css\" />
 77: ")
 78: 
 79: (defvar pekaha/blog-html-head-extra "
 80: <meta html-head-extra=\"post-head-extra-value\">
 81: ")
 82: 
 83: (defun pekaha/blog-html-preamble (plist)
 84:   "PLIST: An entry."
 85:   (let ((date (org-export-get-date plist)))
 86:   (if date
 87:       (format "<p class=\"datetitle\">%s</p>" (org-export-data date plist)))))
 88: 
 89: (defvar image-extensions
 90:   (regexp-opt '("jpg" "jpeg" "gif" "png" "svg" "ico"))
 91:   "File types that are published as image files.")
 92: 
 93: (defvar asset-extensions
 94:   (regexp-opt '("cur" "js" "woff" "woff2" "html" "pdf"))
 95:   "File types that are published as static files (beside images and stylesheets).")
 96: 
 97: (setq org-publish-project-alist
 98:       `(("posts"
 99:          :base-directory "posts"
100:          :base-extension "org"
101:          :recursive t
102:          :publishing-function org-html-publish-to-html
103:          :publishing-directory "./public"
104:          :exclude ,(regexp-opt '("README" "draft"))
105:          :with-todo-keywords nil
106:          :with-date t
107:          :with-toc 2
108:          :auto-sitemap t
109:          :sitemap-filename "index.org"
110:          :sitemap-title "Sitemap"
111:          :sitemap-file-entry-format "%d *%t*"
112:          :sitemap-style list
113:          :sitemap-sort-files anti-chronologically
114:          :html-head-include-default-style nil
115:          :html-preamble pekaha/blog-html-preamble
116:          :html-head ,pekaha/blog-html-head
117:          :html-head-extra ,pekaha/blog-html-head-extra)
118:         ("css"
119:          :base-directory "css"
120:          :base-extension "css"
121:          :publishing-directory "./public/css"
122:          :publishing-function org-publish-attachment
123:          :recursive t)
124:         ("images"
125:          :base-directory "images"
126:          :base-extension ,image-extensions
127:          :publishing-directory "./public/images"
128:          :publishing-function org-publish-attachment
129:          :recursive t)
130:         ("assets"
131:          :base-directory "assets"
132:          :base-extension ,asset-extensions
133:          :publishing-directory "./public/assets"
134:          :publishing-function org-publish-attachment
135:          :recursive t)
136:         ("all" :components ("posts" "css" "images" "assets"))))
137: 
138: ;; (setq org-html-use-infojs)
139: ;; (setq org-html-infojs-options)