Skip to content

Latest commit

 

History

History
156 lines (118 loc) · 5.26 KB

README.md

File metadata and controls

156 lines (118 loc) · 5.26 KB
Raw

Org Minimal HTML Theme

Simple and beautiful orgmode HTML export theme

Sample output

screenshot

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 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

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

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.

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

License

MIT © Rodrigo Franco et all.