diff --git a/examples/official-site/documentation.sql b/examples/official-site/documentation.sql index 217de58d..85cc7526 100644 --- a/examples/official-site/documentation.sql +++ b/examples/official-site/documentation.sql @@ -6,14 +6,7 @@ where $component is not null and not exists (select 1 from component where name -- This line, at the top of the page, tells web browsers to keep the page locally in cache once they have it. 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_set( - properties, - '$[0].title', - 'SQLPage components' || COALESCE(': ' || $component, ' documentation') - ) as properties -FROM example WHERE component = 'shell' LIMIT 1; +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; select 'text' as component, format('SQLPage v%s documentation', sqlpage.version()) as title; select ' diff --git a/examples/official-site/examples/handle_picture_upload.sql b/examples/official-site/examples/handle_picture_upload.sql index 05a33e99..e6a38907 100644 --- a/examples/official-site/examples/handle_picture_upload.sql +++ b/examples/official-site/examples/handle_picture_upload.sql @@ -1,16 +1,36 @@ -select 'shell' as component, 'SQLPage' as title, '/' as link; +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; -select 'title' as component, 'SQLPage Upload Demo' as contents; +select 'title' as component, 'SQLPage Image Upload Demo' as contents; -select 'card' as component, 1 as columns; +set $data_url = sqlpage.read_file_as_data_url(sqlpage.uploaded_file_path('my_file')); + +select 'card' as component, 1 as columns where $data_url is not null; select 'Your picture' as title, - sqlpage.read_file_as_data_url( - sqlpage.uploaded_file_path('my_file') - ) as top_image; - -select 'debug' as component, - sqlpage.uploaded_file_path('my_file') as uploaded_file_path, - sqlpage.uploaded_file_mime_type('my_file') as uploaded_file_mime_type; + $data_url as top_image, + 'Uploaded file type: ' || sqlpage.uploaded_file_mime_type('my_file') as description +where $data_url is not null; select 'form' as component; -select 'my_file' as name, 'file' as type, 'Picture' as label; \ No newline at end of file +select 'my_file' as name, 'file' as type, 'Picture' as label; + +select 'text' as component, ' +## About + +This is a demo of the SQLPage file upload feature. +A file upload form is created using the [form](/documentation.sql?component=form#component) component: + +```sql +select ''form'' as component; +select ''my_file'' as name, ''file'' as type, ''Picture'' as label; +``` + +When a file is uploaded, it is displayed in a [card](/documentation.sql?component=card#component) component +using the [sqlpage.read_file_as_data_url](/functions.sql?function=read_file_as_data_url#function) function: + +```sql +select ''card'' as component, 1 as columns; +select ''Your picture'' as title, sqlpage.read_file_as_data_url(sqlpage.uploaded_file_path(''my_file'')) as top_image; +``` + +[See the source code of this page](https://github.com/lovasoa/SQLpage/blob/main/examples/official-site/examples/handle_picture_upload.sql). +' as contents_md; \ No newline at end of file diff --git a/examples/official-site/examples/layouts.sql b/examples/official-site/examples/layouts.sql index 63f6cf24..41a9ab71 100644 --- a/examples/official-site/examples/layouts.sql +++ b/examples/official-site/examples/layouts.sql @@ -1,18 +1,4 @@ -select - 'shell' as component, - 'SQLPage' as title, - '/' as link, - 'layouts' as menu_item, - 'chart' as menu_item, - 'tabs' as menu_item, - 'hash_password' as menu_item, - COALESCE($layout,'boxed') as layout, - 'Documentation for the SQLPage low-code web application framework.' as description, - 'Poppins' as font, - 'layout' as icon, - 'https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js' as javascript, - 'https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js' as javascript, - '/prism-tabler-theme.css' as css; +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; select 'text' as component, ' # Layouts diff --git a/examples/official-site/examples/tabs.sql b/examples/official-site/examples/tabs.sql index c3fd50e1..97746144 100644 --- a/examples/official-site/examples/tabs.sql +++ b/examples/official-site/examples/tabs.sql @@ -1,8 +1,4 @@ -SELECT 'shell' as component, 'SQLPage' as title, - 'chart' as menu_item, - 'layouts' as menu_item, - 'tabs' as menu_item, - 'show_variables' as menu_item; +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; create table if not exists tab_example_cards as select 'Leaf' as title, 'Leaf_1_web' as img, 'f4' as prefix, 'green' as color, 'Autumn''s dance begins, Crimson leaves in breezy waltz, Nature''s fleeting art.' as description union all diff --git a/examples/official-site/index.sql b/examples/official-site/index.sql index a2173dc2..5d47d254 100644 --- a/examples/official-site/index.sql +++ b/examples/official-site/index.sql @@ -1,16 +1,7 @@ select 'http_header' as component, 'public, max-age=600, stale-while-revalidate=3600, stale-if-error=86400' as "Cache-Control"; --- Using the 'shell' component at the top allows you to customize your web page, giving it a title and a description -select 'shell' as component, - 'SQLPage' as title, - 'database' as icon, - '/' as link, - 'en-US' as language, - 'Web development, simplified ! Create robust, beautiful web applications with just SQL queries. Build webapps on a low-code sql-only platform.' as description, - 'blog' as menu_item, - 'documentation' as menu_item, - 19 as font_size, - 'Poppins' as font, - './rss.sql' as rss; + +-- Fetch the page title and header from the database +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; SELECT 'hero' as component, 'SQLPage' as title, diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 5db1035c..e22808cb 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -775,24 +775,39 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th ', json('[{ "component": "shell", - "title": "SQLPage documentation", + "title": "SQLPage", + "icon": "database", "link": "/", "menu_item": [ - {"link": "index.sql", "title": "Home"}, + {"title": "About", "submenu": [ + {"link": "/safety.sql", "title": "Security"}, + {"link": "/performance.sql", "title": "Performance"}, + {"link": "//github.com/lovasoa/SQLpage/blob/main/LICENSE.txt", "title": "License"} + ]}, + {"title": "Examples", "submenu": [ + {"link": "/examples/tabs.sql", "title": "Tabs"}, + {"link": "/examples/layouts.sql", "title": "Layouts"}, + {"link": "/examples/handle_picture_upload.sql", "title": "File uploads"}, + {"link": "//github.com/lovasoa/SQLpage/blob/main/examples/", "title": "All examples & demos"} + ]}, {"title": "Community", "submenu": [ {"link": "blog.sql", "title": "Blog"}, - {"link": "//github.com/lovasoa/sqlpage/issues", "title": "Issues"}, + {"link": "//github.com/lovasoa/sqlpage/issues", "title": "Report a bug"}, {"link": "//github.com/lovasoa/sqlpage/discussions", "title": "Discussions"}, {"link": "//github.com/lovasoa/sqlpage", "title": "Github"} ]}, - "functions", - "components" + {"title": "Documentation", "submenu": [ + {"link": "/your-first-sql-website", "title": "Getting started"}, + {"link": "/components.sql", "title": "All Components"}, + {"link": "/functions.sql", "title": "SQLPage Functions"}, + {"link": "/custom_components.sql", "title": "Custom Components"}, + {"link": "//github.com/lovasoa/SQLpage/blob/main/configuration.md#configuring-sqlpage", "title": "Configuration"} + ]} ], "layout": "boxed", "language": "en-US", "description": "Documentation for the SQLPage low-code web application framework.", "font": "Poppins", - "icon": "book", "javascript": ["https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js", "https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"], "css": "/prism-tabler-theme.css", diff --git a/examples/official-site/your-first-sql-website/index.sql b/examples/official-site/your-first-sql-website/index.sql index e23c6a73..6c34919b 100644 --- a/examples/official-site/your-first-sql-website/index.sql +++ b/examples/official-site/your-first-sql-website/index.sql @@ -1,15 +1,7 @@ select 'http_header' as component, 'public, max-age=300, stale-while-revalidate=3600, stale-if-error=86400' as "Cache-Control"; -select 'shell' as component, - 'Your SQL Website' as title, - 'database' as icon, - '/' as link, - 'en-US' as language, - 'Get started with SQLPage: short tutorial for making a SQL-only website' as description, - 'documentation' as menu_item, - 20 as font_size, - 'Poppins' as font; +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; SELECT 'hero' as component, 'Your first SQL Website' as title,