give the website a coherent top bar menu
This commit is contained in:
lovasoa
@@ -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 '
|
||||
|
||||
@@ -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;
|
||||
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;
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user