new component: timeline

sqlpage · Oct 15, 2023 · 9cc5817 · 9cc5817
1 parent b0050f6
commit 9cc5817
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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" }
+        ]'
+        )
+    )
+    ;
diff --git a/sqlpage/templates/timeline.handlebars b/sqlpage/templates/timeline.handlebars
@@ -0,0 +1,31 @@
+<ul class="timeline {{#if simple}}timeline-simple{{/if}}">
+  {{#each_row}}
+  <li class="timeline-event">
+    <div class="timeline-event-icon {{#if color}}bg-{{color}}-lt{{/if}}">
+        {{~icon_img (default icon 'git-commit')~}}
+    </div>
+    {{~#if link~}}
+    <a class="card timeline-event-card" href="{{link}}">
+    {{~else~}}
+    <div class="card timeline-event-card">
+    {{~/if~}}
+      <div class="card-body">
+        <div class="text-secondary float-end">{{date}}</div>
+        {{~#if title}}<h4>{{title}}</h4>{{~/if~}}
+        {{~#if (or description description_md)~}}
+            <p class="text-secondary">
+                {{~description~}}
+                {{~#if description_md~}}
+                    {{{markdown description_md}}}
+                {{~/if~}}
+            </p>
+        {{~/if~}}
+      </div>
+    {{~#if link~}}
+    </a>
+    {{~else~}}
+    </div>
+    {{~/if~}}
+  </li>
+  {{/each_row}}
+</ul>