Fix problematic intra-page links wirh the text component

see #203

Author: lovasoa

CHANGELOG.md

@@ -11,6 +11,7 @@
  - Updated default graph colors so that all series are easily distinguishable even when a large number of series are displayed.
  - New `embed` attribute in the `card` component that lets you build multi-column layouts of various components with cards.
   - ![](./examples/cards-with-remote-content/screenshot.png)
+  - Added `id` and `class` attributes to all components, to make it easier to style them with custom CSS and to reference them in intra-page links and custom javascript code.
 
 ## 0.17.1 (2023-12-10)
 

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

@@ -146,7 +146,7 @@ INSERT INTO example(component, description, properties) VALUES
     ('text', 'Rendering rich text using markdown', json('[{"component":"text", "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*, and [links](index.sql).\n\n' ||
+    'SQLPage supports only plain text as column values, but markdown allows easily adding **bold**, *italics*, [external links](https://github.com/lovasoa/sqlpage), [links to other pages](/index.sql) and [intra-page links](#my-paragraph). \n\n' ||
     '## Lists\n' ||
     '### Unordered lists\n' ||
     '* SQLPage is easy\n' ||
@@ -182,7 +182,16 @@ INSERT INTO example(component, description, properties) VALUES
             '{"contents":" is a domain-specific language used in programming and designed for managing data held in a "},'||
             '{"contents": "relational database management system", "link": "https://en.wikipedia.org/wiki/Relational_database"},'||
             '{"contents": ". It is particularly useful in handling structured data."}]')
-);
+    ),
+    (
+        'text',
+        'An intra-page link to a section of the page.',
+        json('[
+            {"component":"text", "contents_md":"This is a link to the [next paragraph](#my-paragraph). You can open this link in a new tab and the page will scroll to the paragraph on load."},
+            {"component":"text", "id": "my-paragraph", "contents_md": "This **is** the next paragraph."}
+        ]')
+    )
+;
 
 INSERT INTO component(name, icon, description) VALUES
     ('form', 'cursor-text', 'A series of input fields that can be filled in by the user. ' ||

sqlpage/templates/text.handlebars

@@ -1,11 +1,15 @@
 {{{~html~}}}
 {{#if title}}
     <h1 id="{{id}}" class="mt-3 {{#if center}}text-center{{/if}}">{{title}}</h1>
+{{else}}
+    {{#if id}}
+        <a id="{{id}}"></a>
+    {{/if}}
 {{/if}}
 {{#if contents_md}}
-    {{{markdown contents_md}}}
+    <div class="remove-bottom-margin">{{{markdown contents_md}}}</div>
 {{/if}}
-<p class="{{#if center}}mx-auto{{/if}}" {{#if (not title)}}id="{{id}}"{{/if}}>
+<p class="{{#if center}}mx-auto{{/if}}">
     {{contents}}
     {{~#each_row~}}
         {{~#if break~}}</p><p>{{~/if~}}