Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/orgapp/orgajs

parse org-mode content into AST
https://github.com/orgapp/orgajs

ast gatsbyjs javascript org-mode unified

Last synced: about 1 month ago
JSON representation

parse org-mode content into AST

Awesome Lists containing this project

README 

        
#+title: Orga

#+subtitle: org-mode < JavaScript



* What Is It



=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

I am a box with shadow


,#+end_export

#+end_src



[[https://orga.js.org/playground/?text=*%20Hello%20World%0A%0ALet's%20render%20*the%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://www.gatsbyjs.com][Gatsby]]



#+BEGIN_QUOTE

Build blazing fast, modern apps and websites with React

#+END_QUOTE



=gatsby-plugin-orga= is a powerful plugin that plug org-mode into gatsby system. This website is built with gatsby and =gatsby-theme-orga-docs= theme. Here is a [[https://github.com/orgapp/orgajs/tree/develop/examples/gatsby][minimal example project]].



** [[https://nextjs.org][Nextjs]]

#+begin_quote

The React Framework

#+end_quote



Because orga is native to webpack, it's fairly simply to intergrate with nextjs. [[https://github.com/orgapp/orgajs/tree/develop/examples/next][Example project]].



* Examples

Take a look at the [[https://github.com/orgapp/orgajs/tree/main/examples][collection of examples]] to quickly get started.



* Contribute



See the [[file:CONTRIBUTING.org][contributing file]] for ways to get started.