Simple and beautiful orgmode HTML export theme
Simple and beautiful orgmode HTML export theme
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.
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 title1 (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
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
or
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.
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.
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
$ # Install npm dependencies
$ npm i
$ # Start development mode
$ npm start
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 |
.
├── 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 |
MIT © Rodrigo Franco et all.