panda_cms 0.5.9 → 0.6.0

data/app/javascript/panda_cms/controllers/index.js

@@ -0,0 +1,42 @@
+console.debug("[Panda CMS] Importing Panda CMS Stimulus Controller...");;
+
+import { Application as PandaCmsApplication } from "@hotwired/stimulus"
+
+const pandaCmsApplication = PandaCmsApplication.start()
+
+console.debug("[Panda CMS] Application started...");;
+
+// Configure Stimulus development experience
+pandaCmsApplication.debug = false
+window.pandaCmsStimulus = pandaCmsApplication
+
+console.debug("[Panda CMS] window.pandaCmsStimulus available...")
+
+console.debug("[Panda CMS] Registering controllers...")
+
+// Grab our internal controllers manually
+import { DashboardController } from "controllers/dashboard_controller"
+pandaCmsApplication.register("dashboard", DashboardController)
+
+import { SlugController } from "controllers/slug_controller"
+pandaCmsApplication.register("slug", SlugController)
+
+console.debug("[Panda CMS] Registering components...")
+
+// Import and register all TailwindCSS Components or just the ones you need
+import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
+pandaCmsApplication.register('alert', Alert)
+pandaCmsApplication.register('autosave', Autosave)
+pandaCmsApplication.register('color-preview', ColorPreview)
+pandaCmsApplication.register('dropdown', Dropdown)
+pandaCmsApplication.register('modal', Modal)
+pandaCmsApplication.register('popover', Popover)
+pandaCmsApplication.register('slideover', Slideover)
+pandaCmsApplication.register('tabs', Tabs)
+pandaCmsApplication.register('toggle', Toggle)
+
+console.debug("[Panda CMS] Components registered...");
+
+export { pandaCmsApplication }
+
+console.debug("[Panda CMS] Application exported...");

data/app/javascript/panda_cms/controllers/slug_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+
+export class SlugController extends Controller {
+  static targets = [
+    "existing_root",
+    "input_select",
+    "input_text",
+    "output_text",
+  ];
+
+  connect() {
+    console.debug("[Panda CMS] Slug handler connected...");
+  }
+
+  generatePath() {
+    this.output_textTarget.value = "/" + this.createSlug(this.input_textTarget.value);
+    console.log("Have set the path to: " + this.output_textTarget.value);
+  }
+
+  setPrePath() {
+    this.parent_slugs = this.input_selectTarget.options[this.input_selectTarget.selectedIndex].text.match(/.*\((.*)\)$/)[1];
+    this.output_textTarget.previousSibling.innerHTML = (this.existing_rootTarget.value + this.parent_slugs).replace(/\/$/, "");
+    console.log("Have set the pre-path to: " + this.output_textTarget.previousSibling.innerHTML);
+  }
+
+  // TODO: Invoke a library or helper which can be shared with the backend
+  // and check for uniqueness at the same time
+  createSlug(input) {
+    var str = input
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w\s-]/g, "-")
+      .replace(/&/g, "and")
+      .replace(/[\s_-]+/g, "-")
+      .trim();
+
+    return this.trimStartEnd(str, "-");
+  }
+
+  trimStartEnd(str, ch) {
+    var start = 0;
+    var end = str.length;
+
+    while (start < end && str[start] === ch) ++start;
+    while (end > start && str[end - 1] === ch) --end;
+    return start > 0 || end < str.length ? str.substring(start, end) : str;
+  }
+}

data/app/javascript/panda_cms/panda_cms_editable.js

