The shell component

Example 1

This example contains the values used for the shell of the page you are currently viewing.

The menu_item property is used both in its simple string form, to generate a link named "functions" that points to "functions.sql", and in its object form, to generate a dropdown menu named "Community" with links to the blog, the github repository, and the issues page.

The object form can be used directly only on database engines that have a native JSON type. On other engines (such as SQLite), you can use the dynamic component to generate the same result.

You see the page layouts demo for a live example of the different layouts.

select 
    'shell'                     as component,
    'SQLPage: SQL to web pages' as title,
    'database'                  as icon,
    '/'                         as link,
    JSON('{"title":"About","submenu":[{"link":"/safety.sql","title":"Security","icon":"lock"},{"link":"/performance.sql","title":"Performance","icon":"bolt"},{"link":"//github.com/sqlpage/SQLPage/blob/main/LICENSE.txt","title":"License","icon":"file-text"},{"link":"/blog.sql","title":"Articles","icon":"book"}]}') as menu_item,
    JSON('{"title":"Examples","submenu":[{"link":"/examples/tabs/","title":"Tabs","icon":"layout-navbar"},{"link":"/examples/layouts.sql","title":"Layouts","icon":"layout"},{"link":"/examples/multistep-form","title":"Forms","icon":"edit"},{"link":"/examples/handle_picture_upload.sql","title":"File uploads","icon":"upload"},{"link":"/examples/authentication/","title":"Password protection","icon":"password-user"},{"link":"//github.com/sqlpage/SQLPage/blob/main/examples/","title":"All examples & demos","icon":"code"}]}') as menu_item,
    JSON('{"title":"Community","submenu":[{"link":"/blog.sql","title":"Blog","icon":"book"},{"link":"//github.com/sqlpage/SQLPage/issues","title":"Report a bug","icon":"bug"},{"link":"//github.com/sqlpage/SQLPage/discussions","title":"Discussions","icon":"message"},{"link":"//github.com/sqlpage/SQLPage","title":"Github","icon":"brand-github"}]}') as menu_item,
    JSON('{"title":"Documentation","submenu":[{"link":"/your-first-sql-website","title":"Getting started","icon":"book"},{"link":"/components.sql","title":"All Components","icon":"list-details"},{"link":"/functions.sql","title":"SQLPage Functions","icon":"math-function"},{"link":"/custom_components.sql","title":"Custom Components","icon":"puzzle"},{"link":"//github.com/sqlpage/SQLPage/blob/main/configuration.md#configuring-sqlpage","title":"Configuration","icon":"settings"}]}') as menu_item,
    'boxed'                     as layout,
    'en-US'                     as language,
    'Go from SQL queries to web applications in an instant.' as description,
    'https://sql-page.com/sqlpage_social_preview.webp' as preview_image,
    'Poppins'                   as font,
    'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js' as javascript,
    'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/sql.min.js' as javascript,
    'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/handlebars.min.js' as javascript,
    'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/languages/json.min.js' as javascript,
    '/highlightjs-launch.js'    as javascript,
    '/highlightjs-tabler-theme.css' as css,
    'Official [SQLPage](https://sql-page.com) documentation' as footer;

Example 2

A page without a shell

SQLPage provides the shell-empty component to create a page without a shell. In this case, the html and body tags are not generated, and the components are rendered directly in the page without any styling, navigation bar, footer, or dynamic content. This is useful when you want to generate a snippet of HTML that can be dynamically included in a larger page.

Any component whose name starts with shell will be considered as a shell component, so you can also create your own shell component.

If you generate your own HTML from a SQL query, you can also use the shell-empty component to include it in a page. Make sure you know what you are doing, and be careful to escape the HTML properly, as you are stepping out of the safe SQLPage framework and into the wild world of HTML.

select 
    'shell-empty' as component,
    '<!DOCTYPE html>
<html>
<head>
  <title>My page</title>
</head>
<body>
  <h1>My page</h1>
</body>
</html>' as html;