chore: import upstream snapshot with attribution

examples/using react and other custom scripts and styles/README.md

@@ -0,0 +1,23 @@
+# Custom javascript and CSS
+
+This example shows how to use custom javascript and CSS in your application.
+It is compatible with SQLPage v0.7.3 and above.
+
+It integrates a simple [react](https://reactjs.org/) component and loads it with properties coming from a SQL query.
+
+## Screenshots
+
+![example SQLPage application with a custom style](screenshot-css.png)
+
+![example client-side reactive SQLPage application with React](screenshot-react.png)
+
+![example physics equations](screenshot-latex-math-equations.png)
+
+
+## Notes
+
+This example relies on a CDN to load the react library, and the example component is written in plain Javscript, not JSX.
+
+You can also use include a local copy of react, and write your components in JSX/TSX,
+you will simply need to add a build step to your application to compile the JSX/TSX files into plain JS,
+and then include that build result in your application.

examples/using react and other custom scripts and styles/api.sql

@@ -0,0 +1,7 @@
+-- Adds a new entry in the clicks table
+INSERT INTO clicks(click_time) VALUES (datetime('now'));
+
+SELECT 'json' AS component,
+        JSON_OBJECT(
+            'total_clicks', (SELECT count(*) FROM clicks)
+        ) AS contents;

examples/using react and other custom scripts and styles/docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  web:
+    image: lovasoa/sqlpage:main
+    ports:
+      - "8080:8080"
+    volumes:
+      - .:/var/www
+      - ./sqlpage:/etc/sqlpage

examples/using react and other custom scripts and styles/equations.sql

@@ -0,0 +1,32 @@
+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 acceleration \( \overrightarrow{a} \) of a body is directly proportional to the net force \( \overrightarrow{F_{\text{net}}} \) acting on the it, and inversely proportional to its mass \( m \):
+\( \overrightarrow{F_{\text{net}}} = m \overrightarrow{a} \), or
+\( \sum \overrightarrow F  = m \frac{\mathrm d \overrightarrow v }{\mathrm d t} \).' 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}}} = -\overrightarrow{F_{\text{A on B}}} \) on body A.' as description,
+    'arrows-exchange' as icon,
+    'orange'         as color;

examples/using react and other custom scripts and styles/index.sql

@@ -0,0 +1,8 @@
+SELECT 'shell' AS component,
+    'SQLPage with a frontend component' as title,
+    'style.css' as css,
+    '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;

examples/using react and other custom scripts and styles/my_react_component.js

@@ -0,0 +1,29 @@
+// Here we are using React and ReactDOM directly, but this file could be a compiled
+// version of a React component written in JSX.
+
+function _MyComponent({ greeting_name }) {
+  const [count, setCount] = React.useState(0);
+  return React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: async () => {
+        const r = await fetch("/api.sql");
+        const { total_clicks } = await r.json();
+        setCount(total_clicks);
+      },
+      className: "btn btn-primary",
+    },
+    count === 0
+      ? `Hello, ${greeting_name}. Click me !`
+      : `You clicked me ${count} times!`,
+  );
+}
+
+for (const container of document.getElementsByClassName("react_component")) {
+  const root = ReactDOM.createRoot(container);
+  const props = JSON.parse(container.dataset.props);
+  root.render(
+    React.createElement(window[props.react_component_name], props, null),
+  );
+}

examples/using react and other custom scripts and styles/react.sql

@@ -0,0 +1,13 @@
+SELECT 'shell' AS component,
+    'SQLPage with a frontend component' AS title,
+    'settings' AS icon,
+
+    -- Including react from a CDN like that is quick and easy, but if your project grows larger,
+    -- you might want to use a bundler like webpack, and include your javascript file here instead
+    'https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js' AS javascript,
+    'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js' AS javascript,
+    'my_react_component.js' AS javascript;
+
+SELECT 'react_component' AS component,
+        'MyComponent' AS react_component_name,
+        'World' AS greeting_name;

examples/using react and other custom scripts and styles/sqlpage/migrations/0001_clicks.sql

@@ -0,0 +1,3 @@
+CREATE TABLE clicks(
+    click_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars

@@ -0,0 +1,3 @@
+<div class="react_component" data-props="{{stringify this}}">
+  Dynamic component is loading...
+</div>

examples/using react and other custom scripts and styles/style.css

@@ -0,0 +1,40 @@
+#funky_text {
+  font-family: Arial, sans-serif;
+  font-size: 36px;
+  color: white;
+  background: linear-gradient(45deg, #ff4e00, #ec9f05);
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: transform 0.3s ease-in-out;
+}
+
+#funky_text:hover {
+  transform: scale(1.1);
+  background: linear-gradient(45deg, #e5004d, #7a0180);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+@keyframes neon-glow {
+  0%,
+  100% {
+    text-shadow:
+      0 0 10px #fa2dd1,
+      0 0 20px #b30890,
+      2px 3px 30px #ff00cc;
+  }
+  50% {
+    text-shadow:
+      0 0 1px #e48fd3,
+      0 0 2px #ca28aa,
+      0 0 8px #ff00cc;
+  }
+}
+
+#funky_text:hover {
+  animation: neon-glow 0.5s ease-in-out infinite;
+}
+
+#funky_text * {
+  color: inherit;
+}

examples/using react and other custom scripts and styles/test.hurl

@@ -0,0 +1,27 @@
+GET http://localhost:8080/
+HTTP 200
+[Asserts]
+body contains "SQLPage with a frontend component"
+body contains "Try my react component !"
+body contains "style.css"
+body contains "funky_text"
+
+GET http://localhost:8080/style.css
+HTTP 200
+[Asserts]
+body contains "#funky_text"
+body contains "neon-glow"
+
+GET http://localhost:8080/react.sql
+HTTP 200
+[Asserts]
+body contains "my_react_component.js"
+body contains "react_component"
+body contains "Dynamic component is loading..."
+body contains "World"
+
+GET http://localhost:8080/my_react_component.js
+HTTP 200
+[Asserts]
+body contains "fetch(\"/api.sql\")"
+body contains "ReactDOM.createRoot"