chore: import upstream snapshot with attribution

examples/light-dark-toggle/README.md

@@ -0,0 +1,29 @@
+# Switching between light mode and dark mode in SQLPage
+
+This is a demo of a light/dark background toggle mecanism for websites built with [SQLpage](https://sql-page.com/).
+
+![screenshot](./screenshot.png)
+
+This example demonstrates:
+ - how to give the same header, footer, and style to all your pages using the `dynamic` component and the `run_sql` function.
+ - how to use the `theme` property of the `shell` component.
+ - how to store and reuse persistent user-specific preferences using cookies.
+
+
+## Installation
+
+The SQL backend to this is SQLite, so the installation is easy:
+
+1. [Install SQLpage](https://sql-page.com/your-first-sql-website/)
+
+1. Clone SQLpage''s repository: `git clone https://github.com/sqlpage/SQLPage.git`
+
+1. cd to `SQLpage/examples/light-dark-toggle` and run `sqlpage` in the cloned directory
+
+1. Open a browser window to `http://localhost:5005`
+
+## Usage
+
+The initial background theme is light. To switch to dark mode, click on the '' ☀ '' symbol on the right of the top menu bar. Click on the same symbol to switch back to light mode.
+
+I have included some dummy pages under a mock ''Categories'' menu to show that the ''light'' or ''dark'' setting is kept between pages. This is done by setting and reading a cookie called ''lightdarkstatus''.' AS contents_md;

examples/light-dark-toggle/biography.sql

@@ -0,0 +1,7 @@
+SELECT 'dynamic' AS component,
+	sqlpage.run_sql('shell.sql')
+	AS properties;
+
+SELECT 'text' AS component,
+	'Biography' AS title;
+SELECT 'Morbi fermentum porttitor bibendum. Vivamus eu tempus purus. Sed ligula risus, consectetur in ligula eu, lobortis sollicitudin tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus justo, lacinia in velit sed, fringilla imperdiet neque. Suspendisse iaculis lacus metus, at imperdiet justo rutrum nec. Duis accumsan fermentum nisi quis ornare. Aenean at placerat quam, quis gravida diam. Sed sollicitudin justo sit amet mattis eleifend. Vestibulum eget porttitor quam.' AS contents;

examples/light-dark-toggle/codeconduct.sql

@@ -0,0 +1,7 @@
+SELECT 'dynamic' AS component,
+	sqlpage.run_sql('shell.sql')
+	AS properties;
+
+SELECT 'text' AS component,
+	'Code Of Conduct' AS title;
+SELECT 'Pellentesque sed consequat ligula. Ut fermentum elit diam, sit amet ullamcorper orci volutpat quis. Nunc nec ipsum eu nibh interdum interdum ut vitae neque. Sed ac hendrerit tortor, ac tincidunt nibh. Mauris vel tempor odio, quis varius lorem. In sed nibh placerat, fermentum nisl eget, dictum orci. Nullam sit amet ligula velit. Maecenas faucibus massa a orci pharetra, eu fringilla enim ornare. Vestibulum quis rutrum nisi. Pellentesque nec nulla eu tellus aliquet bibendum accumsan egestas dui. Phasellus arcu felis, dictum venenatis metus vel, consectetur finibus enim. Praesent tristique semper dolor, a mollis orci pharetra vel. Vivamus mattis, lectus blandit finibus euismod, magna justo ornare nisi, vel convallis nisi velit eu purus. Aliquam erat volutpat.' AS contents;

examples/light-dark-toggle/docker-compose.yml

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

examples/light-dark-toggle/index.sql

@@ -0,0 +1,28 @@
+SELECT 'dynamic' AS component,
+	sqlpage.run_sql('shell.sql')
+	AS properties;
+
+SELECT 'title' AS component,
+	'Toggle Light / Dark Mode' AS contents,
+	TRUE AS center;
+
+SELECT 'text' AS component;
+SELECT 'This is a demo of a light/dark background toggle mecanism for websites built with [SQLpage](https://sql-page.com/), Ophir Lojkine''s fantastic tool
+
+## Installation
+
+The SQL backend to this is SQLite, so the installation is easy:
+
+1. [Install SQLpage](https://sql-page.com/your-first-sql-website/)
+
+1. Clone SQLpage''s repository: `git clone https://github.com/sqlpage/SQLPage.git`
+
+1. cd to `SQLpage/examples/light-dark-toggle` and run `sqlpage` in the cloned directory
+
+1. Open a browser window to `http://localhost:5005`
+
+## Usage
+
+The initial background theme is light. To switch to dark mode, click on the '' ☀ '' symbol on the right of the top menu bar. Click on the same symbol to switch back to light mode.
+
+I have included some dummy pages under a mock ''Categories'' menu to show that the ''light'' or ''dark'' setting is kept between pages. This is done by setting and reading a cookie called ''lightdarkstatus''.' AS contents_md;

examples/light-dark-toggle/presentation.sql

@@ -0,0 +1,14 @@
+SELECT 'dynamic' AS component,
+	sqlpage.run_sql('shell.sql')
+	AS properties;
+
+SELECT 'hero' AS component,
+	'Presentation' AS title,
+	'This sample site demonstrate a light/dark toggle' AS description;
+SELECT 'text' AS component,
+'Aenean pellentesque orci metus, ac imperdiet odio accumsan ac. Praesent vehicula sem lorem, in ultricies ex ultricies vitae. Nam lorem ipsum, ultrices faucibus pharetra a, maximus quis dolor. Donec malesuada, enim ut posuere pulvinar, nisl libero molestie felis, sit amet venenatis massa tortor ac enim. Etiam dui nisl, hendrerit sit amet lacinia quis, congue sed lorem. Nulla nec augue fermentum, convallis massa vel, mollis purus. Phasellus hendrerit finibus lorem vel volutpat. Cras sodales laoreet eros id consequat. Phasellus euismod ligula vitae sapien scelerisque lobortis.
+
+Suspendisse potenti. In tempus, turpis in laoreet auctor, justo velit ullamcorper tortor, a elementum justo felis in risus. Nullam rhoncus convallis pretium. Morbi nec nisl in magna mollis ultricies quis sed tortor. Phasellus rutrum elementum vehicula. Praesent vel malesuada turpis. Vestibulum massa ante, consequat non euismod sit amet, pretium quis nisi. Nam vestibulum nulla lorem. Sed pharetra euismod eleifend. Cras ac lacus sed nunc volutpat tristique sed quis nunc.
+
+Ut rutrum tempor orci eu fermentum. Aenean fringilla, metus a molestie blandit, velit nunc ornare ex, vel feugiat neque odio sed erat. Proin convallis, dui sit amet auctor venenatis, mauris elit hendrerit justo, sed maximus nulla orci eget felis. Praesent dolor velit, luctus et urna posuere, pulvinar dictum urna. Curabitur sed dictum felis. In at neque ornare, convallis nibh et, mollis risus. Praesent commodo vehicula dolor in egestas. Praesent euismod nunc risus, sed consequat turpis venenatis quis. Proin in risus ornare, mattis tortor sed, porttitor nunc.'
+AS contents_md;

examples/light-dark-toggle/shell.sql

@@ -0,0 +1,18 @@
+-- This shell goes to every page
+
+SELECT 'shell' AS component,
+	'LightDark' AS title,
+	sqlpage.cookie('lightdarkstatus') AS theme,
+	'/' AS link,
+	'[
+		{"title":"Categories",
+			"submenu": [
+				{"title":"Home","link":"/"},
+				{"title":"Presentation","link":"/presentation.sql"},
+				{"title":"Biography","link":"/biography.sql"},
+				{"title":"Code of conduct","link":"/codeconduct.sql"}
+			]},
+		{"title":"☀","link":"/toggle.sql"}
+	]' AS menu_item,
+	'sqlpage ' || sqlpage.version()
+	AS footer;

examples/light-dark-toggle/sqlpage/sqlpage.yaml

@@ -0,0 +1,2 @@
+database_url: "sqlite://:memory:"
+port: 5005

examples/light-dark-toggle/test.hurl

@@ -0,0 +1,29 @@
+GET http://localhost:8080/
+HTTP 200
+[Asserts]
+body contains "Toggle Light / Dark Mode"
+body contains "Categories"
+body contains "☀"
+body not contains "An error occurred"
+
+GET http://localhost:8080/toggle.sql
+Referer: http://localhost:8080/
+HTTP 302
+[Asserts]
+header "Set-Cookie" contains "lightdarkstatus=dark"
+header "Location" == "http://localhost:8080/"
+
+GET http://localhost:8080/biography.sql
+HTTP 200
+[Asserts]
+body contains "Biography"
+body contains "Morbi fermentum"
+body contains "data-bs-theme=\"dark\""
+body not contains "An error occurred"
+
+GET http://localhost:8080/toggle.sql
+Referer: http://localhost:8080/biography.sql
+HTTP 302
+[Asserts]
+header "Set-Cookie" contains "lightdarkstatus="
+header "Location" == "http://localhost:8080/biography.sql"

examples/light-dark-toggle/toggle.sql

@@ -0,0 +1,5 @@
+SELECT 'cookie' AS component,
+	'lightdarkstatus' AS name,
+	IIF(COALESCE(sqlpage.cookie('lightdarkstatus'),'') = '', 'dark', '') AS value;
+
+SELECT 'redirect' AS component, sqlpage.header('referer') AS link;