From a7d11f49acfdc9a34d1d92eef70dea64377466fb Mon Sep 17 00:00:00 2001
From: cvanelteren <caspervanelteren@gmail.com>
Date: Sun, 6 Apr 2025 16:08:11 +0200
Subject: [PATCH 1/2] add gallery to github page

---
 README.rst | 197 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 196 insertions(+), 1 deletion(-)

diff --git a/README.rst b/README.rst
index 7b80d2aee..7d6c35499 100644
--- a/README.rst
+++ b/README.rst
@@ -16,6 +16,201 @@ Why UltraPlot? | Write Less, Create More
     :alt: Comparison of ProPlot and UltraPlot
     :align: center
 
+Checkout our examples
+=====================
+
+Below is a gallery showing random examples of what UltraPlot can do, refresh the example to show more:
+
+.. raw:: html
+
+    <div id="ultraplot-gallery-container" style="margin: 20px 0;">
+        <div id="ultraplot-gallery" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
+            <p id="loading-message" style="grid-column: 1/-1; text-align: center;">Loading gallery...</p>
+        </div>
+        <div style="text-align: center; margin-top: 20px;">
+            <button id="refresh-gallery-btn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; display: none;">
+                Show Different Examples
+            </button>
+        </div>
+    </div>
+
+    <script>
+        (function() {
+            const galleryElement = document.getElementById('ultraplot-gallery');
+            const loadingElement = document.getElementById('loading-message');
+            const refreshButton = document.getElementById('refresh-gallery-btn');
+
+            // Base URLs of the documentation
+            const baseUrl = 'https://ultraplot.readthedocs.io/en/latest/';
+            const pagesToCheck = [
+                'https://ultraplot.readthedocs.io/en/latest/index.html',
+                'https://ultraplot.readthedocs.io/en/latest/basics.html',
+                'https://ultraplot.readthedocs.io/en/latest/cartesian.html',
+                'https://ultraplot.readthedocs.io/en/latest/projections.html',
+                'https://ultraplot.readthedocs.io/en/latest/stats.html',
+            ];
+
+            // Store collected image URLs
+            let allImageUrls = [];
+            let pagesChecked = 0;
+            const numImagesToShow = 6; // Number of images to display
+
+            // Fetch HTML content from a URL and extract image sources
+            async function extractImagesFromPage(url) {
+                try {
+                    const response = await fetch(url);
+                    const html = await response.text();
+
+                    // Create a DOM parser
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html');
+
+                    // Find all image elements
+                    const images = doc.querySelectorAll('img');
+                    let pageImages = [];
+
+                    // Extract image sources
+                    images.forEach(img => {
+                        let src = img.getAttribute('src');
+                        if (src) {
+                            // Handle relative URLs
+                            if (src.startsWith('/') || !src.startsWith('http')) {
+                                src = new URL(src, url).href;
+                            }
+
+                            // Filter out icons, logos, etc.
+                            if (!src.includes('logo') && !src.includes('icon') &&
+                                (src.includes('_images/') || src.includes('_static/'))) {
+                                pageImages.push(src);
+                            }
+                        }
+                    });
+
+                    return pageImages;
+                } catch (error) {
+                    console.error(`Error fetching ${url}:`, error);
+                    return [];
+                }
+            }
+
+            // Create gallery once images are collected
+            function createGallery() {
+                if (pagesChecked < pagesToCheck.length) {
+                    return; // Wait until all pages are checked
+                }
+
+                if (allImageUrls.length === 0) {
+                    galleryElement.innerHTML = '<p style="grid-column: 1/-1; text-align: center;">No images found. Please check the connection to the documentation site.</p>';
+                    return;
+                }
+
+                // Filter for unique URLs
+                allImageUrls = [...new Set(allImageUrls)];
+
+                // Display the refresh button
+                refreshButton.style.display = 'inline-block';
+                refreshButton.onclick = refreshGallery;
+
+                // Create the initial gallery
+                refreshGallery();
+            }
+
+            // Refresh the gallery with new random images
+            function refreshGallery() {
+                // Clear the gallery
+                galleryElement.innerHTML = '';
+
+                // Get random images
+                const count = Math.min(numImagesToShow, allImageUrls.length);
+                const randomImages = getRandomImages(allImageUrls, count);
+
+                // Create grid items for each image
+                randomImages.forEach(imageUrl => {
+                    const gridItem = createGridItem(imageUrl);
+                    galleryElement.appendChild(gridItem);
+                });
+            }
+
+            // Create a grid item for an image
+            function createGridItem(imageUrl) {
+                const imgContainer = document.createElement('div');
+                imgContainer.className = 'gallery-item';
+                imgContainer.style.background = 'white';
+                imgContainer.style.padding = '15px';
+                imgContainer.style.borderRadius = '8px';
+                imgContainer.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
+                imgContainer.style.display = 'flex';
+                imgContainer.style.flexDirection = 'column';
+                imgContainer.style.height = '100%';
+
+                const imgWrapper = document.createElement('div');
+                imgWrapper.style.flex = '1';
+                imgWrapper.style.display = 'flex';
+                imgWrapper.style.alignItems = 'center';
+                imgWrapper.style.justifyContent = 'center';
+                imgWrapper.style.overflow = 'hidden';
+                imgWrapper.style.marginBottom = '10px';
+
+                const img = document.createElement('img');
+                img.src = imageUrl;
+                img.alt = 'UltraPlot Example';
+                img.style.maxWidth = '100%';
+                img.style.maxHeight = '200px'; // Consistent height
+                img.style.objectFit = 'contain';
+                img.style.display = 'block';
+
+                // Handle load errors
+                img.onerror = () => {
+                    img.src = 'https://via.placeholder.com/200x150?text=Image+Not+Available';
+                    img.alt = 'Image Not Available';
+                };
+
+                // Extract filename for caption
+                const filename = imageUrl.split('/').pop();
+
+                const caption = document.createElement('div');
+                caption.style.fontSize = '12px';
+                caption.style.textAlign = 'center';
+                caption.style.color = '#666';
+                caption.style.marginTop = 'auto';
+                caption.style.wordBreak = 'break-word';
+
+                imgWrapper.appendChild(img);
+                imgContainer.appendChild(imgWrapper);
+                imgContainer.appendChild(caption);
+
+                // Make the grid item clickable to open the image in a new tab
+                imgContainer.style.cursor = 'pointer';
+                imgContainer.onclick = () => window.open(imageUrl, '_blank');
+
+                return imgContainer;
+            }
+
+            // Get a random subset of images
+            function getRandomImages(images, count) {
+                const shuffled = [...images].sort(() => 0.5 - Math.random());
+                return shuffled.slice(0, count);
+            }
+
+            // Fetch images from each documentation page
+            pagesToCheck.forEach(pageUrl => {
+                extractImagesFromPage(pageUrl).then(images => {
+                    allImageUrls = allImageUrls.concat(images);
+                    pagesChecked++;
+                    createGallery();
+                });
+            });
+
+            // Fallback in case fetching fails
+            setTimeout(() => {
+                if (pagesChecked < pagesToCheck.length) {
+                    pagesChecked = pagesToCheck.length; // Force update
+                    createGallery();
+                }
+            }, 5000);
+        })();
+    </script>
+
 Documentation
 =============
 
