custom card content

[j2l]

I don't get how to populate a custom card with its content, so far, I can manually dig into the content but it's non-sense:

const renderBody = (title, body) =>
  renderLayout({
    blockDispatch,
    layout:
      typeof body === "string" ? { type: "card", title, contents: body } : body,
  });

const blockDispatch = {
  card: ({ title, contents }) =>
    div(
      {
        class: "card w-96 bg-base-100 shadow-xl"
      },
      div(
        {
          class: "card-body"
        },
        h1(
          {
            class: "card-title"
          },title
        ),
        p(contents.above[0].contents)
      )
    ),

[glutamate]

What exactly are you trying to do @j2l ? Are you trying to change the appearance of all cards, or are you trying to add a custom card somewhere? If it is the latter, this is probably not the best place to do it, I would just create a Code block in the builder.

If you're trying to change the appearance of all the cards, what are you trying to do?

the div, h1 etc just generate html. The first document of every tag can be an object that contains the attributes.

This is quite an old theme and there's quite a lot of work to make it catch up with changes in other themes. any-bootstrap-theme doesn't even have a custom card renderer, it relies on the one built into Saltcorn here. It might be best to remove the card renderer here

[j2l]

Well, I'm trying to start building a theme from scratch. No bootstrap, I started with just HTML, then added Tailwind and daisyUI. Side menu went well, even accordions. But there's no card or some other tags within content. Any-bootstrap-theme is too tied to bootstrap and complex (and has no card), so I went with tabler to get how it works.

How to remove the card renderer and build another one? Is it possible for mere mortal like me? :smile:

[glutamate]

This sounds a bit like a path of pain and suffering. Saltcorn is expecting a boostrap-like framework. Lots of aspects are generating HTML with classes that expect some kind of bootstrap functionality, for instance the columns in the builder. I would suggest starting with one of the many bootstrap-based themes (core bootstrap, tabler, mdbootstrap, the many creative tim themes..)

It is possible that this restriction could be loosed in the future, but that is not a top priority right now.

[j2l]

I see. Even with bootstrap, any hint to custom card and content? Is there a dynamic way instead of manual p(contents.above[0].contents)?

[glutamate]

If you are looking for additional capabilities in styling cards, I would rather add those in the Saltcorn builder if you let me know what is needed. You shouldn't create a new theme to add custom content. The core cards are much more flexible than the code in the tabler theme (here is the code: https://github.com/saltcorn/saltcorn/blob/master/packages/saltcorn-markup/layout.ts#L318-L410)

[j2l]

Does it mean, based on your link, I could adapt for my CSS?

More globally, bootstrap themes are dashboard oriented, it's for admins, not a great UX for visitors and users. For example, see the cards (and other components) from daisyUI: https://daisyui.com/components/card/ Tailwind can be tailored down to the bare minimum, based on usage, and daisyUI brings a great UX that you can extend using tailwind. Among modern CSS, it's not the only solution, and it's far more flexible than monolith bootstrap.

And at least, you manage if you need calls to Google (because you can't simply download woff fonts from them, hello telemetry) and FontAwesome. The only awesomeness in fontawesome is, for them, beyond telemetry, the ability to set a paywall at 10K page views for stuff we already have in any computer, tablet and phone: Unicode. It ships 1,112,064 characters, like any arrows you can imagine, here's a sample: 🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠴🠵🠶🠷🡄🡅🡆🡇🡴🡵🡶🡷🡸🡹🡺🡻🢐🢑🢒🢓🢔🢕🢖🢗.

To be more precise about your question, I'd need more than cards, for example:

• custom buttons and layouts unicode for icons: ＋🖉🖊🖋🖌🖍🗑📶
• tabs (really visible ones)
• chat bubble (chat room)
• Footer and bottom navigation
• CSS Animations
• custom carousel and stack
• content collapse (accordion)
• rating (it's gone from Saltcorn for now, CSS could provide a simple solution)
• steps (for questionnaires)
• toasts (alerts and notifications)

I love Saltcorn, and I think it deserves a better UX than dashboard bootstrap themes. Maybe I'm wrong and I didn't find enough about Bootstrap though. If you see a way to customize stuff in Saltcorn using bootstrap, I'm open.

[glutamate]

Thanks, these are some good ideas. Some specific comments:

• fontawsome is not subject to telemetry or download limits if you use any other Saltcorn theme. Fontawesome is served locally.
• I think it is possible to download google fonts and host locally, it is definitely a bit more complicated, but should be possible with some effort. At some point I had an ambition to build a Saltcorn google-fonts plugin to handle this.
• Custom buttons example. Looks really interesting. I think we should think about how this could be done, it's not just a question of CSS layout but also of specifying which bit is the clickable button.
• Tabs. I agree that most of the bootstrap themes have tabs that are too invisible but I think this should be something that can be internally fixed in the bootstrap theme customisation. You can see in Navs section of https://bootstrap.build/app
• chat bubble. We can probably just add some CSS here?
• Footer and bottom navigation, CSS animations. see below
• accordion: we do have this in the builder (under Tabs) maybe it just needs a few more settings
• rating - we have star rating field views.
• Steps - i think this is coming, it has been ordered by a company using Saltcorn but not top priority
• toasts - something like this is coming with notifications.

Now I think for some of these things it is mainly a question of adding more settings in the builder. It is really easy to add some more settings to for instance the container element or some of the tabs. If you in any of the above can think of something very specific that could be added to any of the elements in the builder then just let me know, especially if you can sketch out what the settings should look like.

[glutamate]

I guess what I am saying here is that we don't have to use bootstrap classes for everything, we can just use CSS which tailwind uses anyways. A lot of the Saltcorn container settings are generating CSS, not bootstrap.

[j2l]

• fontawsome is not subject to telemetry or download limits if you use any other Saltcorn theme. Fontawesome is served locally.

AFAIU, the pricing plan doesn't speak about download limits, the Font Awesome Kits USE seem to be legally tied to page views. It's a license issue, not a technical limitation.

• I think it is possible to download google fonts and host locally, it is definitely a bit more complicated, but should be possible with some effort. At some point I had an ambition to build a Saltcorn google-fonts plugin to handle this.

I agree, you can always hack the source to get the url, but publishing this "hacked" content might infringe Google terms. Not sure about that. Again, legalese.

• Custom buttons example. Looks really interesting. I think we should think about how this could be done, it's not just a question of CSS layout but also of specifying which bit is the clickable button.

Yes! :smile: I hope it's easily implementable.

• Tabs. I agree that most of the bootstrap themes have tabs that are too invisible but I think this should be something that can be internally fixed in the bootstrap theme customisation. You can see in Navs section of https://bootstrap.build/app

I'll have a look

• chat bubble. We can probably just add some CSS here?

Depends if it needs left+up+center+down+right html tags or else to draw an adaptable bubble (whatever the text size), or can work with existing tabs with CSS customization. CSS3 improved a lot.

• Footer and bottom navigation, CSS animations. see below

• accordion: we do have this in the builder (under Tabs) maybe it just needs a few more settings

?? I don't get what is the "builder" here.

• rating - we have star rating field views.

I don't see star-rating in view type or as a module. It existed for sure, I remember it, but it's gone (or gone private) since quite some time now. No idea why.

• Steps - i think this is coming, it has been ordered by a company using Saltcorn but not top priority

Cool! I'm happy to see you get orders from customers of Saltcorn. It means, Saltcorn gets some financial support.

• toasts - something like this is coming with notifications.

Do you plan to add web push notifications? Or internal/saltcorn websocket notifications?

I guess what I am saying here is that we don't have to use bootstrap classes for everything, we can just use CSS which tailwind uses anyways. A lot of the Saltcorn container settings are generating CSS, not bootstrap.

Don't worry, I'm not about "all-tailwind". I just need more flexibility in theme for customization. Container is very useful but lacks some stuff. For instance, if you default it to "display:none" (because custom hidden field doesn't exist yet), well you don't see it anymore in the editor, only the outliner drop-down menu (pretty broken on FF in Linux) can help you select it.

[glutamate]

the Font Awesome Kits USE seem to be legally tied to page views. It's a license issue, not a technical limitation.

This is a very important point, and I would certainly not tolerate a component in Saltcorn on those terms. However I think we are fine: if you look at the version we are distributing (https://saltcorn.com/plugins/public/any-bootstrap-theme/fontawesome/fontawesome.min.css) it is the product they call "Font Awesome Free" and it lists the licenses at the top of the CSS file which are all permissive and open source (therefore no page view limit). Further details are here: https://fontawesome.com/license/free. There is no ambiguity here, it is all permissive open source.

I don't know what the pricing page is referring to, something about a "Font Awesome Kit" which is free but not really free, but that is not the product we are using. I think they're just trying to confuse people so they get more income.

With respect to the licensing of Google Fonts, you are right some are not free but some are. If we do start self-hosting these we need to check the licenses individually. see https://developers.google.com/fonts/faq