@@ -0,0 +1,248 @@
+/**
+ * Represents a controller for managing editable content within an iframe.
+ * @class
+ */
+class PandaCmsEditableController {
+  /**
+   * Represents the constructor for the Editable class.
+   * @param {HTMLIFrameElement} frame - The iFrame element to be used for editing.
+   */
+  constructor(pageId, frame) {
+    this.pageId = pageId;
+    this.frame = frame;
+    this.frame.style.display = "none";
+    this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
+
+    var pathNameArray = window.location.pathname.split("/");
+    this.adminPath = pathNameArray[1];
+
+    this.frame.addEventListener("load", () => {
+      this.frameDocument = this.frame.contentDocument || this.frame.contentWindow.document;
+      this.body = this.frameDocument.body;
+      this.head = this.frameDocument.head;
+      this.loadEvents();
+    });
+  }
+
+  /* iFrame & Main Methods */
+
+  /**
+   * Load events for the editable iFrame
+   */
+  loadEvents() {
+    console.debug("[Panda CMS] iFrame loaded...");
+
+    this.embedPlainTextEditors();
+    this.embedTrix();
+  }
+
+  setFrameVisible() {
+    console.debug("[Panda CMS] Setting iFrame to visible...");
+    this.frame.style.display = "";
+  }
+
+  addStylesheet(frameDocument, head, href) {
+    return new Promise(function (resolve, reject) {
+      let link = frameDocument.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      link.media = "none";
+      head.append(link);
+
+      link.onload = () => {
+        if (link.media != "all") {
+          link.media = "all";
+        }
+        console.debug(`[Panda CMS] Stylesheet loaded: ${href}`);
+        resolve(link);
+      };
+      link.onerror = () =>
+        reject(new Error(`[Panda CMS] Stylesheet load error for ${href}`));
+    });
+  }
+
+  loadScript(frameDocument, head, src) {
+    return new Promise(function (resolve, reject) {
+      let script = frameDocument.createElement("script");
+      script.src = src;
+      head.append(script);
+
+      script.onload = () => {
+        console.debug(`[Panda CMS] Script loaded: ${src}`);
+        resolve(script);
+      };
+      script.onerror = () =>
+        reject(new Error(`[Panda CMS] Script load error for ${src}`));
+    });
+  }
+
+  /* Plain Text Editor (inc. Code) Methods */
+
+  stylePlainTextEditor(element, status) {
+    console.debug(
+      `[Panda CMS] Styling editor ${element.id} as ${status}...`
+    );
+
+    if (status == "initial") {
+      element.style.border = "1px dashed #ccc";
+      element.style.outline = "none";
+      element.style.cursor = "pointer";
+      element.style.transition = "background 500ms linear";
+      element.style.backgroundColor = "inherit";
+    } else if (status == "success") {
+      element.style.backgroundColor = "#66bd6a50";
+    } else if (status == "error") {
+      element.style.backgroundColor = "#dc354550";
+    }
+
+    if (element.getAttribute("data-editable-kind") == "html") {
+      element.style.whiteSpace = "pre-wrap";
+      element.style.fontFamily = "monospace";
+    }
+  }
+
+  embedPlainTextEditors() {
+    var elements = this.body.querySelectorAll('[data-editable-kind="plain_text"], [data-editable-kind="markdown"], [data-editable-kind="html"]');
+    if (elements.length == 0) {
+      return;
+    }
+
+    elements.forEach((element) => {
+      this.stylePlainTextEditor(element, "initial");
+      var currentElement = element;
+
+      // On save click, save this element
+      document.getElementById('saveEditableButton').addEventListener('click', () => {
+        this.bindPlainTextSaveHandler(currentElement);
+      });
+
+      console.debug("[Panda CMS] Attached button event handler to ${currentElement.id}");
+    });
+
+    console.debug(
+      "[Panda CMS] Dispatching event: pandaCmsPlainTextEditorLoaded"
+    );
+
+    // Let the parent know that the external resources have been loaded
+    this.frameDocument.dispatchEvent(new Event("pandaCmsPlainTextEditorLoaded"));
+  }
+
+  bindPlainTextSaveHandler(target) {
+    var blockContentId = target.getAttribute(
+      "data-editable-block-content-id"
+    );
+
+    if (target.getAttribute("data-editable-kind") == "html") { // Or markdown?
+      var content = target.innerText;
+    } else {
+      var content = target.innerHTML;
+    }
+
+    fetch(`/${this.adminPath}/pages/${this.pageId}/block_contents/${blockContentId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": document
+          .querySelector('meta[name="csrf-token"]')
+          .getAttribute("content"),
+      },
+      body: JSON.stringify({ content: content }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        this.stylePlainTextEditor(target, "success");
+        setTimeout(() => {
+          this.stylePlainTextEditor(target, "initial");
+        }, 1000);
+      })
+      .catch((error) => {
+        this.stylePlainTextEditor(target, "error");
+        setTimeout(() => {
+          this.stylePlainTextEditor(target, "initial");
+        }, 1000);
+        alert("Error:", error);
+        console.log(error);
+      });
+  }
+
+  /* Rich Text Editor Methods */
+
+  embedTrix() {
+    // Our stylesheet includes dist trix.css as of v2.1.7
+    this.addStylesheet(this.frameDocument, this.head, "/panda-cms-assets/rich_text_editor.css");
+    this.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/trix/dist/trix.js");
+
+    this.body.addEventListener("trix-before-initialize", () => {
+      // Change Trix.config if you need
+      console.debug("[Panda CMS] Trix before initialize");
+      // Trix.config.blockAttributes.heading = {
+      //   tagName: "h2",
+      //   terminal: true,
+      //   breakOnReturn: true,
+      //   group: false
+      // }
+
+      // Trix.config.blockAttributes.subHeading = {
+      //   tagName: "h3",
+      //   terminal: true,
+      //   breakOnReturn: true,
+      //   group: false
+      // }
+
+      // To make Trix styles appear we should define them in nb surely?
+      // Defining e.g. .panda-cms-content h2 in panda won't show it in panda, but
+      // as this is a page in nb
+      // We can define these styles through admin or a custom stylesheet eventually?
+
+      console.log(Trix.config.blockAttributes);
+    })
+
+    this.body.addEventListener("trix-initialize", (event) => {
+      const { toolbarElement } = event.target
+      const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
+      h1Button.insertAdjacentHTML("afterend", `
+        <button type="button" class="trix-button" data-trix-attribute="heading2" title="Heading 2" tabindex="-1" data-trix-active="">H2</button>
+      `)
+    })
+
+    document.getElementById('saveEditableButton').addEventListener('click', () => {
+      console.debug("[Panda CMS] Handling click event on #saveEditableButton");
+      // Grab each input element that's a rich text editor and append a save handler to the button
+      var elements = this.frameDocument.querySelectorAll("input[data-editor-type='rich-text']");
+      elements.forEach((element) => {
+        var blockContentId = element.getAttribute("data-editor-block-content-id");
+        this.bindTrixSaveHandler(blockContentId, element.value);
+      });
+    });
+
+    // This prevents the flash of content before the iFrame is ready
+    console.debug("[Panda CMS] Setting iFrame to visible");
+    this.setFrameVisible();
+  }
+
+  bindTrixSaveHandler(blockContentId, content) {
+    console.debug(`[Panda CMS] Calling save handler for ${blockContentId}...`);
+    fetch(`/${this.adminPath}/pages/${this.pageId}/block_contents/${blockContentId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": this.csrfToken,
+      },
+      body: JSON.stringify({ content: content }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.debug("[Panda CMS] Save successful for block content ID:", blockContentId);
+        document.getElementById('saveEditableButton').classList.remove("bg-inactive");
+        document.getElementById('saveEditableButton').classList.add("bg-active");
+        setTimeout(() => {
+          document.getElementById('saveEditableButton').classList.remove("bg-active");
+          document.getElementById('saveEditableButton').classList.add("bg-inactive");
+        }, 1500);
+      })
+      .catch((error) => {
+        console.log(error);
+        alert("Error updating. Please contact the support team!", error);
+      });
+  }
+}

