feat(readme): init documentation

README.md

@@ -82,10 +82,44 @@ php artisan vendor:publish --tag="responsive-image-craft-scss"
 
 ## Usage
 
+### Images generations
+
 After configuring, the source and targets, run:
 
+```bash
+php artisan responsive-image-craft:generate
+```
+
+Optionally you can define the source
+
+```bash
+php artisan responsive-image-craft:generate --source-disk=local --relative-source-path=images
+```
+
+### Responsive Image Component 
+
 ```php
-php artisan image-craft:responsive-generate
+<x-infernal-responsive-img src="full/path/to/generated/image.original-extension"
+                            alt="the alternate text"
+                            container-class="the-css-class-to-add-to-the-wrapping-container" //optional
+                            height=1570 //original height
+                            width=1216 //original width
+                            :async-decoding="true" 
+                            :lazy="true" 
+                            :skip-picture-tag="true" 
+                            img-attributes="attributes to add to img tag" />
+```
+Will generate the following html
+```html
+<div class="img-container the-css-class-to-add-to-the-wrapping-container">
+    <picture>
+        <!-- load avif images if supported -->
+        <source type="image/avif" srcset="url-to-img@320.avif 320w, ....">
+        [...]
+        <!-- the img format fallback -->       
+        <img attributes to add to img tag src="url-to-img.jpg" srcset="url-to-img@320.jpg 320w,..." alt="the alternate text" decoding="async" loading="lazy" width="1570" height="1216">
+    </picture>
+</div>
 ```
 
 ## Testing

config/responsive-image-craft.php

@@ -3,11 +3,24 @@
 use Spatie\Image\Manipulations;
 
 return [
+    /*
+    | Display responsive images in srcset et css variables or display the original one
+    */
     'use_responsive_images' => env('USE_RESPONSIVE_IMAGES', true),
+
+    /*
+    | These lines are setting the values of configuration options related to the source and target disks
+    | and directories for the responsive images.
+    */
     'source_disk' => env('RESPONSIVE_IMAGES_SOURCE_DISK', 'local'),
     'target_disk' => env('RESPONSIVE_IMAGES_TARGET_DISK', 's3'),
     'source_directory' => env('RESPONSIVE_IMAGES_SOURCE_DIRECTORY', 'images'),
     'target_directory' => env('RESPONSIVE_IMAGES_TARGET_DIRECTORY', 'images'),
+
+    /*
+    | The `sizes` array contains a list of image sizes in pixels. These sizes are used to generate
+    | responsive images with different dimensions.
+    */
     'sizes' => [
         320,
         640,
@@ -17,32 +30,83 @@
         1760,
         2100,
     ],
+
+    /*
+    | The `extensions` array contains a list of image formats that are supported by the code. These
+    | formats include JPEG (JPG), PNG, AVIF, and WEBP.
+    | @see Spatie\Image\Manipulation for available formats
+    */
     'extensions' => [
         Manipulations::FORMAT_JPG,
         Manipulations::FORMAT_PNG,
         Manipulations::FORMAT_AVIF,
         Manipulations::FORMAT_WEBP,
     ],
+
+    /*
+    | The `extensions_filters_rules` array is used to define the image format ignoring rules. Each
+    | key-value pair in the array represents a format and its corresponding ignoring conversions.
+    */
     'extensions_filters_rules' => [
         Manipulations::FORMAT_JPG => [Manipulations::FORMAT_PNG],
         Manipulations::FORMAT_PNG => [Manipulations::FORMAT_JPG],
         Manipulations::FORMAT_WEBP => [],
         Manipulations::FORMAT_AVIF => [],
     ],
+
+    /*
+    | The `extensions_to_ignore` array is used to specify image file extensions that should be ignored by
+    | the code. In this case, the code is ignoring SVG files. This means that
+    | any image file with the extension `.svg` will not be processed or included in the responsive images
+    | generation.
+    */
     'extensions_to_ignore' => [
         'svg',
     ],
+
+    /*
+    | The `filename_to_ignore` array is used to specify image file names that should be ignored by the
+    | code. In this case, the code is ignoring any image file with the name "favicon". This means that any
+    | image file with the name "favicon" will not be processed or included in the responsive images
+    | generation.
+    */
     'filename_to_ignore' => [
         'favicon',
     ],
+
+    /*
+    | The `supported_file_extensions` array is defining the list of image formats that are supported by
+    | the code. It includes the formats JPEG (JPG), PNG, AVIF, WEBP, and GIF. This means that the code
+    | will only process and generate responsive images for files with these extensions. Any other image
+    | formats will be ignored.
+    */
     'supported_file_extensions' => [
         Manipulations::FORMAT_JPG,
         Manipulations::FORMAT_WEBP,
         Manipulations::FORMAT_PNG,
         Manipulations::FORMAT_AVIF,
         Manipulations::FORMAT_GIF,
     ],
+
+    /*
+    | The value of `filename_spacer` is used to split filename from image size.
+    | e.g.: `my-image-filename.jpg` => `my-image-filename@1200.jpg`
+    */
     'filename_spacer' => '@',
+
+    /*
+    | The `'container_css_class_name' => 'img-container',` line is setting the value of the
+    | `'container_css_class_name'` configuration option to `'img-container'`. This configuration
+    | option is used to specify the CSS class name that will be applied to the container element of
+    | the responsive image. By default, the container element will have the CSS class name
+    | `'img-container'`.
+    */
     'container_css_class_name' => 'img-container',
+
+    /*
+    | `'scss_path' => resource_path('/scss/utilities'),` is setting the value of the `'scss_path'`
+    | configuration option to the path `/scss/utilities` within the `resources` directory. This
+    | configuration option is used to specify the path to the SCSS where .scss files should be copy
+    */
     'scss_path' => resource_path('/scss/utilities'),
 ];

resources/scss/_responsive-background-images.scss

@@ -20,6 +20,11 @@
     }
 }
 
+/**
+* The `@mixin media-query` is a Sass mixin that generates media queries based on a given width and
+* type (defaulting to "min"). It allows you to write CSS rules that will only apply when the screen
+* width matches the specified condition.
+*/
 @mixin media-query($width, $type: min) {
     @if $type == max {
         $width: $width - 1px;
@@ -39,6 +44,10 @@ $mimeTypes: (
     "tiff": "image/tiff",
 );
 
+/**
+* The `@mixin responsive-background-image-from-existing-css-var` is a Sass mixin that generates
+* responsive background images based on existing CSS variables.
+*/
 @mixin responsive-background-image-from-existing-css-var(
     $sizes,
     $extensions,
@@ -74,6 +83,12 @@ $mimeTypes: (
     }
 }
 
+/**
+* The `.img-container` class is defining a responsive container for an image. It sets the maximum width of the
+* container to 100% of its parent element, ensuring that the image does not exceed the width of the
+* container. The height of the container is set to auto, allowing it to adjust proportionally based on
+* the width.
+*/
 .img-container {
     max-width: 100%;
     height: auto;