add an example illustrating how to write mathematical equations in a sqlpage app

This commit is contained in:
lovasoa
2024-07-31 22:46:29 +02:00
parent 00482088c9
commit 1a0fa023e2
3 changed files with 33 additions and 1 deletions
@@ -11,6 +11,8 @@ It integrates a simple [react](https://reactjs.org/) component and loads it with
![example client-side reactive SQLPage application with React](screenshot-react.png)
## Notes
This example relies on a CDN to load the react library, and the example component is written in plain Javscript, not JSX.
@@ -0,0 +1,29 @@
select 'shell' as component,
'Equations' as title,
'style.css' as css,
'settings' as icon,
'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' as javascript;
select 'text' as component, '
Newton''s laws of motion are three physical laws that describe the relationship between the forces \( \overrightarrow{F} \) acting on a body,
the resulting motion \( \overrightarrow{a} \) of the body, and the body''s mass \( m \).
' as contents;
select
'card' as component,
3 as columns;
select
'Inertia' as title,
'The natural behavior of a body is to move in a straight line at constant speed \( \overrightarrow{v} \) unless acted upon by a force \( \overrightarrow{F} \).' as description,
TRUE as active,
'arrow-right' as icon;
select
'Force' as title,
'The force \( \overrightarrow{F} \) acting on a body is equal to the mass \( m \) of the body multiplied by the acceleration
\( \overrightarrow{a} = \frac{\mathrm{d}}{\mathrm{d} t} \overrightarrow{v} \) of the body.' as description,
'rocket' as icon,
'red' as color;
select
'Action and reaction' as title,
'For every action, there is an equal and opposite reaction. If body A exerts a force \( \overrightarrow{F_{\text{A on B}}} \) on body B, then body B exerts a force \( \overrightarrow{F_{\text{B on A}}} \) on body A.' as description,
'arrows-exchange' as icon,
'orange' as color;
@@ -1,7 +1,8 @@
SELECT 'shell' AS component,
'SQLPage with a frontend component' as title,
'style.css' as css,
'settings' as icon;
'settings' as icon,
'equations' as menu_item;
SELECT 'button' AS component, 'center' as justify;
SELECT 'Try my react component !' AS title, 'react.sql' AS link, 'funky_text' AS id;