data/app/javascript/panda_cms/tailwindcss-stimulus-components.js

@@ -0,0 +1,4 @@
+// tailwindcss-stimulus-components@6.1.2 downloaded from https://ga.jspm.io/npm:tailwindcss-stimulus-components@6.1.2/dist/tailwindcss-stimulus-components.module.js
+
+import{Controller as e}from"@hotwired/stimulus";var t=Object.defineProperty;var V=(e,s,a)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[s]=a;var i=(e,t,s)=>V(e,typeof t!="symbol"?t+"":t,s);async function n(e,t,s={}){t?await T(e,s):await b(e,s)}async function T(e,t={}){let{transitionClasses:s,fromClasses:a,toClasses:o,toggleClass:r}=C("Enter",e,t);return v(e,{firstFrame(){e.classList.add(...s.split(" ")),e.classList.add(...a.split(" ")),e.classList.remove(...o.split(" ")),e.classList.remove(...r.split(" "))},secondFrame(){e.classList.remove(...a.split(" ")),e.classList.add(...o.split(" "))},ending(){e.classList.remove(...s.split(" "))}})}async function b(e,t={}){let{transitionClasses:s,fromClasses:a,toClasses:o,toggleClass:r}=C("Leave",e,t);return v(e,{firstFrame(){e.classList.add(...a.split(" ")),e.classList.remove(...o.split(" ")),e.classList.add(...s.split(" "))},secondFrame(){e.classList.remove(...a.split(" ")),e.classList.add(...o.split(" "))},ending(){e.classList.remove(...s.split(" ")),e.classList.add(...r.split(" "))}})}function C(e,t,s){return{transitionClasses:t.dataset[`transition${e}`]||s[e.toLowerCase()]||e.toLowerCase(),fromClasses:t.dataset[`transition${e}From`]||s[`${e.toLowerCase()}From`]||`${e.toLowerCase()}-from`,toClasses:t.dataset[`transition${e}To`]||s[`${e.toLowerCase()}To`]||`${e.toLowerCase()}-to`,toggleClass:t.dataset.toggleClass||s.toggleClass||s.toggle||"hidden"}}function L(e){e._stimulus_transition={timeout:null,interrupted:!1}}function I(e){e._stimulus_transition&&e._stimulus_transition.interrupt&&e._stimulus_transition.interrupt()}function v(e,t){e._stimulus_transition&&I(e);let s,a,o;return L(e),e._stimulus_transition.cleanup=()=>{a||t.firstFrame(),o||t.secondFrame(),t.ending(),e._stimulus_transition=null},e._stimulus_transition.interrupt=()=>{s=!0,e._stimulus_transition.timeout&&clearTimeout(e._stimulus_transition.timeout),e._stimulus_transition.cleanup()},new Promise((r=>{s||requestAnimationFrame((()=>{s||(t.firstFrame(),a=!0,requestAnimationFrame((()=>{s||(t.secondFrame(),o=!0,e._stimulus_transition&&(e._stimulus_transition.timeout=setTimeout((()=>{s||e._stimulus_transition.cleanup(),r()}),w(e))))})))}))}))}function w(e){let t=Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,s=Number(getComputedStyle(e).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;return t===0&&(t=Number(getComputedStyle(e).animationDuration.replace("s",""))*1e3),t+s}var s=class extends e{connect(){setTimeout((()=>{T(this.element)}),this.showDelayValue),this.hasDismissAfterValue&&setTimeout((()=>{this.close()}),this.dismissAfterValue)}close(){b(this.element).then((()=>{this.element.remove()}))}};i(s,"values",{dismissAfter:Number,showDelay:{type:Number,default:0}});var a=class extends e{connect(){this.timeout=null}save(){clearTimeout(this.timeout),this.timeout=setTimeout((()=>{this.statusTarget.textContent=this.submittingTextValue,this.formTarget.requestSubmit()}),this.submitDurationValue)}success(){this.setStatus(this.successTextValue)}error(){this.setStatus(this.errorTextValue)}setStatus(e){this.statusTarget.textContent=e,this.timeout=setTimeout((()=>{this.statusTarget.textContent=""}),this.statusDurationValue)}};i(a,"targets",["form","status"]),i(a,"values",{submitDuration:{type:Number,default:1e3},statusDuration:{type:Number,default:2e3},submittingText:{type:String,default:"Saving..."},successText:{type:String,default:"Saved!"},errorText:{type:String,default:"Unable to save."}});var o=class extends e{update(){this.preview=this.colorTarget.value}set preview(e){this.previewTarget.style[this.styleValue]=e;let t=this._getContrastYIQ(e);this.styleValue==="color"?this.previewTarget.style.backgroundColor=t:this.previewTarget.style.color=t}_getContrastYIQ(e){e=e.replace("#","");let t=128,s=parseInt(e.substr(0,2),16),a=parseInt(e.substr(2,2),16),o=parseInt(e.substr(4,2),16);return(s*299+a*587+o*114)/1e3>=t?"#000":"#fff"}};i(o,"targets",["preview","color"]),i(o,"values",{style:{type:String,default:"backgroundColor"}});var r=class extends e{connect(){this.boundBeforeCache=this.beforeCache.bind(this),document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}openValueChanged(){n(this.menuTarget,this.openValue,this.transitionOptions),this.openValue===!0&&this.hasMenuItemTarget&&this.menuItemTargets[0].focus()}show(){this.openValue=!0}close(){this.openValue=!1}hide(e){this.closeOnClickOutsideValue&&e.target.nodeType&&this.element.contains(e.target)===!1&&this.openValue&&(this.openValue=!1),this.closeOnEscapeValue&&e.key==="Escape"&&this.openValue&&(this.openValue=!1)}toggle(){this.openValue=!this.openValue}nextItem(e){e.preventDefault(),this.menuItemTargets[this.nextIndex].focus()}previousItem(e){e.preventDefault(),this.menuItemTargets[this.previousIndex].focus()}get currentItemIndex(){return this.menuItemTargets.indexOf(document.activeElement)}get nextIndex(){return Math.min(this.currentItemIndex+1,this.menuItemTargets.length-1)}get previousIndex(){return Math.max(this.currentItemIndex-1,0)}get transitionOptions(){return{enter:this.hasEnterClass?this.enterClass:"transition ease-out duration-100",enterFrom:this.hasEnterFromClass?this.enterFromClass:"transform opacity-0 scale-95",enterTo:this.hasEnterToClass?this.enterToClass:"transform opacity-100 scale-100",leave:this.hasLeaveClass?this.leaveClass:"transition ease-in duration-75",leaveFrom:this.hasLeaveFromClass?this.leaveFromClass:"transform opacity-100 scale-100",leaveTo:this.hasLeaveToClass?this.leaveToClass:"transform opacity-0 scale-95",toggleClass:this.hasToggleClass?this.toggleClass:"hidden"}}beforeCache(){this.openValue=!1,this.menuTarget.classList.add("hidden")}};i(r,"targets",["menu","button","menuItem"]),i(r,"values",{open:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0}}),i(r,"classes",["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","toggle"]);var l=class extends e{connect(){this.openValue&&this.open(),this.boundBeforeCache=this.beforeCache.bind(this),document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}open(){this.dialogTarget.showModal()}close(){this.dialogTarget.setAttribute("closing",""),Promise.all(this.dialogTarget.getAnimations().map((e=>e.finished))).then((()=>{this.dialogTarget.removeAttribute("closing"),this.dialogTarget.close()}))}backdropClose(e){e.target.nodeName=="DIALOG"&&this.close()}show(){this.dialogTarget.show()}hide(){this.close()}beforeCache(){this.close()}};i(l,"targets",["dialog"]),i(l,"values",{open:Boolean});var u=class extends e{openValueChanged(){n(this.contentTarget,this.openValue),this.shouldAutoDismiss&&this.scheduleDismissal()}show(e){this.shouldAutoDismiss&&this.scheduleDismissal(),this.openValue=!0}hide(){this.openValue=!1}toggle(){this.openValue=!this.openValue}get shouldAutoDismiss(){return this.openValue&&this.hasDismissAfterValue}scheduleDismissal(){this.hasDismissAfterValue&&(this.cancelDismissal(),this.timeoutId=setTimeout((()=>{this.hide(),this.timeoutId=void 0}),this.dismissAfterValue))}cancelDismissal(){typeof this.timeoutId=="number"&&(clearTimeout(this.timeoutId),this.timeoutId=void 0)}};i(u,"targets",["content"]),i(u,"values",{dismissAfter:Number,open:{type:Boolean,default:!1}});var h=class extends e{connect(){this.openValue&&this.open(),this.boundBeforeCache=this.beforeCache,document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}open(){this.dialogTarget.showModal()}close(){this.dialogTarget.setAttribute("closing",""),Promise.all(this.dialogTarget.getAnimations().map((e=>e.finished))).then((()=>{this.dialogTarget.removeAttribute("closing"),this.dialogTarget.close()}))}backdropClose(e){e.target.nodeName=="DIALOG"&&this.close()}show(){this.open()}hide(){this.close()}beforeCache(){this.close()}};i(h,"targets",["dialog"]),i(h,"values",{open:Boolean});var c=class extends e{initialize(){this.updateAnchorValue&&this.anchor&&(this.indexValue=this.tabTargets.findIndex((e=>e.id===this.anchor)))}connect(){this.showTab()}change(e){e.currentTarget.tagName==="SELECT"?this.indexValue=e.currentTarget.selectedIndex:e.currentTarget.dataset.index?this.indexValue=e.currentTarget.dataset.index:e.currentTarget.dataset.id?this.indexValue=this.tabTargets.findIndex((t=>t.id==e.currentTarget.dataset.id)):this.indexValue=this.tabTargets.indexOf(e.currentTarget)}nextTab(){this.indexValue=Math.min(this.indexValue+1,this.tabsCount-1)}previousTab(){this.indexValue=Math.max(this.indexValue-1,0)}firstTab(){this.indexValue=0}lastTab(){this.indexValue=this.tabsCount-1}indexValueChanged(){if(this.showTab(),this.dispatch("tab-change",{target:this.tabTargets[this.indexValue],detail:{activeIndex:this.indexValue}}),this.updateAnchorValue){let e=this.tabTargets[this.indexValue].id;if(this.scrollToAnchorValue)location.hash=e;else{let t=window.location.href.split("#")[0]+"#"+e;typeof Turbo<"u"?Turbo.navigator.history.replace(new URL(t)):history.replaceState({},document.title,t)}}}showTab(){this.panelTargets.forEach(((e,t)=>{let s=this.tabTargets[t];t===this.indexValue?(e.classList.remove("hidden"),s.ariaSelected="true",s.dataset.active=!0,this.hasInactiveTabClass&&s?.classList?.remove(...this.inactiveTabClasses),this.hasActiveTabClass&&s?.classList?.add(...this.activeTabClasses)):(e.classList.add("hidden"),s.ariaSelected=null,delete s.dataset.active,this.hasActiveTabClass&&s?.classList?.remove(...this.activeTabClasses),this.hasInactiveTabClass&&s?.classList?.add(...this.inactiveTabClasses))})),this.hasSelectTarget&&(this.selectTarget.selectedIndex=this.indexValue),this.scrollActiveTabIntoViewValue&&this.scrollToActiveTab()}scrollToActiveTab(){let e=this.element.querySelector("[aria-selected]");e&&e.scrollIntoView({inline:"center"})}get tabsCount(){return this.tabTargets.length}get anchor(){return document.URL.split("#").length>1?document.URL.split("#")[1]:null}};i(c,"classes",["activeTab","inactiveTab"]),i(c,"targets",["tab","panel","select"]),i(c,"values",{index:0,updateAnchor:Boolean,scrollToAnchor:Boolean,scrollActiveTabIntoView:Boolean});var d=class extends e{toggle(e){this.openValue=!this.openValue,this.animate()}toggleInput(e){this.openValue=e.target.checked,this.animate()}hide(){this.openValue=!1,this.animate()}show(){this.openValue=!0,this.animate()}animate(){this.toggleableTargets.forEach((e=>{n(e,this.openValue)}))}};i(d,"targets",["toggleable"]),i(d,"values",{open:{type:Boolean,default:!1}});export{s as Alert,a as Autosave,o as ColorPreview,r as Dropdown,l as Modal,u as Popover,h as Slideover,c as Tabs,d as Toggle,n as transition};
+

