@saltcorn/bootstrap-prompt-theme 0.1.0

package/index.js

@@ -0,0 +1,719 @@
+const {
+  div,
+  text,
+  p,
+  footer,
+  section,
+  a,
+  style,
+  h1,
+  ul,
+  img,
+  li,
+  form,
+  input,
+  nav,
+  button,
+  i,
+  hr,
+} = require("@saltcorn/markup/tags");
+const {
+  navbar,
+  navbarSolidOnScroll,
+  mobileBottomNavBar,
+  activeChecker,
+} = require("@saltcorn/markup/layout_utils");
+const renderLayout = require("@saltcorn/markup/layout");
+const db = require("@saltcorn/data/db");
+const Form = require("@saltcorn/data/models/form");
+const Workflow = require("@saltcorn/data/models/workflow");
+const Plugin = require("@saltcorn/data/models/plugin");
+const { renderForm, link } = require("@saltcorn/markup");
+const {
+  alert,
+  headersInHead,
+  headersInBody,
+} = require("@saltcorn/markup/layout_utils");
+const { features, getState } = require("@saltcorn/data/db/state");
+const {
+  generateThemeCSS,
+  writeOverlayCSS,
+  deleteOldOverlays,
+} = require("./generate_theme");
+
+const isNode = typeof window === "undefined";
+let hasCapacitor = false;
+try {
+  hasCapacitor =
+    require("@saltcorn/plugins-loader/stable_versioning").isEngineSatisfied(
+      ">=1.1.0-beta.11"
+    );
+} catch {
+  getState().log(5, "stable_versioning not available, assuming no Capacitor");
+}
+
+const _activeChecker = activeChecker
+  ? activeChecker
+  : (link, currentUrl) => new RegExp(`^${link}(\\/|\\?|#|$)`).test(currentUrl);
+
+const blockDispatch = (config) => ({
+  pageHeader: ({ title, blurb }) =>
+    div(
+      h1({ class: "h3 mb-0 mt-2 text-gray-800" }, title),
+      blurb && p({ class: "mb-0 text-gray-800" }, blurb)
+    ),
+  footer: ({ contents }) =>
+    div(
+      { class: "container" },
+      footer(
+        { id: "footer" },
+        div({ class: "row" }, div({ class: "col-sm-12" }, contents))
+      )
+    ),
+  hero: ({ caption, blurb, cta, backgroundImage }) =>
+    section(
+      {
+        class:
+          "jumbotron text-center m-0 bg-info d-flex flex-column justify-content-center",
+      },
+      div(
+        { class: "container" },
+        h1({ class: "jumbotron-heading" }, caption),
+        p({ class: "lead" }, blurb),
+        cta
+      ),
+      backgroundImage &&
+        style(`.jumbotron {
+      background-image: url("${backgroundImage}");
+      background-size: cover;
+      min-height: 75vh !important;
+    }`)
+    ),
+  noBackgroundAtTop: () => true,
+  wrapTop: (segment, ix, s) =>
+    ["hero", "footer"].includes(segment.type) || segment.noWrapTop
+      ? s
+      : section(
+          {
+            class: [
+              "page-section",
+              ix === 0 && `pt-${config.toppad || 0}`,
+              ix === 0 && config.fixedTop && isNode && "mt-5",
+              ix === 0 && config.fixedTop && !isNode && "mt-6",
+              segment.class,
+              segment.invertColor && "bg-primary",
+            ],
+            style: `${
+              segment.bgType === "Color"
+                ? `background-color: ${segment.bgColor};`
+                : ""
+            }`,
+          },
+          div(
+            { class: [config.fluid ? "container-fluid" : "container"] },
+            segment.textStyle && segment.textStyle === "h1" ? h1(s) : s
+          )
+        ),
+});
+
+const buildHints = (config = {}) => ({
+  cardTitleClass: "m-0 fw-bold d-inline",
+});
+
+const renderBody = (title, body, alerts, config, role, req) =>
+  renderLayout({
+    blockDispatch: blockDispatch(config),
+    role,
+    req,
+    layout:
+      typeof body === "string" && config.in_card
+        ? { type: "card", title, contents: body }
+        : body,
+    alerts,
+    hints: buildHints(config),
+  });
+
+const safeSlash = () => (isNode ? "/" : "");
+
+const linkPrefix = () =>
+  isNode ? "/plugins" : hasCapacitor ? "sc_plugins" : "plugins";
+
+const base_public_serve = `${linkPrefix()}/public/bootstrap-prompt-theme${
+  features?.version_plugin_serve_path
+    ? "@" + require("./package.json").version
+    : ""
+}`;
+
+const wrapIt = (config, bodyAttr, headers, title, body) => {
+  return `<!doctype html>
+<html lang="en" data-bs-theme="${config.mode || "light"}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="${base_public_serve}/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="${base_public_serve}/sidebar-3.css" />
+    <link rel="stylesheet" href="${base_public_serve}/${
+    config.overlay_file || "overlay.css"
+  }" />
+    ${headersInHead(headers, config?.mode === "dark")}
+    <title>${text(title)}</title>
+  </head>
+  <body ${bodyAttr}>
+    ${body}
+    ${
+      features && features.deep_public_plugin_serve
+        ? `<link rel="stylesheet" href="${base_public_serve}/fontawesome/fontawesome.min.css" />`
+        : '<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" integrity="sha512-kJ30H6g4NGhWopgdseRb8wTsyllFUYIx3hiUwmGAkgA9B/JbzUBDQVr2VVlWGde6sdBVOG7oU8AL35ORDuMm8g==" crossorigin="anonymous" />'
+    }
+    <script src="${safeSlash()}static_assets/${
+    db.connectObj.version_tag
+  }/jquery-3.6.0.min.js"></script>
+    <script src="${base_public_serve}/bootstrap.bundle.min.js"></script>
+    ${headersInBody(headers)}
+    ${config.colorscheme === "navbar-light" ? navbarSolidOnScroll : ""}
+  </body>
+</html>`;
+};
+
+const active = (currentUrl, item, originalUrl) =>
+  (item.link &&
+    (_activeChecker(item.link, currentUrl) ||
+      (originalUrl && _activeChecker(item.link, originalUrl)))) ||
+  (item.altlinks &&
+    item.altlinks.some(
+      (l) =>
+        _activeChecker(l, currentUrl) ||
+        (originalUrl && _activeChecker(l, originalUrl))
+    )) ||
+  (item.subitems &&
+    item.subitems.some(
+      (si) =>
+        si.link &&
+        (_activeChecker(si.link, currentUrl) ||
+          (originalUrl && _activeChecker(si.link, originalUrl)) ||
+          (si.altlinks &&
+            si.altlinks.some((l) => _activeChecker(l, currentUrl))))
+    ));
+
+const verticalMenu = ({ menu, currentUrl, originalUrl, brand }) => {
+  const brandLogo = a(
+    { class: "navbar-brand mt-1 ms-3 mb-2", href: "/" },
+    brand.logo &&
+      img({
+        src: brand.logo,
+        width: "30",
+        height: "30",
+        class: "me-2 d-inline-block align-top",
+        alt: "Logo",
+        loading: "lazy",
+      }),
+    brand.name
+  );
+  const vertNavSubItemsIterator = (subitem) =>
+    subitem.type === "Separator"
+      ? hr({ class: "mx-4 my-0" })
+      : subitem?.subitems
+      ? li(
+          { class: ["nav-item"] },
+          div(
+            { class: "dropdown-item btn-group dropend" },
+            a(
+              {
+                type: "button",
+                class: "nav-link sublink dropdown-item dropdown-toggle",
+                "data-bs-toggle": "dropdown",
+                "aria-expanded": "false",
+              },
+              subitem.label
+            ),
+            ul(
+              { class: "dropdown-menu" },
+              subitem?.subitems.map((si1) => li(vertNavSubItemsIterator(si1)))
+            )
+          )
+        )
+      : li(
+          {
+            class: [
+              "nav-item",
+              active(currentUrl, subitem, originalUrl) && "active",
+            ],
+          },
+          a(
+            {
+              class: "nav-link sublink",
+              href: subitem.link,
+              target: subitem.target_blank ? "_blank" : undefined,
+            },
+            subitem.icon ? i({ class: `fa-fw me-1 ${subitem.icon}` }) : "",
+            subitem.label
+          )
+        );
+
+  let items = [];
+  menu.forEach((m, ix) => {
+    if (m.items && m.items.length > 0) {
+      m.items.forEach((item, ix1) => {
+        if (item.location === "Mobile Bottom") return;
+        if (item.subitems) {
+          items.push(
+            li(
+              {
+                class: [
+                  "nav-item",
+                  active(currentUrl, item, originalUrl) && "active",
+                ],
+              },
+              a(
+                {
+                  href: `#menuCollapse${ix}_${ix1}`,
+                  "aria-expanded": false,
+                  class: "dropdown-toggle nav-link",
+                  ...(features && features.bootstrap5
+                    ? { "data-bs-toggle": "collapse" }
+                    : { "data-toggle": "collapse" }),
+                },
+                item.icon ? i({ class: `fa-fw me-1 ${item.icon}` }) : "",
+                item.label
+              ),
+              ul(
+                {
+                  class: [
+                    active(currentUrl, item, originalUrl)
+                      ? "collapse.show"
+                      : "collapse",
+                    "list-unstyled",
+                  ],
+                  id: `menuCollapse${ix}_${ix1}`,
+                },
+                item.subitems.map(vertNavSubItemsIterator)
+              )
+            )
+          );
+        } else if (item.link)
+          items.push(
+            li(
+              {
+                class: [
+                  "nav-item",
+                  active(currentUrl, item, originalUrl) && "active",
+                ],
+              },
+              a(
+                {
+                  class: "nav-link",
+                  href: item.link,
+                  target: item.target_blank ? "_blank" : undefined,
+                },
+                item.icon ? i({ class: `fa-fw me-1 ${item.icon}` }) : "",
+                item.label
+              )
+            )
+          );
+        else if (item.type === "Separator")
+          items.push(hr({ class: "mx-4 my-0" }));
+        else if (item.type === "Search")
+          items.push(
+            li(
+              form(
+                { action: "/search", class: "menusearch", method: "get" },
+                div(
+                  { class: "input-group search-bar" },
+                  input({
+                    type: "search",
+                    class: "form-control search-bar ps-2 hasbl",
+                    placeholder: item.label,
+                    id: "inputq",
+                    name: "q",
+                    "aria-label": "Search",
+                    "aria-describedby": "button-search-submit",
+                  }),
+                  button(
+                    {
+                      class: "btn btn-outline-secondary search-bar",
+                      type: "submit",
+                    },
+                    i({ class: "fas fa-search" })
+                  )
+                )
+              )
+            )
+          );
+      });
+    }
+  });
+  const toggler =
+    hr({ class: "mx-4 my-0" }) +
+    div(
+      { class: "text-center" },
+      button({
+        class: "rounded-circle border-0",
+        id: "sidebarToggle",
+        "data-sidebar-toggler": true,
+        onclick: "$('#wrapper').toggleClass('narrowed')",
+      })
+    );
+  return (
+    brandLogo +
+    ul({ class: "navbar-nav list-unstyled components" }, items) +
+    toggler
+  );
+};
+
+const authBrand = (config, { name, logo }) =>
+  logo
+    ? `<img class="mb-4" src="${logo}" alt="Logo" width="72" height="72">`
+    : "";
+
+const menuWrap = ({
+  brand,
+  menu,
+  config,
+  currentUrl,
+  originalUrl,
+  body,
+  req,
+}) => {
+  const colschm = (config.colorscheme || "").split(" ");
+  const navbarCol = colschm[0];
+  const bg = colschm[1];
+  const txt = (colschm[0] || "").includes("dark") ? "text-light" : "";
+
+  const mobileNav = mobileBottomNavBar
+    ? mobileBottomNavBar(currentUrl, menu, bg, txt)
+    : "";
+  const role = !req ? 1 : req.user ? req.user.role_id : 100;
+  if ((config.menu_style === "No Menu" && role > 1) || (!menu && !brand))
+    return div({ id: "wrapper" }, div({ id: "page-inner-content" }, body));
+  else if (config.menu_style === "Side Navbar" && isNode) {
+    return (
+      navbar(brand, menu, currentUrl, { class: "d-md-none", ...config }) +
+      div(
+        { id: "wrapper", class: "d-flex with-sidebar" },
+        nav(
+          {
+            class: [
+              "d-none d-md-flex flex-column align-center d-print-none",
+              navbarCol,
+              bg,
+              txt,
+            ],
+            id: "sidebar",
+          },
+          verticalMenu({ brand, menu, currentUrl, originalUrl })
+        ),
+        div(
+          { id: "content-wrapper", class: "d-flex flex-column" },
+          div({ id: "content" }, div({ id: "page-inner-content" }, body))
+        )
+      ) +
+      mobileNav
+    );
+  } else
+    return (
+      div(
+        { id: "wrapper" },
+        navbar(brand, menu, currentUrl, config),
+        div({ id: "page-inner-content" }, body)
+      ) + mobileNav
+    );
+};
+
+const layout = (config) => ({
+  hints: buildHints(config),
+  renderBody: ({ title, body, alerts, role, req }) =>
+    renderBody(title, body, alerts, config, role, req),
+  wrap: ({
+    title,
+    menu,
+    brand,
+    alerts,
+    currentUrl,
+    originalUrl,
+    body,
+    headers,
+    role,
+    req,
+    bodyClass,
+    requestFluidLayout,
+  }) =>
+    wrapIt(
+      config,
+      `id="page-top" class="${bodyClass || ""}"`,
+      headers,
+      title,
+      menuWrap({
+        brand,
+        menu,
+        config,
+        currentUrl,
+        originalUrl,
+        body: renderBody(
+          title,
+          body,
+          alerts,
+          requestFluidLayout ? { ...config, fluid: true } : config,
+          role,
+          req
+        ),
+        req,
+      })
+    ),
+  authWrap: ({
+    title,
+    alerts,
+    form,
+    afterForm,
+    headers,
+    brand,
+    csrfToken,
+    authLinks,
+    bodyClass,
+    req,
+  }) =>
+    wrapIt(
+      config,
+      `class="text-center ${bodyClass || ""}"`,
+      headers,
+      title,
+      `
+  <div class="form-signin">
+    ${alerts.map((a) => alert(a.type, a.msg)).join("")}
+    ${authBrand(config, brand)}
+    <h3>${title}</h3>
+    ${renderForm(formModify(form), csrfToken)}
+    ${renderAuthLinks(authLinks, req)}
+    ${afterForm}
+    <style>
+html, body { min-height: 100%; }
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #f5f5f5;
+}
+.form-signin {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+.form-signin .form-control {
+  position: relative;
+  box-sizing: border-box;
+  height: auto;
+  padding: 10px;
+  font-size: 16px;
+}
+.form-signin .form-control:focus { z-index: 2; }
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+    </style>
+  </div>
+  `
+    ),
+});
+
+const renderAuthLinks = (authLinks, req) => {
+  var links = [];
+  const __ = req?.__ || ((s) => s);
+  if (authLinks.login)
+    links.push(link(authLinks.login, __("Already have an account? Login!")));
+  if (authLinks.forgot)
+    links.push(link(authLinks.forgot, __("Forgot password?")));
+  if (authLinks.signup)
+    links.push(link(authLinks.signup, __("Create an account!")));
+  const meth_links = (authLinks.methods || [])
+    .map(({ url, icon, label }) =>
+      a(
+        { href: url, class: "btn btn-secondary btn-user btn-block" },
+        icon || "",
+        `&nbsp;Login with ${label}`
+      )
+    )
+    .join("");
+  return (
+    meth_links + links.map((l) => div({ class: "text-center" }, l)).join("")
+  );
+};
+
+const formModify = (form) => {
+  form.formStyle = "vert";
+  form.submitButtonClass = "btn-primary btn-user btn-block";
+  return form;
+};
+
+const configuration_workflow = () =>
+  new Workflow({
+    onDone: async (context) => {
+      return {
+        context,
+        cleanup: async () => {
+          if (context.overlay_file)
+            await deleteOldOverlays(context.overlay_file);
+        },
+      };
+    },
+    onStepSuccess: async (step, ctx) => {
+      const prompt = ctx?.prompt;
+      if (!prompt) return;
+      try {
+        let plugin = await Plugin.findOne({ name: "bootstrap-prompt-theme" });
+        if (!plugin)
+          plugin = await Plugin.findOne({
+            name: "@saltcorn/bootstrap-prompt-theme",
+          });
+        if (plugin?.configuration?.last_applied_prompt === prompt) return;
+        const css = await generateThemeCSS(prompt);
+        if (css) {
+          ctx.overlay_css = css;
+          ctx.last_applied_prompt = prompt;
+          const filename = await writeOverlayCSS(css);
+          ctx.overlay_file = filename;
+        }
+      } catch (error) {
+        const msg = error.message || "unknown error";
+        getState().log(2, `bootstrap-prompt-theme onLoad failed: ${msg}`);
+      }
+    },
+    steps: [
+      {
+        name: "Theme",
+        form: async (ctx) => {
+          return new Form({
+            fields: [
+              {
+                name: "prompt",
+                label: "Theme prompt",
+                sublabel:
+                  "Describe the visual style you want (LLM generation coming soon)",
+                type: "String",
+                fieldview: "textarea",
+              },
+              {
+                name: "in_card",
+                label: "Default content in card?",
+                type: "Bool",
+                required: true,
+              },
+              {
+                name: "menu_style",
+                label: "Menu style",
+                type: "String",
+                required: true,
+                attributes: {
+                  inline: true,
+                  options: ["Top Navbar", "Side Navbar", "No Menu"],
+                },
+              },
+              {
+                name: "colorscheme",
+                label: "Navbar color scheme",
+                type: "String",
+                required: true,
+                default: "navbar-light",
+                attributes: {
+                  options: [
+                    { name: "navbar-dark bg-dark", label: "Dark" },
+                    { name: "navbar-dark bg-primary", label: "Dark Primary" },
+                    {
+                      name: "navbar-dark bg-secondary",
+                      label: "Dark Secondary",
+                    },
+                    { name: "navbar-light bg-light", label: "Light" },
+                    { name: "navbar-light bg-white", label: "White" },
+                    { name: "navbar-light", label: "Transparent Light" },
+                  ],
+                },
+              },
+              {
+                name: "fixedTop",
+                label: "Navbar Fixed Top",
+                type: "Bool",
+                required: true,
+              },
+              {
+                name: "toppad",
+                label: "Top padding",
+                sublabel: "0-5 depending on Navbar height and configuration",
+                type: "Integer",
+                required: true,
+                default: 2,
+                attributes: { max: 5, min: 0 },
+              },
+              {
+                name: "fluid",
+                label: "Fluid full-width container",
+                type: "Bool",
+              },
+              {
+                name: "mode",
+                label: "Mode",
+                type: "String",
+                required: true,
+                default: "light",
+                attributes: {
+                  options: [
+                    { name: "light", label: "Light" },
+                    { name: "dark", label: "Dark" },
+                  ],
+                },
+              },
+            ],
+          });
+        },
+      },
+    ],
+  });
+
+module.exports = {
+  sc_plugin_api_version: 1,
+  plugin_name: "bootstrap-prompt-theme",
+  dependencies: ["@saltcorn/large-language-model"],
+  layout,
+  configuration_workflow,
+  onLoad: async (configuration) => {
+    if (!configuration?.overlay_css) {
+      getState().log(
+        5,
+        "bootstrap-prompt-theme onLoad: no overlay_css in configuration"
+      );
+      return;
+    }
+    if (!configuration?.overlay_file) {
+      getState().log(
+        5,
+        "bootstrap-prompt-theme onLoad: no overlay_file in configuration"
+      );
+      return;
+    }
+    try {
+      const { access } = require("fs").promises;
+      const { join } = require("path");
+      const dest = join(__dirname, "public", configuration.overlay_file);
+      try {
+        await access(dest);
+      } catch {
+        await writeOverlayCSS(
+          configuration.overlay_css,
+          configuration.overlay_file
+        );
+      }
+    } catch (error) {
+      const msg = error.message || "Failed to write overlay CSS";
+      getState().log(2, `bootstrap-prompt-theme onLoad failed: ${msg}`);
+    }
+  },
+  ready_for_mobile: true,
+};