panda_cms 0.5.3 → 0.5.5

data/app/helpers/panda_cms/application_helper.rb

@@ -27,7 +27,7 @@ module PandaCms
 
     def panda_cms_form_with(**options, &)
       options[:builder] = PandaCms::FormBuilder
-      options[:class] ||= ""
+      options[:class] = "p-6 bg-mid/5 rounded-lg border-mid border"
       form_with(**options, &)
     end
 

data/app/models/action_text/rich_text_version.rb

@@ -0,0 +1,6 @@
+module ActionText
+  class RichTextVersion < ::PandaCms::Version
+    self.table_name = :action_text_rich_text_versions
+    self.sequence_name = :action_text_rich_text_versions_id_seq
+  end
+end

data/app/models/panda_cms/page.rb

@@ -30,6 +30,13 @@ module PandaCms
 
     scope :ordered, -> { order(:lft) }
 
+    enum :status, {
+      active: "active",
+      draft: "draft",
+      hidden: "hidden",
+      archived: "archived"
+    }
+
     private
 
     #

data/app/models/panda_cms/post.rb

@@ -11,15 +11,36 @@ module PandaCms
     belongs_to :user, class_name: "PandaCms::User"
 
     validates :title, presence: true
+    validates :slug, presence: true, uniqueness: true, format: {with: /\A[a-z0-9-]+\z/}
 
     scope :ordered, -> { order(published_at: :desc) }
+    scope :with_user, -> { includes(:user) }
+
+    has_rich_text :post_content
+
+    belongs_to :tag, class_name: "PandaCms::PostTag", foreign_key: :post_tag_id
+
+    enum :status, {
+      active: "active",
+      draft: "draft",
+      hidden: "hidden",
+      archived: "archived"
+    }
 
     def excerpt(length = 100)
-      content.gsub(/<[^>]*>/, "").truncate(length)
+      content.gsub(/<[^>]*>/, "").truncate(length).html_safe
     end
 
     def path
-      PandaCms.posts[:prefix] + "/" + slug.to_s
+      "/" + PandaCms.posts[:prefix] + slug.to_s
+    end
+
+    def formatted_slug
+      if params[:slug][0] != "/"
+        "/#{params[:slug]}"
+      else
+        params[:slug]
+      end
     end
   end
 end

data/app/models/panda_cms/post_tag.rb

@@ -0,0 +1,7 @@
+module PandaCms
+  class PostTag < ApplicationRecord
+    self.table_name = "panda_cms_post_tags"
+
+    validates :tag, presence: true
+  end
+end

data/app/models/panda_cms/template.rb

@@ -26,6 +26,7 @@ module PandaCms
     # 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 }
 
     # Generate missing blocks for all templates
     # @return [void]

data/app/models/panda_cms/user.rb

@@ -3,13 +3,17 @@ module PandaCms
     validates :firstname, presence: true
     validates :lastname, presence: true
     validates :email, presence: true, uniqueness: {case_sensitive: true}
-  end
 
-  def is_admin?
-    admin
-  end
+    def is_admin?
+      admin
+    end
+
+    def name
+      "#{firstname} #{lastname}"
+    end
 
-  def name
-    "#{firstname} #{lastname}"
+    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
   end
 end

data/app/views/active_storage/blobs/blobs/_blob.html.erb

@@ -0,0 +1,14 @@
+<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
+  <% if blob.representable? %>
+    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+  <% end %>
+
+  <figcaption class="attachment__caption">
+    <% if caption = blob.try(:caption) %>
+      <%= caption %>
+    <% else %>
+      <span class="attachment__name"><%= blob.filename %></span>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    <% end %>
+  </figcaption>
+</figure>

data/app/views/layouts/action_text/contents/_content.html.erb

@@ -0,0 +1,3 @@
+<div class="trix-content">
+  <%= yield -%>
+</div>

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

@@ -3,14 +3,20 @@
     <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
   <% end %>
 