data/app/lib/panda_cms/demo_site_generator.rb

@@ -36,7 +36,7 @@ module PandaCms
     def create_pages
       @pages[:home] = PandaCms::Page.find_or_create_by!({path: "/", title: "Home", template: @templates[:homepage]})
       @pages[:about] = PandaCms::Page.find_or_create_by!({path: "/about", title: "About", template: @templates[:page], parent: @pages[:home]})
-      @pages[:terms] = PandaCms::Page.find_or_create_by!({path: "/terms-and-conditions", title: "Terms & Conditions", template: @templates[:page], parent: @pages[:home]})
+      @pages[:terms] = PandaCms::Page.find_or_create_by!({path: "/terms-and-conditions", title: "Terms & Conditions", template: @templates[:page], parent: @pages[:home], status: "hidden"})
 
       PandaCms::Page.reset_column_information
       PandaCms::Page.rebuild!

data/app/lib/panda_cms/slug.rb

@@ -5,7 +5,7 @@ module PandaCms
     #
     # @param string [String] The provided string to turn into a slug
     # @return string Generated slug
-    # @see text_field_update_controller.js should also implement this logic
+    # @see slug_controller.js should also implement this logic
     def self.generate(string)
       # Trim whitespace and downcase the string
       string = string.to_s.strip.downcase

