orgapp / orgajs

parse org-mode content into AST
https://orga.js.org
MIT License
614 stars 61 forks source link
ast gatsbyjs javascript org-mode unified

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

** [[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 <div style={{ backgroundColor: 'gold', padding: '1em', border: '1px solid black', boxShadow: '5px 5px' }}>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]].

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