-  <%= render PandaCms::Admin::TableComponent.new(rows: root_page.self_and_descendants) do |table| %>
-    <% table.column("Name") do |page| %>
-      <div class="<%= table_indent(page) %>">
-        <%= link_to page.title, edit_admin_page_path(page), class: "block h-full w-full" %>
-        <span class="block text-xs text-black/60"><%= page.path %></span>
-      </div>
+  <% if root_page %>
+    <%= render PandaCms::Admin::TableComponent.new(rows: root_page.self_and_descendants) do |table| %>
+      <% table.column("Name") do |page| %>
+        <div class="<%= table_indent(page) %>">
+          <%= link_to page.title, edit_admin_page_path(page), class: "block h-full w-full" %>
+          <span class="block text-xs text-black/60"><%= page.path %></span>
+        </div>
+      <% end %>
+      <% table.column("Status") { |page| render PandaCms::Admin::TagComponent.new(status: page.status) } %>
+      <% table.column("Last Updated") { |page| render PandaCms::Admin::UserActivityComponent.new(whodunnit_to: page)} %>
     <% end %>
-    <% table.column("Status") { |page| render PandaCms::Admin::TagComponent.new(status: page.status) } %>
-    <% table.column("Last Updated") { |page| render PandaCms::Admin::UserActivityComponent.new(whodunnit_to: page)} %>
+  <% else %>
+    <div class="p-6 bg-error/10 text-error rounded-lg">
+      <p class="text-base">No homepage (at <code>/</code>) found. Please create a homepage to start building your site.</p>
+    </div>
   <% end %>
 <% end %>

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

@@ -8,7 +8,7 @@
       <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" } } %>
+      <%= f.text_field :path, { meta: t(".path.meta"), data: { prefix: PandaCms::Current.root, "text-field-update-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

@@ -0,0 +1,17 @@
+<%= 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" } } %>
+    <%= 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] } %>
+    <%= f.rich_text_area :post_content, { meta: "Your content here will not auto-save! 😬 Use Ctrl + ⇧ + V (Win) or ⌘ + ⇧ + V (macOS) to paste without formatting." } %>
+    <%= f.button %>
+  </div>
+<% end %>
+
+<% content_for :head do %>
+  <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
+  <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Edit Post", level: 1) do |heading| %>
+  <% end %>
+
+  <%= render "form", post: post, url: url %>
+<% end %>

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

