#+TITLE: Orgdeep

[[https://casual-effects.com/markdeep/][Markdeep]], but for [[https://orgmode.org/][OrgMode]].

Orgdeep lets you do write plain Org Mode file and serve them as HTML without any
pre-export step. It uses a client side parser and formatter packed in one JS
file.

This document itself is an Org Mode file rendered via Orgdeep.

* Quickstart
To use, create any file with ~.html~ extension, write content using
Org Mode while adding the following snippet somewhere:

#+begin_src org
,#+begin_comment
# Download the orgdeep min js from https://git.sr.ht/~lepisma/orgdeep/tree/master/item/dist
<script src="./orgdeep.min.js"></script>
,#+end_comment
#+end_src

You might also want to style the HTML using a CSS file. There is a default style
file ~https://git.sr.ht/~lepisma/orgdeep/blob/master/orgmode-example.css~ that you
can use to make your HTML look like this page. To use CSS files, add them in
your document using the ~#+HTML_HEAD~ keyword:

#+begin_src org
,#+HTML_HEAD: <link rel="stylesheet" href="./orgmode-example.css">
#+end_src

#+HTML_HEAD: <link rel="stylesheet" href="./orgmode-example.css">

* Development
Orgdeep's core logic is very simple and works by parsing document using
[[https://github.com/rasendubi/uniorg][uniorg]]. Source code for Orgdeep is [[https://git.sr.ht/~lepisma/orgdeep/][here]].

As of now, Orgdeep is incomplete since it doesn't support all of the Org Mode
features, and it doesn't completely match up to Markdeep. But it works for most
of the cases and might even not need more work if you want to render quick and
simple documents like this. Next section show cases the current rendering
capabilities.

* Demo
Here are few elements added just to test the process

** DONE Heading level 2
This is a demo of Org-mode export styling.

*** Heading level 3
**** Heading level 4

** TODO [B] Tasks to Finish
- [ ] Write documentation
- [ ] Add CSS for TODO keywords
- [X] Make checkboxes work
- [ ] Align tags with headings

** Notes with Tags                                               :design:web:
Some random text with[fn::Footnotes work] tags aligned to the right.

*** TODO Small Subtask                                                :minor:
- [ ] Try dark mode
- [X] Test footnotes[fn:1]

** Other Features
*** Code Example
#+BEGIN_SRC python :results output
def hello():
    print("Hello Org")
hello()
#+END_SRC

#+RESULTS:
: Hello Org

*** Table Example
| Task              | Status |
|-------------------+--------|
| Styling Headings  | DONE   |
| Checkboxes        | DONE   |
| Tags              | TODO   |
| Priorities        | TODO   |

*** Math
Inline: \( f(x) = x + a \)  

Display:

\[
\alpha + \gamma + \sum_i = f(x)
\]

*** Images
#+CAPTION: Hello world
[[./org-mode-unicorn.svg]]


#+begin_comment
<script src="./dist/orgdeep.min.js"></script>
#+end_comment