doc(melange): Move the example project to the top (#7612)

Signed-off-by: Antonio Nuno Monteiro <[email protected]>

doc/melange.rst

@@ -27,7 +27,7 @@ JavaScript files by defining a :ref:`melange-emit` stanza. Dune libraries can be
 used with Melange by adding ``melange`` to ``(modes ...)`` in the
 :ref:`library` stanza.
 
-Melange support is still experimental in Dune and needs to be enabled 
+Melange support is still experimental in Dune and needs to be enabled
 in the :ref:`dune-project` file:
 
 .. code:: dune
@@ -37,6 +37,55 @@ in the :ref:`dune-project` file:
 Once that's in place, you can use the Melange mode in :ref:`library` stanzas
 ``melange.emit`` stanzas.
 
+Simple Project
+==============
+
+Let's start by looking at a simple project with Melange and Dune. Subsequent
+sections explain the different concepts used here in further detail.
+
+First, make sure that the :ref:`dune-project` file specifies at least
+version 3.8 of the dune language and the Melange extension is enabled:
+
+.. code:: dune
+
+  (lang dune 3.8)
+  (using melange 0.1)
+
+Next, write a :ref:`dune<dune-files>` file with a :ref:`melange-emit` stanza:
+
+.. code:: dune
+
+  (melange.emit
+   (target output))
+
+Finally, add a source file to build:
+
+.. code:: bash
+
+  echo 'Js.log "hello from melange"' > hello.ml
+
+After running ``dune build output/hello.js``, Dune produces the following
+file structure:
+
+.. code::
+
+  .
+  ├── _build
+  │   └── default
+  │       └── output
+  │           └── hello.js
+  ├── dune
+  ├── dune-project
+  └── hello.ml
+
+The resulting JavaScript can now be run:
+
+.. code:: bash
+
+   $ node _build/default/output/hello.js
+   hello from melange
+
+
 Libraries
 =========
 
@@ -98,7 +147,7 @@ The resulting layout in ``_build/default/output`` will be as follows:
     modules, the targets for the ``.js`` files of any library that the stanza
     depends on, and any copy rules for runtime dependencies (see
     ``runtime_deps`` field below).
-    
+
   - By default, all stanzas will have their targets attached to an alias
     ``melange``. The behavior of this default alias is exclusive: if an alias
     is explicitly defined in the stanza, the targets from this stanza will
@@ -210,8 +259,8 @@ are used across them. As an example:
   (melange.emit
    (target app2)
    (libraries foo))
-   
-The JavaScript artifacts for library ``foo`` will be emitted twice in the 
+
+The JavaScript artifacts for library ``foo`` will be emitted twice in the
 ``_build`` folder. They will be present under ``_build/default/app1``
 and ``_build/default/app2``.
 
@@ -230,7 +279,7 @@ unnecessary folders in ``node_modules``, it is recommended to explicitly
 include only the folders that are relevant for Melange builds.
 
 This can be accomplished by combining :ref:`subdir` and :ref:`dune-subdirs`
-stanzas in a ``dune`` file next to the ``node_modules`` folder. The 
+stanzas in a ``dune`` file next to the ``node_modules`` folder. The
 :ref:`dune-vendored_dirs` stanza can be used to avoid warnings in Melange
 libraries during the application build. The :ref:`dune-data_only_dirs` stanza
 can be useful as well if you need to override the build rules in one of the
@@ -243,49 +292,3 @@ packages.
    (vendored_dirs reason-react)
    (dirs reason-react))
 
-Simple Project
-==============
-
-Let's look at building a simple project with Melange and Dune.
-
-First, make sure that the :ref:`dune-project` file specifies at least
-version 3.8 of the dune language and the Melange extension is enabled:
-
-.. code:: dune
-
-  (lang dune 3.8)
-  (using melange 0.1)
-
-Next, write a :ref:`dune<dune-files>` file with a :ref:`melange-emit` stanza:
-
-.. code:: dune
-
-  (melange.emit
-   (target output))
-
-Finally, add a source file to build:
-
-.. code:: bash
-
-  echo 'Js.log "hello from melange"' > hello.ml
-
-After running ``dune build output/hello.js``, Dune produces the following
-file structure:
-
-.. code::
-
-  .
-  ├── _build
-  │   └── default
-  │       └── output
-  │           └── hello.js
-  ├── dune
-  ├── dune-project
-  └── hello.ml
-
-The resulting JavaScript can now be run:
-
-.. code:: bash
-
-   $ node _build/default/output/hello.js
-   hello from melange