Support lazy-loaded content fragments in card component

examples/cards-with-remote-content/README.md

@@ -0,0 +1,10 @@
+# Remote Content Demo
+
+This small SQLPage example shows how to: 
+ - lazy-load other page in cards including:
+     - chart component rendered by sqlpage
+     - map component rendered by sqlpage
+     - table component rendered by sqlpage
+
+![remote content screenshot](screenshot.png)
+

examples/cards-with-remote-content/chart-example.sql

@@ -0,0 +1,30 @@
+select 
+    'chart'             as component,
+    'Quarterly Revenue' as title,
+    'area'              as type,
+    'indigo'            as color,
+    5                   as marker,
+    TRUE                as time;
+select 
+    '2022-01-01T00:00:00Z' as x,
+    15                     as y;
+select 
+    '2022-04-01T00:00:00Z' as x,
+    46                     as y;
+select 
+    '2022-07-01T00:00:00Z' as x,
+    23                     as y;
+select 
+    '2022-10-01T00:00:00Z' as x,
+    70                     as y;
+select 
+    '2023-01-01T00:00:00Z' as x,
+    35                     as y;
+select 
+    '2023-04-01T00:00:00Z' as x,
+    106                    as y;
+select 
+    '2023-07-01T00:00:00Z' as x,
+    53                     as y;
+
+

examples/cards-with-remote-content/index.sql

@@ -0,0 +1,21 @@
+select 
+    'card' as component,
+    2      as columns;
+select 
+    'A card with a Markdown description' as title,
+    'This is a card with a **Markdown** description. 
+
+This is useful if you want to display a lot of text in the card, with many options for formatting, such as 
+ - **bold**, 
+ - *italics*, 
+ - [links](index.sql), 
+ - etc.' as description_md;
+select 
+    'A card with lazy-loaded chart' as title,
+	'/chart-example.sql?_sqlpage_embed' as embed;
+select 
+    'A card with lazy-loaded map' as title,
+	'/map-example.sql?_sqlpage_embed' as embed;
+select 
+    'A card with lazy-loaded table' as title,
+	'/table-example.sql?_sqlpage_embed' as embed;

examples/cards-with-remote-content/map-example.sql

@@ -0,0 +1,9 @@
+select 
+    'map' as component,
+    1     as zoom;
+select 
+    'New Delhi' as title,
+    28.6139     as latitude,
+    77.209      as longitude;
+
+

examples/cards-with-remote-content/table-example.sql

@@ -0,0 +1,13 @@
+select 
+    'table' as component,
+    TRUE    as sort,
+    TRUE    as search;
+select 
+    'Ophir'   as Forename,
+    'Lojkine' as Surname,
+    'lovasoa' as Pseudonym;
+select 
+    'Linus'    as Forename,
+    'Torvalds' as Surname,
+    'torvalds' as Pseudonym;
+

examples/official-site/custom_components.sql

@@ -16,8 +16,8 @@ Each page in SQLPage is composed of a `shell` component,
 which contains the page title and the navigation bar,
 and a series of normal components that display the data.
 
-The `shell` component is always present. If you don''t call it explicitly,
-it will be invoked with the default parameters automatically before your first component
+The `shell` component is always present unless explicitly skipped via the `?_sqlpage_embed` query parameter. 
+If you don''t call it explicitly, it will be invoked with the default parameters automatically before your first component
 invocation that tries to render data on the page.
 
 There can be only one `shell` component per site, but you can customize its appearance as you see fit.
@@ -135,4 +135,4 @@ Some interesting examples are:
     - the `../` syntax to access the parent context,
     - and the `@key` to work with objects whose keys are not known in advance.
 
-' as contents_md;
+' as contents_md;

examples/official-site/examples/chart.sql

@@ -0,0 +1,31 @@
+select 
+    'chart'             as component,
+    'Quarterly Revenue' as title,
+    'area'              as type,
+    'indigo'            as color,
+    5                   as marker,
+    TRUE                as time;
+select 
+    '2022-01-01T00:00:00Z' as x,
+    15                     as y;
+select 
+    '2022-04-01T00:00:00Z' as x,
+    46                     as y;
+select 
+    '2022-07-01T00:00:00Z' as x,
+    23                     as y;
+select 
+    '2022-10-01T00:00:00Z' as x,
+    70                     as y;
+select 
+    '2023-01-01T00:00:00Z' as x,
+    35                     as y;
+select 
+    '2023-04-01T00:00:00Z' as x,
+    106                    as y;
+select 
+    '2023-07-01T00:00:00Z' as x,
+    53                     as y;
+
+
+

