docs: move to mkdocs and write about arrayfield

Author: EduardoJM

.github/workflows/docs.yml

@@ -11,39 +11,45 @@ jobs:
     if: github.event_name != 'push'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - name: Clone Repository
+        uses: actions/checkout@v3
+      
+      - name: Set up Python
+        uses: actions/setup-python@v5
         with:
-          node-version: '14.x'
-      - name: Test Build
-        run: |
-          cd docs
-          if [ -e yarn.lock ]; then
-            yarn install --frozen-lockfile
-          elif [ -e package-lock.json ]; then
-            npm ci
-          else
-            npm i
-          fi
-          npm run build
+          python-version: 3.11
+      
+      - name: Install Dependencies
+        run: pip install .[docs]
+      
+      - name: Test build
+        run: mkdocs build
 
   gh-release:
     if: github.event_name != 'pull_request'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Clone Repository
+        uses: actions/checkout@v3
+     
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+     
+      - name: Set up Python
+        uses: actions/setup-python@v5
         with:
-          node-version: 16
-          cache: yarn
-          cache-dependency-path: 'docs/yarn.lock'
-
-      - name: Install dependencies
-        run: cd docs && yarn install --frozen-lockfile
-      - name: Build website
+          python-version: 3.11
+      
+      - name: Install Dependencies
+        run: pip install .[docs]
+      
+      - name: Build
         run: cd docs && yarn build
+        
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GH_PAGES_DEPLOY }}
-          publish_dir: ./docs/build
+          publish_dir: ./site

.gitignore

@@ -6,3 +6,4 @@ media/
 build
 *.egg-info
 dist
+site

docs/.gitignore

@@ -0,0 +1,25 @@
+.md-typeset__table,
+.md-typeset__table table,
+.md-typeset__table table thead,
+.md-typeset__table table tbody,
+.md-typeset__table tr {
+  width: 100%;
+}
+.md-typeset__table th.adr-emoji,
+.md-typeset__table td.adr-emoji {
+  width: 70px;
+  min-width: 70px !important;
+  max-width: 70px;
+}
+.md-typeset__table th.adr-text,
+.md-typeset__table td.adr-text {
+  width: 100%;
+}
+
+
+.images-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

docs/README.md

@@ -0,0 +1,38 @@
+# Use ImageListField to store Multiple Images
+
+!!! warning "Version Information"
+
+    Introduced at the 0.5.0 version.
+
+!!! warning "Database Information"
+
+    Supported only on PostgreSQL Database's.
+
+The `widget` only supports ImageField and this is a limitation to upload only one image per widget. The `inline admin` support multiple images upload but it is only supported by the `django.contrib.admin` pages.
+
+Some comments, like the [Discussion #97](https://github.com/inventare/django-image-uploader-widget/discussions/97), [Issue #146](https://github.com/inventare/django-image-uploader-widget/issues/146) and [Issue #110](https://github.com/inventare/django-image-uploader-widget/issues/110) make some feature requests and the Issue #146 takes one proposition: uses the `ArrayField`. The `ArrayField` is a `PostgreSQL` specific field and support for storing multiple values into one field.
+
+## Experimental for Now?
+
+Currently, we have added support, addaptating the `inline admin` feature to work widget-like and add support for the `ArrayField` to store images using the `storage` and save it path to an `ArrayField`. This is, really, a little experimental for now, and can contains some bugs. If your found one: open a Issue reporting.
+
+### Attention point
+
+Like various other `multiple` instances or values support, we have an tiny problem at this component, for now: when we save a form with some "unchanged" values, i.e., with the current file path string instead of an uploaded file, this string is used to store in the database. Is planed, in the future, change this to use the original array values to confirm the sended values. But, for this first version, this is a issue that is not resolved.
+
+## Usage
+
+Instead of `widget` or `inline admin` that we only set the `widget` and `inline admin` for the created model, in this part, we need to customize the model.
+
+```python
+from django.db import models
+from image_uploader_widget.postgres import ImageListField
+
+class TestWithArrayField(models.Model):
+    images = ImageListField(blank=True, null=True, upload_to="admin_test")
+
+    class Meta:
+        verbose_name = "Test With Array Field"
+```
+
+This is really simple and is not needed to create more customizations. The widget and form is automatic created for the custom multiple images widget.

docs/_stylesheets/extra.css

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # Colors
 
 To customize the image uploader widget colors you can use your own css file to override the css variables defined by the `image-uploader-inline.css` and `image-uploader-widget.css`. See an example, taken from another personal private project:

docs/array_field/tutorial.md

@@ -1,7 +1,3 @@
----
-sidebar_position: 2
----
-
 # Text And Icons
 
 To customize the image uploader widget or inline you can set some variables (this feature is based on the issue [#77](https://github.com/inventare/django-image-uploader-widget/issues/77)). In this page we talk about how to, easy, change the texts and icons on that lib.

docs/babel.config.js

@@ -1,6 +1,8 @@
 # ADR 0000: Why jQuery?
 
-November 2023 . [Eduardo Oliveira](https://github.com/EduardoJM)
+| :date: {: .adr-emoji }         | November 2023. {: .adr-text}                                    |
+| :----------------------------: | :-------------------------------------------------------------- |
+| :writing_hand: {: .adr-emoji } | [Eduardo Oliveira](https://github.com/EduardoJM) {: .adr-text } |
 
 ## Context