allow reversing the order of text and images in the hero component

closes #383

Author: lovasoa

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 0.24.1
 
+ - hero component: allow reversing the order of text and images. Allows hero components with the text on the right and the image on the left.
  - Reduce the max item width in the datagrid component for a better and more compact display on small screens. This makes the datagrid component more mobile-friendly. If you have a datagrid with long text items, this may impact the layout of your page. You can override this behavior by manually changing the `--tblr-datagrid-item-width` CSS variable in your custom CSS.
  - Apply migrations before initializing the on-database file system. This allows migrations to create files in the database file system.
  - Added a [new example](https://github.com/lovasoa/SQLpage/tree/main/examples/CRUD%20-%20Authentication) to the documentation

examples/official-site/sqlpage/migrations/02_hero_component.sql

@@ -90,6 +90,13 @@ FROM
             ('muted', 'Mute the video', 'BOOLEAN', TRUE, TRUE),
             ('autoplay', 'Automatically start playing the video', 'BOOLEAN', TRUE, TRUE),
             ('loop', 'Loop the video', 'BOOLEAN', TRUE, TRUE),
+            (
+                'reverse',
+                'Reverse the order of the image and text: the image will be on the left, and the text on the right.',
+                'BOOLEAN',
+                TRUE,
+                TRUE
+            ),
             -- item level
             (
                 'title',
@@ -154,4 +161,17 @@ VALUES
             "link": "/documentation.sql",
             "link_text": "Read Documentation !"},' || '{"title": "Fast", "description": "Pages load instantly, even on slow mobile networks.", "icon": "car", "color": "red", "link": "/"},' || '{"title": "Beautiful", "description": "Uses pre-defined components that look professional.", "icon": "eye", "color": "green", "link": "/"},' || '{"title": "Easy", "description_md": "You can teach yourself enough SQL to use [**SQLPage**](https://sql.ophir.dev) in a weekend.", "icon": "sofa", "color": "blue", "link": "/"}' || ']'
         )
+    ),
+    (
+        'hero',
+        'A hero with a video',
+        json(
+            '[{
+            "component":"hero",
+            "title": "Databases",
+            "reverse": true,
+            "description_md": "# “The goal is to turn data into information, and information into insight.”",
+            "poster": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Lac_de_Zoug.jpg/640px-Lac_de_Zoug.jpg",
+            "video": "/sqlpage_introduction_video.webm"
+        }]')
     );

sqlpage/templates/hero.handlebars

@@ -1,4 +1,4 @@
-<header class="row align-items-center" {{#if id}} id="{{id}}"{{/if}}>
+<header class="row align-items-center{{#if reverse}} flex-row-reverse{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
   <div class="hero-title col text-center">
     <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
     <div class="fs-1 mx-5 text-muted">