Change packed image

docs/README.md

@@ -3531,36 +3531,37 @@ mg_http_serve_dir(c, hm, &opts);
 
 ### Packed filesystem
 
-Packed filesystem allow to "pack" filesystem into single file, for example, into
-executable or flashable image. This is useful, for example, for implementation of HTTP-server on devices without filesystem.
+Mongoose
+has a filesystem abstraction layer. By default, a POSIX filesystem,
+a FatFS filesystem, and a "packed" filesystem are implemented.
+
+A packed filesystem allow to "pack" filesystem into single file, for example,
+into executable or flashable image - and files will be hardcoded into the 
+binary, making it possible to e.g. serve files on devices with no
+filesystem, or be resilient to filesystem issues:
+
+<img src="images/packed.svg" alt="packed filesystem" />
 
 In order to use packed filesystem do the following:
 
-1. Compile file test\pack.c:
-  ```sh
-  $ cc -o pack pack.c
-  ```
-
-2. Convert list of files into single .c:
-  ```sh
-  $ ./pack file1.data file2.data > fs.c
-  ```
-
-3. Build your app with fs.c:
-  ```sh
-  $ cc -o my_app my_app.c fs.c
-  ```
-
-4. In your application code, you can access files using this function:<br>
-   `const char *mg_unpack(const char *file_name, size_t *size)` or app can also
-   force `mg_http_serve_dir` function to use packed file system:
-
-```c
-struct mg_http_serve_opts opts;
-opts.fs = &mg_fs_packed; // Set packed ds as a file system
-mg_http_serve_dir(c, hm, &opts);
+```sh
+$ cc -o pack pack.c   # The pack.c file is test/ repo directory
 ```
 
-<img src="images/packed.png">
+2. Convert list of files into single .c:
+```sh
+$ ./pack index.html style.css > packed_fs.c
+```
+
+3. Build your app with `packed_fs.c`:
+```sh
+$ cc mongoose.c app.c packed_fs.c -DMG_ENABLE_PACKED_FS=1
+```
+
+4. In your application code:
+```c
+struct mg_http_serve_opts opts = {};  // Initialise empty options
+opts.fs = &mg_fs_packed;              // Use packed filesystem
+mg_http_serve_dir(c, hm, &opts);      // Serve directory
+```
 
-<img src="images/packed2.png">

docs/images/packed.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 616 181.8"><defs><style>.cls-1,.cls-3{font-size:18px;}.cls-1,.cls-18,.cls-19,.cls-5{fill:#576174;}.cls-1,.cls-15,.cls-18,.cls-19,.cls-3,.cls-8{font-family:Courier-Bold, Courier;font-weight:700;}.cls-2{fill:#8b005d;}.cls-3,.cls-8{isolation:isolate;}.cls-15,.cls-3,.cls-8{fill:#fff;}.cls-20,.cls-4{fill:none;stroke:#576174;stroke-linecap:round;stroke-linejoin:round;}.cls-4{stroke-width:2.79px;}.cls-6{fill:#45cfff;}.cls-7{fill:#277691;}.cls-15,.cls-8{font-size:9px;}.cls-9{fill:#00983a;}.cls-10{fill:#005721;}.cls-11{fill:#ea5b0c;}.cls-12{fill:#963b08;}.cls-13{fill:#a000ff;}.cls-14{fill:#530085;}.cls-16{fill:#ffde00;}.cls-17{fill:#9e8900;}.cls-18{font-size:11px;}.cls-19{font-size:13px;}</style></defs><text class="cls-1" transform="translate(166.8 76)">PACK</text><text class="cls-1" transform="translate(380.6 76)">BUILD</text><rect class="cls-2" x="479" y="33" width="137" height="106.64" rx="12.9"/><text class="cls-3" transform="translate(531.8 91)">App</text><line class="cls-4" x1="150" y1="86.3" x2="229.6" y2="86.3"/><polygon class="cls-5" points="228.9 81.3 228.9 91.4 234 86.3 228.9 81.3"/><line class="cls-4" x1="368.8" y1="86.3" x2="448.5" y2="86.3"/><polygon class="cls-5" points="447.8 81.3 447.8 91.4 452.9 86.3 447.8 81.3"/><path class="cls-6" d="M157.6,57.3v87.4a2.6,2.6,0,0,1-2.5,2.6H76.8a2.6,2.6,0,0,1-2.6-2.6V37.1a2.6,2.6,0,0,1,2.6-2.5h57.9Z" transform="translate(-31.2 -34.6)"/><path class="cls-7" d="M157.8,57.4H137.3a2.6,2.6,0,0,1-2.6-2.6V34.6h0l22.9,22.7Z" transform="translate(-31.2 -34.6)"/><text class="cls-8" transform="translate(51.8 9.7)">filex.y</text><path class="cls-9" d="M141.6,71.3v87.4a2.6,2.6,0,0,1-2.5,2.6H60.8a2.6,2.6,0,0,1-2.6-2.6V51.1a2.6,2.6,0,0,1,2.6-2.5h57.9Z" transform="translate(-31.2 -34.6)"/><path class="cls-10" d="M141.8,71.4H121.3a2.6,2.6,0,0,1-2.6-2.6V48.6h0l22.9,22.7Z" transform="translate(-31.2 -34.6)"/><text class="cls-8" transform="translate(35.8 23.7)">main.js</text><path class="cls-11" d="M126.6,85.3v87.4a2.6,2.6,0,0,1-2.5,2.6H45.8a2.6,2.6,0,0,1-2.6-2.6V65.1a2.6,2.6,0,0,1,2.6-2.5h57.9Z" transform="translate(-31.2 -34.6)"/><path class="cls-12" d="M126.8,85.4H106.3a2.6,2.6,0,0,1-2.6-2.6V62.6h0l22.9,22.7Z" transform="translate(-31.2 -34.6)"/><text class="cls-8" transform="translate(19.2 38.1)">style.css</text><path class="cls-13" d="M114.6,100.3v87.4a2.6,2.6,0,0,1-2.5,2.6H33.8a2.6,2.6,0,0,1-2.6-2.6V80.1a2.6,2.6,0,0,1,2.6-2.5H91.7Z" transform="translate(-31.2 -34.6)"/><path class="cls-14" d="M114.8,100.4H94.3a2.6,2.6,0,0,1-2.6-2.6V77.6h0l22.9,22.7Z" transform="translate(-31.2 -34.6)"/><text class="cls-15" transform="translate(4 55.9)">intex.html</text><text class="cls-15" transform="translate(4 55.9)">intex.html</text><text class="cls-8" transform="translate(35.8 23.7)">main.js</text><path class="cls-16" d="M373.4,85.4v87.4a2.6,2.6,0,0,1-2.5,2.6H292.6a2.6,2.6,0,0,1-2.6-2.6V65.2a2.5,2.5,0,0,1,2.6-2.5h57.9Z" transform="translate(-31.2 -34.6)"/><path class="cls-17" d="M373.6,85.5H353.1a2.6,2.6,0,0,1-2.6-2.6V62.7h0l22.9,22.7Z" transform="translate(-31.2 -34.6)"/><text class="cls-18" transform="translate(265.2 87.6)">packed_fc.c</text><text class="cls-19" transform="translate(259.5 160.4)">mg-unpack() - get file data</text><text class="cls-19" transform="translate(259.5 176.6)">mg-unlist() - get file list</text><line class="cls-20" x1="268.1" y1="148.3" x2="268.1" y2="128.6"/></svg>