examples/official-site/safety.sql

@@ -115,7 +115,8 @@ website, and have it perform an action on your website in the user''s name,
 because the browser will not send the cookies to your website.
 
 SQLPage differentiates between POST variables (accessed with the `:variable` syntax), and 
-variables that can come from URL parameters (accessible with `$variable`).
+variables that can come from URL parameters (accessible with `$variable`). Note that URL parameters
+prefixed with `_sqlpage_` are reserved for internal use.
 
 When a user submits a form, you should use POST variables to access the form data.
 This ensures that you only use data that indeed comes from the form, and not from a
@@ -138,4 +139,4 @@ create a specific user for SQLPage that only has access to the specific tables y
 
 If your entire application is read-only, you can even create a user that only has the `SELECT` privilege on your database,
 
-' as contents_md;
+' as contents_md;

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

@@ -55,53 +55,6 @@ INSERT INTO example(component, description, properties) VALUES
             '{"title":"Google", "link":"https://google.com", "description": "A search engine", "color": "red", "icon":"brand-google", "active": true}, '||
             '{"title":"Wikipedia", "link":"https://wikipedia.org", "description": "An encyclopedia", "color": "blue", "icon":"world"}]'));
 
-INSERT INTO component(name, icon, description) VALUES
-    ('card', 'credit-card', 'A grid where each element is a small card that displays a piece of data.');
-INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'card', * FROM (VALUES
-    -- top level
-    ('title', 'Text header at the top of the list of cards.', 'TEXT', TRUE, TRUE),
-    ('description', 'A short paragraph displayed below the title.', 'TEXT', TRUE, TRUE),
-    ('description_md', 'A short paragraph displayed below the title - formatted using markdown.', 'TEXT', TRUE, TRUE),
-    ('columns', 'The number of columns in the grid of cards. This is just a hint, the grid will adjust dynamically to the user''s screen size, rendering fewer columns if needed to fit the contents.', 'INTEGER', TRUE, TRUE),
-    -- item level
-    ('title', 'Name of the card, displayed at the top.', 'TEXT', FALSE, FALSE),
-    ('description', 'The body of the card, where you put the main text contents of the card.
-        This does not support rich text formatting, only plain text.
-        If you want to use rich text formatting, use the `description_md` property instead.', 'TEXT', FALSE, TRUE),
-    ('description_md', '
-        The body of the card, in Markdown format.
-        This is useful if you want to display a lot of text in the card, with many options for formatting, such as
-        line breaks, **bold**, *italics*, lists, #titles, [links](target.sql), ![images](photo.jpg), etc.', 'TEXT', FALSE, TRUE),
-    ('top_image', 'The URL (absolute or relative) of an image to display at the top of the card.', 'URL', FALSE, TRUE),
-    ('footer', 'Muted text to display at the bottom of the card.', 'TEXT', FALSE, TRUE),
-    ('footer_md', 'Muted text to display at the bottom of the card, with rich text formatting in Markdown format.', 'TEXT', FALSE, TRUE),
-    ('link', 'An URL to which the user should be taken when they click on the card.', 'URL', FALSE, TRUE),
-    ('footer_link', 'An URL to which the user should be taken when they click on the footer.', 'URL', FALSE, TRUE),
-    ('icon', 'Name of an icon to display on the left side of the card.', 'ICON', FALSE, TRUE),
-    ('color', 'The name of a color, to be displayed on the left of the card to highlight it.', 'COLOR', FALSE, TRUE),
-    ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE)
-) x;
-
-INSERT INTO example(component, description, properties) VALUES
-    ('card', 'The most basic card', json('[{"component":"card"},{"description":"A"},{"description":"B"},{"description":"C"}]')),
-    ('card', 'A card with a Markdown description',
-            json('[{"component":"card", "columns": 2}, {"title":"A card with a Markdown description", "description_md": "This is a card with a **Markdown** description. \n\n'||
-            'This is useful if you want to display a lot of text in the card, with many options for formatting, such as '||
-            '\n - **bold**, \n - *italics*, \n - [links](index.sql), \n - etc."}]')),
-    ('card', 'A beautiful card grid with bells and whistles, showing examples of SQLPage features.',
-            json('[{"component":"card", "title":"Popular SQLPage features", "columns": 2},
-            {"title": "Download as spreadsheet", "link": "?component=csv#component", "description": "Using the CSV component, you can download your data as a spreadsheet.", "icon":"file-plus", "color": "green", "footer_md": "SQLPage can both [read](?component=form#component) and [write](?component=csv#component) **CSV** files."},
-            {"title": "Custom components", "link": "/custom_components.sql", "description": "If you know some HTML, you can create your own components for your application.", "icon":"code", "color": "orange", "footer_md": "You can look at the [source of the official components](https://github.com/lovasoa/SQLpage/tree/main/sqlpage/templates) for inspiration."}
-    ]')),
-    ('card', 'A gallery of images.',
-        json('[
-            {"component":"card", "title":"My favorite animals in pictures", "columns": 3},
-            {"title": "Lynx", "description_md": "The **lynx** is a medium-sized **wild cat** native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Lynx_lynx-4.JPG/640px-Lynx_lynx-4.JPG", "icon":"star" },
-            {"title": "Squirrel", "description_md": "The **chipmunk** is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Tamias-rufus-001.jpg/640px-Tamias-rufus-001.jpg" },
-            {"title": "Spider", "description_md": "The **jumping spider family** (_Salticidae_) contains more than 600 described genera and about *6000 described species*, making it the largest family of spiders with about 13% of all species.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Jumping_spiders_%28Salticidae%29.jpg/640px-Jumping_spiders_%28Salticidae%29.jpg" }
-        ]'));
-
-
 INSERT INTO component(name, icon, description) VALUES
     ('datagrid', 'grid-dots', 'Display small pieces of information in a clear and readable way. Each item has a name and is associated with a value.');
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'datagrid', * FROM (VALUES

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -0,0 +1,57 @@
+DELETE FROM component WHERE name = 'card';
+
+INSERT INTO component(name, icon, description) VALUES
+    ('card', 'credit-card', 'A grid where each element is a small card that displays a piece of data.');
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'card', * FROM (VALUES
+    -- top level
+    ('title', 'Text header at the top of the list of cards.', 'TEXT', TRUE, TRUE),
+    ('description', 'A short paragraph displayed below the title.', 'TEXT', TRUE, TRUE),
+    ('description_md', 'A short paragraph displayed below the title - formatted using markdown.', 'TEXT', TRUE, TRUE),
+    ('columns', 'The number of columns in the grid of cards. This is just a hint, the grid will adjust dynamically to the user''s screen size, rendering fewer columns if needed to fit the contents.', 'INTEGER', TRUE, TRUE),
+    -- item level
+    ('title', 'Name of the card, displayed at the top.', 'TEXT', FALSE, FALSE),
+    ('description', 'The body of the card, where you put the main text contents of the card.
+        This does not support rich text formatting, only plain text.
+        If you want to use rich text formatting, use the `description_md` property instead.', 'TEXT', FALSE, TRUE),
+    ('description_md', '
+        The body of the card, in Markdown format.
+        This is useful if you want to display a lot of text in the card, with many options for formatting, such as
+        line breaks, **bold**, *italics*, lists, #titles, [links](target.sql), ![images](photo.jpg), etc.', 'TEXT', FALSE, TRUE),
+    ('top_image', 'The URL (absolute or relative) of an image to display at the top of the card.', 'URL', FALSE, TRUE),
+    ('footer', 'Muted text to display at the bottom of the card.', 'TEXT', FALSE, TRUE),
+    ('footer_md', 'Muted text to display at the bottom of the card, with rich text formatting in Markdown format.', 'TEXT', FALSE, TRUE),
+    ('link', 'An URL to which the user should be taken when they click on the card.', 'URL', FALSE, TRUE),
+    ('footer_link', 'An URL to which the user should be taken when they click on the footer.', 'URL', FALSE, TRUE),
+    ('icon', 'Name of an icon to display on the left side of the card.', 'ICON', FALSE, TRUE),
+    ('color', 'The name of a color, to be displayed on the left of the card to highlight it.', 'COLOR', FALSE, TRUE),
+    ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE),
+    ('embed', 'A url whose contents will be fetched and injected into the body of this card.
+        This can be used to inject arbitrary html content, but is especially useful for injecting
+        the output of other sql files rendered by SQLPage. For the latter case you can pass the
+        `?_sqlpage_embed` query parameter, which will skip the shell layout', 'TEXT', FALSE, TRUE)
+) x;
+
+INSERT INTO example(component, description, properties) VALUES
+    ('card', 'The most basic card', json('[{"component":"card"},{"description":"A"},{"description":"B"},{"description":"C"}]')),
+    ('card', 'A card with a Markdown description',
+            json('[{"component":"card", "columns": 2}, {"title":"A card with a Markdown description", "description_md": "This is a card with a **Markdown** description. \n\n'||
+            'This is useful if you want to display a lot of text in the card, with many options for formatting, such as '||
+            '\n - **bold**, \n - *italics*, \n - [links](index.sql), \n - etc."}]')),
+    ('card', 'A beautiful card grid with bells and whistles, showing examples of SQLPage features.',
+            json('[{"component":"card", "title":"Popular SQLPage features", "columns": 2},
+            {"title": "Download as spreadsheet", "link": "?component=csv#component", "description": "Using the CSV component, you can download your data as a spreadsheet.", "icon":"file-plus", "color": "green", "footer_md": "SQLPage can both [read](?component=form#component) and [write](?component=csv#component) **CSV** files."},
+            {"title": "Custom components", "link": "/custom_components.sql", "description": "If you know some HTML, you can create your own components for your application.", "icon":"code", "color": "orange", "footer_md": "You can look at the [source of the official components](https://github.com/lovasoa/SQLpage/tree/main/sqlpage/templates) for inspiration."}
+    ]')),
+    ('card', 'A gallery of images.',
+        json('[
+            {"component":"card", "title":"My favorite animals in pictures", "columns": 3},
+            {"title": "Lynx", "description_md": "The **lynx** is a medium-sized **wild cat** native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Lynx_lynx-4.JPG/640px-Lynx_lynx-4.JPG", "icon":"star" },
+            {"title": "Squirrel", "description_md": "The **chipmunk** is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Tamias-rufus-001.jpg/640px-Tamias-rufus-001.jpg" },
+            {"title": "Spider", "description_md": "The **jumping spider family** (_Salticidae_) contains more than 600 described genera and about *6000 described species*, making it the largest family of spiders with about 13% of all species.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Jumping_spiders_%28Salticidae%29.jpg/640px-Jumping_spiders_%28Salticidae%29.jpg" }
+        ]')),
+    ('card', 'Cards with remote content',
+        json('[
+            {"component":"card", "title":"Card with embedded remote content", "columns": 2},
+            {"title": "Embedded Chart", "embed": "/examples/chart.sql?_sqlpage_embed" },
+            {"title": "Description", "description_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)" }
+        ]'));

sqlpage/apexcharts.js

@@ -32,7 +32,7 @@ function sqlpage_chart() {
         return new_series;
     }
 
-    for (const c of document.getElementsByClassName("chart")) {
+    for (const c of document.querySelectorAll("[data-pre-init=chart]")) {
         try {
             const data = JSON.parse(c.querySelector("data").innerText);
             const is_timeseries = !!data.time;
@@ -147,6 +147,7 @@ function sqlpage_chart() {
             chart.render();
             if (window.charts) window.charts.push(chart);
             else window.charts = [chart];
+            c.removeAttribute("data-pre-init");
         } catch (e) { console.log(e) }
     }
 }
@@ -186,4 +187,4 @@ function bubbleTooltip({ series, seriesIndex, dataPointIndex, w }) {
     return tooltip.outerHTML;
 }
 
-sqlpage_chart();
+sqlpage_chart();