social previews

Author: lovasoa

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -870,7 +870,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('sidebar', 'Whether the menu defined by menu_item should be displayed on the left side of the page instead of the top. Introduced in v0.27.', 'BOOLEAN', TRUE, TRUE),
     ('sidebar_theme', 'Used with sidebar property, It can be set to "dark" to exclusively set the sidebar into dark theme.', 'BOOLEAN', TRUE, TRUE),
     ('theme', 'Set to "dark" to use a dark theme.', 'TEXT', TRUE, TRUE),
-    ('footer', 'Muted text to display in the footer of the page. This can be used to display a link to the terms and conditions of your application, for instance. By default, shows "Built with SQLPage". Supports links with markdown.', 'TEXT', TRUE, TRUE)
+    ('footer', 'Muted text to display in the footer of the page. This can be used to display a link to the terms and conditions of your application, for instance. By default, shows "Built with SQLPage". Supports links with markdown.', 'TEXT', TRUE, TRUE),
+    ('preview_image', 'The URL of an image to display as a link preview when the page is shared on social media', 'URL', TRUE, TRUE)
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
@@ -887,7 +888,7 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
 ',
      json('[{
             "component": "shell",
-            "title": "SQLPage",
+            "title": "SQLPage: SQL to web pages",
             "icon": "database",
             "link": "/",
             "menu_item": [
@@ -921,7 +922,8 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
             ],
             "layout": "boxed",
             "language": "en-US",
-            "description": "Documentation for the SQLPage low-code web application framework.",
+            "description": "Go from SQL queries to web applications in an instant.",
+            "preview_image": "https://sql.datapage.app/sqlpage_cover_image.webp",
             "font": "Poppins",
             "javascript": [
                 "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js",

sqlpage/templates/shell.handlebars

@@ -14,34 +14,6 @@
         {{/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}}
@@ -53,8 +25,20 @@
             <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 title}}
+        <meta property="og:title" content="{{title}}" />
+    {{/if}}
+    {{#if description}}
+        <meta name="description" content="{{description}}" />
+        <meta property="og:description" content="{{description}}" />
+    {{/if}}
+    {{#if preview_image}}
+        <meta property="og:image" content="{{preview_image}}" />
+        <meta name="twitter:image" content="{{preview_image}}" />
+    {{/if}}
+
     {{#if norobot}}
         <meta name="robots" content="noindex,nofollow">
     {{/if}}