new attributes in the datagrid component

Author: lovasoa

CHANGELOG.md

@@ -1,6 +1,6 @@
 # CHANGELOG.md
 
-## 0.17.1 (unreleased)
+## 0.17.1 (2023-12-10)
 
  - The previous version reduced log verbosity, but also removed the ability to see the HTTP requests in the logs.
    This is now fixed, and you can see the HTTP requests again. Logging is still less verbose than before, but you can enable debug logs by setting the `RUST_LOG` environment variable to `debug`, or to `sqlpage=debug` to only see SQLPage debug logs.
@@ -17,8 +17,9 @@
  - New function: [`sqlpage.protocol`](https://sql.ophir.dev/functions.sql?function=protocol#function) to get the protocol used to access the current page. This is useful to build links that point to your own site, and work both in http and https.
  - Add an example to the documentation showing how to create heatmaps with the [chart](https://sql.ophir.dev/documentation.sql?component=chart#component) component.
  - 18 new icons available: https://tabler.io/icons/changelog#2.43
+ - New top-level attributes for the [`datagrid`](https://sql.ophir.dev/documentation.sql?component=datagrid#component) component: `description`, `description_md` , `icon` , `image_url`.
 
-## 0.17.0
+## 0.17.0 (2023-11-28)
 
 ### Uploads
 

Cargo.lock

@@ -106,6 +106,10 @@ INSERT INTO component(name, icon, description) VALUES
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'datagrid', * FROM (VALUES
     -- top level
     ('title', 'Text header at the top of the data grid.', 'TEXT', TRUE, TRUE),
+    ('description', 'A short paragraph displayed below the title.', 'TEXT', TRUE, TRUE),
+    ('description_md', 'A short paragraph displayed below the title - formatted using markdown.', 'TEXT', TRUE, TRUE),
+    ('icon', 'Name of an icon to display on the left side of the title.', 'ICON', TRUE, TRUE),
+    ('image_url', 'URL of an image to display on the left side of the title.', 'URL', TRUE, TRUE),
     -- item level
     ('title', 'Name of the piece of information.', 'TEXT', FALSE, FALSE),
     ('description', 'Value to display below the name.', 'TEXT', FALSE, TRUE),
@@ -120,13 +124,17 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 INSERT INTO example(component, description, properties) VALUES
     ('datagrid', 'Just some sections of information.', json('[{"component":"datagrid"},{"title":"Language","description":"SQL"},{"title":"Creation date","description":"1974"}, {"title":"Language family","description":"Query language"}]')),
     ('datagrid', 'A beautiful data grid with nice colors and icons.',
-            json('[{"component":"datagrid", "title":"User"}, '||
-            '{"title": "Pseudo", "description": "lovasoa", "image_url": "https://avatars.githubusercontent.com/u/552629" },' ||
-            '{"title": "Status", "description": "Active", "color": "green"},' ||
-            '{"title": "Email Status", "description": "Validated", "icon": "check", "active": true},' ||
-            '{"title": "Personal page", "description": "ophir.dev", "link": "https://ophir.dev/"},' ||
-            '{"title":"Search engine", "link":"https://google.com", "description": "Google", "color": "red", "icon":"brand-google", "footer": "Owned by Alphabet Inc."}, '||
-            '{"title":"Encyclopedia", "link":"https://wikipedia.org", "description": "Wikipedia", "color": "blue", "icon":"world", "footer": "Owned by the Wikimedia Foundation"}]'));
+            json('[{"component":"datagrid", "title": "Ophir Lojkine", "image_url": "https://avatars.githubusercontent.com/u/552629", "description_md": "Member since **2021**"},
+            {"title": "Pseudo", "description": "lovasoa", "image_url": "https://avatars.githubusercontent.com/u/552629" },
+            {"title": "Status", "description": "Active", "color": "green"},
+            {"title": "Email Status", "description": "Validated", "icon": "check", "active": true},
+            {"title": "Personal page", "description": "ophir.dev", "link": "https://ophir.dev/"}
+    ]')),
+    ('datagrid', 'Using a picture in the data grid card header.', json('[
+        {"component":"datagrid", "title": "Website Ideas", "icon": "bulb"},
+            {"title": "Search engine", "link":"https://google.com", "description": "Google", "color": "red", "icon":"brand-google", "footer": "Owned by Alphabet Inc."},
+            {"title": "Encyclopedia", "link":"https://wikipedia.org", "description": "Wikipedia", "color": "blue", "icon":"world", "footer": "Owned by the Wikimedia Foundation"}
+    ]'));
 
 
 INSERT INTO component(name, icon, description) VALUES

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

@@ -11,6 +11,11 @@ td > p {
   margin: 0;
 }
 
+/** Removes the margin-bottom from the last element */
+.remove-bottom-margin > :last-child {
+  margin-bottom: 0 !important;
+}
+
 /* https://github.com/tabler/tabler/issues/1648 */
 * {
   scrollbar-color: var(--tblr-primary) var(--tblr-bg-surface-dark) !important;

sqlpage/sqlpage.css

@@ -1,7 +1,21 @@
 <div class="card my-2">
     {{#if title}}
         <div class="card-header">
-            <h2 class="card-title">{{title}}</h2>
+            {{#if image_url}}
+                <img src="{{image_url}}" class="avatar avatar-lg me-2 rounded" width="32" height="32" alt="{{title}}" />
+            {{/if}}
+            {{#if icon}}
+                <span class="avatar avatar-sm me-2">{{icon_img icon}}</span>
+            {{/if}}
+            <h2 class="card-title">
+                {{~title~}}
+                {{#if description}}
+                    <small class="text-muted d-block">{{description}}</small>
+                {{/if}}
+                {{#if description_md}}
+                    <small class="text-muted d-block remove-bottom-margin">{{{markdown description_md}}}</small>
+                {{/if}}
+            </h2>
         </div>
     {{/if}}
     <div class="card-body">
@@ -15,7 +29,7 @@
                         <span class="status status-{{color}} {{#if active}}fw-bold{{/if}}">
                         {{/if}}
                         {{#if image_url}}
-                            <img src="{{image_url}}" class="avatar avatar-xs me-2 rounded" width="32" height="32" alt="{{title}}" />
+                            <img src="{{image_url}}" class="avatar avatar-xs me-1 rounded" width="32" height="32" alt="{{title}}" />
                         {{/if}}
                         {{#if icon}}
                             {{~icon_img icon~}}