Success stories page

examples/official-site/assets/stories/README.md

@@ -0,0 +1 @@
+This directory contains the images used on the stories page.

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

@@ -1380,6 +1380,7 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
                     {"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": "/stories.sql", "title": "Stories", "icon": "user-screen"},
                     {"link": "//github.com/sqlpage/SQLPage", "title": "Github", "icon": "brand-github"}
                 ]},
                 {"title": "Documentation", "submenu": [

examples/official-site/sqlpage/migrations/73_stories.sql

@@ -0,0 +1,23 @@
+CREATE TABLE stories (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    title TEXT NOT NULL,
+    publication_date TEXT NOT NULL,
+    contents_md TEXT NOT NULL,
+    optional_contents_md TEXT,
+    image TEXT,
+    website TEXT,
+    git_repository TEXT,
+    tags JSON
+);
+
+INSERT INTO stories(title, publication_date, contents_md, optional_contents_md, image, website, git_repository, tags) VALUES
+    (
+        'Greater Lincolnshire species data bank',
+        '2025-11-20 21:15:00',
+        'This is an SQLPage based system I''ve developed for the organisation I work for to collate information on species within our area, running on FreeBSD and MariaDB. Collating the information is still a work in progress, but there''s a complete example data sheet at https://glincsson.glnp.org.uk/view?taxon_list_item_key=NBNORG0000018213 which pulls in all the various elements of information and a complete group listing at https://glincsson.glnp.org.uk/taxon_group?taxon_group=60 showing various colour coding and indicators.',
+        'SQLPage has made it trivial to implement this and allowed us to easily add in new aspects based on feedback from others. Most of it is stock SQLPage, but there are a couple of simple modified/custom components, with some custom javascript to allow saving png images of the maps. Its something we''ve long been wanted to do and have attempted in various guises over the years but using SQLPage is the first time we''ve been able to achieve exactly what we wanted (and more). And it''s been fun!',
+        'glsdb.jpg',
+        'https://glincsson.glnp.org.uk',
+        NULL,
+        '["MariaDB"]'
+    );

examples/official-site/sqlpage/templates/shell-home.handlebars

@@ -1307,6 +1307,7 @@
         <a href="/your-first-sql-website/">Download</a>
         <a href="/documentation.sql">Documentation</a>
         <a href="/examples/tabs">Examples</a>
+        <a href="/stories">Stories</a>
         <a href="https://github.com/sqlpage/SQLPage">Github</a>
         <a href="https://datapage.app">Hosting</a>
     </nav>

examples/official-site/sqlpage/templates/stories.handlebars

@@ -0,0 +1,14 @@
+<h1 class="mt-2 mb-0"><a href="stories.sql?id={{id}}">{{title}}</a></h1>
+<div class="remove-bottom-margin markdown mb-4">
+    <span class="badge bg-grey-lt text-grey-lt-fg">{{publication_date}}</span>
+
+    <div>
+    {{ ~#each (to_array tags) }}
+        <a href="stories?filter={{this}}" class="badge bg-yellow-lt">{{this}}</a>
+    {{~/each}}
+    </div>
+
+    <span remove-bottom-margin>
+        {{{~markdown truncated_contents~}}}<a href="stories?id={{id}}{{#if filter neq ''}}&filter={{filter}}{{/if}}">Read the story</a>
+    </span>
+</div>

examples/official-site/sqlpage/templates/story.handlebars

@@ -0,0 +1,23 @@
+<h1 class="mt-2 mb-0">{{title}}</h1>
+
+<div class="remove-bottom-margin markdown mb-4">
+    <span class="badge bg-gray-lt text-white-lt-fg">{{publication_date}}</span>
+    {{{~markdown contents_md~}}}
+</div>
+
+{{#if image}}
+    <div class="card my-2 col-md-6 mx-auto"><img src="assets/stories/{{image}}" alt="image"></div>
+{{/if}}
+
+{{#if optional_contents_md}}
+    <div class="remove-bottom-margin markdown mb-4">{{{~markdown optional_contents_md~}}}</div>
+{{/if}}
+
+<div class="remove-bottom-margin mb-4">
+    {{#if website}}<a href="{{website}}" class="badge bg-yellow-lt">{{website}}</a>{{/if}}
+    {{#if git_repository}}<a href="{{git_repository}}" class="badge bg-green-lt">{{git_repository}}</a>{{/if}}
+</div>
+
+<div class="text-center">
+    <a href='stories{{#if filter neq=''}}?filter={{filter}}{{/if}}'>Back</a>
+</div>

examples/official-site/stories.sql

@@ -0,0 +1,53 @@
+SELECT 'http_header' AS component, 
+    'no-store, no-cache, must-revalidate, max-age=0' AS "Cache-Control",
+    'no-cache' AS "pragma",
+    '0' AS "expires",
+    '<https://sql-page.com/safety>; rel="canonical"' AS "Link";
+
+SELECT 'dynamic' AS component, json_patch(json_extract(properties, '$[0]'), json_object(
+    'title', 'SQLPage Success Stories'
+)) AS properties
+FROM example WHERE component = 'shell' LIMIT 1;
+
+SET TEXT_MAX_LENGTH = 300;
+
+SELECT 
+    'alert'                    AS component,
+    CONCAT('You have selected the "', $filter, '" filter.') AS title,
+    'filter'                   AS icon,
+    'teal'                     AS color,
+    TRUE                       AS dismissible,
+    '[Click here to deactivate it.](stories)' AS description_md
+WHERE $id IS NULL 
+  AND $filter IS NOT NULL
+
+SELECT
+    'stories' AS component, 
+    $filter AS filter,
+    id,
+    title,
+    publication_date,
+    tags,
+    CASE
+        WHEN LENGTH(contents_md) > CAST($EXT_MAX_LENGTH AS INTEGER) THEN SUBSTR(contents_md, 1, CAST($TEXT_MAX_LENGTH AS INTEGER)) || '...'
+        ELSE contents_md
+    END as truncated_contents
+FROM stories
+WHERE 
+        $id IS NULL
+  AND   ($filter IS NULL OR EXISTS (SELECT 1 FROM json_each(tags) WHERE value LIKE $filter COLLATE NOCASE))
+ORDER BY publication_date DESC;
+
+SELECT
+    'story' AS component, 
+    $filter AS filter,
+    id,
+    title,
+    publication_date,
+    contents_md,
+    optional_contents_md,
+    image,
+    website,
+    git_repository
+FROM stories
+WHERE id = $id;