Update docs

blueswen · Nov 21, 2022 · 50e3242 · 50e3242
1 parent 2c1b15b
commit 50e3242
Show file tree

Hide file tree

Showing 15 changed files with 119 additions and 25 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,3 +1,10 @@
+mkdocs-glightbox-0.3.1 (2022-11-22)
+
+    * Supported lightbox slide effect customization (#8)
+    * Supported synchronized lightbox caption dark mode with Material for MkDocs (#7)
+    * Supported glightbox built-in gallery feature (#11)
+    * Supported skip image in the anchor tag
+
 mkdocs-glightbox-0.3.0 (2022-09-29)
 
     * Fixed width and height setting in config not working bug

diff --git a/README.md b/README.md
@@ -34,7 +34,9 @@ GLightbox is a pure javascript lightbox library with mobile support.
        - glightbox
     ```
 
-3. You may customize the plugin by passing options in mkdocs.yml:
+3. All images will be added to the lightbox effect automatically, except images in an anchor tag and emoji images from [pymdown-extensions](https://facelessuser.github.io/pymdown-extensions/extensions/emoji/).
+
+4. You may customize the plugin by passing options in mkdocs.yml:
 
     ```yaml
     plugins:
@@ -69,8 +71,15 @@ GLightbox is a pure javascript lightbox library with mobile support.
 
     Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
 
-4. For more flexibility, you can disable the lightbox with a [specific image](https://blueswen.github.io/mkdocs-glightbox/disable/image/) or a [specific page](https://blueswen.github.io/mkdocs-glightbox/disable/page/).
-5. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
+5. For more flexibility, you can disable the lightbox with a [specific image](https://blueswen.github.io/mkdocs-glightbox/disable/image/) or a [specific page](https://blueswen.github.io/mkdocs-glightbox/disable/page/).
+6. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
+7. Support grouping images as galleries, check more details on [Gallery](https://blueswen.github.io/mkdocs-glightbox/gallery/gallery/).
+
+## How it works
+
+1. Copy GLightbox script file into `site/assets/javascripts/` directory and CSS file into `site/assets/stylesheets/` directory
+2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages
+3. Search all image tags and warp with an anchor tag for GLightbox excluded images with skip class or already warped with an anchor tag
 
 ## License
 

diff --git a/demo-mkdocs/docs/caption/caption.md b/demo-mkdocs/docs/caption/caption.md
@@ -11,7 +11,7 @@ markdown_extensions:
   - attr_list
 ```
 
-Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
 
 !!! warning "Warning"
 
@@ -87,7 +87,7 @@ Since adding a title attribute to each image may be frustrating, we provide an `
       - meta
     ```
 
-    Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
+    Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
 
 ```markdown title="Using image alt as caption title with page meta"
 ---
@@ -112,7 +112,6 @@ The built-in GLightbox caption feature only works in the **light box**. If you w
 glightbox.auto_caption: true
 ---
 
-<div class="result" markdown>
 <figure markdown>
 ![Tulum, Mexico.](../images/gallery/blueswen-tulum.jpeg){ width="500px"}
 <figcaption>Tulum, Mexico. Credit: Blueswen</figcaption>

diff --git a/demo-mkdocs/docs/disable/image.md b/demo-mkdocs/docs/disable/image.md
@@ -5,7 +5,7 @@ markdown_extensions:
   - attr_list
 ```
 
-Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
 
 The customized classes could be set in plugin option:
 

diff --git a/demo-mkdocs/docs/disable/page.md b/demo-mkdocs/docs/disable/page.md
@@ -9,7 +9,7 @@ markdown_extensions:
   - meta
 ```
 
-Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
+Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
 
 ## Demo
 

diff --git a/demo-mkdocs/docs/gallery.md b/demo-mkdocs/docs/gallery.md
diff --git a/demo-mkdocs/docs/gallery/gallery.md b/demo-mkdocs/docs/gallery/gallery.md
@@ -0,0 +1,69 @@
+# Gallery
+
+Built-in GLightbox gallery feature can be used by adding attribute ```data-gallery``` through markdown_extensions ```attr_list```. The image with the same gallery name will be grouped as a galley in the light box. Enable ```attr_list``` via ```mkdocs.yml```:
+
+```yaml
+markdown_extensions:
+  - attr_list
+```
+
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+
+## Demo
+
+There are two galleries: taipei and seattle.
+
+```markdown title="Setting gallery with data-gallery attribute"
+### Taipei
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
+
+### Seattle
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
+```
+
+### Taipei
+
+<figure markdown>
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
+
+<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
+
+<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
+</figure>
+
+### Seattle
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>
diff --git a/demo-mkdocs/docs/gallery/yuyu-seattle-1.jpeg b/demo-mkdocs/docs/gallery/yuyu-seattle-1.jpeg
diff --git a/demo-mkdocs/docs/gallery/yuyu-seattle-2.jpeg b/demo-mkdocs/docs/gallery/yuyu-seattle-2.jpeg
diff --git a/demo-mkdocs/docs/gallery/yuyu-seattle-3.jpeg b/demo-mkdocs/docs/gallery/yuyu-seattle-3.jpeg
diff --git a/demo-mkdocs/docs/gallery/yuyu-taipei-city.jpeg b/demo-mkdocs/docs/gallery/yuyu-taipei-city.jpeg
diff --git a/demo-mkdocs/docs/gallery/yuyu-taipei-sky.jpeg b/demo-mkdocs/docs/gallery/yuyu-taipei-sky.jpeg
diff --git a/demo-mkdocs/docs/index.md b/demo-mkdocs/docs/index.md
@@ -1,4 +1,10 @@
-# MkDocs GLightbox 
+# MkDocs GLightbox
+
+<p class="text-center" markdown>
+[![PyPI version](https://img.shields.io/pypi/v/mkdocs-glightbox.svg)](https://pypi.org/project/mkdocs-glightbox)
+[![PyPI downloads](https://img.shields.io/pypi/dm/mkdocs-glightbox.svg)](https://pypi.org/project/mkdocs-glightbox)
+[![Codecov](https://codecov.io/gh/blueswen/mkdocs-glightbox/branch/main/graph/badge.svg?token=KAJS3NU81H)](https://codecov.io/gh/blueswen/mkdocs-glightbox)
+</p>
 
 A MkDocs plugin supports image lightbox with [GLightbox](https://github.com/biati-digital/glightbox).
 
@@ -26,7 +32,9 @@ GLightbox is a pure javascript lightbox library with mobile support.
        - glightbox
     ```
 
-3. You may customize the plugin by passing options in mkdocs.yml:
+3. All images will be added to the lightbox effect automatically, except images in an anchor tag and emoji images from [pymdown-extensions](https://facelessuser.github.io/pymdown-extensions/extensions/emoji/).
+
+4. You may customize the plugin by passing options in mkdocs.yml:
 
     ```yaml
     plugins:
@@ -46,7 +54,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
     ```
 
     | Option           | Default | Description                                                                                          |
-    |------------------|---------|------------------------------------------------------------------------------------------------------|
+    | ---------------- | ------- | ---------------------------------------------------------------------------------------------------- |
     | touchNavigation  | true    | Enable or disable the touch navigation (swipe).                                                      |
     | loop             | false   | Loop slides on end.                                                                                  |
     | effect           | zoom    | Name of the effect on lightbox open. (zoom, fade, none)                                              |
@@ -61,8 +69,15 @@ GLightbox is a pure javascript lightbox library with mobile support.
 
     Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
 
-4. For more flexibility, you can disable lightbox by a [specific image](./disable/image.md) or a [specific page](./disable/page.md).
-5. Support lightbox image caption, check more details on [Caption](./caption/caption.md)
+5. For more flexibility, you can disable the lightbox with a [specific image](./disable/image.md) or a [specific page](./disable/page.md).
+6. Support lightbox image caption, check more details on [Caption](./caption/caption.md).
+7. Support grouping images as galleries, check more details on [Gallery](./gallery/gallery.md).
+
+## How it works
+
+1. Copy GLightbox script file into `site/assets/javascripts/` directory and CSS file into `site/assets/stylesheets/` directory
+2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages
+3. Search all image tags and warp with an anchor tag for GLightbox excluded images with skip class or already warped with an anchor tag
 
 ## Demo
 

diff --git a/demo-mkdocs/mkdocs.yml b/demo-mkdocs/mkdocs.yml
@@ -8,6 +8,9 @@ edit_uri: ""
 
 theme:
   name: material
+
+  icon:
+    logo: material/projector
 
   features:
     - toc.integrate
@@ -22,6 +25,8 @@ theme:
     # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
+      primary: teal
+      accent: teal
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
@@ -63,6 +68,7 @@ nav:
     - Sea: taiwan/sea.md
     - Mountain: taiwan/mountain.md
   - Caption: caption/caption.md
+  - Gallery: gallery/gallery.md
   - More Flexibility:
     - Disable by image: disable/image.md
     - Disable by page: disable/page.md
diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setup(
     name="mkdocs-glightbox",
-    version="0.3.0",
+    version="0.3.1",
     author="Blueswen",
     author_email="[email protected]",
     url="https://blueswen.github.io/mkdocs-glightbox",
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ markdown_extensions: @@
       - meta
     ```
-    Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
+    Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
     ## Demo
@@ Expand Down @@