data/app/models/panda_cms/block.rb

@@ -16,12 +16,12 @@ module PandaCms
       plain_text: "plain_text",
       rich_text: "rich_text",
       iframe: "iframe",
-      list: "list"
+      list: "list",
+      code: "code"
       # image: "image",
       # video: "video",
       # audio: "audio",
       # file: "file",
-      # code: "code",
       # iframe: "iframe",
       # quote: "quote",
       # list: "list"

data/app/models/panda_cms/page.rb

@@ -18,15 +18,21 @@ module PandaCms
     has_many :menu_items, foreign_key: :panda_cms_page_id, class_name: "PandaCms::MenuItem", inverse_of: :page
     has_many :menus, through: :menu_items
     has_many :menus_of_parent, through: :parent, source: :menus
-    has_one :page_menu, foreign_key: :panda_cms_menu_id, class_name: "PandaCms::Menu", inverse_of: :start_page
+    has_one :page_menu, foreign_key: :start_page_id, class_name: "PandaCms::Menu"
 
     validates :title, presence: true
+
     validates :path,
       presence: true,
       uniqueness: true,
       format: {with: /\A\/.*\z/, message: "must start with a forward slash"}
-    validates :parent, presence: true, unless: -> { path == "/" }
-    validates :panda_cms_template_id, presence: true
+
+    validates :parent,
+      presence: true,
+      unless: -> { path == "/" }
+
+    validates :panda_cms_template_id,
+      presence: true
 
     scope :ordered, -> { order(:lft) }
 