@@ -1,5 +1,6 @@
 <%= render PandaCms::Admin::ContainerComponent.new do |component| %>
   <% component.with_heading(text: "Posts", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Post", link: new_admin_post_path) %>
   <% end %>
 
   <%= render PandaCms::Admin::TableComponent.new(rows: posts) do |table| %>
@@ -10,6 +11,7 @@
       </div>
     <% end %>
     <% table.column("Status") { |post| render PandaCms::Admin::TagComponent.new(status: post.status) } %>
+    <% table.column("Published") { |post| render PandaCms::Admin::UserActivityComponent.new(at: post.published_at, user: post.user)} %>
     <% table.column("Last Updated") { |post| render PandaCms::Admin::UserActivityComponent.new(whodunnit_to: post)} %>
   <% end %>
 

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

@@ -0,0 +1,6 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Add Post", level: 1) do |heading| %>
+  <% end %>
+
+  <%= render "form", post: post, url: url %>
+<% end %>

data/app/views/panda_cms/shared/_header.html.erb

@@ -9,6 +9,7 @@
   <%= stylesheet_link_tag "panda_cms", "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags "panda_cms/base" %>
   <%= render "panda_cms/shared/favicons" %>
+  <%= yield :head %>
 </head>
 
 <body class="overflow-hidden h-full">

data/config/importmap.rb

@@ -1,5 +1,6 @@
 pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:stimulus@3.2.2/dist/stimulus.js"
 pin "@hotwired/stimulus-loading", to: "/panda-cms-assets/javascripts/vendor/stimulus-loading.js" # 3.2.2
+pin "@rails/activestorage", to: "https://ga.jspm.io/npm:@rails/activestorage@7.2.0/app/assets/javascripts/activestorage.esm.js"
 
 pin "panda_cms/vendor/stimulus-components-rails-nested-form", to: "/panda-cms-assets/javascripts/vendor/stimulus-components-rails-nested-form.js", preload: false
 pin "panda_cms/vendor/tailwindcss-stimulus-components", to: "/panda-cms-assets/javascripts/vendor/tailwindcss-stimulus-components.js", preload: false

data/config/initializers/panda_cms/form_errors.rb

@@ -1,8 +1,8 @@
 ActionView::Base.field_error_proc = proc do |html_tag, instance|
   html = ""
   form_fields = %w[input select textarea trix-editor label].join(", ")
-  error_class = "text-red-600 dark:text-red-500 bg-red-50 border-red-500 border-1 box-shadow-red-500 focus:ring-red-500 focus:border-red-500 dark:bg-red-900 dark:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"
-  message_class = "block w-full text-sm font-bold p-0 m-0 mt-1 text-red-700"
+  error_class = "text-error bg-error border-error border-1 box-shadow-error focus:ring-error focus:border-error "
+  message_class = "block w-full text-base p-0 m-0 mt-1 text-error font-semibold"
   autofocused = false
 
   Nokogiri::HTML::DocumentFragment.parse(html_tag).css(form_fields).each do |element|

data/config/initializers/panda_cms/paper_trail.rb

@@ -0,0 +1,7 @@
+ActiveSupport.on_load(:action_text_rich_text) do
+  ActionText::RichText.class_eval do
+    has_paper_trail versions: {
+      class_name: "ActionText::RichTextVersion"
+    }
+  end
+end

data/config/locales/en.yml

@@ -3,8 +3,21 @@ en:
     attributes:
       panda_cms/page:
         title: Title
-        path: Path
+        path: URL
         panda_cms_template_id: Template
+      panda_cms/post:
+        title: Title
+        slug: URL
+        content: Content
+        panda_cms_template_id: Template
+        user_id: Author
+        published_at: Published At
+        post_content: Content
+        statuses:
+          active: Active
+          draft: Draft
+          archived: Archived
+          hidden: Hidden
       panda_cms/menu:
         name: Menu Name
       panda_cms/menu_item:
@@ -19,6 +32,10 @@ en:
         google: Google
         microsoft: Microsoft 365
     admin:
+      pages:
+        new:
+          path:
+            meta: "This will be the URL of the page. It should be unique and not contain spaces or special characters. If you're unsure, it'll be auto-generated for you. 🐼"
       sessions:
         create:
           error: There was an error logging you in. Please check your login details and try again, or contact support.

data/config/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     files: [
       "../public/*.html",
       "../app/views/**/*.html.erb",
+      "../app/builders/panda_cms/**/*.rb",
       "../app/components/panda_cms/**/*.html.erb",
       "../app/components/panda_cms/**/*.rb",
       "../app/helpers/panda_cms/**/*.rb",

data/db/migrate/20240904200605_create_action_text_tables.action_text.rb

@@ -0,0 +1,24 @@
+# This migration comes from action_text (originally 20180528164100)
+class CreateActionTextTables < ActiveRecord::Migration[7.2]
+  def change
+    create_table :action_text_rich_texts, id: :uuid do |t|
+      t.string :name, null: false
+      t.text :body, limit: 16.megabytes - 1
+      t.references :record, null: false, polymorphic: true, index: false, type: :uuid
+      t.timestamps
+      t.index [:record_type, :record_id, :name], name: "index_action_text_rich_texts_uniqueness", unique: true
+    end
+
+    create_table :action_text_rich_text_versions, id: :uuid do |t|
+      t.string :item_type, null: false
+      t.string :item_id, null: false
+      t.string :event, null: false
+      t.string :whodunnit
+      t.jsonb :object
+      t.jsonb :object_changes
+      t.datetime :created_at
+    end
+
+    add_index :action_text_rich_text_versions, %i[item_type item_id]
+  end
+end

data/lib/panda_cms/version.rb

@@ -1,3 +1,3 @@
 module PandaCms
-  VERSION = "0.5.3"
+  VERSION = "0.5.5"
 end

data/public/panda-cms-assets/javascripts/embed/editable.js

@@ -30,7 +30,6 @@ class EditableController {
 
     this.embedPlainTextEditors();
 
-    this.styleRichTextEditor();
     this.embedRichTextEditor();
   }
 
@@ -119,23 +118,87 @@ class EditableController {
   }
 
   embedRichTextEditor() {
-    if (this.body.getElementsByClassName("ql-editor").length == 0) {
+    if (this.body.getElementsByClassName("content-rich-text").length == 0) {
       this.setFrameVisible();
       return;
     }
 
+    console.debug("[Panda CMS] Loading Quill rich text editor...");
+
     this.addStylesheet(
       this.frameDocument,
       this.head,
-      "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css"
+      "/panda-cms-assets/javascripts/embed/rich_text.css?ver=1.0.0"
+    );
+
+    var style = this.frameDocument.createElement("style");
+    // TODO: Base these on "default" set styles
+    style.innerHTML = `
+      .ql-snow .ql-editor h2 {
+        font-size: 1.5em
+      }
+
+      .ql-snow .ql-editor h3 {
+        font-size: 1.17em
+      }
+
+      .ql-snow .ql-editor h4 {
+        font-size: 1em
+      }
+
+      .ql-snow .ql-editor h5 {
+        font-size: .83em
+      }
+
+      .ql-snow .ql-editor h6 {
+        font-size: .67em
+      }
+
+      .ql-snow .ql-editor a {
+        text-decoration: underline
+      }
+
+      .ql-snow .ql-editor blockquote {
+        border-left: 4px solid #ccc;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        padding-left: 16px
+      }
+
+      .ql-snow .ql-editor code,
+      .ql-snow .ql-editor .ql-code-block-container {
+        background-color: #f0f0f0;
+        border-radius: 3px
+      }
+
+      .ql-snow .ql-editor .ql-code-block-container {
+        margin-bottom: 5px;
+        margin-top: 5px;
+        padding: 5px 10px
+      }
+
+      .ql-snow .ql-editor code {
+        font-size: 85%;
+        padding: 2px 4px
+      }
+
+      .ql-snow .ql-editor .ql-code-block-container {
+        background-color: #23241f;
+        color: #f8f8f2;
+        overflow: visible
+      }
+
+      .ql-snow .ql-editor img {
+        max-width: 100%
+      }
+`;
+    this.head.append(style);
+
+    this.loadScript(
+      this.frameDocument,
+      this.head,
+      "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"
     )
-      .then(() => {
-        return this.loadScript(
-          this.frameDocument,
-          this.head,
-          "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"
-        );
-      })
       .then(() => {
         return this.loadScript(
           this.frameDocument,
@@ -150,14 +213,16 @@ class EditableController {
           "https://unpkg.com/quill-magic-url@3.0.0/dist/index.js"
         );
       })
+      // .then(() => {
+      //   return this.loadScript(
+      //     this.frameDocument,
+      //     this.head,
+      //     "https://cdn.jsdelivr.net/npm/quill-markdown-shortcuts@latest/dist/markdownShortcuts.js"
+      //   );
+      // })
       .then(() => {
-        return this.loadScript(
-          this.frameDocument,
-          this.head,
-          "https://cdn.jsdelivr.net/npm/quill-markdown-shortcuts@latest/dist/markdownShortcuts.js"
-        );
-      })
-      .then(() => {
+        this.styleRichTextEditor();
+
         console.debug(
           "[Panda CMS] Dispatching event: pandaCmsRichTextEditorLoaded"
         );
@@ -203,28 +268,17 @@ class EditableController {
     }
 
     var style = this.frameDocument.createElement("style");
-    style.innerHTML = `.ql-container,
-    .ql-editor, .ql-editor * {
-      margin: inherit !important;
-      padding: inherit !important;
-      font-size: inherit !important;
-      line-height: inherit !important;
-      font-family: inherit !important;
+    style.innerHTML = `.ql-editor:hover, .ql-container:hover {
+      cursor: pointer !important;
     }
 
-    .ql-toolbar {
-      background-color: #282e3270;
-      border-radius: 10px;
-    }
-
-    .ql-editor:hover, .ql-container:hover {
-      cursor: pointer !important;
+    .ql-container.ql-snow {
+      margin-top: 0 important;
     }
 
     .ql-editor:hover, .ql-editor:focus, .ql-editor:active {
       background-color: #e1effa;
       cursor: pointer !important;
-      font-size: inherit !important;
       -webkit-transition: background-color 500ms linear;
       -ms-transition: background-color 500ms linear;
       transition: background-color 500ms linear;
@@ -235,14 +289,10 @@ class EditableController {
       -webkit-transition: background-color 1000ms linear;
       -ms-transition: background-color 1000ms linear;
       transition: background-color 1000ms linear;
-    }
-
-    .ql-tooltip {
-      z-index: 999;
-      min-width: 90vw;
     }`;
 
     this.head.append(style);
+    console.log("Appended styles to head");
   }
 
   bindSaveHandler(blockContentId, content) {