My page
\n\n"}]')); diff --git a/examples/official-site/sqlpage/migrations/07_authentication.sql b/examples/official-site/sqlpage/migrations/07_authentication.sql index fd342fc6..c759dee8 100644 --- a/examples/official-site/sqlpage/migrations/07_authentication.sql +++ b/examples/official-site/sqlpage/migrations/07_authentication.sql @@ -14,7 +14,7 @@ you have two main options: - does not require any external service - gives you fine-grained control over - which pages and actions are protected - - the look of the login form + - the look of the [login form](?component=login) - the duration of the session - the permissions of each user 2. [**Single sign-on**](/sso) @@ -128,12 +128,10 @@ Then, in all the pages that require authentication, you check if the cookie is p You can check if the user has sent the correct password in a form, and if not, redirect them to a login page. -Create a login form in a file called `login.sql`: +Create a login form in a file called `login.sql` that uses the [login component](?component=login): ```sql -select ''form'' as component, ''Authentication'' as title, ''Log in'' as validate, ''create_session_token.sql'' as action; -select ''Username'' as name, ''admin'' as placeholder; -select ''Password'' as name, ''admin'' as placeholder, ''password'' as type; +select ''login'' as component; ``` And then, in `create_session_token.sql` : diff --git a/examples/official-site/sqlpage/migrations/08_functions.sql b/examples/official-site/sqlpage/migrations/08_functions.sql index 18981b9f..2f5ca8a7 100644 --- a/examples/official-site/sqlpage/migrations/08_functions.sql +++ b/examples/official-site/sqlpage/migrations/08_functions.sql @@ -157,8 +157,11 @@ VALUES ( '0.7.2', 'spy', ' -Hashes a password using the [Argon2](https://en.wikipedia.org/wiki/Argon2) algorithm. -The resulting hash can be stored in the database and then used with the [authentication component](documentation.sql?component=authentication#component). +Hashes a password with the Argon2id variant and outputs it in the [PHC string format](https://github.com/P-H-C/phc-string-format/blob/master/phc-sf-spec.md), ready to store in your users table. + +Every call generates a brand new cryptographic salt so that two people choosing the same password still end up with different hashes, which defeats rainbow-table attacks and lets you safely reveal only the hash. + +Use this function only when creating or resetting a password (for example while inserting a brand new user): it writes the stored value. Later, at login time, the [authentication component](documentation.sql?component=authentication#component) reads the stored hash, hashes the visitor''s password with the embedded salt and parameters, and grants access only if they match. ### Example diff --git a/examples/official-site/sqlpage/migrations/11_json.sql b/examples/official-site/sqlpage/migrations/11_json.sql index 65c3a8a1..8384ab58 100644 --- a/examples/official-site/sqlpage/migrations/11_json.sql +++ b/examples/official-site/sqlpage/migrations/11_json.sql @@ -18,6 +18,10 @@ This component **must appear at the top of your SQL file**, before any other dat An HTTP response can have only a single datatype, and it must be declared in the headers. So if you have already called the `shell` component, or another traditional HTML component, you cannot use this component in the same file. + +SQLPage can also return JSON or JSON Lines when the incoming request says it prefers them with an HTTP `Accept` header, so the same `/users.sql` page can show a table in a browser but return raw data to `curl -H "Accept: application/json" http://localhost:8080/users.sql`. + +Use this component when you want to control the payload or force JSON output even for requests that would normally get HTML. ', 'code', '0.9.0' @@ -84,6 +88,12 @@ select * from users; {"username":"James","userid":1}, {"username":"John","userid":2} ] +``` + +Clients can also receive JSON or JSON Lines automatically by requesting the same SQL file with an HTTP `Accept` header such as `application/json` or `application/x-ndjson` when the component is omitted, for example: + +``` +curl -H "Accept: application/json" http://localhost:8080/users.sql ``` ' ), diff --git a/examples/official-site/sqlpage/migrations/20_variables_function.sql b/examples/official-site/sqlpage/migrations/20_variables_function.sql index 69fe1f51..79228569 100644 --- a/examples/official-site/sqlpage/migrations/20_variables_function.sql +++ b/examples/official-site/sqlpage/migrations/20_variables_function.sql @@ -9,9 +9,28 @@ VALUES ( 'variables', '0.15.0', 'variable', - 'Returns a JSON string containing all variables passed as URL parameters or posted through a form. + 'Returns a JSON string containing variables from the HTTP request and user-defined variables. -The database''s json handling functions can then be used to process the data. +The [database''s json handling functions](/blog?post=JSON+in+SQL%3A+A+Comprehensive+Guide) can then be used to process the data. + +## Variable Types + +SQLPage distinguishes between three types of variables: + +- **GET variables**: URL parameters from the [query string](https://en.wikipedia.org/wiki/Query_string) (immutable) +- **POST variables**: Values from form fields [submitted](https://en.wikipedia.org/wiki/POST_(HTTP)#Use_for_submitting_web_forms) by the user (immutable) +- **SET variables**: User-defined variables created with the `SET` command (mutable) + +For more information about SQLPage variables, see the [*SQL in SQLPage* guide](/extensions-to-sql). + +## Usage + +- `sqlpage.variables()` - returns all variables (GET, POST, and SET combined). When multiple variables of the same name are present, the order of precedence is: set > post > get. +- `sqlpage.variables(''get'')` - returns only URL parameters +- `sqlpage.variables(''post'')` - returns only POST form data +- `sqlpage.variables(''set'')` - returns only user-defined variables created with `SET` + +When a SET variable has the same name as a GET or POST variable, the SET variable takes precedence in the combined result. ## Example: a form with a variable number of fields @@ -59,7 +78,7 @@ FROM OPENJSON(sqlpage.variables(''post'')); #### In MySQL -MySQL has [`JSON_TABLE`](https://dev.mysql.com/doc/refman/8.0/en/json-table-functions.html), +MySQL has [`JSON_TABLE`](https://dev.mysql.com/doc/refman/8.0/en/json-table-functions.html), and [`JSON_KEYS`](https://dev.mysql.com/doc/refman/8.0/en/json-search-functions.html#function_json-keys) which are a little bit less straightforward to use: @@ -95,6 +114,6 @@ VALUES ( 'variables', 1, 'method', - 'Optional. The HTTP request method (GET or POST). Must be a literal string. When not provided, all variables are returned.', + 'Optional. Filter variables by source: ''get'' (URL parameters), ''post'' (form data), or ''set'' (user-defined variables). When not provided, all variables are returned with SET variables taking precedence over request parameters.', 'TEXT' ); diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql index b7fc395e..6736ccff 100644 --- a/examples/official-site/sqlpage/migrations/34_carousel.sql +++ b/examples/official-site/sqlpage/migrations/34_carousel.sql @@ -78,6 +78,14 @@ VALUES TRUE, TRUE ), + ( + 'carousel', + 'delay', + 'Specify the delay, in milliseconds, between two images.', + 'INTEGER', + TRUE, + TRUE + ), ( 'carousel', 'image', diff --git a/examples/official-site/sqlpage/migrations/40_fetch.sql b/examples/official-site/sqlpage/migrations/40_fetch.sql index 5a3d7b18..f93d6f50 100644 --- a/examples/official-site/sqlpage/migrations/40_fetch.sql +++ b/examples/official-site/sqlpage/migrations/40_fetch.sql @@ -36,7 +36,7 @@ In this example, we use the complex form of the function to make an authenticated POST request, with custom request headers and a custom request body. We use SQLite''s json functions to build the request body. -See [the list of SQL databases and their JSON functions](/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide) for +See [the list of SQL databases and their JSON functions](/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide) for more information on how to build JSON objects in your database. ```sql @@ -94,7 +94,22 @@ The fetch function accepts either a URL string, or a JSON object with the follow If the request fails, this function throws an error, that will be displayed to the user. The response headers are not available for inspection. -If you need to handle errors or inspect the response headers, use [`sqlpage.fetch_with_meta`](?function=fetch_with_meta). +## Conditional data fetching + +Since v0.40, `sqlpage.fetch(null)` returns null instead of throwing an error. +This makes it easier to conditionnally query an API: + +```sql +set current_field_value = (select field from my_table where id = 1); +set target_url = nullif(''http://example.com/api/field/1'', null); -- null if the field is currently null in the db +set api_value = sqlpage.fetch($target_url); -- no http request made if the field is not null in the db +update my_table set field = $api_value where id = 1 and $api_value is not null; -- update the field only if it was not present before +``` + +## Advanced usage + +If you need to handle errors or inspect the response headers or the status code, +use [`sqlpage.fetch_with_meta`](?function=fetch_with_meta). ' ); INSERT INTO sqlpage_function_parameters ( diff --git a/examples/official-site/sqlpage/migrations/47_link.sql b/examples/official-site/sqlpage/migrations/47_link.sql index 0405a53a..267a728d 100644 --- a/examples/official-site/sqlpage/migrations/47_link.sql +++ b/examples/official-site/sqlpage/migrations/47_link.sql @@ -22,20 +22,22 @@ In `index.sql`, you can use the `link` function to generate the URL of the produ select ''list'' as component; select name as title, - sqlpage.link(''product'', json_object(''product_name'', name)) as link; + sqlpage.link(''product'', json_object(''product_name'', name)) as link +from products; ``` -Using `sqlpage.link` is better than manually constructing the URL with `CONCAT(''product?product_name='', name)`, -because it ensures that the URL is properly encoded. -The former works when the product name contains special characters like `&`, while the latter would break the URL. - In `product.sql`, you can then use `$product_name` to get the name of the product from the URL parameter: ```sql -select ''text'' as component; -select CONCAT(''Product: '', $product_name) as contents; +select ''hero'' as component, $product_name as title, product_info as description +from products +where name = $product_name; ``` +> You could also have manually constructed the URL with `CONCAT(''product?product_name='', name)`, +> but using `sqlpage.link` is better because it ensures that the URL is properly encoded. +> `sqlpage.link` will work even if the product name contains special characters like `&`, while `CONCAT(...)` would break the URL. + ### Parameters - `file` (TEXT): The name of the SQLPage file to link to. - `parameters` (JSON): The parameters to pass to the linked file. @@ -72,4 +74,4 @@ VALUES 'fragment', 'An optional fragment (hash) to append to the URL to link to a specific section of the target page.', 'TEXT' - ); \ No newline at end of file + ); diff --git a/examples/official-site/sqlpage/migrations/61_oidc_functions.sql b/examples/official-site/sqlpage/migrations/61_oidc_functions.sql index eda1c2cc..71d1d849 100644 --- a/examples/official-site/sqlpage/migrations/61_oidc_functions.sql +++ b/examples/official-site/sqlpage/migrations/61_oidc_functions.sql @@ -169,4 +169,126 @@ VALUES 'claim', 'The name of the user information to retrieve. Common values include ''name'', ''email'', ''picture'', ''sub'', ''preferred_username'', ''given_name'', and ''family_name''. The exact values available depend on your OIDC provider and configuration.', 'TEXT' + ); + +INSERT INTO + sqlpage_functions ( + "name", + "introduced_in_version", + "icon", + "description_md" + ) +VALUES + ( + 'oidc_logout_url', + '0.41.0', + 'logout', + '# Secure OIDC Logout + +The `sqlpage.oidc_logout_url` function generates a secure logout URL for users authenticated via [OIDC Single Sign-On](/sso). + +When a user visits this URL, SQLPage will: +1. Remove the authentication cookie +2. Redirect the user to the OIDC provider''s logout endpoint (if available) +3. Finally redirect back to the specified `redirect_uri` + +## Security Features + +This function provides protection against **Cross-Site Request Forgery (CSRF)** attacks: +- The generated URL contains a cryptographically signed token +- The token includes a timestamp and expires after 10 minutes +- The token is signed using your OIDC client secret +- Only relative URLs (starting with `/`) are allowed as redirect targets + +This means that malicious websites cannot trick your users into logging out by simply including an image or link to your logout URL. + +## How to Use + +```sql +select ''button'' as component; +select + ''Logout'' as title, + sqlpage.oidc_logout_url(''/'') as link, + ''logout'' as icon, + ''red'' as outline; +``` + +This creates a logout button that, when clicked: +1. Logs the user out of your SQLPage application +2. Logs the user out of the OIDC provider (if the provider supports [RP-Initiated Logout](https://openid.net/specs/openid-connect-rpinitiated-1_0.html)) +3. Redirects the user back to your homepage (`/`) + +## Examples + +### Logout Button in Navigation + +```sql +select ''shell'' as component, + ''My App'' as title, + json_array( + json_object( + ''title'', ''Logout'', + ''link'', sqlpage.oidc_logout_url(''/''), + ''icon'', ''logout'' + ) + ) as menu_item; +``` + +### Logout with Return to Current Page + +```sql +select ''button'' as component; +select + ''Sign Out'' as title, + sqlpage.oidc_logout_url(sqlpage.path()) as link; +``` + +### Conditional Logout Link + +```sql +select ''button'' as component +where sqlpage.user_info(''sub'') is not null; +select + ''Logout '' || sqlpage.user_info(''name'') as title, + sqlpage.oidc_logout_url(''/'') as link +where sqlpage.user_info(''sub'') is not null; +``` + +## Requirements + +- OIDC must be [configured](/sso) in your `sqlpage.json` +- If OIDC is not configured, this function returns NULL +- The `redirect_uri` must be a relative path starting with `/` + +## Provider Support + +The logout behavior depends on your OIDC provider: + +| Provider | Full Logout Support | +|----------|-------------------| +| Keycloak | ✅ Yes | +| Auth0 | ✅ Yes | +| Google | ❌ No (local logout only) | +| Azure AD | ✅ Yes | +| Okta | ✅ Yes | + +When the provider doesn''t support RP-Initiated Logout, SQLPage will still remove the local authentication cookie and redirect to your specified URI. +' + ); + +INSERT INTO + sqlpage_function_parameters ( + "function", + "index", + "name", + "description_md", + "type" + ) +VALUES + ( + 'oidc_logout_url', + 1, + 'redirect_uri', + 'The relative URL path where the user should be redirected after logout. Must start with `/`. Defaults to `/` if not provided.', + 'TEXT' ); \ No newline at end of file diff --git a/examples/official-site/sqlpage/migrations/66_log_component.sql b/examples/official-site/sqlpage/migrations/66_log_component.sql new file mode 100644 index 00000000..65c0e7e6 --- /dev/null +++ b/examples/official-site/sqlpage/migrations/66_log_component.sql @@ -0,0 +1,61 @@ +INSERT INTO component(name, icon, introduced_in_version, description) VALUES +('log', 'logs', '0.37.1', 'A component that writes messages to the server logs. +When a page runs, it prints your message to the terminal/console (standard error). +Use it to track what happens and troubleshoot issues. + +### Where do the messages appear? + +- Running from a terminal (Linux, macOS, or Windows PowerShell/Command Prompt): they show up in the window. +- Docker: run `docker logs
+ {{#each_row}}
+
diff --git a/examples/official-site/sqlpage/templates/shell-home.handlebars b/examples/official-site/sqlpage/templates/shell-home.handlebars
index f5839f09..b4203fa4 100644
--- a/examples/official-site/sqlpage/templates/shell-home.handlebars
+++ b/examples/official-site/sqlpage/templates/shell-home.handlebars
@@ -495,7 +495,7 @@
font-weight: 500;
background: var(--gradient-primary);
color: rgba(255, 255, 255, 0.95);
- text-decoration: none;
+ text-decoration: none !important;
border-radius: 12px;
transition: all var(--transition-slow);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -803,6 +803,343 @@
}
}
+ .compat-section {
+ position: relative;
+ background: radial-gradient(circle at 20% 20%, rgba(88, 125, 255, 0.18), transparent 50%), radial-gradient(circle at 80% 10%, rgba(255, 130, 255, 0.18), transparent 55%), linear-gradient(160deg, rgba(10, 19, 44, 0.95), rgba(7, 12, 26, 0.92));
+ overflow: hidden;
+ isolation: isolate;
+ }
+
+ .compat-section::before,
+ .compat-section::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ }
+
+ .compat-section::before {
+ background-image: radial-gradient(2px 2px at 25px 35px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1.5px 1.5px at 220px 140px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(2px 2px at 320px 60px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 420px 180px, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1.5px 1.5px at 520px 90px, rgba(255, 255, 255, 0.5), transparent);
+ background-size: 240px 220px;
+ opacity: 0.45;
+ animation: twinkle 14s linear infinite;
+ }
+
+ .compat-section::after {
+ background: radial-gradient(450px 450px at 80% 110%, rgba(63, 104, 255, 0.35), transparent 70%);
+ }
+
+ .compat-layout {
+ display: grid;
+ grid-template-columns: minmax(400px, 1fr) minmax(450px, 1.2fr);
+ gap: var(--gap-lg);
+ padding-top: calc(var(--container-padding) * 1.5);
+ padding-bottom: calc(var(--container-padding) * 1.5);
+ position: relative;
+ z-index: 1;
+ }
+
+ .compat-intro {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+
+ .compat-eyebrow {
+ font-size: 0.85rem;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ color: rgba(173, 188, 255, 0.75);
+ }
+
+ .compat-intro h2 {
+ font-size: 3.2rem;
+ line-height: 1.1;
+ color: rgba(229, 237, 255, 0.94);
+ }
+
+ .compat-intro p {
+ font-size: 1.15rem;
+ color: rgba(209, 219, 255, 0.78);
+ max-width: 90%;
+ }
+
+ .compat-highlights {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ }
+
+ .compat-pill {
+ padding: 0.45rem 0.9rem;
+ border-radius: 999px;
+ background: rgba(99, 118, 255, 0.12);
+ border: 1px solid rgba(143, 162, 255, 0.25);
+ color: rgba(207, 221, 255, 0.78);
+ font-size: 0.85rem;
+ backdrop-filter: blur(6px);
+ }
+
+ .compat-showcase {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ width: 100%;
+ min-width: 0;
+ }
+
+ .compat-orbit {
+ position: relative;
+ width: 320px;
+ height: 320px;
+ margin: 0 auto;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(64, 84, 182, 0.35), rgba(19, 27, 51, 0.4));
+ box-shadow: inset 0 0 40px rgba(127, 162, 255, 0.2), 0 20px 60px rgba(6, 12, 32, 0.7);
+ }
+
+ .compat-orbit::before {
+ content: "";
+ position: absolute;
+ inset: 14px;
+ border-radius: 50%;
+ border: 1px dashed rgba(162, 186, 255, 0.4);
+ animation: orbitSpin 26s linear infinite;
+ }
+
+ .compat-orbit::after {
+ content: "";
+ position: absolute;
+ inset: 44px;
+ border-radius: 50%;
+ border: 1px solid rgba(86, 112, 221, 0.2);
+ filter: blur(0.3px);
+ }
+
+ .compat-core {
+ position: absolute;
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 30%, rgba(35, 46, 98, 0.95), rgba(20, 30, 70, 0.9));
+ box-shadow: 0 0 40px rgba(150, 178, 255, 0.32);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 1rem;
+ color: rgba(229, 236, 255, 0.95);
+ font-size: 0.9rem;
+ line-height: 1.3;
+ backdrop-filter: blur(6px);
+ margin: auto;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .compat-node {
+ position: absolute;
+ width: 84px;
+ height: 84px;
+ border-radius: 18px;
+ background: rgba(10, 17, 36, 0.72);
+ box-shadow: 0 12px 28px rgba(2, 6, 18, 0.6), inset 0 0 24px rgba(137, 157, 255, 0.24);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(143, 166, 255, 0.35);
+ outline: 1px solid rgba(12, 18, 38, 0.6);
+ outline-offset: -4px;
+ }
+
+ .compat-node img {
+ width: 54px;
+ height: 54px;
+ }
+
+ .compat-node:nth-child(2) {
+ top: 6%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation: floatNode 7s ease-in-out infinite;
+ }
+
+ .compat-node:nth-child(3) {
+ top: 50%;
+ right: 2%;
+ transform: translate(50%, -50%);
+ animation: floatNode 9s ease-in-out infinite;
+ }
+
+ .compat-node:nth-child(4) {
+ bottom: 4%;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ animation: floatNode 8s ease-in-out infinite;
+ }
+
+ .compat-node:nth-child(5) {
+ top: 50%;
+ left: 2%;
+ transform: translate(-50%, -50%);
+ animation: floatNode 10s ease-in-out infinite;
+ }
+
+ .compat-card {
+ background: rgba(12, 20, 42, 0.68);
+ border-radius: 18px;
+ padding: 1.8rem;
+ border: 1px solid rgba(110, 138, 238, 0.32);
+ box-shadow: 0 18px 40px rgba(4, 8, 22, 0.6);
+ backdrop-filter: blur(12px);
+ display: grid;
+ gap: 1.2rem;
+ width: 100%;
+ max-width: 500px;
+ min-width: 380px;
+ }
+
+ .compat-card h3 {
+ font-size: 1.35rem;
+ color: rgba(228, 236, 255, 0.92);
+ }
+
+ .compat-card p {
+ font-size: 0.98rem;
+ color: rgba(204, 214, 255, 0.72);
+ line-height: 1.6;
+ }
+
+ .compat-logos {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0.75rem;
+ }
+
+ .compat-logos .db-logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ padding: 0.7rem;
+ background: rgba(19, 30, 58, 0.9);
+ border: 1px solid rgba(118, 140, 233, 0.25);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .compat-logos img {
+ width: 44px;
+ height: 44px;
+ }
+
+ .compat-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem 0.75rem;
+ }
+
+ .compat-badge {
+ padding: 0.35rem 0.75rem;
+ border-radius: 999px;
+ background: rgba(57, 76, 162, 0.32);
+ color: rgba(225, 232, 255, 0.78);
+ font-size: 0.82rem;
+ }
+
+ @keyframes twinkle {
+ 0% {
+ opacity: 0.4;
+ transform: scale(1) translate3d(0, 0, 0);
+ }
+
+ 50% {
+ opacity: 0.75;
+ transform: scale(1.05) translate3d(-2%, -3%, 0);
+ }
+
+ 100% {
+ opacity: 0.4;
+ transform: scale(1) translate3d(0, 0, 0);
+ }
+ }
+
+ @keyframes orbitSpin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes floatNode {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 50% {
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+
+ @media (max-width: 968px) {
+ .compat-layout {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .compat-intro p {
+ max-width: 100%;
+ }
+
+ .compat-highlights {
+ justify-content: center;
+ }
+
+ .compat-orbit {
+ width: 260px;
+ height: 260px;
+ }
+
+ .compat-node {
+ width: 74px;
+ height: 74px;
+ }
+
+ .compat-node img {
+ width: 46px;
+ height: 46px;
+ }
+
+ .compat-logos {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
+ @media (max-width: 640px) {
+ .compat-intro h2 {
+ font-size: 2.6rem;
+ }
+
+ .compat-logos {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .compat-card {
+ padding: 1.4rem;
+ }
+ }
+
/* FOOTER STYLES */
footer {
background: linear-gradient(135deg,
@@ -1038,10 +1375,10 @@
-
+
+ {{/each_row}}
+
+
+
+
+ {{name}}
+ {{#if hex}} +{{hex}}
+ {{/if}}
+ {{#if css_var}}
+ {{css_var}}
+ {{/if}}
+ {{#if description}}
+ {{description}}
+ {{/if}} +
-
- More scalable than a spreadsheet
+More scalable than a spreadsheet
SQL queries sort, filter, and aggregate millions of rows in milliseconds. No more slow spreadsheet formulas or memory limitations. Your app remains smooth and responsive even @@ -1054,7 +1391,7 @@
More dynamic than a dashboard
@@ -1074,6 +1411,56 @@
+
+
+
+ Database Compatibility
+ Works with your database
+SQLPage connects to the database engine you already rely on today. + Keep your data in place and surface it through a + friendly interface that stays in sync. + If you don't have a DB yet, SQLPage comes with a built-in query engine. +
+
+
+ SQLite built-in
+ MySQL & MariaDB
+ PostgreSQL family
+ Microsoft SQL Server
+ ODBC bridge
+
+
+
+ 
+ 
+ 
+ 
+
+
+ Native connectors
+
+
+
+ Wherever your data lives
+Through ODBC you can plug SQLPage into any warehouses and enterprise engines.
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ No data copy
+ Streams query results
+
+
diff --git a/examples/official-site/sqlpage/templates/typography_sample.handlebars b/examples/official-site/sqlpage/templates/typography_sample.handlebars
new file mode 100644
index 00000000..647bcb0d
--- /dev/null
+++ b/examples/official-site/sqlpage/templates/typography_sample.handlebars
@@ -0,0 +1,18 @@
+
{{/if}}
-
+{{#each_row}}
+
diff --git a/examples/official-site/visual-identity.sql b/examples/official-site/visual-identity.sql
new file mode 100644
index 00000000..5427d72c
--- /dev/null
+++ b/examples/official-site/visual-identity.sql
@@ -0,0 +1,266 @@
+select 'http_header' as component,
+ 'public, max-age=600, stale-while-revalidate=3600, stale-if-error=86400' as "Cache-Control";
+
+select 'dynamic' as component, json_patch(json_extract(properties, '$[0]'), json_object(
+ 'title', 'Visual Identity - SQLPage',
+ 'css', '/assets/highlightjs-and-tabler-theme.css',
+ 'theme', 'dark'
+)) as properties
+FROM example WHERE component = 'shell' LIMIT 1;
+
+select 'text' as component, 'Visual Identity Guide' as title, '
+This guide defines the visual identity of SQLPage for consistent brand representation.
+' as contents_md;
+
+select 'text' as component, 'Personality' as title, '
+**Playful yet professional**: Approachable, innovative, confident, energetic, reliable, creative.
+' as contents_md;
+
+select 'text' as component, 'Logo' as title, '
+Primary logo: `/assets/icon.webp`
+
+**Usage**:
+- Minimum size: 48px height
+- Clear space: 50% of logo height
+- Do not distort, rotate, or modify
+- Works on dark and light backgrounds
+' as contents_md;
+
+select 'html' as component, '
+
+ {{#if title}}
+
+{{/each_row}}
+{{title}}
+ {{/if}}
+
+ {{sample_text}}
+
+ {{#if description}}
+ {{description}}
+ {{/if}}
+ {{#if usage}}
+ Use for: {{usage}}
+ {{/if}}
+
+ 
+
+' as html;
+
+select 'button' as component;
+select
+ 'Download Logo' as title,
+ '/assets/icon.webp' as link,
+ 'icon.webp' as download,
+ 'blue' as color,
+ 'download' as icon;
+
+select 'text' as component, 'Colors' as title, '
+Color palette extracted directly from the logo and design system.
+' as contents_md;
+
+select 'color_swatch' as component;
+select
+ 'Primary Cyan' as name,
+ '#37E5EF' as hex,
+ 'Main logo color - bright cyan' as description;
+select
+ 'Teal Accent' as name,
+ '#2A9FAF' as hex,
+ 'Secondary teal from logo' as description;
+select
+ 'Dark Navy' as name,
+ '#090D19' as hex,
+ 'Logo background - dark navy' as description;
+select
+ 'Medium Blue' as name,
+ '#27314C' as hex,
+ 'Medium blue from logo' as description;
+select
+ 'Blue Gray' as name,
+ '#304960' as hex,
+ 'Blue-gray from logo' as description;
+select
+ 'Neutral Gray' as name,
+ '#4B4E5C' as hex,
+ 'Neutral gray from logo' as description;
+select
+ 'Light Gray' as name,
+ '#9FA4AE' as hex,
+ 'Light gray from logo' as description;
+select
+ 'Primary Background' as name,
+ '#0a0f1a' as hex,
+ 'Dark theme foundation' as description;
+select
+ 'Primary Text' as name,
+ '#f7f7f7' as hex,
+ 'Main text color' as description;
+select
+ 'White' as name,
+ '#ffffff' as hex,
+ 'Headings and emphasis' as description;
+
+select 'text' as component, 'Gradient' as title, '
+Primary gradient flows from primary cyan (#37E5EF) to teal accent (#2A9FAF).
+
+Use for buttons, highlights, and important elements.
+' as contents_md;
+
+select 'text' as component, 'Typography' as title, '
+**Primary Font**: Inter
+
+Use Inter for all digital materials, websites, and presentations. Inter is a modern, highly legible sans-serif typeface designed specifically for user interfaces.
+
+**Font Source**: [Google Fonts - Inter](https://fonts.google.com/specimen/Inter)
+
+**Fallback Font Stack**: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+
+If Inter is not available, use the fallback stack in order.
+' as contents_md;
+
+select 'typography_sample' as component;
+select
+ 'Page Title' as title,
+ 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
+ '64px' as font_size,
+ '800' as font_weight,
+ '1.1' as line_height,
+ '#ffffff' as text_color,
+ '-1px' as letter_spacing,
+ 'SQLPage Visual Identity' as sample_text,
+ 'Hero sections, main page titles, presentation title slides' as usage,
+ 'Bold, impactful text for maximum visual hierarchy' as description;
+
+select 'typography_sample' as component;
+select
+ 'Section Heading' as title,
+ 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
+ '56px' as font_size,
+ '700' as font_weight,
+ '1.2' as line_height,
+ '#ffffff' as text_color,
+ 'normal' as letter_spacing,
+ 'Section Title' as sample_text,
+ 'Major section breaks, chapter headings, presentation section slides' as usage,
+ 'Strong but slightly less prominent than page titles' as description;
+
+select 'typography_sample' as component;
+select
+ 'Subsection Heading' as title,
+ 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
+ '40px' as font_size,
+ '600' as font_weight,
+ '1.3' as line_height,
+ '#ffffff' as text_color,
+ 'normal' as letter_spacing,
+ 'Subsection Heading' as sample_text,
+ 'Card titles, subsection headers, content slide titles' as usage,
+ 'Clear hierarchy for organizing content' as description;
+
+select 'typography_sample' as component;
+select
+ 'Body Text' as title,
+ 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
+ '16px' as font_size,
+ '400' as font_weight,
+ '1.6' as line_height,
+ '#f7f7f7' as text_color,
+ 'normal' as letter_spacing,
+ 'This is body text used for paragraphs, descriptions, and main content. It should be comfortable to read with adequate spacing between lines.' as sample_text,
+ 'Paragraphs, descriptions, main content, presentation body text' as usage,
+ 'Standard reading size with comfortable line spacing' as description;
+
+select 'typography_sample' as component;
+select
+ 'Small Text' as title,
+ 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
+ '14px' as font_size,
+ '400' as font_weight,
+ '1.5' as line_height,
+ '#999999' as text_color,
+ 'normal' as letter_spacing,
+ 'Small text for captions and secondary information' as sample_text,
+ 'Captions, metadata, footnotes, fine print' as usage,
+ 'Supporting information that should not compete with main content' as description;
+
+select 'text' as component, 'Spacing' as title, '
+**Base unit**: 8 pixels
+
+**Spacing scale**:
+- Extra small: 8 pixels
+- Small: 16 pixels
+- Medium: 24 pixels
+- Large: 32 pixels
+- Extra large: 48 pixels
+- XXL: 64 pixels
+
+**Container**: Maximum width 1000 pixels, padding 40 pixels
+' as contents_md;
+
+select 'text' as component, 'Dark Environments' as title, '
+For digital displays, presentations, and screens.
+' as contents_md;
+
+select 'text' as component, 'Background Colors' as title, '
+- **Primary background**: #0a0f1a (deep navy blue)
+- **Secondary background**: #0f1426 (slightly lighter navy)
+- Use gradients with primary cyan (#37E5EF) and teal (#2A9FAF) for visual interest
+' as contents_md;
+
+select 'text' as component, 'Text Colors' as title, '
+- **Primary text**: #f7f7f7 (almost white) - for main content
+- **Secondary text**: #999999 (medium gray) - for supporting information
+- **Headings**: #ffffff (pure white) - for maximum emphasis
+- **Links**: #7db3e8 (bright blue) - for interactive elements
+' as contents_md;
+
+select 'text' as component, 'Contrast Guidelines' as title, '
+- All text must meet WCAG AA contrast requirements (minimum 4.5:1 for normal text, 3:1 for large text)
+- Primary text (#f7f7f7) on primary background (#0a0f1a) meets accessibility standards
+- Use white (#ffffff) only for headings and emphasis
+- Test all color combinations before finalizing designs
+' as contents_md;
+
+select 'text' as component, 'Light Environments' as title, '
+For print materials, light-themed websites, and bright displays.
+' as contents_md;
+
+select 'text' as component, 'Background Colors' as title, '
+- **Primary background**: #ffffff (white) or #f8f9fa (off-white)
+- **Secondary background**: #f1f3f5 (light gray)
+- Use subtle gradients or solid light colors
+- Avoid pure white backgrounds in print to reduce glare
+' as contents_md;
+
+select 'text' as component, 'Text Colors' as title, '
+- **Primary text**: #1a1a1a (near black) or #212529 (dark gray) - for main content
+- **Secondary text**: #6c757d (medium gray) - for supporting information
+- **Headings**: #000000 (black) or #0a0f1a (dark navy) - for emphasis
+- **Links**: #2A9FAF (teal) or #37E5EF (cyan) - maintain brand colors
+' as contents_md;
+
+select 'text' as component, 'Logo Usage in Light Environments' as title, '
+- Logo works on both light and dark backgrounds
+- On light backgrounds, ensure sufficient contrast
+- Consider using a darker version or adding a subtle shadow if needed
+- Test logo visibility on various light backgrounds
+' as contents_md;
+
+select 'text' as component, 'Print Guidelines' as title, '
+- Use CMYK color mode for print materials
+- Convert hex colors to CMYK equivalents
+- Primary cyan (#37E5EF) prints as: C: 76%, M: 0%, Y: 0%, K: 6%
+- Teal accent (#2A9FAF) prints as: C: 76%, M: 9%, Y: 0%, K: 31%
+- Test print samples to ensure color accuracy
+- Use off-white paper (#f8f9fa equivalent) to reduce eye strain
+- Minimum font size for print: 10 points (13 pixels)
+- Ensure all text meets print contrast requirements
+' as contents_md;
+
+select 'text' as component, 'Presentations' as title, '
+**Background**: Dark theme #0a0f1a with gradient overlays
+
+**Typography**:
+- Title slide: Large bold text with gradient effect
+- Body: Minimum readable size for your audience
+- Code: Monospace font, minimum readable size
+
+**Logo**:
+- Title slide: Large, centered
+- Content slides: Small, bottom-right corner
+
+**Colors**: Use brand cyan/teal gradients (#37E5EF to #2A9FAF) for highlights. Maintain high contrast for readability.
+' as contents_md;
+
+select 'text' as component, 'Resources' as title, '
+- Logo: `/assets/icon.webp`
+- CSS Theme: `/assets/highlightjs-and-tabler-theme.css`
+- [Components Documentation](/component.sql)
+- [GitHub Discussions](https://github.com/sqlpage/SQLPage/discussions)
+' as contents_md;
diff --git a/examples/official-site/your-first-sql-website/nginx.md b/examples/official-site/your-first-sql-website/nginx.md
index b910114a..9e156135 100644
--- a/examples/official-site/your-first-sql-website/nginx.md
+++ b/examples/official-site/your-first-sql-website/nginx.md
@@ -65,6 +65,23 @@ sudo systemctl reload nginx
Your SQLPage instance is now hosted behind a reverse proxy using NGINX. You can access it by visiting `http://example.com`.
+
+### Streaming-friendly proxy settings
+
+SQLPage streams HTML by default so the browser can render results while the database is still sending rows.
+If you have slow SQL queries (you shouldn't), you can add the following directive to your location block:
+
+```nginx
+proxy_buffering off;
+```
+
+That will allow users to start seeing the top of your pages faster,
+but will increase the load on your SQLPage server, and reduce the amount of users you can serve concurrently.
+
+Refer to the official documentation for [proxy buffering](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffering), [gzip](https://nginx.org/en/docs/http/ngx_http_gzip_module.html), and [chunked transfer](https://nginx.org/en/docs/http/ngx_http_core_module.html#chunked_transfer_encoding) when tuning these values.
+
+When SQLPage sits behind a reverse proxy, set `compress_responses` to `false` [in `sqlpage.json`](https://github.com/sqlpage/SQLPage/blob/main/configuration.md) so that NGINX compresses once at the edge.
+
### URL Rewriting
URL rewriting is a powerful feature that allows you to manipulate URLs to make them more readable, search-engine-friendly, and easy to maintain.
diff --git a/examples/official-site/your-first-sql-website/tutorial.md b/examples/official-site/your-first-sql-website/tutorial.md
index 79819136..582a9463 100644
--- a/examples/official-site/your-first-sql-website/tutorial.md
+++ b/examples/official-site/your-first-sql-website/tutorial.md
@@ -91,6 +91,7 @@ Later, when you want to deploy your website online, you can switch back to a per
- a PostgreSQL-compatible server with `postgres://user:password@host/database` ([see options](https://docs.rs/sqlx-oldapi/latest/sqlx_oldapi/postgres/struct.PgConnectOptions.html)),
- a MySQL-compatible server with `mysql://user:password@host/database` ([see options](https://docs.rs/sqlx-oldapi/latest/sqlx_oldapi/mysql/struct.MySqlConnectOptions.html)),
- a Microsoft SQL Server with `mssql://user:password@host/database` ([see options](https://docs.rs/sqlx-oldapi/latest/sqlx_oldapi/mssql/struct.MssqlConnectOptions.html#method.from_str), [note about named instances](https://github.com/sqlpage/SQLPage/issues/92)),
+- any ODBC-compatible database like DuckDB, ClickHouse, Databricks, Snowflake, BigQuery, Oracle, Db2, and many more. See [ODBC database connection instructions](https://github.com/sqlpage/SQLPage#odbc-setup).
> If `user` or `password` **contains special characters**, you should [**percent-encode**](https://en.wikipedia.org/wiki/Percent-encoding) them.
>
@@ -193,5 +194,6 @@ If you prefer to host your website yourself, you can use a cloud provider or a V
- Check out [learnsqlpage.com](https://learnsqlpage.com) by Nick Antonaccio for an in-depth tutorial with many examples
- Read the [SQLPage documentation](/documentation.sql) to learn about all the components available in SQLPage
+- Read about [SQLPage's extensions to SQL](/extensions-to-sql) for a specification of the SQL syntax you can use in SQLPage, the data types used when exchanging data with the browser and with the database, a clear explanation of how *SQLPage variables* and *SQLPage functions* work.
- Join the [SQLPage community](https://github.com/sqlpage/SQLPage/discussions) to ask questions and share your projects
- If you like videos better, check this series that shows how to build and deploy your app from scratch [SQLPage on Youtube](https://www.youtube.com/playlist?list=PLTue_qIAHxAf9fEjBY2CN0N_5XOiffOk_)
\ No newline at end of file
diff --git a/examples/single sign on/index.sql b/examples/single sign on/index.sql
index 4557d187..bc410f69 100644
--- a/examples/single sign on/index.sql
+++ b/examples/single sign on/index.sql
@@ -14,5 +14,14 @@ WHERE $email IS NULL;
-- For logged-in users
SELECT 'text' as component,
'Welcome back, ' || sqlpage.user_info('name') || '!' as title,
- 'You are logged in as ' || sqlpage.user_info('email') || '. You can now access the [protected page](/protected) or [log out](/logout).' as contents_md
+ 'You are logged in as ' || sqlpage.user_info('email') ||
+ '. You can now access the [protected page](/protected) or [log out](' ||
+ -- Secure OIDC logout with CSRF protection
+ -- This redirects to /sqlpage/oidc_logout which:
+ -- 1. Verifies the CSRF token
+ -- 2. Removes the auth cookies
+ -- 3. Redirects to the OIDC provider's logout endpoint
+ -- 4. Finally redirects back to the homepage
+ sqlpage.oidc_logout_url()
+ || ').' as contents_md
WHERE $email IS NOT NULL;
diff --git a/examples/single sign on/logout.sql b/examples/single sign on/logout.sql
deleted file mode 100644
index 855d5c68..00000000
--- a/examples/single sign on/logout.sql
+++ /dev/null
@@ -1,12 +0,0 @@
--- remove the session cookie
-select
- 'cookie' as component,
- 'sqlpage_auth' as name,
- true as remove;
-
-select
- 'redirect' as component,
- sqlpage.link('http://localhost:8181/realms/sqlpage_demo/protocol/openid-connect/logout', json_object(
- 'post_logout_redirect_uri', 'http://localhost:8080/',
- 'id_token_hint', sqlpage.cookie('sqlpage_auth')
- )) as link;
diff --git a/examples/single sign on/protected/index.sql b/examples/single sign on/protected/index.sql
index 8956a6f6..b82ffe3f 100644
--- a/examples/single sign on/protected/index.sql
+++ b/examples/single sign on/protected/index.sql
@@ -1,7 +1,10 @@
set user_email = sqlpage.user_info('email');
select 'shell' as component, 'My secure app' as title,
- json_object('title', 'Log Out', 'link', '/logout') as menu_item;
+ json_object(
+ 'title', 'Log Out',
+ 'link', sqlpage.oidc_logout_url()
+ ) as menu_item;
select 'text' as component,
'You''re in, '|| sqlpage.user_info('name') || ' !' as title,
diff --git a/examples/user-authentication/docker-compose.yml b/examples/user-authentication/docker-compose.yml
index 5108ac1e..96b78c0e 100644
--- a/examples/user-authentication/docker-compose.yml
+++ b/examples/user-authentication/docker-compose.yml
@@ -1,6 +1,8 @@
services:
web:
image: lovasoa/sqlpage:main # main is cutting edge, use sqlpage/SQLPage:latest for the latest stable version
+ build:
+ context: "../.."
ports:
- "8080:8080"
volumes:
diff --git a/examples/user-authentication/signin.sql b/examples/user-authentication/signin.sql
index 4057e44d..bab0e883 100644
--- a/examples/user-authentication/signin.sql
+++ b/examples/user-authentication/signin.sql
@@ -1,14 +1,9 @@
-SELECT 'form' AS component,
+SELECT 'login' AS component,
+ 'login.sql' AS action,
'Sign in' AS title,
- 'Sign in' AS validate,
- 'login.sql' AS action;
-
-SELECT 'username' AS name;
-SELECT 'password' AS name, 'password' AS type;
-
-SELECT 'alert' as component,
- 'Sorry' as title,
- 'We could not authenticate you. Please log in or [create an account](signup.sql).' as description_md,
- 'alert-circle' as icon,
- 'red' as color
-WHERE $error IS NOT NULL;
\ No newline at end of file
+ 'Username' AS username,
+ 'Password' AS password,
+ 'user' AS username_icon,
+ 'lock' AS password_icon,
+ case when $error is not null then 'We could not authenticate you. Please log in or [create an account](signup.sql).' end as error_message_md,
+ 'Sign in' AS validate;
\ No newline at end of file
diff --git a/lambda.Dockerfile b/lambda.Dockerfile
index e627a21a..c91ef7f5 100644
--- a/lambda.Dockerfile
+++ b/lambda.Dockerfile
@@ -1,4 +1,4 @@
-FROM rust:1.87-alpine as builder
+FROM rust:1.91-alpine AS builder
RUN rustup component add clippy rustfmt
RUN apk add --no-cache musl-dev zip
WORKDIR /usr/src/sqlpage
@@ -13,7 +13,7 @@ RUN mv target/release/sqlpage bootstrap && \
ldd bootstrap && \
zip -9 -r deploy.zip bootstrap index.sql
-FROM public.ecr.aws/lambda/provided:al2 as runner
+FROM public.ecr.aws/lambda/provided:al2 AS runner
COPY --from=builder /usr/src/sqlpage/bootstrap /main
COPY --from=builder /usr/src/sqlpage/index.sql ./index.sql
ENTRYPOINT ["/main"]
\ No newline at end of file
diff --git a/scripts/README.md b/scripts/README.md
new file mode 100644
index 00000000..59986f41
--- /dev/null
+++ b/scripts/README.md
@@ -0,0 +1,20 @@
+# Docker Build Scripts
+
+This directory contains scripts used by the Dockerfile to build SQLPage with cross-compilation support.
+
+## Scripts
+
+- **`setup-cross-compilation.sh`**: Sets up the cross-compilation environment based on target and build architectures. Handles system dependencies, cross-compiler installation, and libgcc extraction for runtime.
+- **`build-dependencies.sh`**: Builds only the project dependencies for Docker layer caching
+- **`build-project.sh`**: Builds the final SQLPage binary
+
+## Usage
+
+These scripts are automatically copied and executed by the Dockerfile during the build process. They handle:
+
+- Cross-compilation setup for different architectures (amd64, arm64, arm)
+- System dependencies installation
+- Cargo build configuration with appropriate linkers
+- Library extraction for runtime
+
+The scripts use temporary files in `/tmp/` to pass configuration between stages and export environment variables for use in subsequent build steps.
diff --git a/scripts/build-dependencies.sh b/scripts/build-dependencies.sh
new file mode 100755
index 00000000..5a55754a
--- /dev/null
+++ b/scripts/build-dependencies.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+set -euo pipefail
+
+source /tmp/build-env.sh
+
+echo "Building dependencies for target: $TARGET"
+
+cargo build \
+ --target "$TARGET" \
+ --config "target.$TARGET.linker=\"$LINKER\"" \
+ --features odbc-static \
+ --profile superoptimized
diff --git a/scripts/build-project.sh b/scripts/build-project.sh
new file mode 100755
index 00000000..ac595b61
--- /dev/null
+++ b/scripts/build-project.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+set -euo pipefail
+
+source /tmp/build-env.sh
+
+echo "Building project for target: $TARGET"
+
+cargo build \
+ --target "$TARGET" \
+ --config "target.$TARGET.linker=\"$LINKER\"" \
+ --features odbc-static \
+ --profile superoptimized
+
+mv "target/$TARGET/superoptimized/sqlpage" sqlpage.bin
diff --git a/scripts/setup-cross-compilation.sh b/scripts/setup-cross-compilation.sh
new file mode 100755
index 00000000..83531abb
--- /dev/null
+++ b/scripts/setup-cross-compilation.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+set -euo pipefail
+
+TARGETARCH="$1"
+BUILDARCH="$2"
+BINDGEN_EXTRA_CLANG_ARGS=""
+
+apt-get update
+
+if [ "$TARGETARCH" = "$BUILDARCH" ]; then
+ TARGET="$(rustup target list --installed | head -n1)"
+ LINKER="gcc"
+ apt-get install -y gcc libgcc-s1 make
+ LIBDIR="/lib/$(gcc -print-multiarch)"
+elif [ "$TARGETARCH" = "arm64" ]; then
+ TARGET="aarch64-unknown-linux-gnu"
+ LINKER="aarch64-linux-gnu-gcc"
+ apt-get install -y gcc-aarch64-linux-gnu libgcc-s1-arm64-cross make
+ LIBDIR="/usr/aarch64-linux-gnu/lib"
+elif [ "$TARGETARCH" = "arm" ]; then
+ TARGET="armv7-unknown-linux-gnueabihf"
+ LINKER="arm-linux-gnueabihf-gcc"
+ apt-get install -y gcc-arm-linux-gnueabihf libgcc-s1-armhf-cross make cmake libclang-dev
+ cargo install --force --locked bindgen-cli
+ SYSROOT=$(arm-linux-gnueabihf-gcc -print-sysroot)
+ BINDGEN_EXTRA_CLANG_ARGS="--sysroot=$SYSROOT -I$SYSROOT/usr/include -I$SYSROOT/usr/include/arm-linux-gnueabihf"
+ LIBDIR="/usr/arm-linux-gnueabihf/lib"
+else
+ echo "Unsupported cross compilation target: $TARGETARCH"
+ exit 1
+fi
+
+mkdir -p /tmp/sqlpage-libs
+cp "$LIBDIR/libgcc_s.so.1" /tmp/sqlpage-libs/
+rustup target add "$TARGET"
+
+{
+ echo "export TARGET='$TARGET'"
+ echo "export LINKER='$LINKER'"
+ if [ -n "$BINDGEN_EXTRA_CLANG_ARGS" ]; then
+ printf "export BINDGEN_EXTRA_CLANG_ARGS=%q\n" "$BINDGEN_EXTRA_CLANG_ARGS"
+ fi
+} > /tmp/build-env.sh
diff --git a/sqlpage/apexcharts.js b/sqlpage/apexcharts.js
index 55cae680..a0f46367 100644
--- a/sqlpage/apexcharts.js
+++ b/sqlpage/apexcharts.js
@@ -1,4 +1,4 @@
-/* !include https://cdn.jsdelivr.net/npm/apexcharts@5.3.0/dist/apexcharts.min.js */
+/* !include https://cdn.jsdelivr.net/npm/apexcharts@5.3.6/dist/apexcharts.min.js */
sqlpage_chart = (() => {
function sqlpage_chart() {
@@ -12,20 +12,21 @@ sqlpage_chart = (() => {
}
const tblrColors = [
- ["blue", "#1c31dc", "#3399FF"],
- ["red", "#d11414", "#FF6666"],
- ["green", "#00CC00", "#66FF66"],
- ["pink", "#FF1493", "#FF69B4"],
- ["purple", "#ae3ec9", "#c264d9"],
- ["orange", "#f76707", "#FFA500"],
- ["cyan", "#00CED1", "#40E0D0"],
- ["teal", "#008080", "#20B2AA"],
- ["yellow", "#FFD700", "#FFFF00"],
- ["indigo", "#4B0082", "#6F00FF"],
- ["azure", "#007FFF", "#1E90FF"],
- ["gray", "#A0A0A0", "#D3D3D3"],
+ ["blue", "#1c7ed6", "#339af0"],
+ ["red", "#f03e3e", "#ff6b6b"],
+ ["green", "#37b24d", "#51cf66"],
+ ["pink", "#d6336c", "#f06595"],
+ ["purple", "#ae3ec9", "#cc5de8"],
+ ["orange", "#f76707", "#ff922b"],
+ ["cyan", "#1098ad", "#22b8cf"],
+ ["teal", "#0ca678", "#20c997"],
+ ["yellow", "#f59f00", "#fcc419"],
+ ["indigo", "#4263eb", "#5c7cfa"],
+ ["lime", "#74b816", "#94d82d"],
+ ["azure", "#339af0", "#339af0"],
+ ["gray", "#495057", "#adb5bd"],
["black", "#000000", "#000000"],
- ["white", "#E9E9E9", "#F5F5F5"],
+ ["white", "#ffffff", "#f8f9fa"],
];
const colorNames = Object.fromEntries(
tblrColors.flatMap(([name, dark, light]) => [
@@ -157,7 +158,7 @@ sqlpage_chart = (() => {
dataLabels: {
enabled: !!data.labels,
dropShadow: {
- enabled: false,
+ enabled: true,
color: "var(--tblr-primary-bg-subtle)",
},
formatter:
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 2b9a436f..aa34cb87 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -22,17 +22,6 @@ td > p {
margin-bottom: 0 !important;
}
-/* https://github.com/tabler/tabler/issues/1648 */
-* {
- scrollbar-color: var(--tblr-primary) var(--tblr-bg-surface-dark) !important;
-}
-::-webkit-scrollbar {
- width: 4px !important;
-}
-::-webkit-scrollbar-thumb {
- background: var(--tblr-primary) !important;
-}
-
.text-secondary a {
color: inherit;
text-decoration: underline;
diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js
index 46119635..07ccd349 100644
--- a/sqlpage/sqlpage.js
+++ b/sqlpage/sqlpage.js
@@ -354,8 +354,7 @@ function open_modal_for_hash() {
const hash = window.location.hash.substring(1);
if (!hash) return;
const modal = document.getElementById(hash);
- const classes = modal.classList;
- if (!modal || !classes.contains("modal")) return;
+ if (!modal || !modal.classList.contains("modal")) return;
const bootstrap_modal =
window.tabler.bootstrap.Modal.getOrCreateInstance(modal);
bootstrap_modal.show();
diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
index 7d85775e..d65762ed 100644
--- a/sqlpage/templates/carousel.handlebars
+++ b/sqlpage/templates/carousel.handlebars
@@ -5,7 +5,7 @@
+{{title}}