data/app/models/panda_cms/post.rb

@@ -44,7 +44,7 @@ module PandaCms
     end
 
     def path
-      "/" + PandaCms.posts[:prefix] + slug.to_s
+      "/" + PandaCms.config.posts[:prefix] + slug.to_s
     end
 
     def formatted_slug

data/app/models/panda_cms/template.rb

@@ -24,9 +24,11 @@ module PandaCms
     validate :validate_template_file_exists
 
     # Scopes
-    scope :ordered, -> { order(:sort_order) }
     scope :available, -> { where("max_uses IS NULL OR (pages_count < max_uses)") }
-    scope :most_used, -> { order(pages_count: :desc).first }
+
+    def self.default
+      find_by(file_path: "layouts/page") || first
+    end
 
     # Generate missing blocks for all templates
     # @return [void]

data/app/models/panda_cms/user.rb

@@ -2,7 +2,9 @@ module PandaCms
   class User < ApplicationRecord
     validates :firstname, presence: true
     validates :lastname, presence: true
-    validates :email, presence: true, uniqueness: {case_sensitive: true}
+    validates :email, presence: true, uniqueness: true
+
+    before_save :downcase_email
 
     def is_admin?
       admin
@@ -15,5 +17,11 @@ module PandaCms
     def self.for_select_list(scope = :all, order = {firstname: :asc, lastname: :asc})
       PandaCms::User.send(scope).order(order).map { |u| [u.name, u.id] }
     end
+
+    private
+
+    def downcase_email
+      self.email = email.to_s.downcase
+    end
   end
 end

data/app/views/panda_cms/admin/dashboard/show.html.erb

