Change all content from rst format to markdown and correct spelling/grammar

2025-11-26 13:48:32 +00:00 · 2025-11-17 16:06:13 +01:00
parent c647648e84
commit 21f196218d
87 changed files with 3973 additions and 3441 deletions
--- a/docs/source/development/assets.md
+++ b/docs/source/development/assets.md
@@ -0,0 +1,66 @@
+Permission is granted to copy, distribute and/or modify this document
+   under the terms of the GNU Free Documentation License, Version 1.3
+   or any later version published by the Free Software Foundation;
+   with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+   A copy of the license is included in the section entitled "GNU
+   Free Documentation License".
+
+# Assets
+
+The Chill assets (js, css, images, …) can be managed by `Webpack Encore`_, which is a thin wrapper for `Webpack`_ in Symfony applications.
+
+###### Installation
+
+Webpack Encore needs to be run in a Node.js environment, using the Yarn package manager. This Node.js environment can be set up using a node docker image. The bash script `docker-node.sh` set up a Node.js environment with an adequate configuration. Launch this container by typing:
+
+    $ bash docker-node.sh
+
+In this NodeJS environment, install all the assets required by Chill with:
+
+    node@b91cab4f7cfc:/app$ yarn install
+
+This command will install all the packages that are listed in `package.json`.
+
+Any further required dependencies can be installed using the Yarn package. For instance, jQuery is installed by:
+
+   node@b91cab4f7cfc:/app$ yarn add jquery --dev
+
+###### Usage
+
+### Organize your assets
+
+Chill assets usually lives under the `/Resources/public` folder of each Chill bundle. The Webpack configuration set up in `webpack.config.js` automatically loads the required assets from the Chill bundles that are used.
+
+For adding your own assets to Webpack, you must add an entry in the `webpack.config.js` file. For instance, the following entry will output a file `main.js` collecting the js code (and possibly css, image, etc.) from `./assets/main.js`.
+
+   	.addEntry('main', './assets/main.js')
+
+To gather the css files, simply connect them to your js file, using `require`. The css file is seen as a dependency of your js file. :
+
+    // assets/js/main.js
+    require('../css/app.css');
+
+For finer configuration of webpack encore, we refer to the above-linked documentation.
+
+### Compile the assets
+
+To compile the assets, run this line in the NodeJS container:
+
+   	node@b91cab4f7cfc:/app$ yarn run encore dev
+
+While developing, you can tell Webpack Encore to continuously watch the files you are modifying:
+
+    node@b91cab4f7cfc:/app$ yarn run encore dev --watch
+
+### Use the assets in the templates
+
+Any entry defined in the webpack.config.js file can be linked to your application using the symfony `asset` helper:
+
+    <head>
+        ...
+        <link rel="stylesheet" href="{{ asset('build/app.css') }}">
+    </head>
+    <body>
+        ...
+        <script src="{{ asset('build/app.js') }}"></script>
+    </body>