new article prop

Author: lovasoa

CHANGELOG.md

@@ -32,6 +32,7 @@
 - Fix a bug where the results of the `JSON` function in sqlite would be interpreted as a string instead of a json object.
 - Fix a bug where the `sqlpage.environment_variable` function would return an error if the environment variable was not set. Now it returns `null` instead.
 - Update ApexCharts to [v4.3.0](https://github.com/apexcharts/apexcharts.js/releases/tag/v4.3.0).
+- New `article` property in the text component to display text in a more readable, article-like format.
 
 ## 0.31.0 (2024-11-24)
 

examples/official-site/blog.sql

@@ -4,6 +4,7 @@ where ($post IS NULL AND sqlpage.path() <> '/blog.sql') OR ($post IS NOT NULL AN
 select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1;
 
 SELECT 'text' AS component,
+        true as article,
         content AS contents_md
 FROM blog_posts
 WHERE title = $post;

examples/official-site/component.sql

@@ -18,7 +18,7 @@ select 'SQLPage' as title, '/' as link, 'Home page' as description;
 select 'Components' as title, '/documentation.sql' as link, 'List of all components' as description;
 select $component as title, '/component.sql?component=' || sqlpage.url_encode($component) as link;
 
-select 'text' as component, 'component' as id,
+select 'text' as component, 'component' as id, true as article,
     format('# The **%s** component
 
 %s', $component, description) as contents_md

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

@@ -141,6 +141,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('html', 'Raw html code to include on the page. Don''t use that if you are not sure what you are doing, it may have security implications.', 'TEXT', TRUE, TRUE),
     ('contents', 'A top-level paragraph of text to display, without any formatting, without having to make additional queries.', 'TEXT', TRUE, TRUE),
     ('contents_md', 'Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).', 'TEXT', TRUE, TRUE),
+    ('article', 'Makes long texts more readable by increasing the line height, adding margins, using a serif font, and decorating the initial letter.', 'BOOLEAN', TRUE, TRUE),
     -- item level
     ('contents', 'A span of text to display', 'TEXT', FALSE, FALSE),
     ('contents_md', 'Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).', 'TEXT', FALSE, TRUE),
@@ -156,7 +157,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 
 INSERT INTO example(component, description, properties) VALUES
     ('text', 'Rendering a simple text paragraph.', json('[{"component":"text", "contents":"Hello, world ! <3"}]')),
-    ('text', 'Rendering rich text using markdown', json('[{"component":"text", "contents_md":"\n'||
+    ('text', 'Rendering rich text using markdown', json('[{"component":"text", "article": true, "contents_md":"\n'||
     '# Markdown in SQLPage\n\n' ||
     '## Simple formatting\n\n' ||
     'SQLPage supports only plain text as column values, but markdown allows easily adding **bold**, *italics*, [external links](https://github.com/sqlpage/SQLPage), [links to other pages](/index.sql) and [intra-page links](#my-paragraph). \n\n' ||

sqlpage/sqlpage.css

@@ -87,3 +87,17 @@ code {
   background: var(--tblr-bg-surface-secondary);
   box-shadow: 3px 0 3px var(--tblr-border-color);
 }
+
+.article-text {
+  font-size: 1.2em;
+  line-height: 1.5em;
+  font-family: 'Times New Roman', serif;
+  max-width: 65ch;
+  margin: 1.5em auto;
+}
+
+.article-text p::first-letter {
+  font-size: 1.2em;
+  font-weight: 500;
+}
+

sqlpage/templates/text.handlebars

@@ -7,9 +7,11 @@
     {{/if}}
 {{~/if~}}
 {{~#if contents_md~}}
-    <div class="remove-bottom-margin">{{{markdown contents_md}}}</div>
+    <div class="remove-bottom-margin {{#if center}}mx-auto{{/if}} {{#if article}}markdown article-text{{/if}}">
+        {{{~markdown contents_md~}}}
+    </div>
 {{~/if~}}
-<p class="{{#if center}}mx-auto{{/if}}">
+<p class="{{#if center}}mx-auto{{/if}} {{#if article}}markdown article-text{{/if}}">
     {{contents}}
     {{~#each_row~}}
         {{~#if break~}}</p><p>{{~/if~}}