@@ -1,10 +1,12 @@
-<%= render PandaCms::Admin::ContainerComponent.new do |container| %>
-  <% container.with_heading(text: "Dashboard", level: 1) do |heading| %>
-    <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+<div class="" data-controller="dashboard">
+  <%= render PandaCms::Admin::ContainerComponent.new do |container| %>
+    <% container.with_heading(text: "Dashboard", level: 1) do |heading| %>
+      <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+    <% end %>
+    <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
+      <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Today", value: PandaCms::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
+      <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Week", value: PandaCms::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
+      <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Month", value: PandaCms::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
+    </dl>
   <% end %>
-  <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
-    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Today", value: PandaCms::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
-    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Week", value: PandaCms::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
-    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Month", value: PandaCms::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
-  </dl>
-<% end %>
+</div>

data/app/views/panda_cms/admin/forms/new.html.erb

@@ -1,14 +1,13 @@
 <%= render PandaCms::Admin::ContainerComponent.new do |component| %>
   <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
   <% end %>
-
   <%= panda_cms_form_with model: page, url: admin_pages_path, method: :post do |f| %>
-  <% options = nested_set_options(PandaCms::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
-    <div data-controller="text-field-update">
-      <input type="hidden" value="<%= PandaCms::Current.root %>" data-text-field-update-target="existing_root">
-      <%= f.select :parent_id, options, {}, { "data-text-field-update-target": "input_select", "data-action": "change->text-field-update#setPrePath" } %>
-      <%= f.text_field :title, { data: { "text-field-update-target": "input_text", action: "focusout->text-field-update#generatePath" } } %>
-      <%= f.text_field :path, { data: { prefix: PandaCms::Current.root, "text-field-update-target": "output_text" } } %>
+    <% options = nested_set_options(PandaCms::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
+    <div data-controller="slug">
+      <input type="hidden" value="<%= PandaCms::Current.root %>" data-slug-target="existing_root">
+      <%= f.select :parent_id, options, {}, { "data-slug-target": "input_select", "data-action": "change->slug#setPrePath" } %>
+      <%= f.text_field :title, { data: { "slug-target": "input_text", action: "focusout->slug#generatePath" } } %>
+      <%= f.text_field :path, { data: { prefix: PandaCms::Current.root, "slug-target": "output_text" } } %>
       <%= f.collection_select :panda_cms_template_id, PandaCms::Template.available, :id, :name %>
       <%= f.button %>
     </div>

data/app/views/panda_cms/admin/menus/index.html.erb

@@ -1,8 +1,6 @@
 <%= render PandaCms::Admin::ContainerComponent.new do |component| %>
   <% component.with_heading(text: "Menus", level: 1) do |heading| %>
-    <% heading.with_button(action: :add, text: "Add Menu", link: new_admin_menu_path) %>
   <% end %>
-
   <%= render PandaCms::Admin::TableComponent.new(term: "menu", rows: menus) do |table| %>
     <% table.column("Name") { |menu| link_to menu.name, edit_admin_menu_path(menu) } %>
     <% table.column("Kind") { |menu| render PandaCms::Admin::TagComponent.new(status: :active, text: menu.kind.titleize) } %>

data/app/views/panda_cms/admin/pages/edit.html.erb

@@ -1,26 +1,28 @@
 <%= render PandaCms::Admin::ContainerComponent.new do |component| %>
   <% component.with_heading(text: "#{page.title}", level: 1) %>
-
   <% component.with_slideover(title: "Page Details") do %>
     <%= panda_cms_form_with model: page, url: admin_page_path, method: :put do |f| %>
-        <%= f.text_field :title, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
-
-        <%= f.text_field :template, value: template.name,  readonly: true, class: "read-only:bg-gray-100 block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
-
-        <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: page.status), {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
-
-        <%= f.submit "Save" %>
+      <%= f.text_field :title, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
+      <%= f.text_field :template, value: template.name,  readonly: true, class: "read-only:bg-gray-100 block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
+      <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: page.status), {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:text-sm sm:leading-6 hover:pointer" %>
+      <%= f.submit "Save" %>
     <% end %>
   <% end %>
-
-  <a class="block mb-2 -mt-4 text-sm text-black/60" target="_blank" href="<%= @page.path %>"><%= @page.path %> <i class="ml-2 fa-solid fa-arrow-up-right-from-square"></i></a>
-
+  <div class="grid grid-cols-2 mb-4 -mt-5">
+    <div>
+      <a class="inline-block mb-2 text-sm text-black/60" target="_blank" href="<%= @page.path %>"><%= @page.path %> <i class="ml-2 fa-solid fa-arrow-up-right-from-square"></i></a>
+    </div>
+    <div class="relative -mt-5">
+      <span class="absolute right-0"><%= render PandaCms::Admin::ButtonComponent.new(text: "Save Changes", action: :save_inactive, icon: "check", link: "#", size: :regular, id: "saveEditableButton") %></span>
+    </div>
+  </div>
   <iframe id="editablePageFrame" src="<%= page.path %>?embed_id=<%= page.id %>" class="p-0 m-0 w-full h-full border border-slate-200"></iframe>
-
-  <script src="/panda-cms-assets/javascripts/embed/editable.js"></script>
-  <script>
+<% end %>
+<% content_for :head do %>
+  <%#= javascript_include_tag "panda_cms_editable", "data-turbo-track": "reload", defer: true %>
+  <!-- <script>
     document.addEventListener("DOMContentLoaded", function() {
-      const editable = new EditableController("<%= page.id %>", document.getElementById("editablePageFrame"));
+      const editable = new PandaCmsEditableController("<%= page.id %>", document.getElementById("editablePageFrame"));
     });
-  </script>
+  </script> -->
 <% end %>

data/app/views/panda_cms/admin/pages/new.html.erb

@@ -1,14 +1,13 @@
 <%= render PandaCms::Admin::ContainerComponent.new do |component| %>
   <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
   <% end %>
-
   <%= panda_cms_form_with model: page, url: admin_pages_path, method: :post do |f| %>
-  <% options = nested_set_options(PandaCms::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
-    <div data-controller="text-field-update">
-      <input type="hidden" value="<%= PandaCms::Current.root %>" data-text-field-update-target="existing_root">
-      <%= f.select :parent_id, options, {}, { "data-text-field-update-target": "input_select", "data-action": "change->text-field-update#setPrePath" } %>
-      <%= f.text_field :title, { data: { "text-field-update-target": "input_text", action: "focusout->text-field-update#generatePath" } } %>
-      <%= f.text_field :path, { meta: t(".path.meta"), data: { prefix: PandaCms::Current.root, "text-field-update-target": "output_text" } } %>
+    <% options = nested_set_options(PandaCms::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
+    <div data-controller="slug">
+      <input type="hidden" value="<%= PandaCms::Current.root %>" data-slug-target="existing_root">
+      <%= f.select :parent_id, options, {}, { "data-slug-target": "input_select", "data-action": "change->slug#setPrePath" } %>
+      <%= f.text_field :title, { data: { "slug-target": "input_text", action: "focusout->slug#generatePath" } } %>
+      <%= f.text_field :path, { meta: t(".path.meta"), data: { prefix: PandaCms::Current.root, "slug-target": "output_text" } } %>
       <%= f.collection_select :panda_cms_template_id, PandaCms::Template.available, :id, :name %>
       <%= f.button %>
     </div>

data/app/views/panda_cms/admin/posts/_form.html.erb

@@ -1,8 +1,8 @@
 <%= panda_cms_form_with model: post, url: url do |f| %>
-  <div data-controller="text-field-update">
-    <input type="hidden" value="<%= PandaCms::Current.root %>" data-text-field-update-target="existing_root">
-    <%= f.text_field :title, { required: true, data: { "text-field-update-target": "input_text", action: "focusout->text-field-update#generatePath" } } %>
-    <%= f.text_field :slug, { required: true, data: { prefix: PandaCms::Current.root + "/#{PandaCms.posts[:prefix]}", "text-field-update-target": "output_text" } } %>
+  <div data-controller="slug">
+    <input type="hidden" value="<%= PandaCms::Current.root %>" data-slug-target="existing_root">
+    <%= f.text_field :title, { required: true, data: { "slug-target": "input_text", action: "focusout->slug#generatePath" } } %>
+    <%= f.text_field :slug, { required: true, data: { prefix: PandaCms::Current.root + "/#{PandaCms.config.posts[:prefix]}", "slug-target": "output_text" } } %>
     <%= f.select :user_id, PandaCms::User.for_select_list %>
     <%= f.datetime_field :published_at, { required: true } %>
     <%= f.select :status, PandaCms::Post.statuses.keys.map { |status| [status.humanize, status] } %>

data/app/views/panda_cms/admin/sessions/new.html.erb

@@ -3,10 +3,9 @@
     <img src="/panda-cms-assets/panda-nav.png" class="py-2 mx-auto w-auto h-32">
     <h2 class="mt-10 mb-6 text-2xl font-bold text-center text-white"><%= t("panda_cms.admin.sessions.new.title") %></h2>
   </div>
-
   <% @providers.each do |provider| %>
     <div class="mt-4 text-center sm:mx-auto sm:w-full sm:max-w-sm">
-      <%= form_tag "#{PandaCms.admin_path}/auth/#{provider}", method: "post", data: {turbo: false} do %>
+      <%= form_tag "#{PandaCms.root_path}/auth/#{provider}", method: "post", data: {turbo: false} do %>
         <input type="hidden" name="redirect_uri" value="<%= admin_login_callback_url(provider: provider) %>">
         <button type="submit" id="button-sign-in-<%= provider %>" class="inline-flex gap-x-2 items-center py-2.5 px-3.5 mx-auto mb-4 bg-white rounded-md border min-w-56 border-neutral-400">
           <i class="fa-brands fa-<%= provider %> text-xl mr-1"></i>