improve links in lists

and improve docs

Author: lovasoa

CHANGELOG.md

@@ -37,6 +37,7 @@
 - In the form component, allow the usage of the `value` property in checkboxes and radio buttons. The custom `checked` property still works, but it is now optional.
 - Updated the welcome message displayed on the terminal when starting the server to be friendlier and more helpful.
 - Display the page footer (by default: `Built with SQLPage`) at the bottom of the page instead of immediately after the main content.
+- Improve links in the list component: The entire list item is now clickable, when a `link` property is provided.
 
 ## 0.31.0 (2024-11-24)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -57,10 +57,16 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 INSERT INTO example(component, description, properties) VALUES
     ('list', 'A basic compact list', json('[{"component":"list", "compact": true, "title": "SQLPage lists are..."},{"title":"Beautiful"},{"title":"Useful"},{"title":"Versatile"}]')),
     ('list', 'An empty list with a link to add an item', json('[{"component":"list", "empty_title": "No items yet", "empty_description": "This list is empty. Click here to create a new item !", "empty_link": "documentation.sql"}]')),
-    ('list', 'A list with rich text descriptions', json('[{"component":"list", "wrap": true},
-        {"title":"SQLPage", "image_url": "https://raw.githubusercontent.com/sqlpage/SQLPage/main/docs/favicon.png", "description_md":"A **SQL**-based **page** generator for **PostgreSQL**, **MySQL**, **SQLite** and **SQL Server**. [Free on Github](https://github.com/sqlpage/SQLPage)"},
-        {"title":"Tabler", "image_url": "https://avatars.githubusercontent.com/u/35471246", "description_md":"A **free** and **open-source** **HTML** template pack based on **Bootstrap**."},
-        {"title":"Tabler Icons", "image_url": "https://tabler.io/favicon.ico", "description_md":"A set of over **700** free MIT-licensed high-quality **SVG** icons for you to use in your web projects."}
+    ('list', '
+### A list with rich text descriptions
+
+This example illustrates creating a nice list where each item has a title, a description, an image, and a link to another page.
+
+> Be careful, nested links are not supported. If you use the list''s `link` property, then your markdown `description_md` should not contain any link.
+', json('[{"component":"list", "wrap": true},
+        {"title":"SQL Websites", "image_url": "/favicon.ico", "description_md":"Write SQL, get a website. SQLPage is a **SQL**-based **site** generator for **PostgreSQL**, **MySQL**, **SQLite** and **SQL Server**.", "link": "/"},
+        {"title":"SQL Forms", "image_url": "https://upload.wikimedia.org/wikipedia/commons/b/b6/FileStack_retouched.jpg", "description_md":"Easily collect data **from users to your database** using the *form* component. Handle the data in SQL with `INSERT` or `UPDATE` queries.", "link": "?component=form"},
+        {"title":"SQL Maps", "image_url": "https://upload.wikimedia.org/wikipedia/commons/1/15/Vatican_City_map_EN.png", "description_md":"Show database contents on a map using the *map* component. Works well with *PostGIS* and *SpatiaLite*.", "link": "?component=map"}
     ]')),
     ('list', 'A beautiful list with bells and whistles.',
             json('[{"component":"list", "title":"Top SQLPage features" }, '||

examples/official-site/sqlpage/migrations/10_map.sql

@@ -9,18 +9,17 @@ VALUES
 
 The map component displays a custom interactive map with markers on it.
 
-Useful in combination with PostgreSQL''s PostGIS or SQLite''s spatialite,
-to create custom visualizations of your geospatial data.
-
-The map component is also compatible with non-geospatial databases,
-by manually setting the `latitude` and `longitude` parameters.
+In its simplest form, the component displays points on a map from a table of latitudes and longitudes.
+But it can also be used by cartographers in combination with PostgreSQL''s PostGIS or SQLite''s spatialite,
+to create custom visualizations of geospatial data.
+Use the `geojson` property to generate rich maps from a GIS database.
 
 ### Example Use Cases
 
 1. **Store Locator**: Build an interactive map to find the nearest store information using SQL-stored geospatial data.
 2. **Delivery Route Optimization**: Visualize the results of delivery route optimization algorithms.
 3. **Sales Heatmap**: Identify high-performing regions by mapping sales data stored in SQL.
-4. **Real-Time Tracking**: Create dynamic dashboards that track vehicles, assets, or users live using PostGIS or MS SQL Server geospatial time series data.
+4. **Real-Time Tracking**: Create dynamic dashboards that track vehicles, assets, or users live using PostGIS or MS SQL Server geospatial time series data. Use the [shell](?component=shell) component to auto-refresh the map.
 5. **Demographic Insights**: Map customer demographics or trends geographically to uncover opportunities for growth or better decision-making.
 ',
         'map',
@@ -216,7 +215,7 @@ Perfect for visualizing multi-dimensional relationships between points on a map,
             '[
             { "component": "map", "title": "Paris", "zoom": 11, "latitude": 48.85, "longitude": 2.34 },
             { "title": "Notre Dame", "icon": "building-castle", "color": "indigo", "latitude": 48.8530, "longitude": 2.3498, "description_md": "A beautiful cathedral.", "link": "https://en.wikipedia.org/wiki/Notre-Dame_de_Paris" },
-            { "title": "Eiffel Tower", "icon": "tower", "color": "yellow", "latitude": 48.8584, "longitude": 2.2945, "description_md": "A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)" },
+            { "title": "Eiffel Tower", "icon": "tower", "color": "red", "latitude": 48.8584, "longitude": 2.2945, "description_md": "A tall tower. [Wikipedia](https://en.wikipedia.org/wiki/Eiffel_Tower)" },
             { "title": "Tower to Cathedral", "geojson": {"type": "LineString", "coordinates": [[2.2945, 48.8584], [2.3498, 48.8530]]}, "color": "teal", "description": "A nice 45 minutes walk." }
             ]'
         )

sqlpage/templates/list.handlebars

@@ -6,13 +6,14 @@
     {{/if}}
     <div class="list-group list-group-flush list-group-hoverable">
         {{#each_row}}
+        {{#if link}}
+            <a href="{{link}}" {{#if id}}id="{{id}}"{{/if}}
+                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{#if ../compact}}py-1{{/if}} {{class}} text-decoration-none link-body-emphasis">
+        {{else}}
             <div {{#if id}}id="{{id}}"{{/if}}
                 class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{#if ../compact}}py-1{{/if}} {{class}}">
-                <div class="row align-items-center">
-                    {{#if link}}
-                        <a href="{{link}}" class="col text-truncate row align-items-center text-decoration-none link-body-emphasis">
-                    {{/if}}
-
+        {{/if}}
+            <div class="row align-items-center">
                     {{#if color}}
                         <div class="col-auto"><span class="badge bg-{{color}}"></span></div>
                     {{/if}}
@@ -36,11 +37,6 @@
                         </div>
                     </div>
 
-                    {{#if link}}
-                        </a>
-                    {{/if}}
-
-
                     {{#if view_link}}
                         <a href="{{view_link}}" class="link-secondary col-auto" title="View">
                             {{~icon_img 'eye'~}}
@@ -59,7 +55,11 @@
                         </a>
                     {{/if}}
                 </div>
+        {{#if link}}
+            </a>
+        {{else}}
             </div>
+        {{/if}}
         {{/each_row}}
         {{#if (eq @row_index 0)}}
             <a href="{{default empty_link '#'}}" class="list-group-item list-group-item-action">