@@ -69,6 +264,6 @@ inside the ``ultraplot`` folder.
    :target: https://results.pre-commit.ci/latest/github/Ultraplot/ultraplot/main
    :alt: pre-commit.ci status
 
-.. |coverage| image:: https://codecov.io/gh/Ultraplot/ultraplot/graph/badge.svg?token=C6ZB7Q9II4 
+.. |coverage| image:: https://codecov.io/gh/Ultraplot/ultraplot/graph/badge.svg?token=C6ZB7Q9II4
    :target: https://codecov.io/gh/Ultraplot/ultraplot
    :alt: coverage

From 3d857cab1611ebeb8e787a36aa10db789008f264 Mon Sep 17 00:00:00 2001
From: cvanelteren <caspervanelteren@gmail.com>
Date: Sun, 6 Apr 2025 18:17:43 +0200
Subject: [PATCH 2/2] show static images

---
 README.rst | 251 +++++++++++++----------------------------------------
 1 file changed, 60 insertions(+), 191 deletions(-)

diff --git a/README.rst b/README.rst
index 7d6c35499..af89486a8 100644
--- a/README.rst
+++ b/README.rst
@@ -19,197 +19,66 @@ Why UltraPlot? | Write Less, Create More
 Checkout our examples
 =====================
 
-Below is a gallery showing random examples of what UltraPlot can do, refresh the example to show more:
-
-.. raw:: html
-
-    <div id="ultraplot-gallery-container" style="margin: 20px 0;">
-        <div id="ultraplot-gallery" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
-            <p id="loading-message" style="grid-column: 1/-1; text-align: center;">Loading gallery...</p>
-        </div>
-        <div style="text-align: center; margin-top: 20px;">
-            <button id="refresh-gallery-btn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; display: none;">
-                Show Different Examples
-            </button>
-        </div>
-    </div>
-
-    <script>
-        (function() {
-            const galleryElement = document.getElementById('ultraplot-gallery');
-            const loadingElement = document.getElementById('loading-message');
-            const refreshButton = document.getElementById('refresh-gallery-btn');
-
-            // Base URLs of the documentation
-            const baseUrl = 'https://ultraplot.readthedocs.io/en/latest/';
-            const pagesToCheck = [
-                'https://ultraplot.readthedocs.io/en/latest/index.html',
-                'https://ultraplot.readthedocs.io/en/latest/basics.html',
-                'https://ultraplot.readthedocs.io/en/latest/cartesian.html',
-                'https://ultraplot.readthedocs.io/en/latest/projections.html',
-                'https://ultraplot.readthedocs.io/en/latest/stats.html',
-            ];
-
-            // Store collected image URLs
-            let allImageUrls = [];
-            let pagesChecked = 0;
-            const numImagesToShow = 6; // Number of images to display
-
-            // Fetch HTML content from a URL and extract image sources
-            async function extractImagesFromPage(url) {
-                try {
-                    const response = await fetch(url);
-                    const html = await response.text();
-
-                    // Create a DOM parser
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(html, 'text/html');
-
-                    // Find all image elements
-                    const images = doc.querySelectorAll('img');
-                    let pageImages = [];
-
-                    // Extract image sources
-                    images.forEach(img => {
-                        let src = img.getAttribute('src');
-                        if (src) {
-                            // Handle relative URLs
-                            if (src.startsWith('/') || !src.startsWith('http')) {
-                                src = new URL(src, url).href;
-                            }
-
-                            // Filter out icons, logos, etc.
-                            if (!src.includes('logo') && !src.includes('icon') &&
-                                (src.includes('_images/') || src.includes('_static/'))) {
-                                pageImages.push(src);
-                            }
-                        }
-                    });
-
-                    return pageImages;
-                } catch (error) {
-                    console.error(`Error fetching ${url}:`, error);
-                    return [];
-                }
-            }
-
-            // Create gallery once images are collected
-            function createGallery() {
-                if (pagesChecked < pagesToCheck.length) {
-                    return; // Wait until all pages are checked
-                }
-
-                if (allImageUrls.length === 0) {
-                    galleryElement.innerHTML = '<p style="grid-column: 1/-1; text-align: center;">No images found. Please check the connection to the documentation site.</p>';
-                    return;
-                }
-
-                // Filter for unique URLs
-                allImageUrls = [...new Set(allImageUrls)];
-
-                // Display the refresh button
-                refreshButton.style.display = 'inline-block';
-                refreshButton.onclick = refreshGallery;
-
-                // Create the initial gallery
-                refreshGallery();
-            }
-
-            // Refresh the gallery with new random images
-            function refreshGallery() {
-                // Clear the gallery
-                galleryElement.innerHTML = '';
-
-                // Get random images
-                const count = Math.min(numImagesToShow, allImageUrls.length);
-                const randomImages = getRandomImages(allImageUrls, count);
-
-                // Create grid items for each image
-                randomImages.forEach(imageUrl => {
-                    const gridItem = createGridItem(imageUrl);
-                    galleryElement.appendChild(gridItem);
-                });
-            }
-
-            // Create a grid item for an image
-            function createGridItem(imageUrl) {
-                const imgContainer = document.createElement('div');
-                imgContainer.className = 'gallery-item';
-                imgContainer.style.background = 'white';
-                imgContainer.style.padding = '15px';
-                imgContainer.style.borderRadius = '8px';
-                imgContainer.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
-                imgContainer.style.display = 'flex';
-                imgContainer.style.flexDirection = 'column';
-                imgContainer.style.height = '100%';
-
-                const imgWrapper = document.createElement('div');
-                imgWrapper.style.flex = '1';
-                imgWrapper.style.display = 'flex';
-                imgWrapper.style.alignItems = 'center';
-                imgWrapper.style.justifyContent = 'center';
-                imgWrapper.style.overflow = 'hidden';
-                imgWrapper.style.marginBottom = '10px';
-
-                const img = document.createElement('img');
-                img.src = imageUrl;
-                img.alt = 'UltraPlot Example';
-                img.style.maxWidth = '100%';
-                img.style.maxHeight = '200px'; // Consistent height
-                img.style.objectFit = 'contain';
-                img.style.display = 'block';
-
-                // Handle load errors
-                img.onerror = () => {
-                    img.src = 'https://via.placeholder.com/200x150?text=Image+Not+Available';
-                    img.alt = 'Image Not Available';
-                };
-
-                // Extract filename for caption
-                const filename = imageUrl.split('/').pop();
-
-                const caption = document.createElement('div');
-                caption.style.fontSize = '12px';
-                caption.style.textAlign = 'center';
-                caption.style.color = '#666';
-                caption.style.marginTop = 'auto';
-                caption.style.wordBreak = 'break-word';
-
-                imgWrapper.appendChild(img);
-                imgContainer.appendChild(imgWrapper);
-                imgContainer.appendChild(caption);
-
-                // Make the grid item clickable to open the image in a new tab
-                imgContainer.style.cursor = 'pointer';
-                imgContainer.onclick = () => window.open(imageUrl, '_blank');
-
-                return imgContainer;
-            }
-
-            // Get a random subset of images
-            function getRandomImages(images, count) {
-                const shuffled = [...images].sort(() => 0.5 - Math.random());
-                return shuffled.slice(0, count);
-            }
-
-            // Fetch images from each documentation page
-            pagesToCheck.forEach(pageUrl => {
-                extractImagesFromPage(pageUrl).then(images => {
-                    allImageUrls = allImageUrls.concat(images);
-                    pagesChecked++;
-                    createGallery();
-                });
-            });
-
-            // Fallback in case fetching fails
-            setTimeout(() => {
-                if (pagesChecked < pagesToCheck.length) {
-                    pagesChecked = pagesToCheck.length; // Force update
-                    createGallery();
-                }
-            }, 5000);
-        })();
-    </script>
+Below is a gallery showing random examples of what UltraPlot can do, for more examples checkout our extensive `docs <https://ultraplot.readthedocs.io>`_.
+
+.. list-table::
+   :widths: 33 33 33
+   :header-rows: 0
+
+   * - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/subplot_example.png
+         :alt: Subplots & Layouts
+         :target: https://ultraplot.readthedocs.io/en/latest/subplots.html
+         :width: 100%
+
+       **Subplots & Layouts**
+
+       Create complex multi-panel layouts effortlessly.
+
+     - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/cartesian_example.png
+         :alt: Cartesian Plots
+         :target: https://ultraplot.readthedocs.io/en/latest/cartesian.html
+         :width: 100%
+
+       **Cartesian Plots**
+
+       Easily generate clean, well-formatted plots.
+
+     - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/projection_example.png
+         :alt: Projections & Maps
+         :target: https://ultraplot.readthedocs.io/en/latest/projections.html
+         :width: 100%
+
+       **Projections & Maps**
+
+       Built-in support for projections and geographic plots.
+
+   * - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/colorbars_legends_example.png
+         :alt: Colorbars & Legends
+         :target: https://ultraplot.readthedocs.io/en/latest/colorbars_legends.html
+         :width: 100%
+
+       **Colorbars & Legends**
+
+       Customize legends and colorbars with ease.
+
+     - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/panels_example.png
+         :alt: Insets & Panels
+         :target: https://ultraplot.readthedocs.io/en/latest/insets_panels.html
+         :width: 100%
+
+       **Insets & Panels**
+
+       Add inset plots and panel-based layouts.
+
+     - .. image:: https://ultraplot.readthedocs.io/en/latest/_static/example_plots/colormaps_example.png
+         :alt: Colormaps & Cycles
+         :target: https://ultraplot.readthedocs.io/en/latest/colormaps.html
+         :width: 100%
+
+       **Colormaps & Cycles**
+
+       Visually appealing, perceptually uniform colormaps.
+
 
 Documentation
 =============