Dynamic tag filtering in org-mode exported HTML documents

This JavaScript code adds dynamic tag filtering to HTML documents exported from Emacs Org-mode. It allows to hide/reveal page content based on tags and TODO-keywords, which may be useful for larger documents like journals, all-in-one notes files, etc. Of course, it will not be useful at all if you are not using any tags or TODO-keywords in your org files.

Author's use case: I have a growing journal of notes which is automatically published as HTML to a private web space. When looking back at stuff or looking for something specific, I find it useful to be able to filter the page to specific content (and hide the rest).

Screencast

The CSS for the screencast document can be found here: https://sandyuraz.com/blogs/orgmode-css/

Usage

Include the script in exported HTML documents by adding the following Org-mode line to your org files:

#+HTML_HEAD_EXTRA: <script src="https://cdn.jsdelivr.net/gh/oyvindstegard/ox-tagfilter-js/ox-tagfilter.js"></script>

Alternatively you can set the org-mode variable org-html-head-extra and include the <script>.. tag there, or just include it anywhere in documents really.

You may also copy the ox-tagfilter.js file to your own hosting and change the URL as appropriate, if you dislike the dependency on jsdelivr.net.

If the HTML document has exported tags or TODO-keywords in it, you should see the values appear as buttons on the top. Click those to filter the content dynamically. Press the ESC key to clear all selected buttons and show all content.

As you filter the content, the set of available filters are reduced, so that you can avoid selecting combinations that match nothing.

Demo (test documents)

The following HTML documents have been exported from test.org using Org mode with completely default configuration and only changing the doctype settings:

Compatibility

The script is compatible with the most common HTML doc-type flavours that Org-mode supports. This includes html5 (including "fancy" variant) and xhtml-strict.

In general, the JavaScript code only works in modern web browsers.

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Jan 7, 2023

A browser based code editor

Monaco Editor The Monaco Editor is the code editor which powers VS Code, with the features better described here. Please note that this repository con

Jan 3, 2023

Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Jan 4, 2023

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Dec 30, 2022

A browser based code editor

Monaco Editor The Monaco Editor is the code editor which powers VS Code, with the features better described here. Please note that this repository con

May 17, 2021

Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in.

Typewriter Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in. Features S

May 24, 2022

Comments

Searching outside current page (index/sitemap)

Hi, Thanks again for implementing this!

AFAIU, the code currenly works only on current html page. It would be great to add an ability to search across the whole website if index/sitemap are available.

WDYT?

opened by yantar92 2

Releases(release-0.4)

release-0.4(Nov 22, 2022)

Persist selected filters across page reloads.
Source code(tar.gz)
Source code(zip)
release-0.3(May 22, 2022)

Source code(tar.gz)
Source code(zip)
release-0.2(May 1, 2022)
Add support for TODO-keywords in documents. If present, they will work the same way as tags and can also be combined with tags.

Disable filter buttons for which tags are not present in filtered content. This prevents user from selecting combinations which lead to no shown content.

Sort filter buttons alphabetically. A stable order of filters leads to better usability. This also has the effect of grouping TODO-keyword filters together, since they are typically all uppercase.

Source code(tar.gz)
Source code(zip)