Enhance empty_state component documentation and template to support rich text formatting. Update docs with detailed descriptions and examples, and modify Handlebars template to conditionally render Markdown content.

Author: lovasoa

examples/official-site/sqlpage/migrations/60_empty_state.sql

@@ -1,5 +1,9 @@
 INSERT INTO component(name, icon, description, introduced_in_version) VALUES
-    ('empty_state', 'info-circle', 'Empty states are placeholders for first-use, empty data, or error screens', '0.35.0');
+    ('empty_state', 'info-circle', 'Displays a large placeholder message to communicate a single information to the user and invite them to take action.
+
+Typically includes a title, an optional icon/image, descriptive text (rich text formatting and images supported via Markdown), and a call-to-action button.
+
+Ideal for first-use screens, empty data sets, "no results" pages, or error messages.', '0.35.0');
 
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'empty_state', * FROM (VALUES
     ('title','Description of the empty state.','TEXT',TRUE,FALSE),
@@ -14,7 +18,10 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 
 INSERT INTO example(component, description, properties) VALUES
     ('empty_state', '
-The empty_state component provides users with informative and visually appealing placeholders when there is no content to display in a particular section of an application or website. Its role is to enhance user experience by guiding users on what to do next, offering suggestions, or providing context about the absence of data. This component includes a title, a description, an action button and often an illustration or icon.  The empty_state component helps to reduce confusion and encourages users to take action.
+This example shows how to create a 404-style "Not Found" empty state with 
+ - a prominent header displaying "404",
+ - a helpful description suggesting to adjust search parameters, and
+ - a "Search again" button with a search icon that links back to the search page.
 ',
     json('[{
         "component": "empty_state",
@@ -32,7 +39,9 @@ It''s possible to use an icon or an image to illustrate the problem.
         "component": "empty_state",
         "title": "A critical problem has occurred",
         "icon": "mood-wrrr",
-        "description": "Thank you for restarting your browser and crossing your fingers.",
+        "description_md": "SQLPage can do a lot of things, but this is not one of them.
+
+Please restart your browser and **cross your fingers**.",
         "link_text": "Close and restart",
         "link_icon": "rotate-clockwise",
         "link": "#"

sqlpage/templates/empty_state.handlebars

@@ -13,9 +13,13 @@
     {{/if}}
   {{/if}}
   <p class="empty-title">{{title}}</p>
-  <p class="empty-subtitle text-secondary">
-      {{description}}
-  </p>
+  <div class="empty-subtitle text-secondary remove-bottom-margin">
+    {{~#if description}}<p>{{description}}</p>{{/if~}}
+    {{~#if description_md~}}
+      {{{markdown description_md}}}
+    {{~/if~}}
+  </div>
+
   <div class="empty-action">
     <a href="{{link}}" class="btn btn-primary">
       <span class="me-1">{{icon_img link_icon}}</span>