V0.19.x : broken custom shell top menu

gourk commented 4 months ago

Introduction

I wrote a custom shell component in August to display a custom menu. It works fine after you help me here

But since v.19.x, the menu isn't visible anymore without error message.

To Reproduce

use this shell.handlebars page

<!DOCTYPE html>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px">
<head>
    <meta charset="utf-8"/>
    <title>{{default title "SQLPage"}}</title>

    <link rel="stylesheet" href="/{{static_path 'sqlpage.css'}}">
   {{#each (to_array css)}}
        {{#if this}}
            <link rel="stylesheet" href="{{this}}">
        {{/if}}
   {{/each}}

   {{#if font}}
        <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;}</style>
    {{/if}}

    <script src="/{{static_path 'sqlpage.js'}}" defer></script>
    {{#each (to_array javascript)}}
        {{#if this}}
            <script src="{{this}}" defer></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}}
    <meta name="generator" content="SQLPage"/>
</head>

<body class="layout-boxed">
<div class="page">
    {{#if title}}
        <nav class="navbar navbar-expand-md navbar-light">
            <div class="container-fluid">
                <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}}
                    {{title}}
                </a>
                <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" id="navbar-menu">
                    <ul class="navbar-nav ms-auto">
                        {{#each (parse_json menu_item)}}
                            <li class="nav-item">
                                <a class="nav-link text-capitalize" href="{{menulink}}">{{menuname}}</a>
                            </li>
                        {{/each}}
                    </ul>
                    {{#if search_target}}
                        <form class="d-flex" role="search" target="{{search_target}}">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                                   name="search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    {{/if}}
                </div>
            </div>
        </nav>
    {{/if}}
    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3">
        {{~#each_row~}}{{~/each_row~}}
    </main>
</div>
<div class="w-100 text-center fs-6 my-2 text-secondary">
    {{#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.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
    {{/if}}
</div>
</body>
</html>

This index.sql

Select 'shell' as component,
    'MyTitle' AS title,
    'heart-filled' AS icon,
    '/' AS link,
    (select json('[
         {"menulink":"Connexion.sql","menuname":"Connexion"},
         {"menulink":"./user/inscription.sql","menuname":"Inscription"}]')) as menu_item,
    'fr' as lang,
   'MyFooter'  AS footer;

Actual behavior

The top menu is not visible anymore

Expected behavior

The top menu should be visible., like previous version. ![Uploading image.png…]()

Version information

OS: official container (main,v.0.19.0, v.0.19.1)
Database: Postgres
SQLPage Version: v.0.19.0, v.0.19.1

lovasoa commented 4 months ago

Hi and thanks for the report !

I cannot reproduce this; it works for me:

Do you have any idea what I may be doing differently ?

Maybe you can share a zip file with an exact reproduction ?

gourk commented 4 months ago

Here the smallest code to reproduce it sqlpage-bug246.zip

Uncompress and run docker compose up

lovasoa commented 4 months ago

Thanks ! I can reproduce (and fix) the issue !

The docker image was updated in v0.19.

The official docker image now sets SQLPAGE_CONFIGURATION_DIRECTORY=/etc/sqlpage/ by default, and changes the working directory to /var/www/ by default.

The change was buried in the other feature announcements, and did not mention the potential for breakage; you probably did not notice it. I'll make the changelog more explicit !

Here is a fixed, cleaner, docker-compose setup

Directory structure

.
├── config
│   ├── sqlpage.db
│   └── templates
│       └── shell.handlebars
├── docker-compose.yml
└── src
    └── index.sql

Instead of embedding the sqlpage configuration directory (with the custom shell component) inside the public web root, they are now in two distinct folders: config/ and src/

docker-compose.yaml

services:
  pegase:
    image: lovasoa/sqlpage:v0.19.1
    volumes:
      - ./src:/var/www
      - ./config:/etc/sqlpage
    ports:
      - "8080:8080"

We mount config onto /etc/sqlpage and src onto /var/www

gourk commented 4 months ago

Oh I see. I will change my dockerfile according to this. Thanks for your help and for your amazing work

lovasoa / SQLpage