#+title: Orga
#+subtitle: org-mode < JavaScript
=Orga= is a flexible org-mode syntax parser. It parses org content into AST ([[https://en.wikipedia.org/wiki/Abstract_syntax_tree][Abstract Syntax Tree 🌲]]). And it's written in JavaScript.
-
Why
org-mode is simply a superior format than other more popular ones, but it's mostly trapped inside of emacs. It's so good that it was the #1 reason to learn and use emacs for a lot of people (me included). But it's too good to not share with the rest of the world. If it can run in JavaScript, it can run on anything.
-
Compatible Eco-systems
It integrates natively with popular tools.
** [[https://unifiedjs.com][Unified]]
#+BEGIN_QUOTE
☔️ interface for parsing, inspecting, transforming, and serializing content through syntax trees
#+END_QUOTE
The =orga= parser is completely compatible with unified. Which means you get to take advantage of the works of others put into the pipeline. [[https://github.com/retextjs/retext][linting for natural language]], [[https://alexjs.com][correct your writing]], [[https://wooorm.com/write-music/][write music]]? etc. Here is [[https://github.com/orgapp/orgajs/tree/develop/examples/getting-started][an example]].
** [[https://webpack.js.org][Webpack]]
=@orgajs/loader= is a webpack loader that made orga native citizen of webpack ecosystem. Coupled with plugins, it works smoothly. Take a look at [[https://github.com/orgapp/orgajs/tree/develop/examples/webpack][the example project]].
** [[https://reactjs.org/][React]]
#+begin_quote
A JavaScript library for building user interfaces
#+end_quote
You can render react components directly in your org file. Something like this:
#+begin_src org
,* Hello World
Let's render the box.
,#+begin_export jsx
[[https://orga.js.org/playground/?text=%20Hello%20World%0A%0ALet's%20render%20the%20box*.%0A%0A%23%2Bbegin_export%20jsx%0A%3Cdiv%20style%3D%7B%7B%0A%20%20backgroundColor%3A%20'gold'%2C%20%0A%20%20padding%3A%20'1em'%2C%0A%20%20border%3A%20'1px%20solid%20black'%2C%0A%20%20boxShadow%3A%20'5px%205px'%0A%7D%7D%3EI%20am%20a%20box%20with%20shadow%3C%2Fdiv%3E%0A%23%2Bend_export%0A][Try it our yourself in the playground]].
** [[https://vitejs.dev][Vite]]
#+begin_quote
Next generation frontend tooling
#+end_quote
=@orgajs/rollup= is a plugin compatible with both Rollup and Vite. It lets you import =.org= files directly in your project.
- Package: =@orgajs/rollup=
** [[https://astro.build][Astro]]
#+begin_quote
The web framework for content-driven websites
#+end_quote
Astro integration is maintained in a standalone repository.
** [[https://nextjs.org][Nextjs]]
#+begin_quote
The React Framework
#+end_quote
Next.js integration is maintained in a standalone repository.
See the [[file:CONTRIBUTING.org][contributing file]] for ways to get started.
