Org Minimal HTML Theme

Simple and beautiful orgmode HTML export theme

Sample output

Building your theme files

After cloning this repository, customize it as you see fit (see customization options below), before running the following:

  $ # install requirements for building
  $ npm i
  $ # actually build the files
  $ npm run build

From there, upload the files generated in the dist subdirectory somewhere and create a setup file pointing to the URL of your theme files.

Theme customization

There are a few options available to customize the theme at build time. All these options are easily configurable by editing the theme.json file.

Option	Description
`table-of-contents`	Whether or not to display the table of contents
`section-numbers`	Whether or not to display section numbers
`postamble`	Whether or not to display the postamble
`fancy-lists`	Whether or not to use GitHub-like task lists with checkboxes
`fancy-icons`	Whether or not to use icons to enhance the theme
`back-to-top`	Whether or not to add the "back to top" button
`back-to-top-text`	"Back to top" text
`collection`	Configuration for the collection module that is added to the content top
`collection.enable`	Whether or not to display the collection
`collection.avatar`	Optional avatar URL to be displayed alongside the title¹ (if none is passed, it will not be added)
`collection.title`	Collection title
`collection.url`	Optional URL for the collection link (defaults to `/`)

1. 35x35 is recommended

Installing the theme

Follow the examples available in the setup directory, to create your own setup files. After that, you can either:

copy the “setup file” of the chosen theme to the directory of your Org files,

#+SETUPFILE: theme-minimal.setup

use the (relative or absolute) path to the “setup file” (in your Git local repository)

#+SETUPFILE: path/to/Git/repo/setup/theme-minimal.setup

Then export your Org mode file to HTML with org-html-export-to-html or with C-c C-e h h.

Icons

All the icons we use are provided by Font Awesome. Big shout out to @encharm for taking the time to export them all to SVG files.

Development

Requirements

You'll need Node.js (>= 4) and npm (>= 2.14).

$ # Easiest way to install it on OSX is via Homebrew
$ brew update && brew install node

Setup

$ # Install npm dependencies
$ npm i
$ # Start development mode
$ npm start

Tasks

The setup is based entirely in npm scripts.

Command	Description
`build`	Build assets and then compress them all
`compress-scripts`	Generates an optimized JavaScript bundle under `dist/bundle.min.js`
`compress-styles`	Generates an optimized CSS bundle under `dist/bundle.min.css`
`compress`	Compress assets in parallel
`lint`	Lint source code
`server`	Startup a local development server with live reload enabled
`start`	Trigger file watching and startup a local development server
`styles`	Build styles source to a distribution bundle under `dist/bundle.css`
`scripts`	Build scripts to a distribution bundle under `dist/bundle.js`
`themes`	Run scripts and styles pre processing in parallel
`watch`	Watch for file changes and then recompile what's changed

File structure

.
├── dist
│   └── bundle.min.css
│   └── bundle.min.js
├── .stylelintrc
├── index.html
├── postcss.json
├── package.json
├── theme.json
└── tools
    └── build-scripts.js
    └── build-styles.js
└── src
    └── styles
    └── scripts

Entry	Description
`dist`	Distribution folder
`dist/bundle.min.css`	Optimized CSS bundle
`dist/bundle.min.js`	Optimized JavaScript bundle
`.stylelintrc`	CSS linter configuration
`index.html`	Simple HTML page to test theme features
`postcss.json`	PostCSS configuration file
`package.json`	npm manifest
`theme.json`	Theme configuration options
`tools`	Custom build scripts
`tools/build-scripts.js`	Injects theme configuration options to the distribution script file
`tools/build-styles.js`	Pre process CSS files and build the project w/ theme configuration options
`src`	Source code

caffo/org-minimal-html-theme

caffo

Reviews

Repository Details