|
1 | 1 | # typo3-documentation-browsersync
|
2 |
| -Standalone project (NodeJS, browsersync) to render and hot-reload changes in ReST documentation to your browser window |
| 2 | + |
| 3 | +## Introduction |
| 4 | + |
| 5 | +Standalone project (NodeJS, browsersync) to render and hot-reload changes |
| 6 | +in ReST documentation to your browser window. |
| 7 | + |
| 8 | +This project provides a proxy server that returns your rendered ReST |
| 9 | +documentation (as HTML) to a browser. Any change you make to the ReST-files |
| 10 | +will automatically trigger a reload of your browser window. |
| 11 | + |
| 12 | +This allows you to have some kind of "WYSIWYG" display of your |
| 13 | +documentation, without the need to manually reload browser windows or |
| 14 | +render documentation time and again. It will all happen on demand. |
| 15 | + |
| 16 | +ReST is very dependant on the used renderer and its capabilities, so you |
| 17 | +cannot really have a WYSIWYG editor for ReST files. So this is what comes |
| 18 | +closest to editing files and directly seeing the impact of it. |
| 19 | + |
| 20 | +## Alternatives (PHPStorm) |
| 21 | + |
| 22 | +PHPStorm actually offers a cool way to create a local proxy server on its |
| 23 | +own; when you pick a rendered HTML file and right-click `Open in > Browser > |
| 24 | +Default` it will open a browser window on your host and show the contents |
| 25 | +of the HTML file, and also have hot-reload capability. So when you change |
| 26 | +anything in the HTML file, the PHPStorm proxy server will directly reload |
| 27 | +your output, too. It will however NOT render the ReST files automatically, |
| 28 | +when such a file is edited. |
| 29 | + |
| 30 | +If your OS supports `inotifywait` (on Linux), you could use this: |
| 31 | + |
| 32 | +``` |
| 33 | +inotifywait -e close_write,moved_to,create -m . | |
| 34 | +while read -r directory events filename; do |
| 35 | + docker run --rm --pull always -v $(pwd):/project -it ghcr.io/typo3-documentation/render-guides:latest --config=Documentation |
| 36 | +done |
| 37 | +``` |
| 38 | + |
| 39 | +to automatically "watch" for any change on ReST files inside the |
| 40 | +`Documentation` folder, then re-render the HTML, which would then |
| 41 | +automatically reload your browser window. |
| 42 | + |
| 43 | +Sadly, `inotifywait` is not available on `macOS` and the alternative to |
| 44 | +build a custom `PHP pecl inotify` package-enabled tool was beyond my |
| 45 | +personal scope, as well as using alternate tools like `fswatch`. |
| 46 | + |
| 47 | +I wanted to have an easy way for anyone to preview changes, so I wanted to |
| 48 | +not require PHPStorm or a specific inotify-enabled OS. |
| 49 | + |
| 50 | +Instead, the `NodeJS` ecosystem provides a `browsersync` package that does |
| 51 | +all of the needed watching and proxying. I coupled this with `vite`, because |
| 52 | +alternatives like `gulp` or `grunt` are outdated and report many security |
| 53 | +issues on their dependencies. |
| 54 | + |
| 55 | +## General Usage |
| 56 | + |
| 57 | +The repository https://github.com/garvinhicking/typo3-documentation-browsersync |
| 58 | +allows for multiple ways to be used. |
| 59 | + |
| 60 | +This project depends on the ability to execute Docker Images on your host. |
| 61 | + |
| 62 | +The easiest way to use this is via the ready-to-use Docker Image. |
| 63 | + |
| 64 | +You can: |
| 65 | + |
| 66 | + * The project itself is built as a ready-to-use Docker Image, so you |
| 67 | + don't need to install it at all on your host. Context is specified |
| 68 | + via arguments to the Docker command. This is the recommended and |
| 69 | + easiest way of usage. |
| 70 | + |
| 71 | + * Include it as a `dev-dependency` composer package to any of your TYPO3 |
| 72 | + documentation or extension projects, so the context can be autodetected. |
| 73 | + |
| 74 | + * You can globally require the composer package to be able to use |
| 75 | + it anyhwere. You will then need to specify context (directories) to |
| 76 | + its execution. |
| 77 | + |
| 78 | +For the last two options, you need to be able to either locally run |
| 79 | +NodeJS and npm, or to build your own Docker Image via this repository. |
| 80 | + |
| 81 | +### Usage via Docker (recommended) |
| 82 | + |
| 83 | +### Usage via `dev-dependency` |
| 84 | + |
| 85 | +### Usage via global dependency |
| 86 | + |
| 87 | +## TODO |
| 88 | + |
| 89 | +All of it. |
0 commit comments