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 websites' 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":"/extensions-to-sql","title":"Extensions to SQL","icon":"cube-plus"},{"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,
    JSON('{"title":"Search","link":"/search"}') 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,
    'dark'                  as theme,
    '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,
    '/assets/highlightjs-launch.js' as javascript,
    '/assets/highlightjs-and-tabler-theme.css' as css,
    '[Built with SQLPage](https://github.com/sqlpage/SQLPage/tree/main/examples/official-site)' as footer;

Example 2

This example shows how to set menu items as active in the navigation, so that they are highlighted in the nav bar.

In this example you can see that two menu items are created, "Home" and "About" and the "Home" tab is marked as active.

select 
    'shell'                   as component,
    'SQLPage: SQL websites'   as title,
    'database'                as icon,
    '/'                       as link,
    JSON('{"title":"Home","active":true}') as menu_item,
    JSON('{"title":"About"}') as menu_item;

Example 3

Returning custom HTML, XML, plain text, or other formats

Use shell-empty to opt out of SQLPage's component system and return raw data directly.

By default, SQLPage wraps all your content in a complete HTML page with navigation and styling. The shell-empty component tells SQLPage to skip this HTML wrapper and return only the raw content you specify.

Use it to create endpoints that return things like

• XML (for JSON, use the json component)
• plain text or markdown content (for instance for consumption by LLMs)
• a custom data format you need

When using shell-empty, you should use the http_header component first to set the correct content type (like application/json or application/xml).

select 
    'http_header'     as component,
    'application/xml' as "Content-Type";
select 
    'shell-empty' as component,
    '<?xml version="1.0"?>
 <user>
   <account>42</account>
   <login>john.doe</login>
 </user>' as contents;

Example 4

Generate your own HTML

If you generate your own HTML from a SQL query, you can also use the shell-empty component to include it in a page. This is useful when you want to generate a snippet of HTML that can be dynamically included in a larger 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.

In this scenario, you can use the html property, which serves as an alias for the contents property. This property improves code readability by clearly indicating that you are generating HTML. Since SQLPage returns HTML by default, there is no need to specify the content type in the HTTP header.

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