From 1a0fa023e2fc32c59bac66d4aaee219a5045033a Mon Sep 17 00:00:00 2001
From: lovasoa <contact@ophir.dev>
Date: Wed, 31 Jul 2024 22:46:29 +0200
Subject: [PATCH] add an example illustrating how to write mathematical
 equations in a sqlpage app

---
 .../README.md                                 |  2 ++
 .../equations.sql                             | 29 +++++++++++++++++++
 .../index.sql                                 |  3 +-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 examples/using react and other custom scripts and styles/equations.sql

diff --git a/examples/using react and other custom scripts and styles/README.md b/examples/using react and other custom scripts and styles/README.md
index cdc6fe39..8e9f5c8d 100644
--- a/examples/using react and other custom scripts and styles/README.md	
+++ b/examples/using react and other custom scripts and styles/README.md	
@@ -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.
diff --git a/examples/using react and other custom scripts and styles/equations.sql b/examples/using react and other custom scripts and styles/equations.sql
new file mode 100644
index 00000000..c6606b1d
--- /dev/null
+++ b/examples/using react and other custom scripts and styles/equations.sql	
@@ -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;
\ No newline at end of file
diff --git a/examples/using react and other custom scripts and styles/index.sql b/examples/using react and other custom scripts and styles/index.sql
index a1d7c182..c7159f51 100644
--- a/examples/using react and other custom scripts and styles/index.sql	
+++ b/examples/using react and other custom scripts and styles/index.sql	
@@ -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;