... Finally fixed the parenthesis problem on the docs

sqlpage · Sep 5, 2024 · 920c58a · 920c58a
1 parent 462ef3f
commit 920c58a
Show file tree

Hide file tree

Showing 8 changed files with 357 additions and 3 deletions.
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -1143,4 +1143,4 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('contents_md', 'A description of the list item, displayed as greyed-out text.', 'TEXT', FALSE, FALSE),
 ) x;
 INSERT INTO example(component, description, properties) VALUES
-    ('accordion', 'A basic accordion with Markdown', json('[{"component":"accordion"},{"title":"Beautiful","contents_md": "Lorem *ipsum* dolor sit amet, **consectetur** adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam."},{"title":"Useful","contents_md": "Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis *ipsum*. Praesent **mauris**. Fusce nec tellus sed augue semper porta."},{"title":"Compact","contents_md": "Mauris **ipsum**. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, *nibh*. Quisque volutpat condimentum velit."}]');
+    ('accordion', 'A basic accordion with Markdown', json('[{"component":"accordion"},{"title":"Beautiful","contents_md": "Lorem *ipsum* dolor sit amet, **consectetur** adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam."},{"title":"Useful","contents_md": "Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis *ipsum*. Praesent **mauris**. Fusce nec tellus sed augue semper porta."},{"title":"Compact","contents_md": "Mauris **ipsum**. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, *nibh*. Quisque volutpat condimentum velit."}]'));
diff --git a/examples/todo application/accordion.sql b/examples/todo application/accordion.sql
@@ -0,0 +1,42 @@
+
+
+select 
+    'accordion' as component;
+
+select 
+    'My Title' as title,
+    'This is the accordion content' as contents_md;
+
+SELECT
+    'Another title' as title,
+    'Hi! I''m your first Markdown file in **StackEdit**. If you want to learn about StackEdit, you can read me. If you want to play with Markdown, you can edit me. Once you have finished with me, you can create new files by opening the **file explorer** on the left corner of the navigation bar.
+
+
+# Files
+
+StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible **offline!**
+
+## Create files and folders
+
+The file explorer is accessible using the button in left corner of the navigation bar. You can create a new file by clicking the **New file** button in the file explorer. You can also create folders by clicking the **New folder** button.
+
+## Switch to another file
+
+All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.
+
+## Rename a file
+
+You can rename the current file by clicking the file name in the navigation bar or by clicking the **Rename** button in the file explorer.
+
+## Delete a file
+
+You can delete the current file by clicking the **Remove** button in the file explorer. The file will be moved into the **Trash** folder and automatically deleted after 7 days of inactivity.
+
+## Export a file
+
+You can export the current file by clicking **Export to disk** in the menu. You can choose to export the file as plain Markdown, as HTML using a Handlebars template or as a PDF.
+
+
+# Synchronization
+
+Synchronization is one of the biggest features of StackEdit. It enables you to synchronize any file in your workspace with other files stored in your **Google Drive**, your **Dropbox** and your **GitHub** accounts. This allows you to keep writing on other devices, collaborate with people you share the file with, integrate easily into your workflow... The synchronization mechanism takes place every minute in the background, downloading, merging, and uploading file modifications.' as contents_md;
diff --git a/examples/todo application/index.sql b/examples/todo application/index.sql
@@ -17,4 +17,11 @@ select
     'todo_form.sql'     as link,
     'green' as color,
     'Add new todo'  as title,
-    'circle-plus'  as icon;
+    'circle-plus'  as icon;
+select
+    'card' as component,
+    'Accordion component showcase' as title;
+
+select
+    '/accordion.sql?_sqlpage_embed' as embed,
+    12 as width;
diff --git a/examples/todo application/shell.sql b/examples/todo application/shell.sql
@@ -1,4 +1,7 @@
 select 'shell' as component,
     printf('Todo list (%d)', count(*)) as title,
-    'timeline' as menu_item
+    'timeline' as menu_item,
+    TRUE as sidebar,
+    'dark' as theme,
+    './sqlpage.css' as css
 from todos;
diff --git a/examples/todo application/sqlpage.css b/examples/todo application/sqlpage.css
@@ -0,0 +1,66 @@
+[data-bs-theme="blue"] {
+    --tblr-primary: #eb4242; /* Índigo como color primario */
+    --tblr-secondary: #6c7a91;
+    --tblr-success: #2fb344;
+    --tblr-info: #4299e1;
+    --tblr-warning: #f76707;
+    --tblr-danger: #d63939;
+    --tblr-light: #f6f8fb;
+    --tblr-dark: #182433;
+    --tblr-muted: #6c7a91;
+
+    --tblr-body-color: #9CAFB7; /* texto */
+    --tblr-body-bg:  #D0D38F; /* fondo */
+    --tblr-emphasis-color: #ADB993; /* hover */
+    --tblr-bg-surface: #F6CA83 ; /* fondo 2 */
+    --tblr-bg-surface-dark:#949D6A; /* Scroll bar bg*/
+    --tblr-secondary-color: rgba(24, 36, 51, 0.75);
+    --tblr-secondary-bg: #3949ab; /* Fondo secundario más claro que el primario */
+    --tblr-tertiary-color: rgba(255, 255, 255, 0.5);
+    --tblr-tertiary-bg: #5c6bc0;
+
+    --tblr-primary-text-emphasis: #1a237e;
+    --tblr-secondary-text-emphasis: #2b313a;
+    --tblr-success-text-emphasis: #13481b;
+    --tblr-info-text-emphasis: #1a3d5a;
+    --tblr-warning-text-emphasis: #632903;
+    --tblr-danger-text-emphasis: #561717;
+    --tblr-light-text-emphasis: #3a4859;
+    --tblr-dark-text-emphasis: #3a4859;
+
+    --tblr-primary-bg-subtle: #e8eaf6; /* Fondo sutil con tonalidad índigo claro */
+    --tblr-secondary-bg-subtle: #e2e4e9;
+    --tblr-success-bg-subtle: #d5f0da;
+    --tblr-info-bg-subtle: #d9ebf9;
+    --tblr-warning-bg-subtle: #fde1cd;
+    --tblr-danger-bg-subtle: #f7d7d7;
+    --tblr-light-bg-subtle: #f7f9fb;
+    --tblr-dark-bg-subtle: #8a97ab;
+
+    --tblr-primary-border-subtle: #c5cae9; /* Borde sutil con tonalidad índigo claro */
+    --tblr-secondary-border-subtle: #c4cad3;
+    --tblr-success-border-subtle: #ace1b4;
+    --tblr-info-border-subtle: #b3d6f3;
+    --tblr-warning-border-subtle: #fcc29c;
+    --tblr-danger-border-subtle: #efb0b0;
+    --tblr-light-border-subtle: #dce1e7;
+    --tblr-dark-border-subtle: #6c7a91;
+
+    --tblr-link-color: #3f51b5; /* Enlaces con un tono índigo */
+    --tblr-link-hover-color: #303f9f;
+    --tblr-link-color-rgb: 63, 81, 181;
+    --tblr-link-hover-color-rgb: 48, 63, 159;
+
+    --tblr-code-color: var(--tblr-gray-600);
+    --tblr-highlight-color: #e0e7ff;
+    --tblr-highlight-bg: #3949ab;
+    --tblr-border-color: #3949ab;
+    --tblr-border-color-translucent: rgba(63, 81, 181, 0.1);
+    --tblr-box-shadow: rgba(63, 81, 181, 0.15) 0 2px 4px 0;
+
+    --tblr-bg-forms:#000000;
+    --tblr-form-valid-color: #2fb344;
+    --tblr-form-valid-border-color: #2fb344;
+    --tblr-form-invalid-color: #d63939;
+    --tblr-form-invalid-border-color: #d63939;
+}
diff --git a/examples/todo application/sqlpage.exe b/examples/todo application/sqlpage.exe
diff --git a/examples/todo application/sqlpage/templates/accordion.handlebars b/examples/todo application/sqlpage/templates/accordion.handlebars
@@ -0,0 +1,18 @@
+<div class="accordion" id="{{default accordion_id 'accordion_default'}}">
+    {{#each_row}}
+    <div class="accordion-item">
+        <h2 class="accordion-header" id="heading-{{@row_index}}">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-{{@row_index}}" aria-controls="collapse-{{@index}}">
+                {{title}}
+            </button>
+        </h2>
+        <div id="collapse-{{@row_index}}" class="accordion-collapse collapse {{#if (eq @row_index 0)}}show{{/if}}"
+            aria-labelledby="heading-{{@row_index}}" data-bs-parent="#{{default accordion_id 'accordion_default'}}">
+            <div class="accordion-body">
+                {{{markdown contents_md}}}
+            </div>
+        </div>
+    </div>
+    {{/each_row}}
+</div>
diff --git a/examples/todo application/sqlpage/templates/shell.handlebars b/examples/todo application/sqlpage/templates/shell.handlebars
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="{{language}}" style="font-size: {{default font_size 18}}px" {{#if class}}class="{{class}}" {{/if}}>
+<head>
+    <meta charset="utf-8" />
+    <title>{{default title "SQLPage"}}</title>
+    <link rel="icon" href="{{#if favicon}}{{favicon}}{{else}}{{static_path 'favicon.svg'}}{{/if}}">
+    {{#if manifest}}
+        <link rel="manifest" href="{{manifest}}">
+    {{/if}}
+
+
+    <link rel="stylesheet" href="{{static_path 'sqlpage.css'}}">
+    {{#each (to_array css)}}
+        {{#if this}}
+            <link rel="stylesheet" href="{{this}}">
+        {{/if}}
+    {{/each}}
+
+    {{#if font}}
+        {{#if (starts_with font "/")}}
+            <style>
+                @font-face {
+                    font-family: 'LocalFont';
+                    src: url('{{font}}') format('woff2');
+                    font-weight: normal;
+                    font-style: normal;
+                }
+
+                :root {
+                    --tblr-font-sans-serif: 'LocalFont', Arial, sans-serif;
+                }
+            </style>
+        {{else}}
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
+        <style>
+            :root {
+                --tblr-font-sans-serif: '{{font}}',
+                Arial,
+                sans-serif;
+            }
+        </style>
+        {{/if}}
+    {{/if}}
+
+    <script src="{{static_path 'sqlpage.js'}}" defer nonce="{{@csp_nonce}}"></script>
+    {{#each (to_array javascript)}}
+        {{#if this}}
+            <script src="{{this}}" defer nonce="{{@../csp_nonce}}"></script>
+        {{/if}}
+    {{/each}}
+    {{#each (to_array javascript_module)}}
+        {{#if this}}
+            <script src="{{this}}" type="module" defer nonce="{{@../csp_nonce}}"></script>
+        {{/if}}
+    {{/each}}
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="{{description}}" />
+    {{#if norobot}}
+        <meta name="robots" content="noindex,nofollow">
+    {{/if}}
+
+    {{#if refresh}}
+        <meta http-equiv="refresh" content="{{refresh}}">
+    {{/if}}
+    {{#if rss}}
+        <link rel="alternate" type="application/rss+xml" title="{{title}}" href="{{rss}}">
+    {{/if}}
+    <meta name="generator" content="SQLPage" />
+    {{#if social_image}}
+        <meta property="og:image" content="{{social_image}}" />
+    {{/if}}
+</head>
+
+{{!-- Partial for menu_items to not duplicate logic --}}
+{{#*inline "menu-items"}}
+    <ul class="navbar-nav {{#if sidebar}}pt-lg-3{{else}}ms-auto{{/if}}">
+        {{~#each (to_array menu_item)~}}
+            {{~#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}}
+                {{~#with (parse_json this)}}
+                    {{#if (or (or this.title this.icon) this.image)}}
+                        <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
+                            <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
+                                {{~#if this.submenu}} data-bs-toggle="dropdown" data-bs-auto-close="outside" {{/if~}}
+                                role="button"
+                            >
+                                {{~#if this.image~}}
+                                    <span {{~#if this.title}} class="me-1"{{/if}}>
+                                        {{~#if (eq this.size 'sm')}}
+                                            <img width=16 height=16 src="{{this.image}}">
+                                        {{~else~}}
+                                            <img width=24 height=24 src="{{this.image}}">
+                                        {{~/if~}}
+                                    </span>
+                                {{~/if~}}
+                                {{#if this.icon}}
+                                    {{#if this.title}}<span class="me-1">{{/if}}
+                                        {{~icon_img this.icon~}}
+                                    {{#if this.title}}</span>{{/if}}
+                                {{/if}}
+                                {{~this.title~}}
+                            </a>
+                            {{~#if this.submenu~}}
+                                <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                    {{~#each this.submenu~}}
+                                        {{#if (or (or this.title this.icon) this.image)}}
+                                            <a class="dropdown-item" href="{{this.link}}">
+                                                {{~#if this.image~}}
+                                                    <span {{~#if this.title}} class="me-1"{{/if}}>
+                                                        {{~#if (eq ../this.size 'sm')}}
+                                                            <img width=16 height=16 src="{{this.image}}">
+                                                        {{~else~}}
+                                                            <img width=24 height=24 src="{{this.image}}">
+                                                        {{~/if~}}
+                                                    </span>
+                                                {{~/if~}}
+                                                {{#if this.icon}}
+                                                    {{#if this.title}}<span class="me-1">{{/if}}
+                                                        {{~icon_img this.icon~}}
+                                                    {{#if this.title}}</span>{{/if}}
+                                                {{/if}}
+                                                {{~this.title~}}
+                                            </a>
+                                        {{~/if~}}
+                                    {{~/each~}}
+                                </div>
+                            {{/if}}
+                        </li>
+                    {{/if}}
+                {{/with}}
+            {{~else}}
+                {{~#if (gt (len this) 0)~}}
+                    <li class="nav-item">
+                        <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
+                    </li>
+                {{~/if~}}
+            {{~/if~}}
+        {{~/each}}
+    </ul>
+    {{#if search_target}}
+        <form class="d-flex" role="search" action="{{search_target}}">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_value}}">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+        </form>
+    {{/if}}
+{{/inline}}
+
+<body class="layout-{{#if sidebar}}fluid{{else}}{{default layout 'boxed'}}{{/if}}" {{#if theme}}data-bs-theme="{{theme}}" {{/if}}>
+    <div class="page">
+        {{#if (or (or title (or icon image)) menu_item)}}
+        <header id="sqlpage_header">
+        {{#if sidebar}}
+        <aside class="navbar navbar-vertical navbar-expand-lg" {{#if sidebar_theme}}data-bs-theme="{{sidebar_theme}}" {{/if}}>
+            <div class="container-fluid">
+                <button class="navbar-toggler collapsed" type="button" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <h1 class="navbar-brand navbar-brand-autodark"">
+                    <a style="text-decoration: none" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+                        {{#if image}}
+                            <img src="{{image}}" alt="{{title}}" height="32" class="navbar-brand-image">
+                        {{/if}}
+                        {{#if icon}}
+                            {{~icon_img icon~}}
+                        {{/if}}
+                        <span class="pe-2 pe-lg-0 align-middle">{{title}}</span>
+                    </a>
+                </h1>
+                <div class="navbar-collapse collapse" id="sidebar-menu">
+                    {{> menu-items menu_item=menu_item}}
+                </div>
+            </div>
+        </aside>
+        {{else}}
+        <nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
+            <div class="container-fluid gap-2 justify-content-start" style="min-width:0">
+                <a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+                    {{#if image}}
+                        <img src="{{image}}" alt="{{title}}" width="32" height="32" class="navbar-brand-image">
+                    {{/if}}
+                    {{#if icon}}
+                        {{~icon_img icon~}}
+                    {{/if}}
+                </a>
+                {{#if title}}
+                    <h1 class="mb-0 fs-2 text-truncate flex-grow-1" style="flex-basis:0">
+                        <a class="text-decoration-none" href="{{#if link}}{{link}}{{else}}/{{/if}}">{{title}}</a>
+                    </h1>
+                {{/if}}
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse flex-grow-0" id="navbar-menu">
+                    {{> menu-items menu_item=menu_item}}
+                </div>
+            </div>
+        </nav>
+        </header>
+    {{/if}}
+{{/if}}
+        <div class="page-wrapper">
+            <main class="page-body container-xl pt-3 px-md-5 px-sm-3 {{#if fixed_top_menu}}mt-5{{#unless (eq layout 'boxed')}}pt-5{{/unless}}{{/if}}" id="sqlpage_main_wrapper">
+                {{~#each_row~}}{{~/each_row~}}
+            </main>
+        </div>
+        <footer class="w-100 text-center fs-6 my-2 text-secondary" id="sqlpage_footer">
+        {{#if footer}}
+            {{{markdown footer}}}
+        {{else}}
+            <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
+            Built with <a class="text-reset" href="https://sql.datapage.app"
+                title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
+        {{/if}}
+        </footer>
+    </div>
+</body>
+</html>