From 9cc5817de3c7ebce865cc256208d695379a79b4f Mon Sep 17 00:00:00 2001 From: lovasoa Date: Mon, 16 Oct 2023 00:52:15 +0200 Subject: [PATCH] new component: timeline --- CHANGELOG.md | 4 +- .../sqlpage/migrations/13_tab.sql | 1 - .../sqlpage/migrations/16_timeline.sql | 103 ++++++++++++++++++ sqlpage/templates/timeline.handlebars | 31 ++++++ 4 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 examples/official-site/sqlpage/migrations/16_timeline.sql create mode 100644 sqlpage/templates/timeline.handlebars diff --git a/CHANGELOG.md b/CHANGELOG.md index 6852c188..66fa3bf6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,10 @@ # CHANGELOG.md -## 0.13.0 (unreleased) +## 0.13.0 (2023-10-16) + - New [timeline](https://sql.ophir.dev/documentation.sql?component=timeline#component) component to display a timeline of events. - Add support for scatter and bubble plots in the chart component. See [the chart documentation](https://sql.ophir.dev/documentation.sql?component=chart#component). - further improve debuggability with more precise error messages. In particular, it usd to be hard to debug errors in long migration scripts, because the line number and position was not displayed. This is now fixed. + - Better logs on 404 errors. SQLPage used to log a message without the path of the file that was not found. This made it hard to debug 404 errors. This is now fixed. - Add a new `top_image` attribute to the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component to display an image at the top of the card. This makes it possible to create beautiful image galleries with SQLPage. - Updated dependencies, for bug fixes and performance improvements. - New icons (see https://tabler-icons.io/changelog) diff --git a/examples/official-site/sqlpage/migrations/13_tab.sql b/examples/official-site/sqlpage/migrations/13_tab.sql index 7ee63790..03f74fa7 100644 --- a/examples/official-site/sqlpage/migrations/13_tab.sql +++ b/examples/official-site/sqlpage/migrations/13_tab.sql @@ -5,7 +5,6 @@ VALUES ( 'row-insert-bottom', '0.9.5' ); --- Insert the parameters for the http_header component into the parameter table INSERT INTO parameter ( component, name, diff --git a/examples/official-site/sqlpage/migrations/16_timeline.sql b/examples/official-site/sqlpage/migrations/16_timeline.sql new file mode 100644 index 00000000..bad83e7d --- /dev/null +++ b/examples/official-site/sqlpage/migrations/16_timeline.sql @@ -0,0 +1,103 @@ +INSERT INTO component (name, description, icon, introduced_in_version) +VALUES ( + 'timeline', + 'A list of events with a vertical line connecting them.', + 'git-commit', + '0.13.0' + ); +INSERT INTO parameter ( + component, + name, + description, + type, + top_level, + optional + ) +VALUES ( + 'timeline', + 'simple', + 'If set to true, the timeline will be displayed in a condensed format without icons.', + 'BOOLEAN', + TRUE, + TRUE + ), + ( + 'timeline', + 'title', + 'Name of the event.', + 'TEXT', + FALSE, + FALSE + ), + ( + 'timeline', + 'date', + 'Date of the event.', + 'TEXT', + FALSE, + FALSE + ), + ( + 'timeline', + 'icon', + 'Name of the icon to display next to the event. See tabler-icons.io for a list of available icons.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'timeline', + 'color', + 'Color of the icon. See preview.tabler.io/colors.html for a list of available colors.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'timeline', + 'description', + 'Textual description of the event.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'timeline', + 'description_md', + 'Description of the event in Markdown.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'timeline', + 'link', + 'Link to a page with more information about the event.', + 'TEXT', + FALSE, + TRUE + ); +INSERT INTO example (component, description, properties) +VALUES ( + 'timeline', + 'A basic timeline with just names and dates.', + JSON( + '[ + { "component": "timeline", "simple": true }, + { "title": "New message from Elon Musk", "date": "13:00" }, + { "title": "Jeff Bezos assigned task \"work more\" to you.", "date": "yesterday, 16:35" } + ]' + ) + ), + ( + 'timeline', + 'A full-fledged timeline with icons, colors, and rich text descriptions.', + JSON( + '[ + { "component": "timeline" }, + { "title": "v0.13.0 was just released !", "link": "https://github.com/lovasoa/SQLpage/releases/", "date": "2023-10-16", "icon": "brand-github", "color": "green", "description_md": "This version introduces the `timeline` component." }, + { "title": "They are talking about us...", "description_md": "[This article](https://www.postgresql.org/about/news/announcing-sqlpage-build-dynamic-web-applications-in-sql-2672/) on the official PostgreSQL website mentions SQLPage.", "date": "2023-07-12", "icon": "database", "color": "blue" } + ]' + ) + ) + ; \ No newline at end of file diff --git a/sqlpage/templates/timeline.handlebars b/sqlpage/templates/timeline.handlebars new file mode 100644 index 00000000..9cc637d1 --- /dev/null +++ b/sqlpage/templates/timeline.handlebars @@ -0,0 +1,31 @@ + \ No newline at end of file